From 0c73b2cf10eeb4aea149f118eb953ec464576df8 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 31 Jul 2024 16:23:46 -0400 Subject: [PATCH] build: improving theming approach --- .changeset/pre.json | 6 +- .gitignore | 4 +- components/accordion/stories/template.js | 2 + components/accordion/themes/spectrum.css | 141 +- components/actionbar/stories/template.js | 2 + components/actionbar/themes/spectrum.css | 40 +- components/actionbutton/stories/template.js | 2 + .../actionbutton/themes/spectrum-two.css | 1 - components/actionbutton/themes/spectrum.css | 231 +- components/actiongroup/stories/template.js | 2 + components/actiongroup/themes/spectrum.css | 28 +- components/alertbanner/stories/template.js | 2 + components/alertbanner/themes/spectrum.css | 26 +- components/alertdialog/stories/template.js | 2 + components/alertdialog/themes/spectrum.css | 32 +- components/asset/stories/template.js | 2 + components/asset/themes/spectrum.css | 3 +- components/assetcard/stories/template.js | 2 + components/assetcard/themes/spectrum.css | 8 +- components/assetlist/stories/template.js | 2 + components/assetlist/themes/spectrum.css | 23 +- components/avatar/stories/template.js | 2 + components/avatar/themes/spectrum.css | 62 +- components/badge/stories/template.js | 2 + components/badge/themes/spectrum.css | 134 +- components/breadcrumb/stories/template.js | 2 + components/breadcrumb/themes/spectrum.css | 97 +- components/button/stories/template.js | 2 + components/button/themes/spectrum.css | 475 +-- components/buttongroup/stories/template.js | 2 + components/buttongroup/themes/spectrum.css | 27 +- components/calendar/stories/template.js | 2 + components/calendar/themes/spectrum.css | 46 +- components/card/stories/template.js | 2 + components/card/themes/spectrum.css | 79 +- components/checkbox/stories/template.js | 2 + components/checkbox/themes/spectrum.css | 84 +- components/clearbutton/stories/template.js | 2 + components/clearbutton/themes/spectrum.css | 60 +- components/closebutton/stories/template.js | 2 + components/closebutton/themes/spectrum.css | 72 +- components/coachindicator/stories/template.js | 2 + components/coachindicator/themes/spectrum.css | 46 +- components/coachmark/stories/template.js | 2 + components/coachmark/themes/spectrum.css | 43 +- components/colorarea/stories/template.js | 2 + components/colorarea/themes/spectrum.css | 13 +- components/colorhandle/stories/template.js | 2 + components/colorhandle/themes/spectrum.css | 27 +- components/colorloupe/stories/template.js | 2 + components/colorloupe/themes/spectrum.css | 23 +- components/colorslider/stories/template.js | 2 + components/colorslider/themes/spectrum.css | 18 +- components/colorwheel/stories/template.js | 2 + components/colorwheel/themes/spectrum.css | 14 +- components/combobox/stories/template.js | 2 + components/combobox/themes/spectrum.css | 173 +- components/contextualhelp/stories/template.js | 2 + components/contextualhelp/themes/spectrum.css | 19 +- components/datepicker/stories/template.js | 2 + components/datepicker/themes/spectrum.css | 61 +- components/dial/stories/template.js | 2 + components/dial/themes/spectrum.css | 56 +- components/dialog/stories/template.js | 2 + components/dialog/themes/spectrum.css | 27 +- components/divider/index.css | 13 + components/divider/stories/template.js | 2 + components/divider/themes/spectrum-two.css | 3 - components/divider/themes/spectrum.css | 29 +- components/dropindicator/stories/template.js | 2 + components/dropindicator/themes/spectrum.css | 9 +- components/dropzone/stories/template.js | 2 + components/dropzone/themes/spectrum.css | 46 +- components/fieldgroup/stories/template.js | 2 + components/fieldgroup/themes/spectrum.css | 7 +- components/fieldlabel/stories/template.js | 2 + components/fieldlabel/themes/spectrum.css | 62 +- .../floatingactionbutton/stories/template.js | 2 + .../floatingactionbutton/themes/spectrum.css | 34 +- components/helptext/stories/template.js | 2 + components/helptext/themes/spectrum.css | 74 +- components/icon/stories/template.js | 2 + components/icon/themes/spectrum.css | 429 +-- .../illustratedmessage/stories/template.js | 2 + .../illustratedmessage/themes/spectrum.css | 37 +- components/infieldbutton/stories/template.js | 2 + components/infieldbutton/themes/spectrum.css | 101 +- components/inlinealert/stories/template.js | 2 + components/inlinealert/themes/spectrum.css | 39 +- components/link/stories/template.js | 2 + components/link/themes/spectrum.css | 22 +- components/logicbutton/stories/template.js | 2 + components/logicbutton/themes/spectrum.css | 37 +- components/menu/stories/template.js | 2 + components/menu/themes/spectrum.css | 173 +- components/miller/stories/template.js | 2 + components/miller/themes/spectrum.css | 9 +- components/modal/stories/template.js | 2 + components/modal/themes/spectrum.css | 15 +- .../opacitycheckerboard/stories/template.js | 2 + .../opacitycheckerboard/themes/spectrum.css | 9 +- components/pagination/stories/template.js | 2 + components/pagination/themes/spectrum.css | 14 +- components/picker/stories/template.js | 2 + components/picker/themes/spectrum.css | 141 +- components/pickerbutton/stories/template.js | 2 + components/pickerbutton/themes/spectrum.css | 81 +- components/popover/stories/template.js | 2 + components/popover/themes/spectrum.css | 34 +- components/progressbar/stories/template.js | 2 + components/progressbar/themes/spectrum.css | 116 +- components/progresscircle/stories/template.js | 2 + components/progresscircle/themes/spectrum.css | 38 +- components/radio/stories/template.js | 2 + components/radio/themes/spectrum.css | 122 +- components/rating/stories/template.js | 2 + components/rating/themes/spectrum.css | 37 +- components/search/stories/template.js | 2 + components/search/themes/spectrum.css | 90 +- components/sidenav/stories/template.js | 2 + components/sidenav/themes/spectrum.css | 96 +- components/slider/stories/template.js | 2 + components/slider/themes/spectrum.css | 106 +- components/splitview/stories/template.js | 2 + components/splitview/themes/spectrum.css | 24 +- components/statuslight/stories/template.js | 2 + components/statuslight/themes/spectrum.css | 95 +- components/steplist/stories/template.js | 2 + components/steplist/themes/spectrum.css | 38 +- components/stepper/stories/template.js | 2 + components/stepper/themes/spectrum.css | 98 +- components/swatch/stories/template.js | 2 + components/swatch/themes/spectrum.css | 63 +- components/swatchgroup/stories/template.js | 2 + components/swatchgroup/themes/spectrum.css | 8 +- components/switch/stories/template.js | 2 + components/switch/themes/spectrum.css | 101 +- components/table/stories/template.js | 2 + components/table/themes/spectrum.css | 323 +- components/tabs/stories/template.js | 2 + components/tabs/themes/spectrum.css | 140 +- components/tag/stories/template.js | 2 + components/tag/themes/spectrum.css | 208 +- components/taggroup/stories/template.js | 2 + components/taggroup/themes/spectrum.css | 7 +- components/textfield/stories/template.js | 2 + components/textfield/themes/spectrum.css | 181 +- components/thumbnail/stories/template.js | 2 + components/thumbnail/themes/spectrum.css | 73 +- components/toast/stories/template.js | 2 + components/toast/themes/spectrum.css | 48 +- components/tooltip/stories/template.js | 2 + components/tooltip/themes/spectrum.css | 61 +- components/tray/stories/template.js | 2 + components/tray/themes/spectrum.css | 20 +- components/treeview/stories/template.js | 2 + components/treeview/themes/spectrum.css | 113 +- components/typography/stories/template.js | 2 + components/typography/themes/spectrum.css | 153 +- components/underlay/stories/template.js | 2 + components/underlay/themes/spectrum.css | 15 +- components/well/stories/template.js | 2 + components/well/themes/spectrum.css | 7 +- generator/templates/themes/spectrum.css.hbs | 2 + package.json | 5 +- .../postcss-add-theming-layer/package.json | 7 +- plugins/postcss-property-rollup/package.json | 15 +- plugins/postcss-rgb-mapping/package.json | 5 +- postcss.config.js | 36 +- tasks/component-builder.js | 4 + tokens/components/bridge/button.css | 78 +- tokens/components/bridge/card.css | 4 - tokens/components/bridge/closebutton.css | 10 +- tokens/components/bridge/coachindicator.css | 1 - tokens/components/bridge/divider.css | 4 - tokens/components/bridge/icon.css | 4 - tokens/components/bridge/stepper.css | 9 +- tokens/components/bridge/swatch.css | 12 - tokens/components/bridge/tabs.css | 24 +- tokens/components/bridge/tag.css | 61 - tokens/components/express/accordion.css | 2 +- tokens/components/express/actionbar.css | 2 +- tokens/components/express/actionbutton.css | 99 +- tokens/components/express/actiongroup.css | 14 +- tokens/components/express/alertbanner.css | 8 +- tokens/components/express/alertdialog.css | 2 +- tokens/components/express/asset.css | 2 +- tokens/components/express/assetcard.css | 92 +- tokens/components/express/assetlist.css | 2 +- tokens/components/express/avatar.css | 2 +- tokens/components/express/badge.css | 2 +- tokens/components/express/breadcrumb.css | 2 +- tokens/components/express/button.css | 158 +- tokens/components/express/buttongroup.css | 2 +- tokens/components/express/calendar.css | 2 +- tokens/components/express/card.css | 3 +- tokens/components/express/checkbox.css | 17 +- tokens/components/express/clearbutton.css | 17 +- tokens/components/express/closebutton.css | 20 +- tokens/components/express/coachindicator.css | 2 +- tokens/components/express/coachmark.css | 2 +- tokens/components/express/colorarea.css | 2 +- tokens/components/express/colorhandle.css | 2 +- tokens/components/express/colorloupe.css | 2 +- tokens/components/express/colorslider.css | 2 +- tokens/components/express/colorwheel.css | 2 +- tokens/components/express/combobox.css | 20 +- tokens/components/express/contextualhelp.css | 2 +- tokens/components/express/datepicker.css | 8 +- tokens/components/express/dial.css | 12 +- tokens/components/express/dialog.css | 2 +- tokens/components/express/divider.css | 6 +- tokens/components/express/dropindicator.css | 2 +- tokens/components/express/dropzone.css | 2 +- tokens/components/express/fieldgroup.css | 2 +- tokens/components/express/fieldlabel.css | 6 +- .../express/floatingactionbutton.css | 2 +- tokens/components/express/helptext.css | 2 +- tokens/components/express/icon.css | 3 +- .../components/express/illustratedmessage.css | 2 +- tokens/components/express/infieldbutton.css | 35 +- tokens/components/express/inlinealert.css | 2 +- tokens/components/express/link.css | 2 +- tokens/components/express/logicbutton.css | 2 +- tokens/components/express/menu.css | 2 +- tokens/components/express/miller.css | 2 +- tokens/components/express/modal.css | 2 +- .../express/opacitycheckerboard.css | 2 +- tokens/components/express/pagination.css | 2 +- tokens/components/express/picker.css | 44 +- tokens/components/express/pickerbutton.css | 32 +- tokens/components/express/popover.css | 8 +- tokens/components/express/progressbar.css | 11 +- tokens/components/express/progresscircle.css | 2 +- tokens/components/express/radio.css | 17 +- tokens/components/express/rating.css | 17 +- tokens/components/express/search.css | 59 +- tokens/components/express/sidenav.css | 2 +- tokens/components/express/slider.css | 46 +- tokens/components/express/splitview.css | 2 +- tokens/components/express/statuslight.css | 2 +- tokens/components/express/steplist.css | 2 +- tokens/components/express/stepper.css | 65 +- tokens/components/express/swatch.css | 5 +- tokens/components/express/swatchgroup.css | 2 +- tokens/components/express/switch.css | 27 +- tokens/components/express/table.css | 2 +- tokens/components/express/tabs.css | 8 +- tokens/components/express/tag.css | 125 +- tokens/components/express/taggroup.css | 2 +- tokens/components/express/textfield.css | 19 +- tokens/components/express/thumbnail.css | 2 +- tokens/components/express/toast.css | 8 +- tokens/components/express/tooltip.css | 8 +- tokens/components/express/tray.css | 2 +- tokens/components/express/treeview.css | 2 +- tokens/components/express/typography.css | 2 +- tokens/components/express/underlay.css | 5 +- tokens/components/express/well.css | 2 +- .../components/spectrum-two/actionbutton.css | 18 +- tokens/components/spectrum-two/divider.css | 4 - tokens/components/spectrum-two/fieldlabel.css | 4 +- .../components/spectrum-two/progressbar.css | 9 +- tokens/components/spectrum-two/search.css | 4 +- tokens/components/spectrum-two/underlay.css | 3 +- tokens/components/spectrum/accordion.css | 2 +- tokens/components/spectrum/actionbar.css | 2 +- tokens/components/spectrum/actionbutton.css | 20 +- tokens/components/spectrum/actiongroup.css | 2 +- tokens/components/spectrum/alertbanner.css | 2 +- tokens/components/spectrum/alertdialog.css | 2 +- tokens/components/spectrum/asset.css | 2 +- tokens/components/spectrum/assetcard.css | 88 +- tokens/components/spectrum/assetlist.css | 2 +- tokens/components/spectrum/avatar.css | 2 +- tokens/components/spectrum/badge.css | 2 +- tokens/components/spectrum/breadcrumb.css | 2 +- tokens/components/spectrum/button.css | 113 +- tokens/components/spectrum/buttongroup.css | 2 +- tokens/components/spectrum/calendar.css | 2 +- tokens/components/spectrum/card.css | 3 +- tokens/components/spectrum/checkbox.css | 2 +- tokens/components/spectrum/clearbutton.css | 2 +- tokens/components/spectrum/closebutton.css | 7 +- tokens/components/spectrum/coachindicator.css | 2 +- tokens/components/spectrum/coachmark.css | 2 +- tokens/components/spectrum/colorarea.css | 2 +- tokens/components/spectrum/colorhandle.css | 2 +- tokens/components/spectrum/colorloupe.css | 2 +- tokens/components/spectrum/colorslider.css | 2 +- tokens/components/spectrum/colorwheel.css | 2 +- tokens/components/spectrum/combobox.css | 2 +- tokens/components/spectrum/contextualhelp.css | 2 +- tokens/components/spectrum/datepicker.css | 2 +- tokens/components/spectrum/dial.css | 12 +- tokens/components/spectrum/dialog.css | 2 +- tokens/components/spectrum/divider.css | 6 +- tokens/components/spectrum/dropindicator.css | 2 +- tokens/components/spectrum/dropzone.css | 2 +- tokens/components/spectrum/fieldgroup.css | 2 +- tokens/components/spectrum/fieldlabel.css | 6 +- .../spectrum/floatingactionbutton.css | 2 +- tokens/components/spectrum/helptext.css | 2 +- tokens/components/spectrum/icon.css | 3 +- .../spectrum/illustratedmessage.css | 2 +- tokens/components/spectrum/infieldbutton.css | 2 +- tokens/components/spectrum/inlinealert.css | 2 +- tokens/components/spectrum/link.css | 2 +- tokens/components/spectrum/logicbutton.css | 2 +- tokens/components/spectrum/menu.css | 2 +- tokens/components/spectrum/miller.css | 2 +- tokens/components/spectrum/modal.css | 2 +- .../spectrum/opacitycheckerboard.css | 2 +- tokens/components/spectrum/pagination.css | 2 +- tokens/components/spectrum/picker.css | 2 +- tokens/components/spectrum/pickerbutton.css | 2 +- tokens/components/spectrum/popover.css | 2 +- tokens/components/spectrum/progressbar.css | 11 +- tokens/components/spectrum/progresscircle.css | 2 +- tokens/components/spectrum/radio.css | 2 +- tokens/components/spectrum/rating.css | 2 +- tokens/components/spectrum/search.css | 27 +- tokens/components/spectrum/sidenav.css | 2 +- tokens/components/spectrum/slider.css | 2 +- tokens/components/spectrum/splitview.css | 2 +- tokens/components/spectrum/statuslight.css | 2 +- tokens/components/spectrum/steplist.css | 2 +- tokens/components/spectrum/stepper.css | 5 +- tokens/components/spectrum/swatch.css | 5 +- tokens/components/spectrum/swatchgroup.css | 2 +- tokens/components/spectrum/switch.css | 2 +- tokens/components/spectrum/table.css | 2 +- tokens/components/spectrum/tabs.css | 2 +- tokens/components/spectrum/tag.css | 32 +- tokens/components/spectrum/taggroup.css | 2 +- tokens/components/spectrum/textfield.css | 4 +- tokens/components/spectrum/thumbnail.css | 2 +- tokens/components/spectrum/toast.css | 2 +- tokens/components/spectrum/tooltip.css | 2 +- tokens/components/spectrum/tray.css | 2 +- tokens/components/spectrum/treeview.css | 2 +- tokens/components/spectrum/typography.css | 2 +- tokens/components/spectrum/underlay.css | 5 +- tokens/components/spectrum/well.css | 2 +- .../css/components/bridge/actionbutton.css | 226 -- .../css/components/bridge/actiongroup.css | 48 - .../css/components/bridge/alertbanner.css | 31 - .../dist/css/components/bridge/assetcard.css | 111 - tokens/dist/css/components/bridge/button.css | 521 --- .../dist/css/components/bridge/checkbox.css | 84 - .../css/components/bridge/clearbutton.css | 67 - .../css/components/bridge/closebutton.css | 84 - .../dist/css/components/bridge/combobox.css | 160 - .../dist/css/components/bridge/datepicker.css | 55 - .../css/components/bridge/infieldbutton.css | 121 - tokens/dist/css/components/bridge/picker.css | 139 - .../css/components/bridge/pickerbutton.css | 86 - tokens/dist/css/components/bridge/popover.css | 29 - tokens/dist/css/components/bridge/radio.css | 106 - tokens/dist/css/components/bridge/rating.css | 34 - tokens/dist/css/components/bridge/search.css | 110 - tokens/dist/css/components/bridge/slider.css | 103 - tokens/dist/css/components/bridge/stepper.css | 118 - tokens/dist/css/components/bridge/switch.css | 94 - tokens/dist/css/components/bridge/tabs.css | 154 - tokens/dist/css/components/bridge/tag.css | 215 -- .../dist/css/components/bridge/textfield.css | 165 - tokens/dist/css/components/bridge/toast.css | 41 - tokens/dist/css/components/bridge/tooltip.css | 44 - .../css/components/express/actionbutton.css | 217 -- .../css/components/express/actiongroup.css | 39 - .../css/components/express/alertbanner.css | 35 - .../dist/css/components/express/assetcard.css | 20 - tokens/dist/css/components/express/button.css | 391 --- .../dist/css/components/express/checkbox.css | 79 - .../css/components/express/clearbutton.css | 55 - .../css/components/express/closebutton.css | 68 - .../dist/css/components/express/combobox.css | 141 - .../css/components/express/datepicker.css | 59 - .../css/components/express/infieldbutton.css | 92 - tokens/dist/css/components/express/picker.css | 134 - .../css/components/express/pickerbutton.css | 86 - .../dist/css/components/express/popover.css | 33 - tokens/dist/css/components/express/radio.css | 89 - tokens/dist/css/components/express/rating.css | 41 - tokens/dist/css/components/express/search.css | 87 - tokens/dist/css/components/express/slider.css | 109 - .../dist/css/components/express/stepper.css | 95 - tokens/dist/css/components/express/switch.css | 87 - tokens/dist/css/components/express/tabs.css | 106 - tokens/dist/css/components/express/tag.css | 182 -- .../dist/css/components/express/textfield.css | 162 - tokens/dist/css/components/express/toast.css | 45 - .../dist/css/components/express/tooltip.css | 48 - .../css/components/spectrum/actionbutton.css | 184 -- .../css/components/spectrum/actiongroup.css | 33 - .../css/components/spectrum/alertbanner.css | 31 - .../css/components/spectrum/assetcard.css | 16 - .../dist/css/components/spectrum/button.css | 374 --- .../dist/css/components/spectrum/checkbox.css | 72 - .../css/components/spectrum/clearbutton.css | 48 - .../css/components/spectrum/closebutton.css | 61 - .../dist/css/components/spectrum/combobox.css | 133 - .../css/components/spectrum/datepicker.css | 55 - .../css/components/spectrum/infieldbutton.css | 79 - .../dist/css/components/spectrum/picker.css | 118 - .../css/components/spectrum/pickerbutton.css | 74 - .../dist/css/components/spectrum/popover.css | 29 - tokens/dist/css/components/spectrum/radio.css | 82 - .../dist/css/components/spectrum/rating.css | 34 - .../dist/css/components/spectrum/search.css | 69 - .../dist/css/components/spectrum/slider.css | 91 - .../dist/css/components/spectrum/stepper.css | 69 - .../dist/css/components/spectrum/switch.css | 76 - tokens/dist/css/components/spectrum/tabs.css | 102 - tokens/dist/css/components/spectrum/tag.css | 149 - .../css/components/spectrum/textfield.css | 153 - tokens/dist/css/components/spectrum/toast.css | 41 - .../dist/css/components/spectrum/tooltip.css | 44 - tokens/dist/css/dark-vars.css | 442 --- tokens/dist/css/global-vars.css | 656 ---- tokens/dist/css/large-vars.css | 656 ---- tokens/dist/css/light-vars.css | 442 --- tokens/dist/css/medium-vars.css | 655 ---- tokens/dist/index.css | 2803 ----------------- tokens/package.json | 2 +- tokens/postcss.config.js | 5 +- yarn.lock | 85 +- 428 files changed, 1180 insertions(+), 20295 deletions(-) delete mode 100644 tokens/dist/css/components/bridge/actionbutton.css delete mode 100644 tokens/dist/css/components/bridge/actiongroup.css delete mode 100644 tokens/dist/css/components/bridge/alertbanner.css delete mode 100644 tokens/dist/css/components/bridge/assetcard.css delete mode 100644 tokens/dist/css/components/bridge/button.css delete mode 100644 tokens/dist/css/components/bridge/checkbox.css delete mode 100644 tokens/dist/css/components/bridge/clearbutton.css delete mode 100644 tokens/dist/css/components/bridge/closebutton.css delete mode 100644 tokens/dist/css/components/bridge/combobox.css delete mode 100644 tokens/dist/css/components/bridge/datepicker.css delete mode 100644 tokens/dist/css/components/bridge/infieldbutton.css delete mode 100644 tokens/dist/css/components/bridge/picker.css delete mode 100644 tokens/dist/css/components/bridge/pickerbutton.css delete mode 100644 tokens/dist/css/components/bridge/popover.css delete mode 100644 tokens/dist/css/components/bridge/radio.css delete mode 100644 tokens/dist/css/components/bridge/rating.css delete mode 100644 tokens/dist/css/components/bridge/search.css delete mode 100644 tokens/dist/css/components/bridge/slider.css delete mode 100644 tokens/dist/css/components/bridge/stepper.css delete mode 100644 tokens/dist/css/components/bridge/switch.css delete mode 100644 tokens/dist/css/components/bridge/tabs.css delete mode 100644 tokens/dist/css/components/bridge/tag.css delete mode 100644 tokens/dist/css/components/bridge/textfield.css delete mode 100644 tokens/dist/css/components/bridge/toast.css delete mode 100644 tokens/dist/css/components/bridge/tooltip.css delete mode 100644 tokens/dist/css/components/express/actionbutton.css delete mode 100644 tokens/dist/css/components/express/actiongroup.css delete mode 100644 tokens/dist/css/components/express/alertbanner.css delete mode 100644 tokens/dist/css/components/express/assetcard.css delete mode 100644 tokens/dist/css/components/express/button.css delete mode 100644 tokens/dist/css/components/express/checkbox.css delete mode 100644 tokens/dist/css/components/express/clearbutton.css delete mode 100644 tokens/dist/css/components/express/closebutton.css delete mode 100644 tokens/dist/css/components/express/combobox.css delete mode 100644 tokens/dist/css/components/express/datepicker.css delete mode 100644 tokens/dist/css/components/express/infieldbutton.css delete mode 100644 tokens/dist/css/components/express/picker.css delete mode 100644 tokens/dist/css/components/express/pickerbutton.css delete mode 100644 tokens/dist/css/components/express/popover.css delete mode 100644 tokens/dist/css/components/express/radio.css delete mode 100644 tokens/dist/css/components/express/rating.css delete mode 100644 tokens/dist/css/components/express/search.css delete mode 100644 tokens/dist/css/components/express/slider.css delete mode 100644 tokens/dist/css/components/express/stepper.css delete mode 100644 tokens/dist/css/components/express/switch.css delete mode 100644 tokens/dist/css/components/express/tabs.css delete mode 100644 tokens/dist/css/components/express/tag.css delete mode 100644 tokens/dist/css/components/express/textfield.css delete mode 100644 tokens/dist/css/components/express/toast.css delete mode 100644 tokens/dist/css/components/express/tooltip.css delete mode 100644 tokens/dist/css/components/spectrum/actionbutton.css delete mode 100644 tokens/dist/css/components/spectrum/actiongroup.css delete mode 100644 tokens/dist/css/components/spectrum/alertbanner.css delete mode 100644 tokens/dist/css/components/spectrum/assetcard.css delete mode 100644 tokens/dist/css/components/spectrum/button.css delete mode 100644 tokens/dist/css/components/spectrum/checkbox.css delete mode 100644 tokens/dist/css/components/spectrum/clearbutton.css delete mode 100644 tokens/dist/css/components/spectrum/closebutton.css delete mode 100644 tokens/dist/css/components/spectrum/combobox.css delete mode 100644 tokens/dist/css/components/spectrum/datepicker.css delete mode 100644 tokens/dist/css/components/spectrum/infieldbutton.css delete mode 100644 tokens/dist/css/components/spectrum/picker.css delete mode 100644 tokens/dist/css/components/spectrum/pickerbutton.css delete mode 100644 tokens/dist/css/components/spectrum/popover.css delete mode 100644 tokens/dist/css/components/spectrum/radio.css delete mode 100644 tokens/dist/css/components/spectrum/rating.css delete mode 100644 tokens/dist/css/components/spectrum/search.css delete mode 100644 tokens/dist/css/components/spectrum/slider.css delete mode 100644 tokens/dist/css/components/spectrum/stepper.css delete mode 100644 tokens/dist/css/components/spectrum/switch.css delete mode 100644 tokens/dist/css/components/spectrum/tabs.css delete mode 100644 tokens/dist/css/components/spectrum/tag.css delete mode 100644 tokens/dist/css/components/spectrum/textfield.css delete mode 100644 tokens/dist/css/components/spectrum/toast.css delete mode 100644 tokens/dist/css/components/spectrum/tooltip.css delete mode 100644 tokens/dist/css/dark-vars.css delete mode 100644 tokens/dist/css/global-vars.css delete mode 100644 tokens/dist/css/large-vars.css delete mode 100644 tokens/dist/css/light-vars.css delete mode 100644 tokens/dist/css/medium-vars.css delete mode 100644 tokens/dist/index.css diff --git a/.changeset/pre.json b/.changeset/pre.json index cb022d13838..3b4ffa6b38c 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -88,9 +88,9 @@ "@spectrum-css/tokens": "14.2.0", "@spectrum-css/ui-icons": "1.1.2", "@spectrum-tools/gh-action-file-diff": "2.0.6", - "postcss-add-theming-layer": "2.1.1-s2-foundations.0", - "postcss-property-rollup": "2.0.1", - "postcss-rgb-mapping": "2.0.0", + "@spectrum-tools/postcss-add-theming-layer": "2.1.1-s2-foundations.0", + "@spectrum-tools/postcss-property-rollup": "2.0.1", + "@spectrum-tools/postcss-rgb-mapping": "2.0.0", "@spectrum-tools/stylelint-no-missing-var": "2.0.0", "@spectrum-tools/stylelint-no-unknown-custom-properties": "2.0.0", "@spectrum-tools/stylelint-no-unused-custom-properties": "2.0.0", diff --git a/.gitignore b/.gitignore index 65819f6e24c..94b76863af1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,8 @@ dist dist-site -tokens/dist/** +## Keep the tokens rollup file as a sanity check for PRs !tokens/dist/index.css -!tokens/dist/css/*.css -!tokens/dist/css/components/**/*.css # Not committing the map assets, these are dev-only *.map diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 3e2e86ad91e..8bed45bdec3 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -7,6 +7,8 @@ import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const AccordionItem = ({ heading, diff --git a/components/accordion/themes/spectrum.css b/components/accordion/themes/spectrum.css index 12eefa3e1ae..adbcd9dc543 100644 --- a/components/accordion/themes/spectrum.css +++ b/components/accordion/themes/spectrum.css @@ -11,148 +11,11 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Accordion { - --spectrum-accordion-item-height: var(--spectrum-component-height-200); - --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); - --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text); - --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator); - --spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium); - --spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content); - --spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75); - - /* Text header */ - --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack); - --spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); - --spectrum-accordion-item-header-line-height: 1.25; - - /* Text body */ - --spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack); - --spectrum-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s); - --spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100); - - /* Colors */ - --spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default)); - --spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover)); - --spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down)); - --spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus)); - - /* Label */ - --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color); - --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); - - /* Body */ - --spectrum-accordion-item-content-color: var(--spectrum-body-color); - - /* Focus indicator */ - --spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color); - /* Divider */ --spectrum-accordion-divider-color: var(--spectrum-gray-200); - - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - } - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100); - } - - &.spectrum-Accordion--compact { - --spectrum-accordion-item-height: var(--spectrum-component-height-100); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); - - &.spectrum-Accordion--sizeS { - --spectrum-accordion-item-height: var(--spectrum-component-height-75); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small); - } - - &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-height: var(--spectrum-component-height-200); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large); - } - - &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-height: var(--spectrum-component-height-300); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large); - } - } - - &.spectrum-Accordion--spacious { - --spectrum-accordion-item-header-line-height: 1.278; - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium); - - &.spectrum-Accordion--sizeS { - --spectrum-accordion-item-header-line-height: 1.25; - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small); - } - - &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-header-line-height: 1.273; - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large); - } - - &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-header-line-height: 1.25; - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large); - } - } - - &.spectrum-Accordion--sizeS { - --spectrum-accordion-item-height: var(--spectrum-component-height-100); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small); - } - - &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-height: var(--spectrum-component-height-300); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large); - } - - &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-height: var(--spectrum-component-height-400); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large); - } } } diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js index feee0c631ad..f354363f5af 100644 --- a/components/actionbar/stories/template.js +++ b/components/actionbar/stories/template.js @@ -7,6 +7,8 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-ActionBar", diff --git a/components/actionbar/themes/spectrum.css b/components/actionbar/themes/spectrum.css index fb52a837fee..9efcfb55035 100644 --- a/components/actionbar/themes/spectrum.css +++ b/components/actionbar/themes/spectrum.css @@ -11,47 +11,11 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-ActionBar { - --spectrum-actionbar-height: var(--spectrum-action-bar-height); - --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100); - - /* item counter field label */ - --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100); - --spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100); - --spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default); - - /* cjk language support for item counter */ - --spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100); - - /* colors - applied to popover */ --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50); --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - - /* emphasized variation colors */ - --spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default); - --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white); - - /* spacing of action bar bottom and horizontal outer edge */ - --spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300); - - /* spacing of close button */ - --spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-close-button-start: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75); - - /* spacing of item counter field label */ - --spectrum-actionbar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter); - --spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400); - - /* spacing of action group */ - --spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100); - - /* drop shadow */ - --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y); - --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur); - --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color); } } diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js index 4e70daa787c..d15540ac362 100644 --- a/components/actionbutton/stories/template.js +++ b/components/actionbutton/stories/template.js @@ -7,6 +7,8 @@ import { when } from "lit/directives/when.js"; import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; /** * @todo load order should not influence the icon size but it is; fix this diff --git a/components/actionbutton/themes/spectrum-two.css b/components/actionbutton/themes/spectrum-two.css index 0818cbe7d2d..59e111b923d 100644 --- a/components/actionbutton/themes/spectrum-two.css +++ b/components/actionbutton/themes/spectrum-two.css @@ -51,7 +51,6 @@ --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color); - &.spectrum-ActionButton--quiet { --spectrum-actionbutton-background-color-default: transparent; --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css index 7e693cea87b..06e90c3d3af 100644 --- a/components/actionbutton/themes/spectrum.css +++ b/components/actionbutton/themes/spectrum.css @@ -11,6 +11,8 @@ * governing permissions and limitations under the License. */ + @import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-ActionButton { --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); @@ -18,239 +20,10 @@ --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100); - --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); - - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100)); - --spectrum-actionbutton-height: var(--spectrum-component-height-100); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width)); - - --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-actionbutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color); - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - } - - &.is-selected { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50)); - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-actionbutton-border-color-disabled: transparent; - - &.spectrum-ActionButton--emphasized { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); - } - } - - &.spectrum-ActionButton--sizeXS { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50)); - --spectrum-actionbutton-height: var(--spectrum-component-height-50); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-50); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); - --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width)); - } - - &.spectrum-ActionButton--sizeS { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75)); - --spectrum-actionbutton-height: var(--spectrum-component-height-75); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-75); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); - --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-75) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width)); - } - - &, - &.spectrum-ActionButton--sizeM { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100)); - --spectrum-actionbutton-height: var(--spectrum-component-height-100); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width)); - } - - &.spectrum-ActionButton--sizeL { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200)); - --spectrum-actionbutton-height: var(--spectrum-component-height-200); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-200); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); - --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-200) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width)); - } - - &.spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300)); - --spectrum-actionbutton-height: var(--spectrum-component-height-300); - - --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-actionbutton-font-size: var(--spectrum-font-size-300); - --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300); - --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); - --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-300) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-actionbutton-border-width)); - --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width)); - } - - &.spectrum-ActionButton--staticBlack, - &.spectrum-ActionButton--staticWhite { - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - - --spectrum-actionbutton-border-color-disabled: transparent; - } - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500); - - --spectrum-actionbutton-content-color-default: var(--spectrum-black); - --spectrum-actionbutton-content-color-hover: var(--spectrum-black); - --spectrum-actionbutton-content-color-down: var(--spectrum-black); - --spectrum-actionbutton-content-color-focus: var(--spectrum-black); - - --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - - &.is-selected { - --mod-actionbutton-background-color-default: var(--spectrum-transparent-black-800); - --mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-down: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-900); - - --mod-actionbutton-content-color-defaul-selectedt: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - - --mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --mod-actionbutton-border-color-disabled: transparent; - } - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500); - - --spectrum-actionbutton-content-color-default: var(--spectrum-white); - --spectrum-actionbutton-content-color-hover: var(--spectrum-white); - --spectrum-actionbutton-content-color-down: var(--spectrum-white); - --spectrum-actionbutton-content-color-focus: var(--spectrum-white); - - --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - - &.is-selected { - --mod-actionbutton-background-color-default: var(--spectrum-transparent-white-800); - --mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-down: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-900); - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - - --mod-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --mod-actionbutton-border-color-disabled: transparent; - } } } } diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js index cba3244840b..7b648d852fb 100644 --- a/components/actiongroup/stories/template.js +++ b/components/actiongroup/stories/template.js @@ -5,6 +5,8 @@ import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-ActionGroup", diff --git a/components/actiongroup/themes/spectrum.css b/components/actiongroup/themes/spectrum.css index cc2520cb123..3bac81e4497 100644 --- a/components/actiongroup/themes/spectrum.css +++ b/components/actiongroup/themes/spectrum.css @@ -11,30 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: 0; - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: -1px; - --spectrum-actiongroup-vertical-spacing-compact: -1px; - - --spectrum-actiongroup-button-spacing-reset: 0; - --spectrum-actiongroup-border-radius-reset: 0; - --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); - - &.spectrum-ActionGroup--sizeXS, - &.spectrum-ActionGroup--sizeS { - --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-75); - --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75); - } - - &, - &.spectrum-ActionGroup--sizeM, - &.spectrum-ActionGroup--sizeL, - &.spectrum-ActionGroup--sizeXL { - --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-100); - --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-100); - } - } -} +@import "./spectrum-two.css"; diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js index 0dd6f8dcbb0..278fe52c04f 100644 --- a/components/alertbanner/stories/template.js +++ b/components/alertbanner/stories/template.js @@ -8,6 +8,8 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-AlertBanner", diff --git a/components/alertbanner/themes/spectrum.css b/components/alertbanner/themes/spectrum.css index 871a310dc0d..3bac81e4497 100644 --- a/components/alertbanner/themes/spectrum.css +++ b/components/alertbanner/themes/spectrum.css @@ -11,28 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-AlertBanner { - --spectrum-alert-banner-netural-background: var(--spectrum-neutral-subdued-background-color-default); - - --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); - --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --spectrum-alert-banner-size: auto; - --spectrum-alert-banner-font-size: var(--spectrum-font-size-100); - --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - - /* spacing */ - --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300); - --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); - --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); - --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); - - /* colors */ - --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default); - --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default); - --spectrum-alert-banner-font-color: var(--spectrum-white); - } -} +@import "./spectrum-two.css"; diff --git a/components/alertdialog/stories/template.js b/components/alertdialog/stories/template.js index 3a5fdff12b6..f0338547344 100644 --- a/components/alertdialog/stories/template.js +++ b/components/alertdialog/stories/template.js @@ -10,6 +10,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; const Dialog = ({ rootClass = "spectrum-AlertDialog", diff --git a/components/alertdialog/themes/spectrum.css b/components/alertdialog/themes/spectrum.css index bda7a28a015..3bac81e4497 100644 --- a/components/alertdialog/themes/spectrum.css +++ b/components/alertdialog/themes/spectrum.css @@ -11,34 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-AlertDialog { - --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); - --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); - --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); - - /* color */ - --spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color); - --spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); - - /* typography */ - --spectrum-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size); - --spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height); - --spectrum-alert-dialog-title-color: var(--spectrum-heading-color); - - --spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size); - --spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100); - --spectrum-alert-dialog-body-color: var(--spectrum-body-color); - - /* spacing */ - --spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300); - } -} +@import "./spectrum-two.css"; diff --git a/components/asset/stories/template.js b/components/asset/stories/template.js index 86d3e256586..ebefa3f51f4 100644 --- a/components/asset/stories/template.js +++ b/components/asset/stories/template.js @@ -5,6 +5,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Asset", diff --git a/components/asset/themes/spectrum.css b/components/asset/themes/spectrum.css index 56bd9db7903..fb1f8aa1adb 100644 --- a/components/asset/themes/spectrum.css +++ b/components/asset/themes/spectrum.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Asset { - --spectrum-asset-transition-duration: var(--spectrum-animation-duration-100); --spectrum-asset-folder-background-color: var(--spectrum-gray-300); --spectrum-asset-file-background-color: var(--spectrum-gray-50); --spectrum-asset-icon-outline-color: var(--spectrum-gray-500); diff --git a/components/assetcard/stories/template.js b/components/assetcard/stories/template.js index 81c1bf4128b..0f87637ba54 100644 --- a/components/assetcard/stories/template.js +++ b/components/assetcard/stories/template.js @@ -8,6 +8,8 @@ import { when } from "lit/directives/when.js"; import { camelCase } from "lodash-es"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-AssetCard", diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css index b026cb04680..a0f2f882e8e 100644 --- a/components/assetcard/themes/spectrum.css +++ b/components/assetcard/themes/spectrum.css @@ -11,8 +11,14 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%); + --spectrum-assetcard-background-color: var(--spectrum-gray-100); + --spectrum-assetcard-border-color-hover: var(--spectrum-gray-500); + --spectrum-assetcard-border-color-down: var(--spectrum-gray-600); + + --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); } } diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js index 257187b0b33..d6f113bfd3c 100644 --- a/components/assetlist/stories/template.js +++ b/components/assetlist/stories/template.js @@ -7,6 +7,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const AssetListItem = ({ rootClass = "spectrum-AssetList-item", diff --git a/components/assetlist/themes/spectrum.css b/components/assetlist/themes/spectrum.css index 1a6534f3f2c..d5c2fa9b77f 100644 --- a/components/assetlist/themes/spectrum.css +++ b/components/assetlist/themes/spectrum.css @@ -11,30 +11,11 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-AssetList { - --spectrum-assetlist-width: 272px; - --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100); - - /* item */ - --spectrum-assetlist-item-height: var(--spectrum-spacing-600); - --spectrum-assetlist-item-padding-inline-start: var(--spectrum-spacing-300); - --spectrum-assetlist-item-padding-inline-end: var(--spectrum-spacing-300); - --spectrum-assetlist-item-margin-block-end: var(--spectrum-spacing-75); - --spectrum-assetlist-item-border-radius: var(--spectrum-spacing-75); - --spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100); - --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100); - --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight); --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300); --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200); - - /* thumbnail */ - --spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400); - --spectrum-assetlist-thumbnail-height: var(--spectrum-spacing-400); - --spectrum-assetlist-thumbnail-margin-inline-start: var(--spectrum-spacing-100); - - /* label */ - --spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100); - --spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default); } } diff --git a/components/avatar/stories/template.js b/components/avatar/stories/template.js index 9dee3b82d40..2f3187d4e20 100644 --- a/components/avatar/stories/template.js +++ b/components/avatar/stories/template.js @@ -7,6 +7,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Avatar", diff --git a/components/avatar/themes/spectrum.css b/components/avatar/themes/spectrum.css index 4a736751451..3bac81e4497 100644 --- a/components/avatar/themes/spectrum.css +++ b/components/avatar/themes/spectrum.css @@ -11,64 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Avatar { - --spectrum-avatar-color-opacity: 1; - - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); - - --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); - - --spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled); - } - - .spectrum-Avatar--size50 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-50); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-50); - } - - .spectrum-Avatar--size75 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-75); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-75); - } - - .spectrum-Avatar--size100 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); - } - - .spectrum-Avatar--size200 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-200); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-200); - } - - .spectrum-Avatar--size300 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-300); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-300); - } - - .spectrum-Avatar--size400 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-400); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-400); - } - - .spectrum-Avatar--size500 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-500); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-500); - } - - .spectrum-Avatar--size600 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-600); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-600); - } - - .spectrum-Avatar--size700 { - --spectrum-avatar-inline-size: var(--spectrum-avatar-size-700); - --spectrum-avatar-block-size: var(--spectrum-avatar-size-700); - } -} +@import "./spectrum-two.css"; diff --git a/components/badge/stories/template.js b/components/badge/stories/template.js index 17870bae7aa..165c09b5d8b 100644 --- a/components/badge/stories/template.js +++ b/components/badge/stories/template.js @@ -8,6 +8,8 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Badge", diff --git a/components/badge/themes/spectrum.css b/components/badge/themes/spectrum.css index d163041a35f..3bac81e4497 100644 --- a/components/badge/themes/spectrum.css +++ b/components/badge/themes/spectrum.css @@ -11,136 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Badge { - /* badge styling for all t-shirt sizes and all themes */ - --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100); - - /* label text styles for all t-shirt sizes and all themes */ - --spectrum-badge-line-height: var(--spectrum-line-height-100); - --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - - /* text and icon color default white for all t-shirt sizes and all themes */ - --spectrum-badge-label-icon-color: var(--spectrum-white); - - /* background color default for all t-shirt sizes and all themes */ - --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - - /* semantic background colors for all t-shirt sizes and all themes */ - --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default); - --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default); - --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default); - --spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default); - --spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default); - - /* non-semantic background colors */ - --spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default); - --spectrum-badge-background-color-red: var(--spectrum-red-background-color-default); - --spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default); - --spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default); - --spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default); - --spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default); - --spectrum-badge-background-color-green: var(--spectrum-green-background-color-default); - --spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default); - --spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default); - --spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default); - --spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default); - --spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default); - --spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default); - --spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default); - - /*** DEFAULT STYLE fallbacks if no t-shirt size - uses Medium t-shirt styles ***/ - /* badge height - fallback if no t-shirt size */ - --spectrum-badge-height: var(--spectrum-component-height-100); - - /* label font size - fallback if no t-shirt size */ - --spectrum-badge-font-size: var(--spectrum-font-size-100); - - /* label spacing - fallback if no t-shirt size */ - --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100); - --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100); - --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100); - - /* icon size - fallback if no t-shirt size */ - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - - /* icon spacing - fallback if no t-shirt size */ - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); - --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100); - --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100); - } - - /* text and icon color is black for these background colors */ - .spectrum-Badge--orange, - .spectrum-Badge--yellow, - .spectrum-Badge--chartreuse, - .spectrum-Badge--celery { - --spectrum-badge-label-icon-color: var(--spectrum-black); - } - - /* dark theme all non-semantic colors are black */ - .spectrum-Badge--gray, - .spectrum-Badge--red, - .spectrum-Badge--green, - .spectrum-Badge--seafoam, - .spectrum-Badge--cyan, - .spectrum-Badge--blue, - .spectrum-Badge--indigo, - .spectrum-Badge--purple, - .spectrum-Badge--fuchsia, - .spectrum-Badge--magenta { - --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary); - } - - .spectrum-Badge--sizeS { - --spectrum-badge-height: var(--spectrum-component-height-75); - - /* label */ - --spectrum-badge-font-size: var(--spectrum-font-size-75); - --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75); - --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75); - --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75); - - /* icon */ - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75); - --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75); - --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75); - } - - .spectrum-Badge--sizeL { - --spectrum-badge-height: var(--spectrum-component-height-100); - - /* label */ - --spectrum-badge-font-size: var(--spectrum-font-size-200); - --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200); - --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200); - --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200); - - /* icon */ - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200); - --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200); - --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200); - } - - .spectrum-Badge--sizeXL { - --spectrum-badge-height: var(--spectrum-component-height-100); - - /* label */ - --spectrum-badge-font-size: var(--spectrum-font-size-300); - --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300); - --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300); - --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300); - - /* icon */ - --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300); - --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300); - --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300); - --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300); - } -} +@import "./spectrum-two.css"; diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js index b28cce80383..aceb0667cac 100644 --- a/components/breadcrumb/stories/template.js +++ b/components/breadcrumb/stories/template.js @@ -7,6 +7,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ( { diff --git a/components/breadcrumb/themes/spectrum.css b/components/breadcrumb/themes/spectrum.css index 6ac8edd68a5..3bac81e4497 100644 --- a/components/breadcrumb/themes/spectrum.css +++ b/components/breadcrumb/themes/spectrum.css @@ -11,99 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Breadcrumbs { - /* block size */ - --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --spectrum-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact); - --spectrum-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline); - - /* text regular */ - --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100); - --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200); - --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - - /* text regular active item */ - --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --spectrum-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - - /* text compact */ - --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); - - /* text compact active item */ - --spectrum-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight); - - /* text multiline */ - --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight); - - /* text multiline active item */ - --spectrum-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300); - --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight); - - /* hover, active, focus underline */ - --spectrum-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness); - --spectrum-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); - - /* space between items */ - --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100); - - /* vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text); - --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text); - --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon); - - /* compact vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact); - --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact); - --spectrum-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact); - - /* multiline vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline); - --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline); - --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text); /* vertical between lines */ - --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline); - --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline); /* vertical between lines */ - - /* horizontal outer spacing of list */ - --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text); - --spectrum-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); - - /* menu action button icon spacing */ - --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon); - - /* action button spacing */ - --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu); - --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* compact */ - - --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); /* if icon is first item */ - - --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* multiline */ - --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); /* multiline */ - - /* Focus Indicator */ - --spectrum-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - /* placeholder for border radius for focus indicator */ - --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100); - - /* Colors */ - --spectrum-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-breadcrumbs-text-color-current: var(--spectrum-neutral-content-color-default); - --spectrum-breadcrumbs-text-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default); - --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color); - } -} +@import "./spectrum-two.css"; diff --git a/components/button/stories/template.js b/components/button/stories/template.js index 7c6b1ff0124..3e7bd6d3164 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -9,6 +9,8 @@ import { when } from "lit/directives/when.js"; import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ( { diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css index 78ed60c26da..cc92d0dd52d 100644 --- a/components/button/themes/spectrum.css +++ b/components/button/themes/spectrum.css @@ -11,6 +11,8 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Button { --spectrum-button-background-color-default: var(--spectrum-gray-75); @@ -23,193 +25,8 @@ --spectrum-button-border-color-down: var(--spectrum-gray-600); --spectrum-button-border-color-focus: var(--spectrum-gray-500); - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--sizeS { - --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-75); - --spectrum-button-height: var(--spectrum-component-height-75); - - --spectrum-button-font-size: var(--spectrum-font-size-75); - - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75); - } - - &.spectrum-Button--sizeM { - --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-button-height: var(--spectrum-component-height-100); - - --spectrum-button-font-size: var(--spectrum-font-size-100); - - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); - } - - &.spectrum-Button--sizeL { - --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-200); - --spectrum-button-height: var(--spectrum-component-height-200); - - --spectrum-button-font-size: var(--spectrum-font-size-200); - - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200); - } - - &.spectrum-Button--sizeXL { - --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-300); - --spectrum-button-height: var(--spectrum-component-height-300); - - --spectrum-button-font-size: var(--spectrum-font-size-300); - - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300); - } - - &.spectrum-Button--accent { - --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-accent-color-200); - --spectrum-button-background-color-down: var(--spectrum-accent-color-300); - --spectrum-button-background-color-focus: var(--spectrum-accent-color-200); - - --spectrum-button-border-color-default: var(--spectrum-accent-color-900); - --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000); - --spectrum-button-border-color-down: var(--spectrum-accent-color-1100); - --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000); - - --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } - - &.spectrum-Button--negative { - --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-negative-color-200); - --spectrum-button-background-color-down: var(--spectrum-negative-color-300); - --spectrum-button-background-color-focus: var(--spectrum-negative-color-200); - - --spectrum-button-border-color-default: var(--spectrum-negative-color-900); - --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-button-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000); - - --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } - &.spectrum-Button--primary { - --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; --spectrum-button-background-color-hover: var(--spectrum-gray-300); --spectrum-button-background-color-down: var(--spectrum-gray-400); --spectrum-button-background-color-focus: var(--spectrum-gray-300); @@ -218,15 +35,6 @@ --spectrum-button-border-color-hover: var(--spectrum-gray-900); --spectrum-button-border-color-down: var(--spectrum-gray-900); --spectrum-button-border-color-focus: var(--spectrum-gray-900); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); } } @@ -236,22 +44,7 @@ --spectrum-button-background-color-down: var(--spectrum-gray-400); --spectrum-button-background-color-focus: var(--spectrum-gray-300); - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; --spectrum-button-background-color-hover: var(--spectrum-gray-300); --spectrum-button-background-color-down: var(--spectrum-gray-400); --spectrum-button-background-color-focus: var(--spectrum-gray-300); @@ -260,270 +53,6 @@ --spectrum-button-border-color-hover: var(--spectrum-gray-400); --spectrum-button-border-color-down: var(--spectrum-gray-500); --spectrum-button-border-color-focus: var(--spectrum-gray-400); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } - - &.spectrum-Button--quiet { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-300); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: transparent; - } - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - - &.spectrum-Button--emphasized { - --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); - } - } - - &.spectrum-Button--staticBlack, - &.spectrum-Button--staticWhite { - &.spectrum-Button--quiet { - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-border-color-disabled: transparent; - } - } - - /* static white */ - &.spectrum-Button--staticWhite { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - } - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-black)); - --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-black)); - --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-black)); - --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-black)); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-button-border-color-disabled: transparent; - } - } - - &.spectrum-Button--staticWhite.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-200); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - } - } - - /* static black */ - &.spectrum-Button--staticBlack { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500); - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - } - } - - &.spectrum-Button--staticBlack.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-200); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); } } } diff --git a/components/buttongroup/stories/template.js b/components/buttongroup/stories/template.js index c35719abf74..3dfbc0ee9e4 100644 --- a/components/buttongroup/stories/template.js +++ b/components/buttongroup/stories/template.js @@ -5,6 +5,8 @@ import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-ButtonGroup", diff --git a/components/buttongroup/themes/spectrum.css b/components/buttongroup/themes/spectrum.css index 10ec31b3bcd..3bac81e4497 100644 --- a/components/buttongroup/themes/spectrum.css +++ b/components/buttongroup/themes/spectrum.css @@ -11,29 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-ButtonGroup { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); - } - - .spectrum-ButtonGroup--sizeS { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200); - } - - .spectrum-ButtonGroup--sizeM { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); - } - - .spectrum-ButtonGroup--sizeL { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); - } - - .spectrum-ButtonGroup--sizeXL { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); - } -} +@import "./spectrum-two.css"; diff --git a/components/calendar/stories/template.js b/components/calendar/stories/template.js index e7ff0d40510..6e19f5699ee 100644 --- a/components/calendar/stories/template.js +++ b/components/calendar/stories/template.js @@ -8,6 +8,8 @@ import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; const months = [...Array(12).keys()].map((key) => new Date(0, key).toLocaleString("en", { month: "long" }) diff --git a/components/calendar/themes/spectrum.css b/components/calendar/themes/spectrum.css index 9b8c49a54a6..3bac81e4497 100644 --- a/components/calendar/themes/spectrum.css +++ b/components/calendar/themes/spectrum.css @@ -11,48 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Calendar { - --spectrum-calendar-day-width: var(--spectrum-component-height-100); - --spectrum-calendar-day-height: var(--spectrum-component-height-100); - --spectrum-calendar-border-radius-reset: 0; - --spectrum-calendar-border-width-reset: 0; - --spectrum-calendar-day-border-size: var(--spectrum-border-width-200); - --spectrum-calendar-margin-y: 24px; - --spectrum-calendar-margin-x: 32px; - --spectrum-calendar-day-padding: 4px; - --spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7); - - --spectrum-calendar-title-text-letter-spacing: 0.06em; - --spectrum-calendar-title-height: 32px; - --spectrum-calendar-title-text-size: var(--spectrum-font-size-300); - - --spectrum-calendar-day-title-text-font-weight: var(--spectrum-bold-font-weight); - --spectrum-calendar-day-title-text-color: var(--spectrum-gray-700); - --spectrum-calendar-day-title-text-size: var(--spectrum-font-size-50); - --spectrum-calendar-day-text-size-han: var(--spectrum-font-size-50); - - --spectrum-calendar-day-text-size: var(--spectrum-font-size-100); - --spectrum-calendar-day-text-color-selected: var(--spectrum-gray-900); - --spectrum-calendar-day-text-color-hover: var(--spectrum-gray-900); - --spectrum-calendar-day-text-color-cap-selected: var(--spectrum-gray-900); - --spectrum-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight); - --spectrum-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight); - - --spectrum-calendar-day-today-text-color: var(--spectrum-gray-800); - --spectrum-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight); - --spectrum-calendar-day-today-border-color: var(--spectrum-gray-800); - - --spectrum-calendar-day-today-text-color-disabled: var(--spectrum-gray-500); - --spectrum-calendar-day-today-border-color-disabled: var(--spectrum-gray-400); - --spectrum-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900); - - --spectrum-calendar-button-icon-color: var(--spectrum-gray-700); - - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - } - } -} +@import "./spectrum-two.css"; diff --git a/components/card/stories/template.js b/components/card/stories/template.js index b72821c67ac..5f3be22db9f 100644 --- a/components/card/stories/template.js +++ b/components/card/stories/template.js @@ -10,6 +10,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ( { diff --git a/components/card/themes/spectrum.css b/components/card/themes/spectrum.css index 9989089d7f7..e2e09095521 100644 --- a/components/card/themes/spectrum.css +++ b/components/card/themes/spectrum.css @@ -11,88 +11,13 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Card { - /* Default Layout */ - --spectrum-card-background-color: var(--spectrum-background-layer-2-color); - --spectrum-card-body-spacing: var(--spectrum-spacing-400); - --spectrum-card-title-padding-top: var(--spectrum-spacing-300); - --spectrum-card-title-padding-right: var(--spectrum-spacing-400); - --spectrum-card-content-margin-top: var(--spectrum-spacing-100); - --spectrum-card-content-margin-bottom: var(--spectrum-spacing-300); - --spectrum-card-footer-padding-top: var(--spectrum-spacing-100); - --spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100); - - --spectrum-card-border-width: var(--spectrum-border-width-100); - --spectrum-card-corner-radius: var(--spectrum-corner-radius-100); --spectrum-card-border-color: var(--spectrum-gray-200); --spectrum-card-border-color-hover: var(--spectrum-gray-300); - --spectrum-card-border-color-selected: var(--spectrum-blue-700); - --spectrum-card-divider-color: var(--spectrum-gray-300); - - /* Typography */ - --spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-card-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-card-title-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-card-title-line-height: var(--spectrum-heading-line-height); - --spectrum-card-title-font-color: var(--spectrum-heading-color); - - --spectrum-card-body-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-card-body-font-size: var(--spectrum-body-size-s); - --spectrum-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-card-body-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-card-body-line-height: var(--spectrum-body-line-height); - --spectrum-card-body-font-color: var(--spectrum-body-color); - - /* Quick Actions */ - --spectrum-card-actions-spacing: var(--spectrum-spacing-300); - --spectrum-card-actions-size: var(--spectrum-card-selection-background-size); - --spectrum-card-actions-border-radius: var(--spectrum-corner-radius-100); - - /* TODO update to --spectrum-card-selection-background-color token once an RGB stripped value is available */ - --spectrum-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); - --spectrum-card-actions-background-color-opacity: var(--spectrum-card-selection-background-color-opacity); - --spectrum-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); - --spectrum-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); - --spectrum-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); - --spectrum-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); - - /* Focus */ - --spectrum-card-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - - /* Selected */ - --spectrum-card-selected-background-opacity: 0.1; /* table-selected-row-background-opacity does not exist in tokens yet */ - - --spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100); - --spectrum-card-preview-background-color: var(--spectrum-background-base-color); --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300); - - /* Horizontal */ - --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300); - --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200); - - /* TODO: These are placeholder until recursive RGB is available */ - .spectrum--light &, - .spectrum--lightest & { - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); - } - - .spectrum--dark & { - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); - } - - .spectrum--darkest & { - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb); - } - } - - /* Quiet/Gallery */ - .spectrum-Card--quiet, - .spectrum-Card--gallery { - --spectrum-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100)); - --spectrum-card-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width)); } } diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js index 227a08374a6..33d2d0edc2e 100644 --- a/components/checkbox/stories/template.js +++ b/components/checkbox/stories/template.js @@ -6,6 +6,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Checkbox", diff --git a/components/checkbox/themes/spectrum.css b/components/checkbox/themes/spectrum.css index edda1e07006..3bac81e4497 100644 --- a/components/checkbox/themes/spectrum.css +++ b/components/checkbox/themes/spectrum.css @@ -11,86 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-gray-600); - --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); - --spectrum-checkbox-control-color-down: var(--spectrum-gray-800); - --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); - - /* Color */ - --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); - - --spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --spectrum-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - - --spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); - --spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - - --spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - /* Font */ - --spectrum-checkbox-line-height: var(--spectrum-line-height-100); - --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - - /* Size */ - --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - - --spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - - --spectrum-checkbox-border-width: var(--spectrum-border-width-200); - --spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2); - - --spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100); - - &.spectrum-Checkbox--sizeS { - --spectrum-checkbox-font-size: var(--spectrum-font-size-75); - --spectrum-checkbox-height: var(--spectrum-component-height-75); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); - } - - &, - &.spectrum-Checkbox--sizeM { - --spectrum-checkbox-font-size: var(--spectrum-font-size-100); - --spectrum-checkbox-height: var(--spectrum-component-height-100); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); - } - - &.spectrum-Checkbox--sizeL { - --spectrum-checkbox-font-size: var(--spectrum-font-size-200); - --spectrum-checkbox-height: var(--spectrum-component-height-200); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200); - } - - &.spectrum-Checkbox--sizeXL { - --spectrum-checkbox-font-size: var(--spectrum-font-size-300); - --spectrum-checkbox-height: var(--spectrum-component-height-300); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300); - } - } -} +@import "./spectrum-two.css"; diff --git a/components/clearbutton/stories/template.js b/components/clearbutton/stories/template.js index bca745580ee..4aa0ceab4c5 100644 --- a/components/clearbutton/stories/template.js +++ b/components/clearbutton/stories/template.js @@ -5,6 +5,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-ClearButton", diff --git a/components/clearbutton/themes/spectrum.css b/components/clearbutton/themes/spectrum.css index 70ad59b589d..3bac81e4497 100644 --- a/components/clearbutton/themes/spectrum.css +++ b/components/clearbutton/themes/spectrum.css @@ -11,62 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-ClearButton { - --spectrum-clear-button-background-color: transparent; - --spectrum-clear-button-background-color-hover: transparent; - --spectrum-clear-button-background-color-down: transparent; - --spectrum-clear-button-background-color-key-focus: transparent; - - --spectrum-clear-button-height: var(--spectrum-component-height-100); - --spectrum-clear-button-width: var(--spectrum-component-height-100); - --spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - - --spectrum-clear-button-icon-color: var(--spectrum-neutral-content-color-default); - --spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - &.spectrum-ClearButton--sizeS { - --spectrum-clear-button-height: var(--spectrum-component-height-75); - --spectrum-clear-button-width: var(--spectrum-component-height-75); - } - - &.spectrum-ClearButton--sizeL { - --spectrum-clear-button-height: var(--spectrum-component-height-200); - --spectrum-clear-button-width: var(--spectrum-component-height-200); - } - - &.spectrum-ClearButton--sizeXL { - --spectrum-clear-button-height: var(--spectrum-component-height-300); - --spectrum-clear-button-width: var(--spectrum-component-height-300); - } - - &.spectrum-ClearButton--quiet { - --spectrum-clear-button-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); - --spectrum-clear-button-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); - --spectrum-clear-button-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); - } - - &.spectrum-ClearButton--overBackground { - --spectrum-clear-button-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); - --spectrum-clear-button-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); - --spectrum-clear-button-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); - --spectrum-clear-button-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); - - --spectrum-clear-button-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); - --spectrum-clear-button-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --spectrum-clear-button-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - } - - &:disabled, - &.is-disabled { - --spectrum-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --spectrum-clear-button-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --spectrum-clear-button-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --spectrum-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); - } - } -} +@import "./spectrum-two.css"; diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js index 5e6084cc079..3ea5370dfc1 100644 --- a/components/closebutton/stories/template.js +++ b/components/closebutton/stories/template.js @@ -5,6 +5,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { capitalize, lowerCase, upperCase } from "lodash-es"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-CloseButton", diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css index 70de132ab15..ecb3731350d 100644 --- a/components/closebutton/themes/spectrum.css +++ b/components/closebutton/themes/spectrum.css @@ -11,80 +11,12 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; --spectrum-closebutton-background-color-hover: var(--spectrum-gray-200); --spectrum-closebutton-background-color-down: var(--spectrum-gray-300); --spectrum-closebutton-background-color-focus: var(--spectrum-gray-200); - - /* Hardcoded tokens */ - --spectrum-closebutton-size-300: 24px; - --spectrum-closebutton-size-400: 32px; - --spectrum-closebutton-size-500: 40px; - --spectrum-closebutton-size-600: 48px; - - /* Cross icon */ - --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color); - - /* Focus ring */ - --spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color); - - /* Size */ - --spectrum-closebutton-height: var(--spectrum-component-height-100); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-400); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400); - - --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100); - } - - .spectrum-Closebutton--sizeS { - --spectrum-closebutton-height: var(--spectrum-component-height-75); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-300); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-300); - } - - .spectrum-Closebutton--sizeM { - --spectrum-closebutton-height: var(--spectrum-component-height-100); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-400); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400); - } - - .spectrum-Closebutton--sizeL { - --spectrum-closebutton-height: var(--spectrum-component-height-200); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-500); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-500); - } - - .spectrum-Closebutton--sizeXL { - --spectrum-closebutton-height: var(--spectrum-component-height-300); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-600); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-600); - } - - .spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-default: transparent; - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300); - --spectrum-closebutton-icon-color-default: var(--spectrum-white); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - } - - .spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-default: transparent; - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300); - --spectrum-closebutton-icon-color-default: var(--spectrum-black); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); } } diff --git a/components/coachindicator/stories/template.js b/components/coachindicator/stories/template.js index 7eb6e641689..40205792f5f 100644 --- a/components/coachindicator/stories/template.js +++ b/components/coachindicator/stories/template.js @@ -3,6 +3,8 @@ import { classMap } from "lit-html/directives/class-map.js"; import { styleMap } from "lit-html/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-CoachIndicator", diff --git a/components/coachindicator/themes/spectrum.css b/components/coachindicator/themes/spectrum.css index f5b6abb2cc6..3bac81e4497 100644 --- a/components/coachindicator/themes/spectrum.css +++ b/components/coachindicator/themes/spectrum.css @@ -11,48 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-CoachIndicator { - --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); - --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); - --spectrum-coach-indicator-inline-size: var(--spectrum-coach-indicator-min-inline-size); - --spectrum-coach-indicator-block-size: var(--spectrum-coach-indicator-min-block-size); - --spectrum-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); - --spectrum-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); - - --spectrum-coach-indicator-top: calc((var(--spectrum-coach-indicator-block-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - --spectrum-coach-indicator-left: calc((var(--spectrum-coach-indicator-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - - /* animation */ - --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); - --spectrum-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --spectrum-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --spectrum-coach-animation-indicator-ring-outer-delay-multiple: -1; - --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --spectrum-coach-indicator-animation-name: pulse; - --spectrum-coach-indicator-inner-animation-delay-multiple: var(--spectrum-coach-animation-indicator-ring-inner-delay-multiple); - - --spectrum-coach-indicator-animation-keyframe-0-scale: 1; - --spectrum-coach-indicator-animation-keyframe-0-opacity: 0; - --spectrum-coach-indicator-animation-keyframe-50-scale: 1.5; - --spectrum-coach-indicator-animation-keyframe-50-opacity: 1; - --spectrum-coach-indicator-animation-keyframe-100-scale: 2; - --spectrum-coach-indicator-animation-keyframe-100-opacity: 0; - --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - } - - .spectrum-CoachIndicator--quiet { - --spectrum-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); - --spectrum-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); - --spectrum-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); - --spectrum-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75); - --spectrum-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)); - --spectrum-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)); - - --spectrum-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - --spectrum-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - --spectrum-coach-indicator-animation-name: pulse-quiet; - --spectrum-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple)); - } -} +@import "./spectrum-two.css"; diff --git a/components/coachmark/stories/template.js b/components/coachmark/stories/template.js index 5a825b08fa3..71a9aff40ea 100644 --- a/components/coachmark/stories/template.js +++ b/components/coachmark/stories/template.js @@ -7,6 +7,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-CoachMark", diff --git a/components/coachmark/themes/spectrum.css b/components/coachmark/themes/spectrum.css index cad534043ea..3bac81e4497 100644 --- a/components/coachmark/themes/spectrum.css +++ b/components/coachmark/themes/spectrum.css @@ -11,45 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-CoachMark { - --spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width); - --spectrum-coachmark-width: var(--spectrum-coach-mark-width); - --spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width); - - --spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height); - --spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); - - --spectrum-coachmark-border-size: var(--mod-popover-border-width); - --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius); - - /* layout */ - --spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content); - --spectrum-coachmark-heading-to-action-button: var(--spectrum-spacing-300); - --spectrum-coachmark-header-to-body: var(--spectrum-spacing-200); - --spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300); - - /* font */ - --spectrum-coachmark-title-color: var(--spectrum-heading-color); - --spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font); - --spectrum-coachmark-title-font-style: var(--spectrum-heading-serif-font-style); - --spectrum-coachmark-title-text-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-size); - --spectrum-coachmark-title-text-line-height: var(--spectrum-heading-line-height); - - --spectrum-coachmark-content-font-color: var(--spectrum-body-color); - --spectrum-coachmark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-coachmark-content-font-family: var(--spectrum-sans-serif-font); - --spectrum-coachmark-content-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-coachmark-content-line-height: var(--spectrum-body-line-height); - --spectrum-coachmark-content-font-size: var(--spectrum-coach-mark-body-size); - - --spectrum-coachmark-step-color: var(--spectrum-coach-mark-pagination-color); - --spectrum-coachmark-step-font-weight: var(--spectrum-body-medium-font-weight); - --spectrum-coachmark-step-font-family: var(--spectrum-sans-serif-font); - --spectrum-coachmark-step-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-coachmark-step-line-height: var(--spectrum-body-line-height); - --spectrum-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-size); - --spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); - } -} +@import "./spectrum-two.css"; diff --git a/components/colorarea/stories/template.js b/components/colorarea/stories/template.js index 80ac8ca8a85..d283c2a1ea9 100644 --- a/components/colorarea/stories/template.js +++ b/components/colorarea/stories/template.js @@ -4,6 +4,8 @@ import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-ColorArea", diff --git a/components/colorarea/themes/spectrum.css b/components/colorarea/themes/spectrum.css index 2e1ca0bf541..3bac81e4497 100644 --- a/components/colorarea/themes/spectrum.css +++ b/components/colorarea/themes/spectrum.css @@ -11,15 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-ColorArea { - --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding); - --spectrum-colorarea-border-color: rgb(0 0 0 / 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */ - --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color); - --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width); - --spectrum-colorarea-height: var(--spectrum-color-area-height); - --spectrum-colorarea-width: var(--spectrum-color-area-width); - --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width); - --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height); - } -} +@import "./spectrum-two.css"; diff --git a/components/colorhandle/stories/template.js b/components/colorhandle/stories/template.js index e9be92d0e7b..d44d1f00944 100644 --- a/components/colorhandle/stories/template.js +++ b/components/colorhandle/stories/template.js @@ -4,6 +4,8 @@ import { html } from "lit"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-ColorHandle", diff --git a/components/colorhandle/themes/spectrum.css b/components/colorhandle/themes/spectrum.css index 7a2e6cfdb3f..3bac81e4497 100644 --- a/components/colorhandle/themes/spectrum.css +++ b/components/colorhandle/themes/spectrum.css @@ -11,29 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-ColorHandle { - --spectrum-colorhandle-size: var(--spectrum-color-handle-size); - --spectrum-colorhandle-focused-size: var(--spectrum-color-handle-size-key-focus); - --spectrum-colorhandle-hitarea-size: var(--spectrum-color-control-track-width); - - --spectrum-colorhandle-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-colorhandle-animation-easing: ease-in-out; - - /* outer border as box shadow on the colorhandle */ - --spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */ - --spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width); - - /* inner border as inset boxshadow on the colorhandle-inner */ - --spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); /* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */ - --spectrum-colorhandle-inner-border-width: var(--spectrum-color-handle-inner-border-width); - - /* primary border on color handle */ - --spectrum-colorhandle-border-width: var(--spectrum-color-handle-border-width); - --spectrum-colorhandle-border-color: var(--spectrum-white); - - --spectrum-colorhandle-border-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-colorhandle-fill-color-disabled: var(--spectrum-disabled-background-color); - --mod-opacity-checkerboard-position: 50%; - } -} +@import "./spectrum-two.css"; diff --git a/components/colorloupe/stories/template.js b/components/colorloupe/stories/template.js index b0d96c5485d..09bca9c55c9 100644 --- a/components/colorloupe/stories/template.js +++ b/components/colorloupe/stories/template.js @@ -3,6 +3,8 @@ import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-ColorLoupe", diff --git a/components/colorloupe/themes/spectrum.css b/components/colorloupe/themes/spectrum.css index b877aa93dd5..3bac81e4497 100644 --- a/components/colorloupe/themes/spectrum.css +++ b/components/colorloupe/themes/spectrum.css @@ -11,25 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-ColorLoupe { - --spectrum-colorloupe-width: var(--spectrum-color-loupe-width); - --spectrum-colorloupe-height: var(--spectrum-color-loupe-height); - - --spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); - --spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */ - - --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --spectrum-colorloupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y); - --spectrum-colorloupe-drop-shadow-blur: var(--spectrum-color-loupe-drop-shadow-blur); - --spectrum-colorloupe-drop-shadow-color: var(--spectrum-color-loupe-drop-shadow-color); - - --spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width); - --spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width); - --spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border); - --spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border); - - --spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); - --spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); - } -} +@import "./spectrum-two.css"; diff --git a/components/colorslider/stories/template.js b/components/colorslider/stories/template.js index 4c97cbea0a7..6de29bd0c7d 100644 --- a/components/colorslider/stories/template.js +++ b/components/colorslider/stories/template.js @@ -7,6 +7,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-ColorSlider", diff --git a/components/colorslider/themes/spectrum.css b/components/colorslider/themes/spectrum.css index 3cbf5ad0d49..3bac81e4497 100644 --- a/components/colorslider/themes/spectrum.css +++ b/components/colorslider/themes/spectrum.css @@ -11,20 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-ColorSlider { - /* Size and Spacing */ - --spectrum-color-slider-handle-margin-block: var(--spectrum-component-top-to-text-75); - - /* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); - - /* Checkerboard pattern */ - --spectrum-color-slider-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); - --spectrum-color-slider-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); - --spectrum-color-slider-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); - - /* Settings for nested Color handle */ - --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px); - } -} +@import "./spectrum-two.css"; diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js index 6fa5652d48f..6757de187e2 100644 --- a/components/colorwheel/stories/template.js +++ b/components/colorwheel/stories/template.js @@ -5,6 +5,8 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-ColorWheel", diff --git a/components/colorwheel/themes/spectrum.css b/components/colorwheel/themes/spectrum.css index f37b49c27ed..3bac81e4497 100644 --- a/components/colorwheel/themes/spectrum.css +++ b/components/colorwheel/themes/spectrum.css @@ -11,16 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-ColorWheel { - --spectrum-colorwheel-width: var(--spectrum-color-wheel-width); - --spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width); - --spectrum-colorwheel-height: var(--spectrum-color-wheel-width); - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200); - --spectrum-colorwheel-border-width: var(--spectrum-border-width-100); - --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width); - --spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin); - --spectrum-colorwheel-colorhandle-position: calc((var(--spectrum-colorwheel-width) / 2) - (var(--spectrum-colorwheel-track-width) / 2)); - } -} +@import "./spectrum-two.css"; diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index 7b835db15e6..ce3f8626992 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -9,6 +9,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Combobox", diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css index 7012f5db884..3bac81e4497 100644 --- a/components/combobox/themes/spectrum.css +++ b/components/combobox/themes/spectrum.css @@ -11,175 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Combobox { - --spectrum-combobox-border-color-default: var(--spectrum-gray-500); - --spectrum-combobox-border-color-hover: var(--spectrum-gray-600); - --spectrum-combobox-border-color-focus: var(--spectrum-gray-500); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); - - --spectrum-combobox-inline-size: var(--spectrum-field-width); - --spectrum-combobox-block-size: var(--spectrum-component-height-100); - --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); - --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-combobox-font-size: var(--spectrum-font-size-100); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); - - --spectrum-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-combobox-border-radius: var(--spectrum-corner-radius-100); - --spectrum-combobox-border-width: var(--spectrum-border-width-100); - - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component); - - --spectrum-combobox-font-style: var(--spectrum-default-font-style); - --spectrum-combobox-line-height: var(--spectrum-line-height-100); - - --spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); - --spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); - --spectrum-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); - --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); - --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); - - /* Settings for nested Textfield component. */ - --mod-textfield-focus-indicator-gap: var(--mod-combobox-focus-indicator-gap, var(--spectrum-combobox-focus-indicator-gap)); - --mod-textfield-focus-indicator-width: var(--mod-combobox-focus-indicator-thickness, var(--spectrum-combobox-focus-indicator-thickness)); - --mod-textfield-focus-indicator-color: var(--mod-combobox-focus-indicator-color, var(--spectrum-combobox-focus-indicator-color)); - - --mod-textfield-background-color: var(--mod-combobox-background-color-default); - --mod-textfield-background-color-disabled: var(--mod-combobox-background-color-disabled); - - --mod-textfield-font-family: var(--mod-combobox-font-family); - --mod-textfield-font-weight: var(--mod-combobox-font-weight); - - --mod-textfield-text-color-default: var(--mod-combobox-font-color-default); - --mod-textfield-text-color-hover: var(--mod-combobox-font-color-hover); - --mod-textfield-text-color-focus: var(--mod-combobox-font-color-focus); - --mod-textfield-text-color-focus-hover: var(--mod-combobox-font-color-focus-hover); - --mod-textfield-text-color-keyboard-focus: var(--mod-combobox-font-color-key-focus); - --mod-textfield-text-color-disabled: var(--mod-combobox-font-color-disabled); - - --mod-textfield-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); - --mod-textfield-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default)); - --mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled); - --mod-textfield-border-color-focus: var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus)); - --mod-textfield-border-color-focus-hover: var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover)); - --mod-textfield-border-color-hover: var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover)); - --mod-textfield-border-color-keyboard-focus: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus)); - - --mod-textfield-border-color-invalid-default: var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default)); - --mod-textfield-border-color-invalid-hover: var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover)); - --mod-textfield-border-color-invalid-focus: var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus)); - --mod-textfield-border-color-invalid-focus-hover: var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover)); - --mod-textfield-border-color-invalid-keyboard-focus: var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus)); - - --mod-textfield-icon-color-invalid: var(--mod-combobox-alert-icon-color); - - /* Settings for nested Picker Button component. */ - --mod-picker-button-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); - --mod-picker-button-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default)); - --mod-picker-button-background-color: var(--mod-combobox-background-color-default); - --mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled); - --mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled); - } - - .spectrum-Combobox--sizeS { - --spectrum-combobox-block-size: var(--spectrum-component-height-75); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-combobox-font-size: var(--spectrum-font-size-75); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-small); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); - } - - .spectrum-Combobox--sizeM { - --spectrum-combobox-block-size: var(--spectrum-component-height-100); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-combobox-font-size: var(--spectrum-font-size-100); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); - } - - .spectrum-Combobox--sizeL { - --spectrum-combobox-block-size: var(--spectrum-component-height-200); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-combobox-font-size: var(--spectrum-font-size-200); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); - } - - .spectrum-Combobox--sizeXL { - --spectrum-combobox-block-size: var(--spectrum-component-height-300); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-combobox-font-size: var(--spectrum-font-size-300); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); - } - - .spectrum-Combobox--quiet { - --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-quiet-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-combobox-button-inline-offset: calc((var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2) - (var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2)); - - &.spectrum-Combobox--sizeS { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small); - } - - &.spectrum-Combobox--sizeM { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); - } - - &.spectrum-Combobox--sizeL { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large); - } - - &.spectrum-Combobox--sizeXL { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large); - } - - /* Settings for nested Picker Button component. */ - --mod-picker-button-background-color-quiet: transparent; - --mod-picker-button-border-color-quiet: transparent; - } -} +@import "./spectrum-two.css"; diff --git a/components/contextualhelp/stories/template.js b/components/contextualhelp/stories/template.js index 1d0f478bd6b..822ab1e6769 100644 --- a/components/contextualhelp/stories/template.js +++ b/components/contextualhelp/stories/template.js @@ -7,6 +7,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-ContextualHelp", diff --git a/components/contextualhelp/themes/spectrum.css b/components/contextualhelp/themes/spectrum.css index 8feb207024b..3bac81e4497 100644 --- a/components/contextualhelp/themes/spectrum.css +++ b/components/contextualhelp/themes/spectrum.css @@ -11,21 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-ContextualHelp { - /* Layout Variables */ - --spectrum-contextual-help-padding: var(--spectrum-spacing-400); - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); - --spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300); - - /* Typography Variables */ - --spectrum-contextual-help-heading-size: var(--spectrum-contextual-help-title-size); - --spectrum-contextual-help-heading-color: var(--spectrum-heading-color); - --spectrum-contextual-help-body-color: var(--spectrum-body-color); - - /* Mobile styling */ - .spectrum--large & { - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); - } - } -} +@import "./spectrum-two.css"; diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js index 14ced13cfb8..c1f98495fae 100644 --- a/components/datepicker/stories/template.js +++ b/components/datepicker/stories/template.js @@ -8,6 +8,8 @@ import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-DatePicker", diff --git a/components/datepicker/themes/spectrum.css b/components/datepicker/themes/spectrum.css index 92a27fe60e3..3bac81e4497 100644 --- a/components/datepicker/themes/spectrum.css +++ b/components/datepicker/themes/spectrum.css @@ -11,63 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-DatePicker { - --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); - - --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100); - --spectrum-datepicker-border-radius-quiet: 0; - --spectrum-datepicker-border-width: var(--spectrum-border-width-100); - --spectrum-datepicker-min-width: var(--spectrum-field-width); - --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100); - - /* button */ - --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500); - --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); - --spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100)); - --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset)); - --spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100); - --spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100); - --spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100); - - /* focus */ - --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100); - --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100); - --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color); - --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75); - - /* color */ - --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default); - --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500); - --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color); - - /* dash */ - --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100); - --spectrum-datepicker-dash-color: var(--spectrum-neutral-content-color-default); - --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-datepicker-range-dash-marin-inline-start: calc(-0.5 * var(--spectrum-datepicker-dash-font-size)); - --spectrum-datepicker-range-dash-padding-top: 0; - - /* calculating widths */ - /* todo: if we add t-shirt sizing, this will be wrong ❤️ */ - --spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size)); - --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)); - --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); - - --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding)); - --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); - - --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); - --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); - --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); - --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)); - - /* padding inline end */ - --spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2)); - --spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset)); - --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2)); - --spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)); - } -} +@import "./spectrum-two.css"; diff --git a/components/dial/stories/template.js b/components/dial/stories/template.js index a14119d8e27..dd634c55af8 100644 --- a/components/dial/stories/template.js +++ b/components/dial/stories/template.js @@ -6,6 +6,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Dial", diff --git a/components/dial/themes/spectrum.css b/components/dial/themes/spectrum.css index 019770b0b46..51a1d7ae266 100644 --- a/components/dial/themes/spectrum.css +++ b/components/dial/themes/spectrum.css @@ -11,56 +11,14 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-75); - - --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-200); - --spectrum-dial-border-color-disabled: var(--spectrum-gray-200); - - --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); - --spectrum-dial-border-color: var(--spectrum-gray-700); - - --spectrum-dial-handle-marker-color-down: var(--spectrum-gray-800); - --spectrum-dial-border-color-down: var(--spectrum-gray-800); - --spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800); - --spectrum-dial-border-color-hover: var(--spectrum-gray-800); - - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); - --spectrum-dial-border-color-key-focus: var(--spectrum-gray-25); - - --spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); - --spectrum-dial-border-color-mouse-focus: var(--spectrum-gray-700); - - --spectrum-dial-min-max-tick-color: var(--spectrum-gray-600); - - --spectrum-dial-label-text-color: var(--spectrum-gray-700); - --spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700); - --spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400); - - --spectrum-dial-container-width: 48px; - - --spectrum-dial-handle-marker-width: 12px; - --spectrum-dial-handle-marker-height: 2px; - - --spectrum-dial-handle-marker-border-radius: 1px; - - --spectrum-dial-handle-size: 100%; - --spectrum-dial-min-height: 0; - --spectrum-dial-controls-min-height: 0; - - --spectrum-dial-min-max-tick-angles: 45deg; - - --spectrum-dial-width: 32px; - --spectrum-dial-height: 32px; - - --spectrum-dial-handle-border-size: var(--spectrum-border-width-200); - --spectrum-dial-label-text-size: var(--spectrum-font-size-75); - --spectrum-dial-label-line-height: var(--spectrum-line-height-200); - } - - .spectrum-Dial--small { - --spectrum-dial-width: 24px; - --spectrum-dial-height: 24px; + --spectrum-dial-background-color-default: var(--spectrum-gray-100); + --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300); + --spectrum-dial-border-color-disabled: var(--spectrum-gray-300); + --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); + --spectrum-dial-border-color-key-focus: var(--spectrum-gray-50); } } diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js index 3d435b45ba2..c52e6cebc43 100644 --- a/components/dialog/stories/template.js +++ b/components/dialog/stories/template.js @@ -8,6 +8,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Dialog", diff --git a/components/dialog/themes/spectrum.css b/components/dialog/themes/spectrum.css index efb0254bc14..3bac81e4497 100644 --- a/components/dialog/themes/spectrum.css +++ b/components/dialog/themes/spectrum.css @@ -11,29 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Dialog { - /* The font-size of the fullscreen dialog header */ - --spectrum-dialog-fullscreen-header-text-size: 28px; - --spectrum-dialog-min-inline-size: 288px; - --spectrum-dialog-confirm-small-width: 400px; - --spectrum-dialog-confirm-medium-width: 480px; - --spectrum-dialog-confirm-large-width: 640px; - --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); - --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); - --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --spectrum-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100); - --spectrum-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100); - --spectrum-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - - --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --spectrum-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1); - --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); - --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100); - --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); - --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50); - } -} +@import "./spectrum-two.css"; diff --git a/components/divider/index.css b/components/divider/index.css index 5726397dfc8..d27a34d7370 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -40,6 +40,19 @@ border: none; border-width: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + + &.spectrum-Divider--sizeS { + --spectrum-divider-background-color: var(--spectrum-divider-background-color-small); + } + + &, + &.spectrum-Divider--sizeM { + --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); + } + + &.spectrum-Divider--sizeL { + --spectrum-divider-background-color: var(--spectrum-divider-background-color-large); + } } /* static white variant colors */ diff --git a/components/divider/stories/template.js b/components/divider/stories/template.js index 8b57e9f04dd..80b272796a0 100644 --- a/components/divider/stories/template.js +++ b/components/divider/stories/template.js @@ -4,6 +4,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize, lowerCase, upperCase } from "lodash-es"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Divider", diff --git a/components/divider/themes/spectrum-two.css b/components/divider/themes/spectrum-two.css index 29161b27294..23b7399bfb5 100644 --- a/components/divider/themes/spectrum-two.css +++ b/components/divider/themes/spectrum-two.css @@ -30,18 +30,15 @@ &.spectrum-Divider--sizeS { --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-small, var(--spectrum-gray-200)); } &, &.spectrum-Divider--sizeM { --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium, var(--spectrum-gray-200)); } &.spectrum-Divider--sizeL { --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-large, var(--spectrum-gray-800)); } } } diff --git a/components/divider/themes/spectrum.css b/components/divider/themes/spectrum.css index 889b0741c96..e7bb5b1763a 100644 --- a/components/divider/themes/spectrum.css +++ b/components/divider/themes/spectrum.css @@ -11,37 +11,12 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Divider { /* background colors */ --spectrum-divider-background-color-small: var(--spectrum-gray-300); --spectrum-divider-background-color-medium: var(--spectrum-gray-300); - --spectrum-divider-background-color-large: var(--spectrum-gray-800); - - /* static white background colors */ - --spectrum-divider-background-color-small-static-white: var(--spectrum-transparent-white-300); - --spectrum-divider-background-color-medium-static-white: var(--spectrum-transparent-white-300); - --spectrum-divider-background-color-large-static-white: var(--spectrum-transparent-white-800); - - /* static black background colors */ - --spectrum-divider-background-color-small-static-black: var(--spectrum-transparent-black-300); - --spectrum-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300); - --spectrum-divider-background-color-large-static-black: var(--spectrum-transparent-black-800); - - &.spectrum-Divider--sizeS { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-small, var(--spectrum-gray-300)); - } - - &, - &.spectrum-Divider--sizeM { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium, var(--spectrum-gray-300)); - } - - &.spectrum-Divider--sizeL { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-large, var(--spectrum-gray-800)); - } } } diff --git a/components/dropindicator/stories/template.js b/components/dropindicator/stories/template.js index a7d83f88024..de7a7e5bdb9 100644 --- a/components/dropindicator/stories/template.js +++ b/components/dropindicator/stories/template.js @@ -4,6 +4,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-DropIndicator", diff --git a/components/dropindicator/themes/spectrum.css b/components/dropindicator/themes/spectrum.css index b0ee861892f..3bac81e4497 100644 --- a/components/dropindicator/themes/spectrum.css +++ b/components/dropindicator/themes/spectrum.css @@ -11,11 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-DropIndicator { - --spectrum-dropindicator-border-color: var(--spectrum-dropindicator-color); - --spectrum-dropindicator-circle-color: var(--spectrum-dropindicator-color); - --spectrum-dropindicator-border-size: var(--spectrum-border-width-200); - --spectrum-dropindicator-circle-size: 12px; - } -} +@import "./spectrum-two.css"; diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js index 38264d4ab39..61be7a81568 100644 --- a/components/dropzone/stories/template.js +++ b/components/dropzone/stories/template.js @@ -8,6 +8,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ( { diff --git a/components/dropzone/themes/spectrum.css b/components/dropzone/themes/spectrum.css index c68795e37a1..3bcef64fe46 100644 --- a/components/dropzone/themes/spectrum.css +++ b/components/dropzone/themes/spectrum.css @@ -11,52 +11,10 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-DropZone { - --spectrum-drop-zone-padding: var(--spectrum-spacing-400); - --spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75); - - --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); - --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100); --spectrum-drop-zone-border-color: var(--spectrum-gray-300); - - --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); - --spectrum-drop-zone-heading-line-height: var(--spectrum-heading-line-height); - --spectrum-drop-zone-heading-color: var(--spectrum-heading-color); - - --spectrum-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height); - --spectrum-drop-zone-body-color: var(--spectrum-body-color); - - --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); - --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); - --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color); - - /* Filled styles */ - --spectrum-drop-zone-content-height: var(--spectrum-component-height-300); - --spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width); - --spectrum-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - - --spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style); - --spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300); - --spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100); - - --spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-content-color: var(--spectrum-white); - - /* cjk language support */ - --spectrum-drop-zone-heading-font-size-cjk: var(--spectrum-drop-zone-cjk-title-size); } } diff --git a/components/fieldgroup/stories/template.js b/components/fieldgroup/stories/template.js index 3a379c7c7a8..da04757bc2c 100644 --- a/components/fieldgroup/stories/template.js +++ b/components/fieldgroup/stories/template.js @@ -10,6 +10,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ( { diff --git a/components/fieldgroup/themes/spectrum.css b/components/fieldgroup/themes/spectrum.css index 6f37b19cfde..3bac81e4497 100644 --- a/components/fieldgroup/themes/spectrum.css +++ b/components/fieldgroup/themes/spectrum.css @@ -11,9 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-FieldGroup { - --spectrum-fieldgroup-margin: var(--spectrum-spacing-300); - --spectrum-fieldgroup-readonly-delimiter: "\002c"; - } -} +@import "./spectrum-two.css"; diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js index 0a43eb4b7c0..49050025c78 100644 --- a/components/fieldlabel/stories/template.js +++ b/components/fieldlabel/stories/template.js @@ -7,6 +7,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-FieldLabel", diff --git a/components/fieldlabel/themes/spectrum.css b/components/fieldlabel/themes/spectrum.css index 33d6b113752..3bac81e4497 100644 --- a/components/fieldlabel/themes/spectrum.css +++ b/components/fieldlabel/themes/spectrum.css @@ -11,64 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-FieldLabel { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default); - - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); - - --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight); - --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100); - --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100); - - &.spectrum-FieldLabel--sizeS { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100); - - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); - } - - &, - &.spectrum-FieldLabel--sizeM { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); - } - - &.spectrum-FieldLabel--sizeL { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100); - - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); - } - - &.spectrum-FieldLabel--sizeXL { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200); - - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); - } - } -} +@import "./spectrum-two.css"; diff --git a/components/floatingactionbutton/stories/template.js b/components/floatingactionbutton/stories/template.js index aafe7eaa893..5c940570ba7 100644 --- a/components/floatingactionbutton/stories/template.js +++ b/components/floatingactionbutton/stories/template.js @@ -4,6 +4,8 @@ import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-FloatingActionButton", diff --git a/components/floatingactionbutton/themes/spectrum.css b/components/floatingactionbutton/themes/spectrum.css index c0788173e4c..3bac81e4497 100644 --- a/components/floatingactionbutton/themes/spectrum.css +++ b/components/floatingactionbutton/themes/spectrum.css @@ -11,36 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-FloatingActionButton { - --spectrum-floating-action-button-size: var(--spectrum-component-height-200); - --spectrum-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200); - --spectrum-floating-action-button-margin: var(--spectrum-spacing-200); - --spectrum-floating-action-button-drop-shadow-x: var(--spectrum-drop-shadow-x); - - --spectrum-floating-action-button-focus-ring-width: var(--spectrum-focus-indicator-thickness); - --spectrum-floating-action-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-floating-action-button-focus-ring-color: var(--spectrum-focus-indicator-color); - - --spectrum-floating-action-button-background-color: var(--spectrum-accent-background-color-default); - --spectrum-floating-action-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-floating-action-button-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-accent-background-color-key-focus); - --spectrum-floating-action-button-icon-color: var(--spectrum-white); - --spectrum-floating-action-button-icon-color-hover: var(--spectrum-white); - --spectrum-floating-action-button-icon-color-down: var(--spectrum-white); - --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-white); - } - - .spectrum-FloatingActionButton--secondary { - --spectrum-floating-action-button-background-color: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-background-color-hover: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-background-color-down: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-background-color-key-focus: var(--spectrum-background-layer-2-color); - --spectrum-floating-action-button-icon-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-floating-action-button-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-floating-action-button-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-floating-action-button-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - } -} +@import "./spectrum-two.css"; diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js index a14caaf103d..e144c270894 100644 --- a/components/helptext/stories/template.js +++ b/components/helptext/stories/template.js @@ -7,6 +7,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ( { diff --git a/components/helptext/themes/spectrum.css b/components/helptext/themes/spectrum.css index a00a844a18c..3bac81e4497 100644 --- a/components/helptext/themes/spectrum.css +++ b/components/helptext/themes/spectrum.css @@ -11,76 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-HelpText { - --spectrum-helptext-line-height: var(--spectrum-line-height-100); - --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-disabled-content-color: var(--spectrum-disabled-content-color); - - &.spectrum-HelpText--neutral { - --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - } - - &.spectrum-HelpText--negative { - --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900); - --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900); - } - - &.is-disabled { - --spectrum-helptext-content-color-default: var(--spectrum-helptext-disabled-content-color); - --spectrum-helptext-icon-color-default: var(--spectrum-helptext-disabled-content-color); - } - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-helptext-line-height-cjk: var(--spectrum-cjk-line-height-100); - } - } - - .spectrum-HelpText--sizeS { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - } - - .spectrum-HelpText--sizeM { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - } - - .spectrum-HelpText--sizeL { - --spectrum-helptext-min-height: var(--spectrum-component-height-100); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-helptext-font-size: var(--spectrum-font-size-100); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - } - - .spectrum-HelpText--sizeXL { - --spectrum-helptext-min-height: var(--spectrum-component-height-200); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-helptext-font-size: var(--spectrum-font-size-200); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - } -} +@import "./spectrum-two.css"; diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js index daca1567af2..d379684eff2 100644 --- a/components/icon/stories/template.js +++ b/components/icon/stories/template.js @@ -6,6 +6,8 @@ import { unsafeSVG } from "lit/directives/unsafe-svg.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; /** * @typedef { keyof import("./icon.stories.js").default.args } IconArgs diff --git a/components/icon/themes/spectrum.css b/components/icon/themes/spectrum.css index d7c9fa22dbb..3bac81e4497 100644 --- a/components/icon/themes/spectrum.css +++ b/components/icon/themes/spectrum.css @@ -11,431 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Icon { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-100); - } - - /* XXS icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */ - .spectrum-Icon--sizeXXS { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxs); - } - - .spectrum-Icon--sizeXS { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-50); - } - - .spectrum-Icon--sizeS { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-75); - } - - .spectrum-Icon--sizeL { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-200); - } - - .spectrum-Icon--sizeXL { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-300); - } - - /* XXL icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */ - .spectrum-Icon--sizeXXL { - --spectrum-icon-size: var(--spectrum-workflow-icon-size-xxl); - } - - /* Chevron */ - .spectrum-UIIcon-ChevronRight50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - } - - .spectrum-UIIcon-ChevronRight75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - } - - .spectrum-UIIcon-ChevronRight100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - } - - .spectrum-UIIcon-ChevronRight200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - } - - .spectrum-UIIcon-ChevronRight300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - } - - .spectrum-UIIcon-ChevronRight400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - } - - .spectrum-UIIcon-ChevronRight500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - } - - .spectrum-UIIcon-ChevronDown50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ChevronDown75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ChevronDown100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ChevronDown200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ChevronDown300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ChevronDown400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ChevronDown500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ChevronLeft50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ChevronLeft75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ChevronLeft100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ChevronLeft200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ChevronLeft300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ChevronLeft400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ChevronLeft500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ChevronUp50 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-50); - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-UIIcon-ChevronUp75 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-75); - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-UIIcon-ChevronUp100 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-100); - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-UIIcon-ChevronUp200 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-200); - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-UIIcon-ChevronUp300 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-300); - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-UIIcon-ChevronUp400 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-400); - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-UIIcon-ChevronUp500 { - --spectrum-icon-size: var(--spectrum-chevron-icon-size-500); - --spectrum-icon-transform: rotate(270deg); - } - - /* Arrow */ - .spectrum-UIIcon-ArrowRight75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - } - - .spectrum-UIIcon-ArrowRight100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - } - - .spectrum-UIIcon-ArrowRight200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - } - - .spectrum-UIIcon-ArrowRight300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - } - - .spectrum-UIIcon-ArrowRight400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - } - - .spectrum-UIIcon-ArrowRight500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - } - - .spectrum-UIIcon-ArrowRight600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - } - - .spectrum-UIIcon-ArrowDown75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ArrowDown100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ArrowDown200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ArrowDown300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ArrowDown400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ArrowDown500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ArrowDown600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - --spectrum-icon-transform: rotate(90deg); - } - - .spectrum-UIIcon-ArrowLeft75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ArrowLeft100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ArrowLeft200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ArrowLeft300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ArrowLeft400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ArrowLeft500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ArrowLeft600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - --spectrum-icon-transform: rotate(180deg); - } - - .spectrum-UIIcon-ArrowUp75 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-75); - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-UIIcon-ArrowUp100 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-100); - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-UIIcon-ArrowUp200 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-200); - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-UIIcon-ArrowUp300 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-300); - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-UIIcon-ArrowUp400 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-400); - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-UIIcon-ArrowUp500 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-500); - --spectrum-icon-transform: rotate(270deg); - } - - .spectrum-UIIcon-ArrowUp600 { - --spectrum-icon-size: var(--spectrum-arrow-icon-size-600); - --spectrum-icon-transform: rotate(270deg); - } - - /* Checkmark */ - .spectrum-UIIcon-Checkmark50 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-50); - } - - .spectrum-UIIcon-Checkmark75 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-75); - } - - .spectrum-UIIcon-Checkmark100 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-100); - } - - .spectrum-UIIcon-Checkmark200 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-200); - } - - .spectrum-UIIcon-Checkmark300 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-300); - } - - .spectrum-UIIcon-Checkmark400 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-400); - } - - .spectrum-UIIcon-Checkmark500 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-500); - } - - .spectrum-UIIcon-Checkmark600 { - --spectrum-icon-size: var(--spectrum-checkmark-icon-size-600); - } - - /* Dash */ - .spectrum-UIIcon-Dash50 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-50); - } - - .spectrum-UIIcon-Dash75 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-75); - } - - .spectrum-UIIcon-Dash100 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-100); - } - - .spectrum-UIIcon-Dash200 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-200); - } - - .spectrum-UIIcon-Dash300 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-300); - } - - .spectrum-UIIcon-Dash400 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-400); - } - - .spectrum-UIIcon-Dash500 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-500); - } - - .spectrum-UIIcon-Dash600 { - --spectrum-icon-size: var(--spectrum-dash-icon-size-600); - } - - /* Cross */ - .spectrum-UIIcon-Cross75 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-75); - } - - .spectrum-UIIcon-Cross100 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-100); - } - - .spectrum-UIIcon-Cross200 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-200); - } - - .spectrum-UIIcon-Cross300 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-300); - } - - .spectrum-UIIcon-Cross400 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-400); - } - - .spectrum-UIIcon-Cross500 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-500); - } - - .spectrum-UIIcon-Cross600 { - --spectrum-icon-size: var(--spectrum-cross-icon-size-600); - } - - /* Corner Triangle */ - .spectrum-UIIcon-CornerTriangle75 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-75); - } - - .spectrum-UIIcon-CornerTriangle100 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-100); - } - - .spectrum-UIIcon-CornerTriangle200 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-200); - } - - .spectrum-UIIcon-CornerTriangle300 { - --spectrum-icon-size: var(--spectrum-corner-triangle-icon-size-300); - } - - /* Asterisk */ - .spectrum-UIIcon-Asterisk75 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-75); - } - - .spectrum-UIIcon-Asterisk100 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-100); - } - - .spectrum-UIIcon-Asterisk200 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-200); - } - - .spectrum-UIIcon-Asterisk300 { - --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300); - } -} +@import "./spectrum-two.css"; diff --git a/components/illustratedmessage/stories/template.js b/components/illustratedmessage/stories/template.js index 46876df3505..f867b0ba783 100644 --- a/components/illustratedmessage/stories/template.js +++ b/components/illustratedmessage/stories/template.js @@ -6,6 +6,8 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-IllustratedMessage", diff --git a/components/illustratedmessage/themes/spectrum.css b/components/illustratedmessage/themes/spectrum.css index ad6c5502c5f..3bac81e4497 100644 --- a/components/illustratedmessage/themes/spectrum.css +++ b/components/illustratedmessage/themes/spectrum.css @@ -11,39 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-IllustratedMessage { - /* Size & Spacing */ - --spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width); - --spectrum-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width); - --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400); - --spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75); - - /* Illustration */ - --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color); - --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color); - - /* Title */ - --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size); - --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height); - --spectrum-illustrated-message-title-color: var(--spectrum-heading-color); - - /* Description */ - --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size); - --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height); - --spectrum-illustrated-message-description-color: var(--spectrum-body-color); - - /* CJK (Chinese, Japanese, and Korean) language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); - } - } -} +@import "./spectrum-two.css"; diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js index 04c0371b531..83669cd85e8 100644 --- a/components/infieldbutton/stories/template.js +++ b/components/infieldbutton/stories/template.js @@ -4,6 +4,8 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-InfieldButton", diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css index 1c9b21eda7f..9a8f6b4b719 100644 --- a/components/infieldbutton/themes/spectrum.css +++ b/components/infieldbutton/themes/spectrum.css @@ -11,110 +11,13 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-InfieldButton { - --spectrum-infield-button-border-width: var(--spectrum-border-width-100); - --spectrum-infield-button-border-color: inherit; - - --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-infield-button-border-radius-reset: 0; - - /* Have to call these out specifically due to Express differences */ - --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); - --spectrum-infield-button-background-color: var(--spectrum-gray-75); --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); --spectrum-infield-button-background-color-down: var(--spectrum-gray-300); --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); - - /* Medium size is the default */ - --spectrum-infield-button-height: var(--spectrum-component-height-100); - --spectrum-infield-button-width: var(--spectrum-component-height-100); - --spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); - - --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill); - --spectrum-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill); - --spectrum-infield-button-fill-padding: 0px; - --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium); - --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); - --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium); - - --spectrum-infield-button-animation-duration: var(--spectrum-animation-duration-100); - - --spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default); - --spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-infield-button-fill-justify-content: center; - - &:disabled { - --spectrum-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color)); - --spectrum-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); - --spectrum-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --spectrum-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color)); - - --spectrum-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --spectrum-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --spectrum-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --spectrum-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color)); - } - - &.spectrum-InfieldButton--sizeS { - --spectrum-infield-button-height: var(--spectrum-component-height-75); - --spectrum-infield-button-width: var(--spectrum-component-height-75); - --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small); - --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); - --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small); - } - - &.spectrum-InfieldButton--sizeL { - --spectrum-infield-button-height: var(--spectrum-component-height-200); - --spectrum-infield-button-width: var(--spectrum-component-height-200); - --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large); - --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); - --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large); - } - - &.spectrum-InfieldButton--sizeXL { - --spectrum-infield-button-height: var(--spectrum-component-height-300); - --spectrum-infield-button-width: var(--spectrum-component-height-300); - --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large); - --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); - --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large); - } - - &.spectrum-InfieldButton--top, - &.spectrum-InfieldButton--bottom { - --spectrum-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium)); - - &.spectrum-InfieldButton--sizeS { - --spectrum-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small)); - } - - &.spectrum-InfieldButton--sizeL { - --spectrum-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large)); - } - - &.spectrum-InfieldButton--sizeXL { - --spectrum-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large)); - } - } - - &.spectrum-InfieldButton--quiet { - --spectrum-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent); - --spectrum-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent); - --spectrum-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent); - --spectrum-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent); - - --spectrum-infield-border-color: var(--mod-infield-border-color-quiet, transparent); - --spectrum-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0); - - &:disabled { - --spectrum-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent); - --spectrum-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent); - } - } } } diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js index 3fa78596a0d..d5a6650a8c5 100644 --- a/components/inlinealert/stories/template.js +++ b/components/inlinealert/stories/template.js @@ -5,6 +5,8 @@ import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-InLineAlert", diff --git a/components/inlinealert/themes/spectrum.css b/components/inlinealert/themes/spectrum.css index 7048accfd06..3bac81e4497 100644 --- a/components/inlinealert/themes/spectrum.css +++ b/components/inlinealert/themes/spectrum.css @@ -11,41 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-InLineAlert { - /* Font */ - --spectrum-inlinealert-heading-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-inlinealert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-inlinealert-heading-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs); - --spectrum-inlinealert-heading-line-height: var(--spectrum-heading-line-height); - - --spectrum-inlinealert-content-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-inlinealert-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-inlinealert-content-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s); - --spectrum-inlinealert-content-line-height: var(--spectrum-body-line-height); - - /* Size */ - --spectrum-inlinealert-border-width: var(--spectrum-border-width-200); - --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100); - --spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width); - --spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50); - - /* Spacing */ - --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400); - --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400); - --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300); - - /* Color */ - --spectrum-inlinealert-background-color: var(--spectrum-background-layer-2-color); - --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color); - --spectrum-inlinealert-header-color: var(--spectrum-heading-color); - --spectrum-inlinealert-content-color: var(--spectrum-body-color); - --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color); - --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color); - --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color); - --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color); - } -} +@import "./spectrum-two.css"; diff --git a/components/link/stories/template.js b/components/link/stories/template.js index 754bbe88250..56da13408d4 100644 --- a/components/link/stories/template.js +++ b/components/link/stories/template.js @@ -4,6 +4,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Link", diff --git a/components/link/themes/spectrum.css b/components/link/themes/spectrum.css index cd314782292..3bac81e4497 100644 --- a/components/link/themes/spectrum.css +++ b/components/link/themes/spectrum.css @@ -11,24 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Link { - --spectrum-link-animation-duration: var(--spectrum-animation-duration-100); - - /* Colors */ - /* Primary */ - --spectrum-link-text-color-primary-default: var(--spectrum-accent-content-color-default); - --spectrum-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover); - --spectrum-link-text-color-primary-active: var(--spectrum-accent-content-color-down); - --spectrum-link-text-color-primary-focus: var(--spectrum-accent-content-color-key-focus); - - /* Secondary */ - --spectrum-link-text-color-secondary-default: var(--spectrum-neutral-content-color-default); - --spectrum-link-text-color-secondary-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-link-text-color-secondary-active: var(--spectrum-neutral-content-color-down); - --spectrum-link-text-color-secondary-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-link-text-color-white: var(--spectrum-white); - --spectrum-link-text-color-black: var(--spectrum-black); - } -} +@import "./spectrum-two.css"; diff --git a/components/logicbutton/stories/template.js b/components/logicbutton/stories/template.js index 738a69eda3a..a09dae317bb 100644 --- a/components/logicbutton/stories/template.js +++ b/components/logicbutton/stories/template.js @@ -2,6 +2,8 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-LogicButton", diff --git a/components/logicbutton/themes/spectrum.css b/components/logicbutton/themes/spectrum.css index 4439b49c312..3bac81e4497 100644 --- a/components/logicbutton/themes/spectrum.css +++ b/components/logicbutton/themes/spectrum.css @@ -11,39 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-LogicButton { - --spectrum-logic-button-height: 24px; - --spectrum-logic-button-padding: var(--spectrum-component-edge-to-text-50); - --spectrum-logic-button-font-size: var(--spectrum-font-size-100); - --spectrum-logic-button-font-weight: var(--spectrum-bold-font-weight); - - --spectrum-logic-button-border-width: var(--spectrum-border-width-200); - --spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100); - - --spectrum-logic-button-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --spectrum-logic-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-logic-button-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-logic-button-and-text-color: var(--spectrum-white); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - - --spectrum-logic-button-or-text-color: var(--spectrum-white); - - &:disabled, - &.is-disabled { - --spectrum-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-gray-100)); - --spectrum-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-gray-100)); - --spectrum-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-gray-500)); - --spectrum-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-gray-100)); - --spectrum-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-gray-100)); - - --spectrum-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-gray-100)); - --spectrum-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-gray-100)); - --spectrum-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-gray-500)); - --spectrum-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-gray-100)); - --spectrum-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-gray-100)); - } - } -} +@import "./spectrum-two.css"; diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js index 3b95de67dc4..5c5d46f7201 100644 --- a/components/menu/stories/template.js +++ b/components/menu/stories/template.js @@ -11,6 +11,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; /** * Get the tray submenu back arrow name with scale number (defined in design spec). diff --git a/components/menu/themes/spectrum.css b/components/menu/themes/spectrum.css index 276cc73f341..3bac81e4497 100644 --- a/components/menu/themes/spectrum.css +++ b/components/menu/themes/spectrum.css @@ -11,175 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Menu { - --spectrum-menu-item-min-height: var(--spectrum-component-height-100); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); - - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100); - - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75); - - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100); - - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); - - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); - - --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); - --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); - - --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100); - --spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description); - --spectrum-menu-item-focus-indicator-width: var(--spectrum-border-width-200); - --spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100); - - --spectrum-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-menu-item-description-line-height: var(--spectrum-line-height-100); - --spectrum-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100); - - --spectrum-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-menu-item-description-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-menu-section-header-line-height: var(--spectrum-line-height-100); - --spectrum-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-menu-section-header-color: var(--spectrum-gray-900); - --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900); - - --spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900); - --spectrum-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); - --spectrum-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); - --spectrum-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); - - --spectrum-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - --spectrum-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - --spectrum-menu-checkmark-display-hidden: none; - --spectrum-menu-checkmark-display-shown: block; - --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown); - - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); - - /* "one" icon: chevron + additional icon (we don't count the chevron as an icon because it HAS to be there for a collapsible) */ - --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-text-to-control) + var(--spectrum-menu-item-icon-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))); - - /* "no" icon: just the chevron (we're not counting it because it HAS to be there for a collapsible) */ - --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))); - } - - .spectrum-Menu--sizeS { - --spectrum-menu-item-min-height: var(--spectrum-component-height-75); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75); - - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); - - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75); - - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50); - - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75); - - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); - - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); - - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); - } - - .spectrum-Menu--sizeL { - --spectrum-menu-item-min-height: var(--spectrum-component-height-200); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200); - - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); - - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200); - - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100); - - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200); - - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); - - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); - - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); - } - - .spectrum-Menu--sizeXL { - --spectrum-menu-item-min-height: var(--spectrum-component-height-300); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300); - - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); - - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300); - - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200); - - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300); - - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); - - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); - - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); - } -} +@import "./spectrum-two.css"; diff --git a/components/miller/stories/template.js b/components/miller/stories/template.js index 66caafe96fe..41bf4741418 100644 --- a/components/miller/stories/template.js +++ b/components/miller/stories/template.js @@ -3,6 +3,8 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-MillerColumns", diff --git a/components/miller/themes/spectrum.css b/components/miller/themes/spectrum.css index ae84ab33bc3..3bac81e4497 100644 --- a/components/miller/themes/spectrum.css +++ b/components/miller/themes/spectrum.css @@ -11,11 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-MillerColumns { - --spectrum-millercolumns-inline-size: 272px; - --spectrum-millercolumns-padding: var(--spectrum-spacing-100); - --spectrum-millercolumns-margin-inline-start: var(--spectrum-spacing-100); - --spectrum-millercolumns-margin-inline-end: var(--spectrum-spacing-100); - } -} +@import "./spectrum-two.css"; diff --git a/components/modal/stories/template.js b/components/modal/stories/template.js index df39a02d298..1cd94a45343 100644 --- a/components/modal/stories/template.js +++ b/components/modal/stories/template.js @@ -5,6 +5,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Modal", diff --git a/components/modal/themes/spectrum.css b/components/modal/themes/spectrum.css index 7d757a60f6b..8052b849d5b 100644 --- a/components/modal/themes/spectrum.css +++ b/components/modal/themes/spectrum.css @@ -11,21 +11,10 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Modal { - /* Bug: this must be 0ms, not 0 */ - --spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0); - - /* Distance between top and bottom of modal and edge of window for fullscreen modal */ - --spectrum-modal-fullscreen-margin: 32px; - --spectrum-modal-max-height: 90vh; - --spectrum-modal-max-width: 90%; - --spectrum-modal-background-color: var(--spectrum-gray-100); - --spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100); - --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500); - --spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200); - --spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100); } } diff --git a/components/opacitycheckerboard/stories/template.js b/components/opacitycheckerboard/stories/template.js index 0d6692e9da6..4dfad8815f0 100644 --- a/components/opacitycheckerboard/stories/template.js +++ b/components/opacitycheckerboard/stories/template.js @@ -4,6 +4,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-OpacityCheckerboard", diff --git a/components/opacitycheckerboard/themes/spectrum.css b/components/opacitycheckerboard/themes/spectrum.css index edd0ac9eeb6..3bac81e4497 100644 --- a/components/opacitycheckerboard/themes/spectrum.css +++ b/components/opacitycheckerboard/themes/spectrum.css @@ -11,11 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-OpacityCheckerboard { - --spectrum-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark); - --spectrum-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light); - --spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); - --spectrum-opacity-checkerboard-position: left top; - } -} +@import "./spectrum-two.css"; diff --git a/components/pagination/stories/template.js b/components/pagination/stories/template.js index 406572661d3..533ff74bbae 100644 --- a/components/pagination/stories/template.js +++ b/components/pagination/stories/template.js @@ -7,6 +7,8 @@ import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Pagination", diff --git a/components/pagination/themes/spectrum.css b/components/pagination/themes/spectrum.css index 13bb31c8578..3bac81e4497 100644 --- a/components/pagination/themes/spectrum.css +++ b/components/pagination/themes/spectrum.css @@ -11,16 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Pagination { - --spectrum-pagination-counter-margin-inline-start: var(--spectrum-pagination-item-inline-spacing); - --spectrum-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing); - --spectrum-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-pagination-counter-font-size: var(--spectrum-font-size-100); - --spectrum-pagination-counter-line-height: var(--spectrum-line-height-100); - - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - } - } -} +@import "./spectrum-two.css"; diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index d0912992d25..ed4699f3d1a 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -10,6 +10,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Picker = ({ rootClass = "spectrum-Picker", diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css index c78427f5cc1..dbeefb14148 100644 --- a/components/picker/themes/spectrum.css +++ b/components/picker/themes/spectrum.css @@ -11,6 +11,8 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Picker { --spectrum-picker-background-color-default: var(--spectrum-gray-75); @@ -19,144 +21,5 @@ --spectrum-picker-background-color-hover: var(--spectrum-gray-200); --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); - - --spectrum-picker-border-color-default: var(--spectrum-gray-500); - --spectrum-picker-border-color-default-open: var(--spectrum-gray-500); - --spectrum-picker-border-color-hover: var(--spectrum-gray-600); - --spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); - --spectrum-picker-border-color-active: var(--spectrum-gray-700); - --spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); - - --spectrum-picker-border-width: var(--spectrum-border-width-100); - - /* font */ - --spectrum-picker-font-size: var(--spectrum-font-size-100); - --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); - --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style); - --spectrum-picker-line-height: var(--spectrum-line-height-100); - - /* height */ - --spectrum-picker-block-size: var(--spectrum-component-height-100); - --spectrum-picker-inline-size: var(--spectrum-field-width); - - /* border */ - --spectrum-picker-border-radius: var(--spectrum-corner-radius-100); - - /* spacing */ - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); - --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component); - - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); - --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); - } - - /* animation */ - --spectrum-picker-animation-duration: var(--spectrum-animation-duration-100); - - /* color */ - --spectrum-picker-font-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus); - --spectrum-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); - --spectrum-picker-font-color-active: var(--spectrum-neutral-content-color-down); - --spectrum-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-picker-icon-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus); - --spectrum-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); - --spectrum-picker-icon-color-active: var(--spectrum-neutral-content-color-down); - --spectrum-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-picker-border-color-error-default: var(--spectrum-negative-border-color-default); - --spectrum-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus); - --spectrum-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover); - --spectrum-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover); - --spectrum-picker-border-color-error-active: var(--spectrum-negative-border-color-down); - --spectrum-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus); - - --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color); - - --spectrum-picker-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - - /* special cases for focus indicator */ - --spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); - } - - .spectrum-Picker--sizeS { - --spectrum-picker-font-size: var(--spectrum-font-size-75); - --spectrum-picker-block-size: var(--spectrum-component-height-75); - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small); - } - } - - .spectrum-Picker--sizeL { - --spectrum-picker-font-size: var(--spectrum-font-size-200); - --spectrum-picker-block-size: var(--spectrum-component-height-200); - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large); - } - } - - .spectrum-Picker--sizeXL { - --spectrum-picker-font-size: var(--spectrum-font-size-300); - --spectrum-picker-block-size: var(--spectrum-component-height-300); - --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large); - } } } diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js index 2c60d260e44..8ac9b12d4fc 100644 --- a/components/pickerbutton/stories/template.js +++ b/components/pickerbutton/stories/template.js @@ -6,6 +6,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ id, diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css index 883f30f75e9..55843a06a55 100644 --- a/components/pickerbutton/themes/spectrum.css +++ b/components/pickerbutton/themes/spectrum.css @@ -11,90 +11,13 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-PickerButton { --spectrum-picker-button-background-color: var(--spectrum-gray-75); --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); --spectrum-picker-button-background-color-down: var(--spectrum-gray-300); --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); - - --spectrum-picker-button-border-color: inherit; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-picker-button-border-radius-rounded-sided: 0; - --spectrum-picker-button-border-radius-sided: 0; - --spectrum-picker-button-border-width: var(--spectrum-border-width-100); - - --spectrum-picker-button-height: var(--spectrum-component-height-100); - --spectrum-picker-button-width: var(--spectrum-component-height-100); - --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50); - - --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); - - --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200); - - --spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default); - --spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-picker-button-font-color: var(--spectrum-neutral-content-color-default); - --spectrum-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-picker-button-font-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-picker-button-font-style: var(--spectrum-default-font-style); - --spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-picker-button-font-size: var(--spectrum-font-size-100); - - --spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100); - - --spectrum-picker-button-background-color-disabled: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color)); - --spectrum-picker-button-background-color-hover-disabled: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); - --spectrum-picker-button-background-color-down-disabled: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --spectrum-picker-button-border-color-disabled: var(--mod-picker-button-border-color-disabled, var(--spectrum-disabled-background-color)); - - --spectrum-picker-button-font-color-disabled: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color)); - --spectrum-picker-button-font-color-hover-disabled: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color)); - --spectrum-picker-button-font-color-down-disabled: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color)); - - --spectrum-picker-button-icon-color-disabled: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --spectrum-picker-button-icon-color-hover-disabled: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --spectrum-picker-button-icon-color-down-disabled: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - - &.spectrum-PickerButton--quiet { - --spectrum-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent); - --spectrum-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent); - --spectrum-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent); - --spectrum-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent); - - --spectrum-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent); - } - - &.spectrum-PickerButton--sizeS { - --spectrum-picker-button-height: var(--spectrum-component-height-75); - --spectrum-picker-button-width: var(--spectrum-component-height-75); - --spectrum-picker-button-label-padding: var(--spectrum-spacing-75); - --spectrum-picker-button-font-size: var(--spectrum-font-size-75); - --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75); - } - - &.spectrum-PickerButton--sizeL { - --spectrum-picker-button-height: var(--spectrum-component-height-200); - --spectrum-picker-button-width: var(--spectrum-component-height-200); - --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200); - --spectrum-picker-button-font-size: var(--spectrum-font-size-200); - --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200); - } - - &.spectrum-PickerButton--sizeXL { - --spectrum-picker-button-height: var(--spectrum-component-height-300); - --spectrum-picker-button-width: var(--spectrum-component-height-300); - --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300); - --spectrum-picker-button-font-size: var(--spectrum-font-size-300); - --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300); - } } } diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js index ba552a8ba7b..3d95a4af3d5 100644 --- a/components/popover/stories/template.js +++ b/components/popover/stories/template.js @@ -7,6 +7,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Popover", diff --git a/components/popover/themes/spectrum.css b/components/popover/themes/spectrum.css index 4cc1b8a5c19..3bac81e4497 100644 --- a/components/popover/themes/spectrum.css +++ b/components/popover/themes/spectrum.css @@ -11,36 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Popover { - --spectrum-popover-border-width: var(--spectrum-border-width-100); - - /* animation distance is equal to and responsible for popover offset */ - --spectrum-popover-animation-distance: var(--spectrum-spacing-100); - - --spectrum-popover-background-color: var(--spectrum-background-layer-2-color); - --spectrum-popover-border-color: var(--spectrum-gray-400); - - /* popover inner padding */ - --spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area); - - /* popover drop shadow */ - --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color); - - /* popover corner radius */ - --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100); - - /* pointer tip dimensions */ - --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width); - --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height); - - /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ - --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + (var(--spectrum-popover-tip-width) / 2)); - - /* pointer tip - spacing to edge will center pointer to source - apply in markup by setting '--spectrum-popover-pointer-edge-offset' value == half of source */ - --spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2)); - } -} +@import "./spectrum-two.css"; diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js index faf6f0424b9..b0e96cc948e 100644 --- a/components/progressbar/stories/template.js +++ b/components/progressbar/stories/template.js @@ -6,6 +6,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-ProgressBar", diff --git a/components/progressbar/themes/spectrum.css b/components/progressbar/themes/spectrum.css index ced39ed5dbe..2402bff89b3 100644 --- a/components/progressbar/themes/spectrum.css +++ b/components/progressbar/themes/spectrum.css @@ -11,122 +11,10 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-ProgressBar { - /* Static tokens */ - --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); - --spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); - --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100); - - --spectrum-progressbar-fill-size-indeterminate: 70%; - - /* --spectrum-global-dimension-static-size-2400 */ - --spectrum-progressbar-size-2400: 192px; - - /* --spectrum-global-dimension-static-size-2500 */ - --spectrum-progressbar-size-2500: 200px; - - /* --spectrum-global-dimension-static-size-2800 */ - --spectrum-progressbar-size-2800: 224px; - - /* Size */ - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100); - - --spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width); - --spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width); - - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-medium); - --spectrum-progressbar-line-height: var(--spectrum-line-height-100); - - /* Spacing */ - --spectrum-progressbar-spacing-label-to-progressbar: var(--spectrum-spacing-75); - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200); - - /* Color */ - --spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default); --spectrum-progressbar-track-color: var(--spectrum-gray-300); - --spectrum-progressbar-fill-color: var(--spectrum-accent-color-900); - --spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color); - --spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color); - --spectrum-progressbar-fill-color-negative: var(--spectrum-negative-visual-color); - --spectrum-progressbar-label-and-value-white: var(--spectrum-white); - --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300); - --spectrum-progressbar-fill-color-white: var(--spectrum-white); - - /* Meter */ - --spectrum-meter-min-width: var(--spectrum-meter-minimum-width); - --spectrum-meter-max-width: var(--spectrum-meter-maximum-width); - --spectrum-meter-inline-size: var(--spectrum-meter-default-width); - --spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small); - --spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large); - --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text); - } - - .spectrum-ProgressBar--sizeS, - .spectrum-Meter--sizeS { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small); - - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - } - - .spectrum-ProgressBar--sizeM { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); - - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - } - - .spectrum-ProgressBar--sizeL, - .spectrum-Meter--sizeL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); - - --spectrum-progressbar-font-size: var(--spectrum-font-size-100); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); - - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - } - - .spectrum-ProgressBar--sizeXL { - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); - - --spectrum-progressbar-font-size: var(--spectrum-font-size-200); - --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large); - - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300); - } - - .spectrum-Meter { - --spectrum-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-inline-size)); - --spectrum-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-max-width)); - --spectrum-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-min-width)); - - /* Meter only supports size S and L */ - &.spectrum-Meter--sizeS { - --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-s); - } - - &.spectrum-Meter--sizeL { - --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-l); - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - } - - &.is-positive .spectrum-ProgressBar-fill { - background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive))); - } - - &.is-notice .spectrum-ProgressBar-fill { - background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice))); - } - - &.is-negative .spectrum-ProgressBar-fill { - background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative))); - } } } diff --git a/components/progresscircle/stories/template.js b/components/progresscircle/stories/template.js index ad72bc70cd0..f1d8f83673f 100644 --- a/components/progresscircle/stories/template.js +++ b/components/progresscircle/stories/template.js @@ -4,6 +4,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ id, diff --git a/components/progresscircle/themes/spectrum.css b/components/progresscircle/themes/spectrum.css index 556e216a80d..3bac81e4497 100644 --- a/components/progresscircle/themes/spectrum.css +++ b/components/progresscircle/themes/spectrum.css @@ -11,40 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-ProgressCircle { - /* circle unfilled border color */ - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200); - - /* circle progress fill border color */ - --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); - - /* over background unfilled border color */ - --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); - - /* over background progress fill border color */ - --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); - - /* default size and thickness */ - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); - - /* track border style */ - --spectrum-progress-circle-track-border-style: solid; - } - - .spectrum-ProgressCircle--small { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small); - } - - .spectrum-ProgressCircle--medium { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); - } - - .spectrum-ProgressCircle--large { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large); - } -} +@import "./spectrum-two.css"; diff --git a/components/radio/stories/template.js b/components/radio/stories/template.js index db7c0a7971e..9be99a78d2f 100644 --- a/components/radio/stories/template.js +++ b/components/radio/stories/template.js @@ -4,6 +4,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Radio", diff --git a/components/radio/themes/spectrum.css b/components/radio/themes/spectrum.css index 27a30e41d22..3bac81e4497 100644 --- a/components/radio/themes/spectrum.css +++ b/components/radio/themes/spectrum.css @@ -11,124 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Radio { - /* selection indicator */ - --spectrum-radio-button-border-color-default: var(--spectrum-gray-600); - --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); - --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); - --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); - - /* state colors for all themes */ - --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); - --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - /* focus ring all themes */ - --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - - /* disabled all themes */ - --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color); - --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color); - - /* emphasized state colors selection indicator all themes */ - --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); - --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); - --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); - - /* selection indicator all themes */ - --spectrum-radio-border-width: var(--spectrum-border-width-200); - --spectrum-radio-button-background-color: var(--spectrum-gray-50); - - /* checked selection indicator */ - --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); - - /* spacing all themes */ - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - - /* text styles all themes */ - --spectrum-radio-font-size: var(--spectrum-font-size-100); - --spectrum-radio-line-height: var(--spectrum-line-height-100); - - /* animation all themes */ - --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100); - - /* CJK language support all themes */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); - } - - /* default radio size for no t-shirt size */ - --spectrum-radio-height: var(--spectrum-component-height-100); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); - - /* default radio spacing for no t-shirt size */ - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - } - - .spectrum-Radio--sizeS { - --spectrum-radio-height: var(--spectrum-component-height-75); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small); - - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); - - --spectrum-radio-font-size: var(--spectrum-font-size-75); - } - - .spectrum-Radio--sizeM { - --spectrum-radio-height: var(--spectrum-component-height-100); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); - - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - - --spectrum-radio-font-size: var(--spectrum-font-size-100); - } - - .spectrum-Radio--sizeL { - --spectrum-radio-height: var(--spectrum-component-height-200); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large); - - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); - - --spectrum-radio-font-size: var(--spectrum-font-size-200); - } - - .spectrum-Radio--sizeXL { - --spectrum-radio-height: var(--spectrum-component-height-300); - --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large); - - --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300); - --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); - - --spectrum-radio-font-size: var(--spectrum-font-size-300); - } - - .spectrum-Radio--emphasized { - --spectrum-radio-button-checked-border-color-default: var(--spectrum-accent-color-900); - --spectrum-radio-button-checked-border-color-hover: var(--spectrum-accent-color-1000); - --spectrum-radio-button-checked-border-color-down: var(--spectrum-accent-color-1100); - --spectrum-radio-button-checked-border-color-focus: var(--spectrum-accent-color-1000); - } -} +@import "./spectrum-two.css"; diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js index 55cb2dcbfa2..df5aeaed2b4 100644 --- a/components/rating/stories/template.js +++ b/components/rating/stories/template.js @@ -5,6 +5,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { repeat } from "lit/directives/repeat.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Rating", diff --git a/components/rating/themes/spectrum.css b/components/rating/themes/spectrum.css index f9817b654e2..3bac81e4497 100644 --- a/components/rating/themes/spectrum.css +++ b/components/rating/themes/spectrum.css @@ -11,39 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Rating { - --spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - /* Icon */ - --spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100); - --spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100); - - /* Focus ring */ - --spectrum-rating-border-radius: var(--spectrum-corner-radius-100); - --spectrum-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-rating-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - /* Spacing (top/bottom edge to icon) */ - --spectrum-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75); - - /* Indicator height */ - --spectrum-rating-indicator-height: var(--spectrum-border-width-200); - - /* Colors */ - /* selected + emphasized */ - --spectrum-rating-emphasized-icon-color-default: var(--spectrum-accent-content-color-default); - --spectrum-rating-emphasized-icon-color-hover: var(--spectrum-accent-content-color-hover); - --spectrum-rating-emphasized-icon-color-down: var(--spectrum-accent-content-color-down); - --spectrum-rating-emphasized-icon-color-key-focus: var(--spectrum-accent-content-color-key-focus); - - /* Disabled */ - --spectrum-rating-icon-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-rating-icon-count: var(--spectrum-rating-icon-count); - } -} +@import "./spectrum-two.css"; diff --git a/components/search/stories/template.js b/components/search/stories/template.js index bdf59a8779f..fe6d3d2dc3b 100644 --- a/components/search/stories/template.js +++ b/components/search/stories/template.js @@ -4,6 +4,8 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Search", diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css index aaa7918c56a..4ed22efd616 100644 --- a/components/search/themes/spectrum.css +++ b/components/search/themes/spectrum.css @@ -11,96 +11,10 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Search { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - - --spectrum-search-border-color-default: var(--spectrum-gray-500); - --spectrum-search-border-color-hover: var(--spectrum-gray-600); - --spectrum-search-border-color-focus: var(--spectrum-gray-800); - --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-search-border-color-key-focus: var(--spectrum-gray-900); - - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - - /* Size / Spacing */ - --spectrum-search-inline-size: var(--spectrum-field-width); - --spectrum-search-block-size: var(--spectrum-component-height-100); - --spectrum-search-button-inline-size: var(--spectrum-search-block-size); - --spectrum-search-min-inline-size: calc(var(--spectrum-search-field-minimum-width-multiplier) * var(--spectrum-search-block-size)); - --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-100); - - --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-search-to-help-text: var(--spectrum-help-text-to-component); - --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - - /* Focus Indicator */ - --spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-search-focus-indicator-color: var(--spectrum-focus-indicator-color); - - /* Font / Color */ - --spectrum-search-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-search-font-weight: var(--spectrum-regular-font-weight); - --spectrum-search-font-style: var(--spectrum-default-font-style); - --spectrum-search-line-height: var(--spectrum-line-height-100); - - --spectrum-search-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus); - --spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); - --spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - /* Background and Border */ - --spectrum-search-border-width: var(--spectrum-border-width-100); --spectrum-search-background-color: var(--spectrum-gray-25); - - /* Disabled */ - --spectrum-search-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color); - } - - .spectrum-Search--sizeS { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75); - - --spectrum-search-block-size: var(--spectrum-component-height-75); - --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75); - } - - .spectrum-Search--sizeL { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200); - - --spectrum-search-block-size: var(--spectrum-component-height-200); - --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200); - } - - .spectrum-Search--sizeXL { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300); - - --spectrum-search-block-size: var(--spectrum-component-height-300); - --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300); - } - - .spectrum-Search--quiet { - --spectrum-search-quiet-button-offset: calc((var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2) - (var(--mod-workflow-icon-size-100, var(--spectrum-workflow-icon-size-100)) / 2)); - --spectrum-search-background-color: transparent; - --spectrum-search-background-color-disabled: transparent; - --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color); - - /* Added specificity, otherwise they are overridden by system specific themes. */ - &.spectrum-Search { - --spectrum-search-border-radius: 0; - --spectrum-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); - } } } diff --git a/components/sidenav/stories/template.js b/components/sidenav/stories/template.js index 3a45a884177..d3a66bbe148 100644 --- a/components/sidenav/stories/template.js +++ b/components/sidenav/stories/template.js @@ -6,6 +6,8 @@ import { repeat } from "lit/directives/repeat.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-SideNav", diff --git a/components/sidenav/themes/spectrum.css b/components/sidenav/themes/spectrum.css index ab5e286f1bf..3bac81e4497 100644 --- a/components/sidenav/themes/spectrum.css +++ b/components/sidenav/themes/spectrum.css @@ -11,98 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-SideNav { - /* focus indicator */ - --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness); - --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-sidenav-focus-ring-color: var(--spectrum-focus-indicator-color); - - /* layout */ - --spectrum-sidenav-min-height: var(--spectrum-component-height-100); - --spectrum-sidenav-width: 100%; - --spectrum-sidenav-min-width: var(--spectrum-side-navigation-minimum-width); - --spectrum-sidenav-max-width: var(--spectrum-side-navigation-maximum-width); - --spectrum-sidenav-border-radius: var(--spectrum-corner-radius-100); - --spectrum-sidenav-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-sidenav-icon-spacing: var(--spectrum-text-to-visual-100); - --spectrum-sidenav-inline-padding: var(--spectrum-component-edge-to-text-100); - --spectrum-sidenav-gap: var(--spectrum-side-navigation-item-to-item); - --spectrum-sidenav-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-sidenav-top-to-label: var(--spectrum-component-top-to-text-100); - --spectrum-sidenav-bottom-to-label: var(--spectrum-side-navigation-bottom-to-text); - - --spectrum-sidenav-start-to-content-second-level: var(--spectrum-side-navigation-second-level-edge-to-text); - --spectrum-sidenav-start-to-content-third-level: var(--spectrum-side-navigation-third-level-edge-to-text); - - --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text); - --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text); - - --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header); - --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item); - - /* color - background */ - --spectrum-sidenav-background-disabled: transparent; - --spectrum-sidenav-background-default: transparent; - --spectrum-sidenav-background-hover: var(--spectrum-gray-100); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-200); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); - - --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); - - /* color font */ - --spectrum-sidenav-header-color: var(--spectrum-gray-600); - - --spectrum-sidenav-content-disabled-color: var(--spectrum-disabled-content-color); - - --spectrum-sidenav-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-sidenav-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-sidenav-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-sidenav-content-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-sidenav-content-color-default-selected: var(--spectrum-neutral-content-color-default); - --spectrum-sidenav-content-color-hover-selected: var(--spectrum-neutral-content-color-hover); - --spectrum-sidenav-content-color-down-selected: var(--spectrum-neutral-content-color-down); - --spectrum-sidenav-content-color-key-focus-selected: var(--spectrum-neutral-content-color-key-focus); - - /* typography */ - --spectrum-sidenav-text-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-sidenav-text-font-weight: var(--spectrum-regular-font-weight); - --spectrum-sidenav-text-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-text-font-size: var(--spectrum-font-size-100); - --spectrum-sidenav-text-line-height: var(--spectrum-line-height-100); - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-sidenav-text-line-height: var(--spectrum-cjk-line-height-100); - } - - --spectrum-sidenav-top-level-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-sidenav-top-level-font-weight: var(--spectrum-bold-font-weight); - --spectrum-sidenav-top-level-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-top-level-font-size: var(--spectrum-font-size-100); - --spectrum-sidenav-top-level-line-height: var(--spectrum-line-height-100); - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-sidenav-top-level-line-height: var(--spectrum-cjk-line-height-100); - } - - --spectrum-sidenav-header-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-sidenav-header-font-weight: var(--spectrum-medium-font-weight); - --spectrum-sidenav-header-font-style: var(--spectrum-default-font-style); - --spectrum-sidenav-header-font-size: var(--spectrum-font-size-75); - --spectrum-sidenav-header-line-height: var(--spectrum-line-height-100); - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-sidenav-header-line-height: var(--spectrum-cjk-line-height-100); - } - } -} +@import "./spectrum-two.css"; diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index fa4de50b712..fcdb2628bec 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -6,6 +6,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Slider", diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css index c47802ba2a8..a998318b9a3 100644 --- a/components/slider/themes/spectrum.css +++ b/components/slider/themes/spectrum.css @@ -11,117 +11,15 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Slider { --spectrum-slider-track-color: var(--spectrum-gray-300); - --spectrum-slider-track-fill-color: var(--spectrum-gray-700); - --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - - --spectrum-slider-handle-background-color: transparent; - --spectrum-slider-handle-background-color-disabled: transparent; --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100); --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100); - --spectrum-slider-handle-border-color: var(--spectrum-gray-700); --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); - - --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); - --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); - --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - - /* default sizing, matches t-shirt size M */ - --spectrum-slider-font-size: var(--spectrum-font-size-75); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --spectrum-slider-control-height: var(--spectrum-component-height-100); - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - - /* TODO: placeholder value for sideLabel variant value width */ - --spectrum-slider-value-inline-size: 18px; - - &:dir(rtl), - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - } - } - - .spectrum-Slider--sizeS { - --spectrum-slider-font-size: var(--spectrum-font-size-75); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small); - --spectrum-slider-control-height: var(--spectrum-component-height-75); - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100); - } - - .spectrum-Slider--sizeL { - --spectrum-slider-font-size: var(--spectrum-font-size-100); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large); - --spectrum-slider-control-height: var(--spectrum-component-height-200); - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - - /* TODO: placeholder value for sideLabel variant value width */ - --spectrum-slider-value-inline-size: 18px; - } - - .spectrum-Slider--sizeXL { - --spectrum-slider-font-size: var(--spectrum-font-size-200); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large); - --spectrum-slider-control-height: var(--spectrum-component-height-300); - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - - /* TODO: placeholder value for sideLabel variant value width */ - --spectrum-slider-value-inline-size: 22px; - } - - .spectrum-Slider { - --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - - --spectrum-slider-min-size: var(--spectrum-spacing-900); - - --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75); - --spectrum-slider-label-margin-start: var(--spectrum-spacing-300); - --spectrum-slider-handle-border-width: var(--spectrum-border-width-200); - --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2); - --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2); - --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1); - --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2)); - --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4); - --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); - --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); - --spectrum-slider-tick-mark-border-radius: 2px; - --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-75); - - /* colors */ - --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default); - --spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default); - --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); - - /* values */ - --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); - --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - - --spectrum-slider-range-track-reset: 0; } } diff --git a/components/splitview/stories/template.js b/components/splitview/stories/template.js index c116589abb4..33b12354997 100644 --- a/components/splitview/stories/template.js +++ b/components/splitview/stories/template.js @@ -3,6 +3,8 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-SplitView", diff --git a/components/splitview/themes/spectrum.css b/components/splitview/themes/spectrum.css index 4de357940a0..3bac81e4497 100644 --- a/components/splitview/themes/spectrum.css +++ b/components/splitview/themes/spectrum.css @@ -11,26 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-SplitView { - --spectrum-splitview-vertical-width: 100%; - --spectrum-splitview-vertical-gripper-width: 50%; - --spectrum-splitview-vertical-gripper-outer-width: 100%; - --spectrum-splitview-vertical-gripper-reset: 0; - - --spectrum-splitview-background-color: var(--spectrum-gray-75); - --spectrum-splitview-content-color: var(--spectrum-body-color); - - --spectrum-splitview-handle-background-color: var(--spectrum-gray-200); - --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400); - --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800); - --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color); - --spectrum-splitview-handle-width: var(--spectrum-border-width-200); - - --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75); - --spectrum-splitview-gripper-width: var(--spectrum-border-width-400); - --spectrum-splitview-gripper-height: 16px; /* No good token to use for this */ - --spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */ - --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400); - } -} +@import "./spectrum-two.css"; diff --git a/components/statuslight/stories/template.js b/components/statuslight/stories/template.js index c510d2fd75b..c25e057aa63 100644 --- a/components/statuslight/stories/template.js +++ b/components/statuslight/stories/template.js @@ -3,6 +3,8 @@ import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-StatusLight", diff --git a/components/statuslight/themes/spectrum.css b/components/statuslight/themes/spectrum.css index 723a4ecdc26..3bac81e4497 100644 --- a/components/statuslight/themes/spectrum.css +++ b/components/statuslight/themes/spectrum.css @@ -11,97 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-StatusLight { - /* Static tokens */ - --spectrum-statuslight-corner-radius: 50%; - --spectrum-statuslight-font-weight: 400; - --spectrum-statuslight-border-width: var(--spectrum-border-width-100); - - /* Size */ - --spectrum-statuslight-height: var(--spectrum-component-height-100); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium); - --spectrum-statuslight-line-height: var(--spectrum-line-height-100); - --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100); - - --spectrum-statuslight-font-size: var(--spectrum-font-size-100); - - /* Space */ - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); - - /* Color */ - --spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color); - --spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color); - --spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color); - --spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color); - --spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color); - --spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color); - --spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color); - --spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color); - --spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color); - --spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color); - --spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color); - --spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color); - --spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color); - --spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color); - --spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color); - --spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color); - --spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color); - --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color); - --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color); - --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color); - } - - .spectrum-StatusLight--sizeS { - --spectrum-statuslight-height: var(--spectrum-component-height-75); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-small); - - --spectrum-statuslight-font-size: var(--spectrum-font-size-75); - - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75); - } - - .spectrum-StatusLight--sizeM { - --spectrum-statuslight-height: var(--spectrum-component-height-100); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium); - - --spectrum-statuslight-font-size: var(--spectrum-font-size-100); - - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); - } - - .spectrum-StatusLight--sizeL { - --spectrum-statuslight-height: var(--spectrum-component-height-200); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large); - - --spectrum-statuslight-font-size: var(--spectrum-font-size-200); - - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200); - } - - .spectrum-StatusLight--sizeXL { - --spectrum-statuslight-height: var(--spectrum-component-height-300); - --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-extra-large); - - --spectrum-statuslight-font-size: var(--spectrum-font-size-300); - - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300); - --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large); - --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300); - --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300); - } -} +@import "./spectrum-two.css"; diff --git a/components/steplist/stories/template.js b/components/steplist/stories/template.js index ae7b9bd40e2..e0b6fb77b38 100644 --- a/components/steplist/stories/template.js +++ b/components/steplist/stories/template.js @@ -5,6 +5,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { repeat } from "lit/directives/repeat.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const SteplistItem = ({ rootClass, diff --git a/components/steplist/themes/spectrum.css b/components/steplist/themes/spectrum.css index 7ffe4e09cc5..3bac81e4497 100644 --- a/components/steplist/themes/spectrum.css +++ b/components/steplist/themes/spectrum.css @@ -11,40 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Steplist { - /* The width of a step */ - --spectrum-steplist-step-width: 80px; - - /* The diameter of the marker */ - --spectrum-steplist-marker-diameter: 8px; - - /* The width of the hit area */ - --spectrum-steplist-marker-hitArea: 20px; - - /* The height of the line */ - --spectrum-steplist-segment-height: 2px; - - /* This gives enough space for one line of text */ - --spectrum-steplist-topPadding: 22px; - --spectrum-steplist-small-topPadding: 11px; - - /* This gives enough space for the longest possible label */ - --spectrum-steplist-sidePadding: 60px; - - /* Offset from the BOTTOM of the steplist */ - --spectrum-steplist-label-labelOffset: 10px; - - /* Font size of the label */ - --spectrum-steplist-label-text-size: 12px; - - --spectrum-steplist-current-label-text-color: var(--spectrum-gray-800); - --spectrum-steplist-current-marker-color: var(--spectrum-gray-800); - --spectrum-steplist-complete-label-text-color: var(--spectrum-gray-700); - --spectrum-steplist-incomplete-label-color: var(--spectrum-gray-600); - --spectrum-steplist-complete-marker-background-color: var(--spectrum-gray-600); - --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); - --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); - --spectrum-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600); - } -} +@import "./spectrum-two.css"; diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js index eee52b061b1..54ff11aac40 100644 --- a/components/stepper/stories/template.js +++ b/components/stepper/stories/template.js @@ -7,6 +7,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Stepper", diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css index 96bbb4d3ce3..2b4401fdf4e 100644 --- a/components/stepper/themes/spectrum.css +++ b/components/stepper/themes/spectrum.css @@ -11,106 +11,12 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Stepper { - --spectrum-stepper-border-width: var(--spectrum-border-width-100); - - --spectrum-stepper-buttons-border-style: none; - --spectrum-stepper-buttons-border-width: 0; - --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); - --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); - - --spectrum-stepper-button-border-radius-reset: 0px; - --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); - - --spectrum-stepper-border-color: var(--spectrum-gray-500); - --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); - --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - - --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); - --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); - --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); - --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); - --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300); --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); - - /* Set defaults to medium size */ - --spectrum-stepper-height: var(--spectrum-component-height-100); - --spectrum-stepper-border-radius: var(--spectrum-corner-radius-100); - - --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); - --spectrum-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); - - --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + (var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2)); - - /*** Focus Indicator ***/ - --spectrum-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --spectrum-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); - - /*** :AFTER - this is for the :after element labeled below as hit area, but used as focus indicator in ActionButton ***/ - --spectrum-stepper-button-offset: calc(var(--spectrum-stepper-button-width) / 2); - - --spectrum-stepper-animation-duration: var(--spectrum-animation-duration-100); - - &.spectrum-Stepper--sizeS { - --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-small); - --spectrum-stepper-height: var(--spectrum-component-height-75); - } - - &.spectrum-Stepper--sizeL { - --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-large); - --spectrum-stepper-height: var(--spectrum-component-height-200); - } - - &.spectrum-Stepper--sizeXL { - --spectrum-stepper-button-width: var(--spectrum-in-field-button-width-stacked-extra-large); - --spectrum-stepper-height: var(--spectrum-component-height-300); - } - - /*** Quiet ***/ - &.spectrum-Stepper--quiet { - --mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width)); - --mod-textfield-focus-indicator-color: transparent; - } - - &.is-disabled { - --mod-infield-button-border-color-quiet-disabled: var(--spectrum-disabled-border-color); - } - - /*** Invalid ***/ - &.is-invalid { - --spectrum-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default)); - --spectrum-stepper-border-color-hover: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); - --spectrum-stepper-border-color-focus: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-negative-border-color-focus)); - --spectrum-stepper-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover)); - --spectrum-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus)); - --mod-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid)); - --mod-textfield-icon-spacing-inline-start-invalid: 0; - - &:hover { - --mod-infield-button-border-color: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); - } - - &.is-focused, - &:focus { - --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid)); - - &:hover { - --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)); - } - } - - &.is-keyboardFocused, - &:focus-visible { - --mod-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid)); - } - } } } diff --git a/components/swatch/stories/template.js b/components/swatch/stories/template.js index 6421f8ff462..b0f428279e1 100644 --- a/components/swatch/stories/template.js +++ b/components/swatch/stories/template.js @@ -7,6 +7,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Swatch", diff --git a/components/swatch/themes/spectrum.css b/components/swatch/themes/spectrum.css index 214faec374c..3bac81e4497 100644 --- a/components/swatch/themes/spectrum.css +++ b/components/swatch/themes/spectrum.css @@ -11,65 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - /* Swatch tokens */ - .spectrum-Swatch { - /* Placeholder tokens */ - --spectrum-swatch-focus-indicator-border-radius: 8px; - --spectrum-swatch-icon-border-color: rgb(0 0 0 / 51%); - - /* Size */ - --spectrum-swatch-size: var(--spectrum-swatch-size-small); - --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100); - --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); - --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); - --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - /* Color */ - --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-swatch-disabled-icon-border-color); - --spectrum-swatch-disabled-icon-color: var(--spectrum-white); - --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); - --spectrum-swatch-slash-icon-color: var(--spectrum-red-900); - --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); - } - - .spectrum-Swatch--sizeXS { - --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); - } - - .spectrum-Swatch--sizeS { - --spectrum-swatch-size: var(--spectrum-swatch-size-small); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); - } - - .spectrum-Swatch--sizeM { - --spectrum-swatch-size: var(--spectrum-swatch-size-medium); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); - } - - .spectrum-Swatch--sizeL { - --spectrum-swatch-size: var(--spectrum-swatch-size-large); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large); - } - - /* Light theme placeholder tokens */ - .spectrum--light { - --spectrum-swatch-border-color: rgb(0 0 0 / 51%); - } - - /* Dark and Darkest theme placeholder tokens */ - .spectrum--dark, - .spectrum--darkest { - --spectrum-swatch-border-color: rgb(255 255 255 / 51%); - } -} +@import "./spectrum-two.css"; diff --git a/components/swatchgroup/stories/template.js b/components/swatchgroup/stories/template.js index 3584081e285..a62c57230e2 100644 --- a/components/swatchgroup/stories/template.js +++ b/components/swatchgroup/stories/template.js @@ -5,6 +5,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-SwatchGroup", diff --git a/components/swatchgroup/themes/spectrum.css b/components/swatchgroup/themes/spectrum.css index f5ef528c7a9..3bac81e4497 100644 --- a/components/swatchgroup/themes/spectrum.css +++ b/components/swatchgroup/themes/spectrum.css @@ -11,10 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-SwatchGroup { - --spectrum-swatchgroup-spacing-compact: var(--spectrum-spacing-50); - --spectrum-swatchgroup-spacing-regular: var(--spectrum-spacing-75); - --spectrum-swatchgroup-spacing-spacious: var(--spectrum-spacing-100); - } -} +@import "./spectrum-two.css"; diff --git a/components/switch/stories/template.js b/components/switch/stories/template.js index add5c58a5a9..0a5df88a217 100644 --- a/components/switch/stories/template.js +++ b/components/switch/stories/template.js @@ -5,6 +5,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Switch", diff --git a/components/switch/themes/spectrum.css b/components/switch/themes/spectrum.css index 42879063489..3bac81e4497 100644 --- a/components/switch/themes/spectrum.css +++ b/components/switch/themes/spectrum.css @@ -11,103 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Switch { - --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600); - --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700); - - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); - - --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-switch-background-color: var(--spectrum-gray-200); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); - --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); - - --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - --spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-switch-handle-background-color: var(--spectrum-gray-50); - --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); - } - - .spectrum-Switch--disabled { - --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color); - } - - .spectrum-Switch.spectrum-Switch--emphasized { - /* - Selector specificity needed to beat the cascade, post-build. - The `spectrum` & `express` theme vars get appended below this in the dist file - & the higher specificity here will override. - */ - /* selected + emphasized */ - --spectrum-switch-background-color-selected-default: var(--spectrum-accent-color-900); - --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-color-1000); - --spectrum-switch-background-color-selected-down: var(--spectrum-accent-color-1100); - --spectrum-switch-background-color-selected-focus: var(--spectrum-accent-color-1000); - - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-accent-color-900); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-accent-color-1000); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-accent-color-1100); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-accent-color-1000); - } - - .spectrum-Switch--sizeS { - --spectrum-switch-min-height: var(--spectrum-component-height-75); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-small); - --spectrum-switch-control-height: var(--spectrum-switch-control-height-small); - --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75); - --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-small); - --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-75); - - --spectrum-switch-font-size: var(--spectrum-font-size-75); - } - - .spectrum-Switch--sizeM { - --spectrum-switch-min-height: var(--spectrum-component-height-100); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-medium); - --spectrum-switch-control-height: var(--spectrum-switch-control-height-medium); - --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-100); - --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium); - --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-100); - - --spectrum-switch-font-size: var(--spectrum-font-size-100); - } - - .spectrum-Switch--sizeL { - --spectrum-switch-min-height: var(--spectrum-component-height-200); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-large); - --spectrum-switch-control-height: var(--spectrum-switch-control-height-large); - --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-200); - --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-large); - --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-200); - - --spectrum-switch-font-size: var(--spectrum-font-size-200); - } - - .spectrum-Switch--sizeXL { - --spectrum-switch-min-height: var(--spectrum-component-height-300); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-extra-large); - --spectrum-switch-control-height: var(--spectrum-switch-control-height-extra-large); - --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-300); - --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large); - --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-300); - - --spectrum-switch-font-size: var(--spectrum-font-size-300); - } -} +@import "./spectrum-two.css"; diff --git a/components/table/stories/template.js b/components/table/stories/template.js index 8de04c9e1f6..0f6ba76bfe4 100644 --- a/components/table/stories/template.js +++ b/components/table/stories/template.js @@ -8,6 +8,8 @@ import { when } from "lit/directives/when.js"; import { html, literal } from "lit/static-html.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const TableRowItem = ({ rootClass = "spectrum-Table", diff --git a/components/table/themes/spectrum.css b/components/table/themes/spectrum.css index e17db348de0..3bac81e4497 100644 --- a/components/table/themes/spectrum.css +++ b/components/table/themes/spectrum.css @@ -11,325 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Table { - /* Size and Spacing */ - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium); - - --spectrum-table-min-header-height: var(--spectrum-component-height-100); - --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-regular); - - --spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content); - - --spectrum-table-border-radius: var(--spectrum-corner-radius-100); - --spectrum-table-border-width: var(--spectrum-table-border-divider-width); - --spectrum-table-outer-border-inline-width: var(--spectrum-table-border-divider-width); - - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); - - --spectrum-table-default-vertical-align: top; - --spectrum-table-header-vertical-align: middle; - - /* Typography */ - --spectrum-table-header-font-weight: var(--spectrum-bold-font-weight); - - --spectrum-table-row-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-table-row-font-weight: var(--spectrum-regular-font-weight); - --spectrum-table-row-font-style: var(--spectrum-default-font-style); - --spectrum-table-row-font-size: var(--spectrum-font-size-100); - --spectrum-table-row-line-height: var(--spectrum-line-height-100); - - /* General Colors */ - --spectrum-table-border-color: var(--spectrum-gray-200); - --spectrum-table-divider-color: var(--spectrum-gray-200); - - --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); - --spectrum-table-header-text-color: var(--spectrum-body-color); - - --spectrum-table-row-background-color: var(--spectrum-gray-25); - --spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default); - - /* ----- * - @todo Refactor or remove these properties once the RGB stripped value is available. */ - --spectrum-table-selected-row-background-color: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity)); - --spectrum-table-selected-row-background-color-non-emphasized: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized)); - --spectrum-table-row-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity)); - - --spectrum-table-row-active-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity)); - --spectrum-table-selected-row-background-color-focus: rgba(var(--spectrum-blue-900-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); - --spectrum-table-selected-row-background-color-non-emphasized-focus: rgba(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover)); - - /* ----- */ - - --spectrum-table-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-table-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-table-icon-color-active: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-focus); - --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-focus-hover); - --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-medium); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-regular); - - --spectrum-table-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-table-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-table-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); - --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); - - --spectrum-table-transition-duration: var(--spectrum-animation-duration-100); - - /* Summary Row and Section Header Row */ - --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-summary-row-background-color: var(--spectrum-gray-100); - - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100); - - --spectrum-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-section-header-background-color: var(--spectrum-gray-100); - - /* Collapsible and Thumbnails */ - --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300); - --spectrum-table-collapsible-disclosure-inline-spacing: 0px; - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100); - --spectrum-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100); - - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - - /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341 - and for modifying emphasized/non-emphasized background colors from the root element. */ - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); - --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); - --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus))); - } - - /********* T-SHIRT SIZES (Regular Density) *********/ - .spectrum-Table--sizeS { - /* Size and Spacing */ - --spectrum-table-min-header-height: var(--spectrum-component-height-100); - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-small); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-small); - - --spectrum-table-min-row-height: var(--spectrum-table-row-height-small-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-small-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-small-regular); - - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100); - - /* Typography */ - --spectrum-table-row-font-size: var(--spectrum-font-size-75); - - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-small); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-small-regular); - - /* Summary Row and Section Header Row */ - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-small); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-75); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-75); - - /* Collapsible and Thumbnails */ - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75); - - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-small-regular); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200); - } - - .spectrum-Table--sizeL { - /* Size and Spacing */ - --spectrum-table-min-header-height: var(--spectrum-component-height-200); - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-large); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-large); - - --spectrum-table-min-row-height: var(--spectrum-table-row-height-large-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-large-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-large-regular); - - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200); - - /* Typography */ - --spectrum-table-row-font-size: var(--spectrum-font-size-200); - - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-large); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-large-regular); - - /* Summary Row and Section Header Row */ - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-large); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-200); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-200); - - /* Collapsible and Thumbnails */ - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200); - - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-large-regular); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500); - } - - .spectrum-Table--sizeXL { - /* Size and Spacing */ - --spectrum-table-min-header-height: var(--spectrum-component-height-300); - --spectrum-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-extra-large); - --spectrum-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-extra-large); - - --spectrum-table-min-row-height: var(--spectrum-table-row-height-extra-large-regular); - --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-extra-large-regular); - --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-extra-large-regular); - - --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300); - - /* Typography */ - --spectrum-table-row-font-size: var(--spectrum-font-size-300); - - /* Row Selection */ - --spectrum-table-header-checkbox-block-spacing: var(--spectrum-table-header-row-checkbox-to-top-extra-large); - --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-extra-large-regular); - - /* Summary Row and Section Header Row */ - --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-extra-large); - --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-300); - --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-300); - - /* Collapsible and Thumbnails */ - --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300); - - --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-extra-large-regular); - --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300); - --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700); - } - - /********* VARIANTS *********/ - .spectrum-Table--compact { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-medium-compact)); - --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-medium-compact)); - --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-medium-compact)); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-medium-compact)); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-medium-compact)); - --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-200)); - - &.spectrum-Table--sizeS { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-small-compact)); - --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-small-compact)); - --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-small-compact)); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-small-compact)); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-small-compact)); - --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-50)); - } - - &.spectrum-Table--sizeL { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-large-compact)); - --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-large-compact)); - --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-large-compact)); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-large-compact)); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-large-compact)); - --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-300)); - } - - &.spectrum-Table--sizeXL { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-extra-large-compact)); - --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-extra-large-compact)); - --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-extra-large-compact)); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-extra-large-compact)); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact)); - --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-500)); - } - } - - .spectrum-Table--spacious { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-medium-spacious)); - --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-medium-spacious)); - --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-medium-spacious)); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious)); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious)); - --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-500)); - - &.spectrum-Table--sizeS { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-small-spacious)); - --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-small-spacious)); - --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-small-spacious)); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-small-spacious)); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-small-spacious)); - --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-300)); - } - - &.spectrum-Table--sizeL { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-large-spacious)); - --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-large-spacious)); - --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-large-spacious)); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-large-spacious)); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-large-spacious)); - --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-700)); - } - - &.spectrum-Table--sizeXL { - /* Size and Spacing */ - --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-extra-large-spacious)); - --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-extra-large-spacious)); - --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-extra-large-spacious)); - - /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-extra-large-spacious)); - - /* Collapsible and Thumbnails */ - --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious)); - --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-800)); - } - } - - .spectrum-Table--emphasized { - --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color))); - --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-focus))); - } - - .spectrum-Table--quiet { - --spectrum-table-border-radius: var(--mod-table-border-radius--quiet, 0px); - --spectrum-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width--quiet, 0px); - --spectrum-table-header-background-color: var(--mod-table-header-background-color--quiet, var(--spectrum-transparent-white-100)); - --spectrum-table-row-background-color: var(--mod-table-row-background-color--quiet, var(--spectrum-transparent-white-100)); - } -} +@import "./spectrum-two.css"; diff --git a/components/tabs/stories/template.js b/components/tabs/stories/template.js index d332474bacb..358e9006631 100644 --- a/components/tabs/stories/template.js +++ b/components/tabs/stories/template.js @@ -9,6 +9,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Tabs", diff --git a/components/tabs/themes/spectrum.css b/components/tabs/themes/spectrum.css index cab97c62cfd..7aed2b87acd 100644 --- a/components/tabs/themes/spectrum.css +++ b/components/tabs/themes/spectrum.css @@ -11,146 +11,10 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-default-font-weight); - - /* Default is Medium sizing */ - --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium); - --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); - --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium); - --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); - --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); - - --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium); - - --spectrum-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-tabs-color-disabled: var(--spectrum-gray-500); - - --spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-tabs-font-style: var(--spectrum-default-font-style); - --spectrum-tabs-font-size: var(--spectrum-font-size-100); - --spectrum-tabs-line-height: var(--spectrum-line-height-100); - - /* Focus Indicator */ - --spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --spectrum-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100); - --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium); - --spectrum-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down); - - --spectrum-tabs-list-background-direction: top; --spectrum-tabs-divider-background-color: var(--spectrum-gray-300); - --spectrum-tabs-divider-size: var(--spectrum-border-width-200); - --spectrum-tabs-divider-border-radius: 1px; - - --spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out); - - &.spectrum-Tabs--sizeS { - --spectrum-tabs-item-height: var(--spectrum-tab-item-height-small); - --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small); - --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small); - --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-small); - --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-small); - --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small); - - --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-75); - --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small); - - --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small); - --spectrum-tabs-font-size: var(--spectrum-font-size-75); - } - - &.spectrum-Tabs--sizeL { - --spectrum-tabs-item-height: var(--spectrum-tab-item-height-large); - --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large); - --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large); - --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-large); - --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-large); - --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large); - - --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-200); - --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large); - - --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large); - --spectrum-tabs-font-size: var(--spectrum-font-size-200); - } - - &.spectrum-Tabs--sizeXL { - --spectrum-tabs-item-height: var(--spectrum-tab-item-height-extra-large); - --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large); - --spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large); - --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large); - --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large); - --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large); - - --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-300); - --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large); - - --spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large); - --spectrum-tabs-font-size: var(--spectrum-font-size-300); - } - - &.spectrum-Tabs--emphasized { - --spectrum-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-accent-content-color-default)); - --spectrum-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-accent-content-color-hover)); - --spectrum-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-accent-content-color-key-focus)); - - --spectrum-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-accent-content-color-default)); - } - - &.spectrum-Tabs--vertical { - --spectrum-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); - } - - &.spectrum-Tabs--vertical-right { - --spectrum-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left); - } - - &.spectrum-Tabs--vertical:dir(rtl) { - --spectrum-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left); - } - - &.spectrum-Tabs--vertical-right:dir(rtl) { - --spectrum-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); - } - - &.spectrum-Tabs--compact { - --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium)); - --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); - --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); - --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)); - - &.spectrum-Tabs--sizeS { - --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small)); - --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); - --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); - --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small)); - } - - &.spectrum-Tabs--sizeL { - --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large)); - --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); - --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); - --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large)); - } - - &.spectrum-Tabs--sizeXL { - --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large)); - --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); - --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); - --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large)); - } - } } } diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js index b3222ce7d64..3764b69a0b1 100644 --- a/components/tag/stories/template.js +++ b/components/tag/stories/template.js @@ -8,6 +8,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Tag", diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css index 6cc6dda51eb..fbf65e3bf50 100644 --- a/components/tag/themes/spectrum.css +++ b/components/tag/themes/spectrum.css @@ -11,217 +11,13 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) { .spectrum-Tag { - /* border */ - --spectrum-tag-border-color: var(--spectrum-gray-700); - --spectrum-tag-border-color-hover: var(--spectrum-gray-800); - --spectrum-tag-border-color-active: var(--spectrum-gray-900); - --spectrum-tag-border-color-focus: var(--spectrum-gray-800); - - /* corner border radius */ - --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - - /* background */ --spectrum-tag-background-color: var(--spectrum-gray-75); --spectrum-tag-background-color-hover: var(--spectrum-gray-75); --spectrum-tag-background-color-active: var(--spectrum-gray-200); --spectrum-tag-background-color-focus: var(--spectrum-gray-75); - - /* content color */ - --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - /* selected variant */ - --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - - /* disabled variant */ - --spectrum-tag-border-color-disabled: transparent; - --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color); - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); - --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); - --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); - --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); - --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); - --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); - - /* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */ - --spectrum-avatar-opacity-disabled: 0.3; - - --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-tag-border-width: var(--spectrum-border-width-100); - - /* focus ring */ - --spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - - /* label */ - --spectrum-tag-label-line-height: var(--spectrum-line-height-100); - --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight); - - /* selected */ - --spectrum-tag-content-color-selected: var(--spectrum-gray-50); - --spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); - --spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); - --spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - /* invalid variant */ - --spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900); - --spectrum-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); - --spectrum-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); - --spectrum-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); - - /* invalid variant content */ - --spectrum-tag-content-color-invalid: var(--spectrum-negative-content-color-default); - --spectrum-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover); - --spectrum-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down); - --spectrum-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus); - - /* invalid selected variant */ - --spectrum-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default); - --spectrum-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --spectrum-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down); - --spectrum-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus); - --spectrum-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default); - --spectrum-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --spectrum-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down); - --spectrum-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus); - - /* invalid selected variant content */ - --spectrum-tag-content-color-invalid-selected: var(--spectrum-white); - - /* emphasized variant */ - --spectrum-tag-border-color-emphasized: var(--spectrum-accent-background-color-default); - --spectrum-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover); - --spectrum-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down); - --spectrum-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); - --spectrum-tag-background-color-emphasized: var(--spectrum-accent-background-color-default); - --spectrum-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover); - --spectrum-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down); - --spectrum-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); - - /* emphasized variant content */ - --spectrum-tag-content-color-emphasized: var(--spectrum-white); - - /* disabled variant content */ - --spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color); - - /* ↧↧↧ Fallback defaults in case of no t-shirt size - set to Medium styles ↧↧↧ */ - /* icon spacing fallback if no t-shirt size */ - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - - /* avatar spacing fallback if no t-shirt size */ - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - - /* label spacing fallback if no t-shirt size */ - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - - /* clear button inline spacing fallback if no t-shirt size */ - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - - /* tag defaults if no t-shirt size */ - --spectrum-tag-height: var(--spectrum-component-height-100); - - /* text defaults if no t-shirt size */ - --spectrum-tag-font-size: var(--spectrum-font-size-100); - - /* clear button spacing if no t-shirt size */ - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - - /* t-shirt sizes */ - &.spectrum-Tag--sizeS { - --spectrum-tag-height: var(--spectrum-component-height-75); - --spectrum-tag-font-size: var(--spectrum-font-size-75); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75); - - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75); - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); - - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); - - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75); - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-corner-radius: var(--spectrum-tag-size-small-corner-radius); - --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-small-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-small-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-small-clear-button-spacing-inline-end); - } - - &, - &.spectrum-Tag--sizeM { - --spectrum-tag-height: var(--spectrum-component-height-100); - --spectrum-tag-font-size: var(--spectrum-font-size-100); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100); - - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); /* 6px 9px */ - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius); - --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end); - } - - &.spectrum-Tag--sizeL { - --spectrum-tag-height: var(--spectrum-component-height-200); - --spectrum-tag-font-size: var(--spectrum-font-size-200); - --spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200); - - --spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200); - --spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large); - - --spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200); - --spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); - - --spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large); - --spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large); - --spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200); - - --spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200); - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-corner-radius: var(--spectrum-tag-size-large-corner-radius); - --spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-large-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-large-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-large-clear-button-spacing-inline-end); - } } } diff --git a/components/taggroup/stories/template.js b/components/taggroup/stories/template.js index c088fe3f432..84e7d0417c7 100644 --- a/components/taggroup/stories/template.js +++ b/components/taggroup/stories/template.js @@ -6,6 +6,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-TagGroup", diff --git a/components/taggroup/themes/spectrum.css b/components/taggroup/themes/spectrum.css index 993026015e4..3bac81e4497 100644 --- a/components/taggroup/themes/spectrum.css +++ b/components/taggroup/themes/spectrum.css @@ -11,9 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-TagGroup { - --spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75); - --spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75); - } -} +@import "./spectrum-two.css"; diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js index 99ce084f505..212345536d9 100644 --- a/components/textfield/stories/template.js +++ b/components/textfield/stories/template.js @@ -9,6 +9,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; /** * @typedef API diff --git a/components/textfield/themes/spectrum.css b/components/textfield/themes/spectrum.css index 776bfb07488..3bac81e4497 100644 --- a/components/textfield/themes/spectrum.css +++ b/components/textfield/themes/spectrum.css @@ -11,183 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Textfield { - --spectrum-textfield-border-color: var(--spectrum-gray-500); - --spectrum-textfield-border-color-hover: var(--spectrum-gray-600); - --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); - --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - - --spectrum-textfield-border-width: var(--spectrum-border-width-100); - - --spectrum-texfield-animation-duration: var(--spectrum-animation-duration-100); - - --spectrum-textfield-width: 240px; /* override per api */ - --spectrum-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier); - --spectrum-textfield-corner-radius: var(--spectrum-corner-radius-100); - - /* default spacing */ - --spectrum-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet); - --spectrum-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100); - --spectrum-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100); - --spectrum-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet); - - /* default label spacing */ - --spectrum-textfield-label-spacing-block: var(--spectrum-field-label-to-component); - - /* default help text spacing */ - --spectrum-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component); - - /* quiet spacing */ - --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet); - --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet); - - /* font styles */ - --spectrum-textfield-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-textfield-font-weight: var(--spectrum-regular-font-weight); - - /* character count */ - --spectrum-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-textfield-character-count-font-weight: var(--spectrum-regular-font-weight); - --spectrum-textfield-character-count-spacing-inline: var(--spectrum-spacing-200); - --spectrum-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); - - /* focus indicator */ - --spectrum-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - /*** Colors ***/ - --spectrum-textfield-background-color: var(--spectrum-gray-50); - - /* Text Colors */ - --spectrum-textfield-text-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus); - --spectrum-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); - --spectrum-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus); - - /* Read Only Text Color */ - --spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); - - /* Disabled Colors */ - --spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-textfield-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color); - - /* Invalid Colors */ - --spectrum-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default); - --spectrum-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); - --spectrum-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); - --spectrum-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); - --spectrum-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); - --spectrum-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); - - --spectrum-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default); - - /* Valid Colors */ - --spectrum-textfield-text-color-valid: var(--spectrum-neutral-content-color-default); - --spectrum-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - - /* Focus Indicator Color */ - --spectrum-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color); - - /* Text Area / Multiline */ - --spectrum-text-area-min-inline-size: var(--spectrum-text-area-minimum-width); - --spectrum-text-area-min-block-size: var(--spectrum-text-area-minimum-height); - - /********* Text field t-shirt sizes *********/ - &.spectrum-Textfield--sizeS { - --spectrum-textfield-height: var(--spectrum-component-height-75); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); - - /* Text Area / Multiline size small */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75); - } - - &, - &.spectrum-Textfield--sizeM { - --spectrum-textfield-height: var(--spectrum-component-height-100); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); - - /* Text Area / Multiline size medium */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100); - } - - &.spectrum-Textfield--sizeL { - --spectrum-textfield-height: var(--spectrum-component-height-200); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); - - /* Text Area / Multiline size large */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-200); - } - - &.spectrum-Textfield--sizeXL { - --spectrum-textfield-height: var(--spectrum-component-height-300); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); - - /* Text Area / Multiline size extra large */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300); - } - } -} +@import "./spectrum-two.css"; diff --git a/components/thumbnail/stories/template.js b/components/thumbnail/stories/template.js index da3ebfb5f00..0ccb0243972 100644 --- a/components/thumbnail/stories/template.js +++ b/components/thumbnail/stories/template.js @@ -6,6 +6,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Thumbnail", diff --git a/components/thumbnail/themes/spectrum.css b/components/thumbnail/themes/spectrum.css index e73a9f019b9..3bac81e4497 100644 --- a/components/thumbnail/themes/spectrum.css +++ b/components/thumbnail/themes/spectrum.css @@ -11,75 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Thumbnail { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); - - --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75); - --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); - - /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-thumbnail-border-color-rgba: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-color-opacity)); - --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); - --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); - --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); - --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); - - --spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200); - --spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800); - - --spectrum-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); - } - - .spectrum-Thumbnail--size50 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); - } - - .spectrum-Thumbnail--size75 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); - } - - .spectrum-Thumbnail--size100 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100); - } - - .spectrum-Thumbnail--size200 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); - } - - .spectrum-Thumbnail--size300 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300); - } - - .spectrum-Thumbnail--size400 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400); - } - - .spectrum-Thumbnail--size500 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); - } - - .spectrum-Thumbnail--size600 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600); - } - - .spectrum-Thumbnail--size700 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700); - } - - .spectrum-Thumbnail--size800 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800); - } - - .spectrum-Thumbnail--size900 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900); - } - - .spectrum-Thumbnail--size1000 { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); - } -} +@import "./spectrum-two.css"; diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js index b58e8490a56..8fb9faacbcf 100644 --- a/components/toast/stories/template.js +++ b/components/toast/stories/template.js @@ -8,6 +8,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Toast", diff --git a/components/toast/themes/spectrum.css b/components/toast/themes/spectrum.css index a8f4af9b620..3bac81e4497 100644 --- a/components/toast/themes/spectrum.css +++ b/components/toast/themes/spectrum.css @@ -11,50 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Toast { - --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - - /* Hardcoded variables */ - --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); - - /* Size */ - --spectrum-toast-font-size: var(--spectrum-font-size-100); - --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-toast-block-size: var(--spectrum-toast-height); - --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --spectrum-toast-border-width: var(--spectrum-border-width-100); - - --spectrum-toast-line-height: var(--spectrum-line-height-100); - --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - - /* Space */ - --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - - --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); - --spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); - - --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - - --spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); - - --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); - --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100); - - --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100); - --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100); - - --spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); - - /* Color */ - --spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); - --spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); - --spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); - - --spectrum-toast-text-and-icon-color: var(--spectrum-white); - - --spectrum-toast-divider-color: var(--spectrum-transparent-white-300); - } -} +@import "./spectrum-two.css"; diff --git a/components/tooltip/stories/template.js b/components/tooltip/stories/template.js index 018f985c87b..eb0e16773b3 100644 --- a/components/tooltip/stories/template.js +++ b/components/tooltip/stories/template.js @@ -7,6 +7,8 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Tooltip", diff --git a/components/tooltip/themes/spectrum.css b/components/tooltip/themes/spectrum.css index 56020def198..3bac81e4497 100644 --- a/components/tooltip/themes/spectrum.css +++ b/components/tooltip/themes/spectrum.css @@ -11,63 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); - - --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100); - - /* override if additional spacing to source is required */ - --spectrum-tooltip-margin: 0px; - - --spectrum-tooltip-height: var(--spectrum-component-height-75); - --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100); - - --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - - --spectrum-tooltip-font-size: var(--spectrum-font-size-75); - --spectrum-tooltip-line-height: var(--spectrum-line-height-100); - --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight); - - /* horizontal spacing */ - --spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - - /* vertical spacing */ - --spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75); - --spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75); - - /* icon spacing */ - --spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); - --spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); - - /* colors */ - --spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default); - --spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default); - --spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default); - - --spectrum-tooltip-content-color: var(--spectrum-white); - - /* tip */ - --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - - /* Width and height of square element used to render the tip triangle. */ - --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size); - - /* Percentage value of height divided by width, for calculating clip-path within a square tip. */ - --spectrum-tooltip-tip-height-percentage: 50%; - - /* Tip inset from container edges for clip-paths calculation, to fix hairline gap in Chrome cause by antialiasing. */ - --spectrum-tooltip-tip-antialiasing-inset: 0.5px; - - /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ - --spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - - /* neutral background changes per theme */ - --spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral); - } -} +@import "./spectrum-two.css"; diff --git a/components/tray/stories/template.js b/components/tray/stories/template.js index 9912c667f42..0cc13cedbcc 100644 --- a/components/tray/stories/template.js +++ b/components/tray/stories/template.js @@ -6,6 +6,8 @@ import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Tray", diff --git a/components/tray/themes/spectrum.css b/components/tray/themes/spectrum.css index c13127f2069..3bac81e4497 100644 --- a/components/tray/themes/spectrum.css +++ b/components/tray/themes/spectrum.css @@ -11,22 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Tray { - /* Placeholder tokens */ - --spectrum-tray-exit-animation-delay: 0ms; - --spectrum-tray-entry-animation-delay: 160ms; - - /* Maximum width for landscape */ - --spectrum-tray-max-inline-size: 375px; - - /* https://spectrum.adobe.com/page/tray/#Maximum-height */ - --spectrum-tray-spacing-edge-to-tray-safe-zone: 64px; - - --spectrum-tray-entry-animation-duration: var(--spectrum-animation-duration-500); - --spectrum-tray-exit-animation-duration: var(--spectrum-animation-duration-100); - - --spectrum-tray-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tray-background-color: var(--spectrum-background-layer-2-color); - } -} +@import "./spectrum-two.css"; diff --git a/components/treeview/stories/template.js b/components/treeview/stories/template.js index cb148a7f3cc..300f22304b3 100644 --- a/components/treeview/stories/template.js +++ b/components/treeview/stories/template.js @@ -8,6 +8,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const TreeViewItem = ({ rootClass = "spectrum-TreeView", diff --git a/components/treeview/themes/spectrum.css b/components/treeview/themes/spectrum.css index a47f566a3ae..3bac81e4497 100644 --- a/components/treeview/themes/spectrum.css +++ b/components/treeview/themes/spectrum.css @@ -11,115 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-TreeView { - --spectrum-treeview-line-height: var(--spectrum-line-height-200); - --spectrum-treeview-margin-block: 1em; - --spectrum-treeview-font-size: var(--spectrum-font-size-100); - - --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-100); - --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-medium); - - --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-100); - --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-100); - - --spectrum-treeview-section-spacing: var(--spectrum-treeview-item-indentation-medium); - --spectrum-treeview-heading-font-weight: var(--spectrum-bold-font-weight); - --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-treeview-heading-color: var(--spectrum-heading-color); - - --spectrum-treeview-item-border-size: var(--spectrum-border-width-200); - --spectrum-treeview-item-border-size-selected: 1px; - --spectrum-treeview-item-border-radius: 0px; - - --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800); - --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700); - - --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); - - --spectrum-treeview-item-border-color-quiet-selected: transparent; - - --spectrum-treeview-item-icon-gap: var(--spectrum-text-to-visual-75); - --spectrum-treeview-item-icon-color: var(--spectrum-gray-700); - --spectrum-treeview-item-icon-color-hover: var(--spectrum-gray-900); - --spectrum-treeview-item-icon-color-focus: var(--spectrum-gray-900); - --spectrum-treeview-item-icon-color-selected: var(--spectrum-gray-900); - --spectrum-treeview-item-icon-color-disabled: var(--spectrum-disabled-content-color); - - --spectrum-treeview-item-text-color: var(--spectrum-neutral-content-color-default); - --spectrum-treeview-item-text-color-selected: var(--spectrum-gray-900); - --spectrum-treeview-item-text-color-disabled: var(--spectrum-gray-500); - --spectrum-treeview-item-text-color-focus: var(--spectrum-gray-900); - --spectrum-treeview-item-text-color-hover: var(--spectrum-gray-900); - - --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-100)); - --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium); - - --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px); - - --spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100); - - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - } - } - - .spectrum-TreeView--sizeS { - --spectrum-treeview-font-size: var(--spectrum-font-size-75); - - --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-75); - --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-small); - --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75); - - --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-75); - --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-75)); - --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-75); - --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small); - - --spectrum-treeview-item-min-block-size-thumbnail-offset: 6px; - } - - .spectrum-TreeView--sizeL { - --spectrum-treeview-font-size: var(--spectrum-font-size-200); - - --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-large); - --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-200); - --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200); - - --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-200); - --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-200)); - --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-200); - --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large); - - --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px; - } - - .spectrum-TreeView--sizeXL { - --spectrum-treeview-font-size: var(--spectrum-font-size-300); - - --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-extra-large); - --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-300); - --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300); - - --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-300); - --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-300)); - --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-300); - --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large); - - --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px; - } - - .spectrum-TreeView--quiet { - --spectrum-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-quiet-selected, var(--spectrum-treeview-item-background-color-quiet-selected))); - --spectrum-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent)); - } - - .spectrum-TreeView--thumbnail { - --spectrum-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size-thumbnail, calc(var(--spectrum-treeview-item-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset))); - } - - .spectrum-TreeView--detached { - --spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100)); - } -} +@import "./spectrum-two.css"; diff --git a/components/typography/stories/template.js b/components/typography/stories/template.js index c3eb5f4fe40..0d6a5b811d3 100644 --- a/components/typography/stories/template.js +++ b/components/typography/stories/template.js @@ -7,6 +7,8 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = (args, context) => { let { diff --git a/components/typography/themes/spectrum.css b/components/typography/themes/spectrum.css index d692a618ff6..3bac81e4497 100644 --- a/components/typography/themes/spectrum.css +++ b/components/typography/themes/spectrum.css @@ -11,155 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum { - --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; - - --spectrum-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-font-style: var(--spectrum-default-font-style); - --spectrum-font-size: var(--spectrum-font-size-100); - } - - .spectrum-Heading { - --spectrum-heading-sans-serif-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family-stack); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); - - --spectrum-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - - --spectrum-heading-font-color: var(--spectrum-heading-color); - } - - .spectrum-Heading--sizeXXS { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxs); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxs); - } - - .spectrum-Heading--sizeXS { - --spectrum-heading-font-size: var(--spectrum-heading-size-xs); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xs); - } - - .spectrum-Heading--sizeS { - --spectrum-heading-font-size: var(--spectrum-heading-size-s); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-s); - } - - .spectrum-Heading, - .spectrum-Heading--sizeM { - --spectrum-heading-font-size: var(--spectrum-heading-size-m); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); - } - - .spectrum-Heading--sizeL { - --spectrum-heading-font-size: var(--spectrum-heading-size-l); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-l); - } - - .spectrum-Heading--sizeXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xl); - } - - .spectrum-Heading--sizeXXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxl); - } - - .spectrum-Heading--sizeXXXL { - --spectrum-heading-font-size: var(--spectrum-heading-size-xxxl); - --spectrum-heading-cjk-font-size: var(--spectrum-heading-cjk-size-xxxl); - } - - .spectrum-Body { - --spectrum-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family-stack); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); - - --spectrum-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - - --spectrum-body-font-color: var(--spectrum-body-color); - } - - .spectrum-Body--sizeXS { - --spectrum-body-font-size: var(--spectrum-body-size-xs); - } - - .spectrum-Body--sizeS { - --spectrum-body-font-size: var(--spectrum-body-size-s); - } - - .spectrum-Body, - .spectrum-Body--sizeM { - --spectrum-body-font-size: var(--spectrum-body-size-m); - } - - .spectrum-Body--sizeL { - --spectrum-body-font-size: var(--spectrum-body-size-l); - } - - .spectrum-Body--sizeXL { - --spectrum-body-font-size: var(--spectrum-body-size-xl); - } - - .spectrum-Body--sizeXXL { - --spectrum-body-font-size: var(--spectrum-body-size-xxl); - } - - .spectrum-Body--sizeXXXL { - --spectrum-body-font-size: var(--spectrum-body-size-xxxl); - } - - .spectrum-Detail { - --spectrum-detail-sans-serif-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family-stack); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); - - --spectrum-detail-font-color: var(--spectrum-detail-color); - } - - .spectrum-Detail--sizeS { - --spectrum-detail-font-size: var(--spectrum-detail-size-s); - } - - .spectrum-Detail, - .spectrum-Detail--sizeM { - --spectrum-detail-font-size: var(--spectrum-detail-size-m); - } - - .spectrum-Detail--sizeL { - --spectrum-detail-font-size: var(--spectrum-detail-size-l); - } - - .spectrum-Detail--sizeXL { - --spectrum-detail-font-size: var(--spectrum-detail-size-xl); - } - - .spectrum-Code { - --spectrum-code-font-family: var(--spectrum-code-font-family-stack); - --spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --spectrum-code-font-color: var(--spectrum-code-color); - } - - .spectrum-Code--sizeXS { - --spectrum-code-font-size: var(--spectrum-code-size-xs); - } - - .spectrum-Code--sizeS { - --spectrum-code-font-size: var(--spectrum-code-size-s); - } - - .spectrum-Code, - .spectrum-Code--sizeM { - --spectrum-code-font-size: var(--spectrum-code-size-m); - } - - .spectrum-Code--sizeL { - --spectrum-code-font-size: var(--spectrum-code-size-l); - } - - .spectrum-Code--sizeXL { - --spectrum-code-font-size: var(--spectrum-code-size-xl); - } -} +@import "./spectrum-two.css"; diff --git a/components/underlay/stories/template.js b/components/underlay/stories/template.js index b2b3e2ba078..35a1bf324d7 100644 --- a/components/underlay/stories/template.js +++ b/components/underlay/stories/template.js @@ -5,6 +5,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Underlay", diff --git a/components/underlay/themes/spectrum.css b/components/underlay/themes/spectrum.css index cd708baec89..3bac81e4497 100644 --- a/components/underlay/themes/spectrum.css +++ b/components/underlay/themes/spectrum.css @@ -11,17 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Underlay { - --spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0); - --spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in); - --spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out); - --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); - --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300); - --spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200); - - /* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */ - --spectrum-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); - } -} +@import "./spectrum-two.css"; diff --git a/components/well/stories/template.js b/components/well/stories/template.js index 5a11cf7e557..2753df1215a 100644 --- a/components/well/stories/template.js +++ b/components/well/stories/template.js @@ -5,6 +5,8 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-Well", diff --git a/components/well/themes/spectrum.css b/components/well/themes/spectrum.css index dd89f88039a..3bac81e4497 100644 --- a/components/well/themes/spectrum.css +++ b/components/well/themes/spectrum.css @@ -11,9 +11,4 @@ * governing permissions and limitations under the License. */ -@container style(--system: legacy) { - .spectrum-Well { - --spectrum-well-border-width: var(--spectrum-border-width-100); - --spectrum-well-content-color: var(--spectrum-body-color); - } -} +@import "./spectrum-two.css"; diff --git a/generator/templates/themes/spectrum.css.hbs b/generator/templates/themes/spectrum.css.hbs index 32693cc0e2d..212e75ce8f7 100644 --- a/generator/templates/themes/spectrum.css.hbs +++ b/generator/templates/themes/spectrum.css.hbs @@ -11,4 +11,6 @@ * governing permissions and limitations under the License. */ +@import "./spectrum-two.css"; + @container style(--system: legacy) {} diff --git a/package.json b/package.json index a1529842512..9ac50f3c9e5 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,9 @@ "@commitlint/config-conventional": "^19.2.2", "@nx/devkit": "^19.5.3", "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^14.3.1", + "@spectrum-tools/postcss-add-theming-layer": "workspace:^", + "@spectrum-tools/postcss-property-rollup": "workspace:^", + "@spectrum-tools/postcss-rgb-mapping": "workspace:^", "at-rule-packer": "^0.4.2", "autoprefixer": "^10.4.19", "colors": "^1.4.0", @@ -87,7 +90,6 @@ "open": "^10.1.0", "pajv": "^1.2.0", "postcss": "^8.4.40", - "postcss-add-theming-layer": "workspace:^", "postcss-extend": "^1.0.5", "postcss-hover-media-feature": "^1.0.2", "postcss-import": "^16.1.0", @@ -96,7 +98,6 @@ "postcss-preset-env": "^9.5.13", "postcss-pseudo-classes": "^0.4.0", "postcss-reporter": "^7.1.0", - "postcss-rgb-mapping": "workspace:^", "postcss-selector-replace": "^1.0.2", "postcss-sorting": "^8.0.2", "postcss-values-parser": "^6.0.2", diff --git a/plugins/postcss-add-theming-layer/package.json b/plugins/postcss-add-theming-layer/package.json index 047a4c6f3f6..adaaee33003 100644 --- a/plugins/postcss-add-theming-layer/package.json +++ b/plugins/postcss-add-theming-layer/package.json @@ -1,7 +1,6 @@ { - "private": true, - "name": "postcss-add-theming-layer", - "version": "2.1.1-s2-foundations.0", + "name": "@spectrum-tools/postcss-add-theming-layer", + "version": "0.0.0", "description": "Leveraging style container queries to create an abstraction layer for supporting multiple theming systems", "license": "Apache-2.0", "author": "Adobe", @@ -24,7 +23,7 @@ "devDependencies": { "ava": "^6.1.3", "c8": "^10.1.2", - "postcss": "^8.4.39" + "postcss": "^8.4.40" }, "keywords": [ "css", diff --git a/plugins/postcss-property-rollup/package.json b/plugins/postcss-property-rollup/package.json index 911a2dc0a14..55c2366e164 100644 --- a/plugins/postcss-property-rollup/package.json +++ b/plugins/postcss-property-rollup/package.json @@ -1,18 +1,25 @@ { - "private": true, - "name": "postcss-property-rollup", - "version": "2.0.1", + "name": "@spectrum-tools/postcss-property-rollup", + "version": "0.0.0", "description": "Combines custom properties from multiple selectors into a single selector", "license": "Apache-2.0", "author": "Adobe", + "contributors": [ + "Cassondra Roberts " + ], "main": "index.js", + "files": [ + "package.json", + "index.js", + "*.md" + ], "peerDependencies": { "postcss": ">=8" }, "devDependencies": { "ava": "^6.1.3", "c8": "^10.1.2", - "postcss": "^8.4.39" + "postcss": "^8.4.40" }, "keywords": [ "css", diff --git a/plugins/postcss-rgb-mapping/package.json b/plugins/postcss-rgb-mapping/package.json index 9b1fca8bdcd..b01e87575e1 100644 --- a/plugins/postcss-rgb-mapping/package.json +++ b/plugins/postcss-rgb-mapping/package.json @@ -1,7 +1,6 @@ { - "private": true, - "name": "postcss-rgb-mapping", - "version": "2.0.0", + "name": "@spectrum-tools/postcss-rgb-mapping", + "version": "0.0.0", "description": "Remaps rgb(a) values to an rgb postfixed variable", "license": "Apache-2.0", "author": "Adobe", diff --git a/postcss.config.js b/postcss.config.js index 8b1697066da..45f1b46aa6a 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -11,16 +11,17 @@ * governing permissions and limitations under the License. */ -const { join, sep } = require("path"); +const { join } = require("path"); module.exports = ({ file, - cwd, skipMapping = false, referencesOnly = false, preserveVariables = true, stripLocalSelectors = false, resolveImports = true, + shouldCombine = false, + theme = "spectrum", lint = true, verbose = true, minify = false, @@ -29,10 +30,18 @@ module.exports = ({ ...options } = {}) => { const isProduction = env.toLowerCase() === "production"; - if (!isProduction && !options.map) { - options.map = { inline: false }; + + if (typeof options?.map === "undefined") { + options.map = isProduction ? false : { inline: false }; + } + + let baseClass = ".spectrum"; + if (theme === "spectrum") { + baseClass += ".spectrum--legacy"; + } + else if (theme === "express") { + baseClass += ".spectrum--express"; } - else options.map = false; // If this is the legacy tokens file, update the .spectrum class to .spectrum--legacy if (typeof file === "string" && file.includes("@spectrum-css/tokens-legacy")) { @@ -42,12 +51,12 @@ module.exports = ({ }; } - if (cwd && cwd.split(sep).pop() === ".storybook") { - skipMapping = false; - referencesOnly = false; - preserveVariables = true; - stripLocalSelectors = false; - } + // if (cwd && cwd.split(sep).pop() === ".storybook") { + // skipMapping = false; + // referencesOnly = false; + // preserveVariables = true; + // stripLocalSelectors = false; + // } return { ...options, @@ -68,7 +77,7 @@ module.exports = ({ } : false, /* --------------------------------------------------- */ /* ------------------- VARIABLE PARSING -------------- */ - "postcss-add-theming-layer": { + "@spectrum-tools/postcss-add-theming-layer": { selectorPrefix: "spectrum", skipMapping, preserveVariables, @@ -76,6 +85,9 @@ module.exports = ({ stripLocalSelectors, debug: verbose, }, + "@spectrum-tools/postcss-property-rollup": shouldCombine ? { + newSelector: baseClass, + } : false, ...additionalPlugins, /* --------------------------------------------------- */ /* ------------------- POLYFILLS --------------------- */ diff --git a/tasks/component-builder.js b/tasks/component-builder.js index a7d9b1e6cf5..3458307a7d2 100644 --- a/tasks/component-builder.js +++ b/tasks/component-builder.js @@ -401,6 +401,8 @@ async function buildThemes({ cwd = process.cwd(), clean = false } = {}) { return Promise.reject( new Error(`No content found for ${relativePrint(input, { cwd })}`), ); + + const theme = path.basename(input, ".css"); return processCSS( content, path.join(cwd, input), @@ -414,6 +416,8 @@ async function buildThemes({ cwd = process.cwd(), clean = false } = {}) { preserveVariables: true, // Only output the new selectors with the system mappings stripLocalSelectors: true, + shouldCombine: true, + theme, map: false, }, ).then(async (reports = []) => { diff --git a/tokens/components/bridge/button.css b/tokens/components/bridge/button.css index 9b422b84525..fb312c40e96 100644 --- a/tokens/components/bridge/button.css +++ b/tokens/components/bridge/button.css @@ -12,6 +12,15 @@ */ .spectrum-Button { + --spectrum-button-animation-duration: var(--system-button-animation-duration); + --spectrum-button-border-radius: var(--system-button-border-radius); + --spectrum-button-border-width: var(--system-button-border-width); + --spectrum-button-line-height: var(--system-button-line-height); + --spectrum-button-focus-ring-gap: var(--system-button-focus-ring-gap); + --spectrum-button-focus-ring-border-radius: var(--system-button-focus-ring-border-radius); + --spectrum-button-focus-ring-thickness: var(--system-button-focus-ring-thickness); + --spectrum-button-focus-indicator-color: var(--system-button-focus-indicator-color); + --spectrum-button-intended-icon-size: var(--system-button-intended-icon-size); --spectrum-button-background-color-default: var(--system-button-background-color-default); --spectrum-button-background-color-hover: var(--system-button-background-color-hover); --spectrum-button-background-color-down: var(--system-button-background-color-down); @@ -27,75 +36,6 @@ --spectrum-button-background-color-disabled: var(--system-button-background-color-disabled); --spectrum-button-border-color-disabled: var(--system-button-border-color-disabled); --spectrum-button-content-color-disabled: var(--system-button-content-color-disabled); - --spectrum-button-animation-duration: var(--system-button-animation-duration); - --spectrum-button-border-radius: var(--system-button-border-radius); - --spectrum-button-border-width: var(--system-button-border-width); - --spectrum-button-line-height: var(--system-button-line-height); - --spectrum-button-focus-ring-gap: var(--system-button-focus-ring-gap); - --spectrum-button-focus-ring-border-radius: var(--system-button-focus-ring-border-radius); - --spectrum-button-focus-ring-thickness: var(--system-button-focus-ring-thickness); - --spectrum-button-focus-indicator-color: var(--system-button-focus-indicator-color); - --spectrum-button-intended-icon-size: var(--system-button-intended-icon-size); -} - -.spectrum-Button.spectrum-Button--sizeS { - --spectrum-button-min-width: var(--system-button-size-s-min-width); - --spectrum-button-border-radius: var(--system-button-size-s-border-radius); - --spectrum-button-height: var(--system-button-size-s-height); - --spectrum-button-font-size: var(--system-button-size-s-font-size); - --spectrum-button-edge-to-visual: var(--system-button-size-s-edge-to-visual); - --spectrum-button-edge-to-visual-only: var(--system-button-size-s-edge-to-visual-only); - --spectrum-button-edge-to-text: var(--system-button-size-s-edge-to-text); - --spectrum-button-padding-label-to-icon: var(--system-button-size-s-padding-label-to-icon); - --spectrum-button-top-to-text: var(--system-button-size-s-top-to-text); - --spectrum-button-bottom-to-text: var(--system-button-size-s-bottom-to-text); - --spectrum-button-top-to-icon: var(--system-button-size-s-top-to-icon); - --spectrum-button-intended-icon-size: var(--system-button-size-s-intended-icon-size); -} - -.spectrum-Button.spectrum-Button--sizeM { - --spectrum-button-min-width: var(--system-button-size-m-min-width); - --spectrum-button-border-radius: var(--system-button-size-m-border-radius); - --spectrum-button-height: var(--system-button-size-m-height); - --spectrum-button-font-size: var(--system-button-size-m-font-size); - --spectrum-button-edge-to-visual: var(--system-button-size-m-edge-to-visual); - --spectrum-button-edge-to-visual-only: var(--system-button-size-m-edge-to-visual-only); - --spectrum-button-edge-to-text: var(--system-button-size-m-edge-to-text); - --spectrum-button-padding-label-to-icon: var(--system-button-size-m-padding-label-to-icon); - --spectrum-button-top-to-text: var(--system-button-size-m-top-to-text); - --spectrum-button-bottom-to-text: var(--system-button-size-m-bottom-to-text); - --spectrum-button-top-to-icon: var(--system-button-size-m-top-to-icon); - --spectrum-button-intended-icon-size: var(--system-button-size-m-intended-icon-size); -} - -.spectrum-Button.spectrum-Button--sizeL { - --spectrum-button-min-width: var(--system-button-size-l-min-width); - --spectrum-button-border-radius: var(--system-button-size-l-border-radius); - --spectrum-button-height: var(--system-button-size-l-height); - --spectrum-button-font-size: var(--system-button-size-l-font-size); - --spectrum-button-edge-to-visual: var(--system-button-size-l-edge-to-visual); - --spectrum-button-edge-to-visual-only: var(--system-button-size-l-edge-to-visual-only); - --spectrum-button-edge-to-text: var(--system-button-size-l-edge-to-text); - --spectrum-button-padding-label-to-icon: var(--system-button-size-l-padding-label-to-icon); - --spectrum-button-top-to-text: var(--system-button-size-l-top-to-text); - --spectrum-button-bottom-to-text: var(--system-button-size-l-bottom-to-text); - --spectrum-button-top-to-icon: var(--system-button-size-l-top-to-icon); - --spectrum-button-intended-icon-size: var(--system-button-size-l-intended-icon-size); -} - -.spectrum-Button.spectrum-Button--sizeXL { - --spectrum-button-min-width: var(--system-button-size-xl-min-width); - --spectrum-button-border-radius: var(--system-button-size-xl-border-radius); - --spectrum-button-height: var(--system-button-size-xl-height); - --spectrum-button-font-size: var(--system-button-size-xl-font-size); - --spectrum-button-edge-to-visual: var(--system-button-size-xl-edge-to-visual); - --spectrum-button-edge-to-visual-only: var(--system-button-size-xl-edge-to-visual-only); - --spectrum-button-edge-to-text: var(--system-button-size-xl-edge-to-text); - --spectrum-button-padding-label-to-icon: var(--system-button-size-xl-padding-label-to-icon); - --spectrum-button-top-to-text: var(--system-button-size-xl-top-to-text); - --spectrum-button-bottom-to-text: var(--system-button-size-xl-bottom-to-text); - --spectrum-button-top-to-icon: var(--system-button-size-xl-top-to-icon); - --spectrum-button-intended-icon-size: var(--system-button-size-xl-intended-icon-size); } .spectrum-Button.spectrum-Button--accent { diff --git a/tokens/components/bridge/card.css b/tokens/components/bridge/card.css index b33d19fd279..f25c3bfac9b 100644 --- a/tokens/components/bridge/card.css +++ b/tokens/components/bridge/card.css @@ -69,10 +69,6 @@ --spectrum-card-selected-background-color-rgb: var(--system-card-dark-selected-background-color-rgb); } -.spectrum--darkest .spectrum-Card { - --spectrum-card-selected-background-color-rgb: var(--system-card-darkest-selected-background-color-rgb); -} - .spectrum-Card--quiet { --spectrum-card-content-margin-top: var(--system-card-quiet-content-margin-top); --spectrum-card-minimum-width: var(--system-card-quiet-minimum-width); diff --git a/tokens/components/bridge/closebutton.css b/tokens/components/bridge/closebutton.css index d93f68bce58..6ea6ec5addf 100644 --- a/tokens/components/bridge/closebutton.css +++ b/tokens/components/bridge/closebutton.css @@ -29,38 +29,38 @@ --spectrum-closebutton-focus-indicator-gap: var(--system-close-button-focus-indicator-gap); --spectrum-closebutton-focus-indicator-color: var(--system-close-button-focus-indicator-color); --spectrum-closebutton-height: var(--system-close-button-height); + --spectrum-closebutton-width: var(--system-close-button-width); --spectrum-closebutton-size: var(--system-close-button-size); --spectrum-closebutton-border-radius: var(--system-close-button-border-radius); --spectrum-closebutton-animation-duration: var(--system-close-button-animation-duration); - --spectrum-closebutton-width: var(--system-close-button-width); } .spectrum-Closebutton--sizeS { --spectrum-closebutton-height: var(--system-closebutton-size-s-height); + --spectrum-closebutton-width: var(--system-closebutton-size-s-width); --spectrum-closebutton-size: var(--system-closebutton-size-s-size); --spectrum-closebutton-border-radius: var(--system-closebutton-size-s-border-radius); - --spectrum-closebutton-width: var(--system-closebutton-size-s-width); } .spectrum-Closebutton--sizeM { --spectrum-closebutton-height: var(--system-closebutton-size-m-height); + --spectrum-closebutton-width: var(--system-closebutton-size-m-width); --spectrum-closebutton-size: var(--system-closebutton-size-m-size); --spectrum-closebutton-border-radius: var(--system-closebutton-size-m-border-radius); - --spectrum-closebutton-width: var(--system-closebutton-size-m-width); } .spectrum-Closebutton--sizeL { --spectrum-closebutton-height: var(--system-closebutton-size-l-height); + --spectrum-closebutton-width: var(--system-closebutton-size-l-width); --spectrum-closebutton-size: var(--system-closebutton-size-l-size); --spectrum-closebutton-border-radius: var(--system-closebutton-size-l-border-radius); - --spectrum-closebutton-width: var(--system-closebutton-size-l-width); } .spectrum-Closebutton--sizeXL { --spectrum-closebutton-height: var(--system-closebutton-size-xl-height); + --spectrum-closebutton-width: var(--system-closebutton-size-xl-width); --spectrum-closebutton-size: var(--system-closebutton-size-xl-size); --spectrum-closebutton-border-radius: var(--system-closebutton-size-xl-border-radius); - --spectrum-closebutton-width: var(--system-closebutton-size-xl-width); } .spectrum-CloseButton--staticWhite { diff --git a/tokens/components/bridge/coachindicator.css b/tokens/components/bridge/coachindicator.css index 2106a388bf8..c732c4ea60d 100644 --- a/tokens/components/bridge/coachindicator.css +++ b/tokens/components/bridge/coachindicator.css @@ -37,7 +37,6 @@ --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: var(--system-coach-indicator-quiet-animation-keyframe-0-scale); } -.spectrum-CoachIndicator--quiet, .spectrum-CoachIndicator.spectrum-CoachIndicator--quiet { --spectrum-coach-indicator-min-inline-size: var(--system-coach-indicator-quiet-min-inline-size); --spectrum-coach-indicator-min-block-size: var(--system-coach-indicator-quiet-min-block-size); diff --git a/tokens/components/bridge/divider.css b/tokens/components/bridge/divider.css index 1aaf6981779..7ae9b5b559c 100644 --- a/tokens/components/bridge/divider.css +++ b/tokens/components/bridge/divider.css @@ -22,20 +22,16 @@ --spectrum-divider-background-color-medium-static-black: var(--system-divider-background-color-medium-static-black); --spectrum-divider-background-color-large-static-black: var(--system-divider-background-color-large-static-black); --spectrum-divider-thickness: var(--system-divider-thickness); - --spectrum-divider-background-color: var(--system-divider-background-color); } .spectrum-Divider.spectrum-Divider--sizeS { --spectrum-divider-thickness: var(--system-divider-size-s-thickness); - --spectrum-divider-background-color: var(--system-divider-size-s-background-color); } .spectrum-Divider.spectrum-Divider--sizeM { --spectrum-divider-thickness: var(--system-divider-size-m-thickness); - --spectrum-divider-background-color: var(--system-divider-size-m-background-color); } .spectrum-Divider.spectrum-Divider--sizeL { --spectrum-divider-thickness: var(--system-divider-size-l-thickness); - --spectrum-divider-background-color: var(--system-divider-size-l-background-color); } diff --git a/tokens/components/bridge/icon.css b/tokens/components/bridge/icon.css index 00c907b21b9..a823ef29632 100644 --- a/tokens/components/bridge/icon.css +++ b/tokens/components/bridge/icon.css @@ -35,10 +35,6 @@ --spectrum-icon-size: var(--system-icon-size-xl-size); } -.spectrum-Icon--sizeXXL { - --spectrum-icon-size: var(--system-icon-size-xxl-size); -} - .spectrum-UIIcon-ChevronRight50 { --spectrum-icon-size: var(--system-ui-icon-chevron-right-50-icon-size); } diff --git a/tokens/components/bridge/stepper.css b/tokens/components/bridge/stepper.css index dc5181c4671..e61a37852c7 100644 --- a/tokens/components/bridge/stepper.css +++ b/tokens/components/bridge/stepper.css @@ -75,18 +75,13 @@ } .spectrum-Stepper.is-invalid { - --spectrum-stepper-border-color: var(--system-stepper-invalid-border-color); - --spectrum-stepper-border-color-hover: var(--system-stepper-invalid-border-color-hover); - --spectrum-stepper-border-color-focus: var(--system-stepper-invalid-border-color-focus); - --spectrum-stepper-border-color-focus-hover: var(--system-stepper-invalid-border-color-focus-hover); - --spectrum-stepper-border-color-keyboard-focus: var(--system-stepper-invalid-border-color-keyboard-focus); - --mod-infield-button-border-color: var(--system-stepper-invalid-infield-button-border-color); - --mod-textfield-icon-spacing-inline-start-invalid: var(--system-stepper-invalid-textfield-icon-spacing-inline-start-invalid); --mod-stepper-border-color: var(--system-stepper-invalid-border-color); --mod-stepper-border-color-hover: var(--system-stepper-invalid-border-color-hover); --mod-stepper-border-color-focus: var(--system-stepper-invalid-border-color-focus); --mod-stepper-border-color-focus-hover: var(--system-stepper-invalid-border-color-focus-hover); --mod-stepper-border-color-keyboard-focus: var(--system-stepper-invalid-border-color-keyboard-focus); + --mod-infield-button-border-color: var(--system-stepper-invalid-infield-button-border-color); + --mod-textfield-icon-spacing-inline-start-invalid: var(--system-stepper-invalid-textfield-icon-spacing-inline-start-invalid); } .spectrum-Stepper.is-invalid.is-focused { diff --git a/tokens/components/bridge/swatch.css b/tokens/components/bridge/swatch.css index e6d2ec47da6..5c141890a3b 100644 --- a/tokens/components/bridge/swatch.css +++ b/tokens/components/bridge/swatch.css @@ -54,15 +54,3 @@ --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-l-disabled-icon-size); --spectrum-swatch-slash-thickness: var(--system-swatch-size-l-slash-thickness); } - -.spectrum--light { - --spectrum-swatch-border-color: var(--system-light-swatch-border-color); -} - -.spectrum--dark { - --spectrum-swatch-border-color: var(--system-dark-swatch-border-color); -} - -.spectrum--darkest { - --spectrum-swatch-border-color: var(--system-darkest-swatch-border-color); -} diff --git a/tokens/components/bridge/tabs.css b/tokens/components/bridge/tabs.css index 367b5968871..87090b4257a 100644 --- a/tokens/components/bridge/tabs.css +++ b/tokens/components/bridge/tabs.css @@ -93,19 +93,19 @@ --spectrum-tabs-selection-indicator-color: var(--system-tabs-emphasized-selection-indicator-color); } -.spectrum-Tabs.spectrum-Tabs--vertical { +.spectrum-Tabs--vertical { --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-list-background-direction); } -.spectrum-Tabs.spectrum-Tabs--vertical-right { +.spectrum-Tabs--vertical-right { --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-right-list-background-direction); } -.spectrum-Tabs.spectrum-Tabs--vertical:dir(rtl) { +.spectrum-Tabs--vertical:dir(rtl) { --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-dir-rtl-list-background-direction); } -.spectrum-Tabs.spectrum-Tabs--vertical-right:dir(rtl) { +.spectrum-Tabs--vertical-right:dir(rtl) { --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-right-dir-rtl-list-background-direction); } @@ -136,19 +136,3 @@ --spectrum-tabs-bottom-to-text: var(--system-tabs-compact-size-xl-bottom-to-text); --spectrum-tabs-top-to-icon: var(--system-tabs-compact-size-xl-top-to-icon); } - -.spectrum-Tabs--vertical { - --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-list-background-direction); -} - -.spectrum-Tabs--vertical-right { - --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-right-list-background-direction); -} - -.spectrum-Tabs--vertical:dir(rtl) { - --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-dir-rtl-list-background-direction); -} - -.spectrum-Tabs--vertical-right:dir(rtl) { - --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-right-dir-rtl-list-background-direction); -} diff --git a/tokens/components/bridge/tag.css b/tokens/components/bridge/tag.css index f7764dbb8c4..c0ea72ab0f9 100644 --- a/tokens/components/bridge/tag.css +++ b/tokens/components/bridge/tag.css @@ -94,67 +94,6 @@ --spectrum-tag-height: var(--system-tag-height); --spectrum-tag-font-size: var(--system-tag-font-size); --spectrum-tag-clear-button-spacing-block: var(--system-tag-clear-button-spacing-block); - --spectrum-tag-corner-radius: var(--system-tag-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--system-tag-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-clear-button-spacing-inline-end); -} - -.spectrum-Tag.spectrum-Tag--sizeS { - --spectrum-tag-height: var(--system-tag-size-s-height); - --spectrum-tag-font-size: var(--system-tag-size-s-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-s-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-s-clear-button-spacing-inline-start); - --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-s-clear-button-spacing-block); - --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-s-icon-spacing-block-start); - --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-s-icon-spacing-block-end); - --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-s-icon-spacing-inline-end); - --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-s-avatar-spacing-block-start); - --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-s-avatar-spacing-block-end); - --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-s-avatar-spacing-inline-end); - --spectrum-tag-label-spacing-block: var(--system-tag-size-s-label-spacing-block); - --spectrum-tag-corner-radius: var(--system-tag-size-s-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-size-s-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-s-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-s-clear-button-spacing-inline-end); -} - -.spectrum-Tag.spectrum-Tag--sizeM { - --spectrum-tag-height: var(--system-tag-size-m-height); - --spectrum-tag-font-size: var(--system-tag-size-m-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-m-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-m-clear-button-spacing-inline-start); - --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-m-clear-button-spacing-block); - --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-m-icon-spacing-block-start); - --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-m-icon-spacing-block-end); - --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-m-icon-spacing-inline-end); - --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-m-avatar-spacing-block-start); - --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-m-avatar-spacing-block-end); - --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-m-avatar-spacing-inline-end); - --spectrum-tag-label-spacing-block: var(--system-tag-size-m-label-spacing-block); - --spectrum-tag-corner-radius: var(--system-tag-size-m-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-size-m-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-m-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-m-clear-button-spacing-inline-end); -} - -.spectrum-Tag.spectrum-Tag--sizeL { - --spectrum-tag-height: var(--system-tag-size-l-height); - --spectrum-tag-font-size: var(--system-tag-size-l-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-l-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-l-clear-button-spacing-inline-start); - --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-l-clear-button-spacing-block); - --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-l-icon-spacing-block-start); - --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-l-icon-spacing-block-end); - --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-l-icon-spacing-inline-end); - --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-l-avatar-spacing-block-start); - --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-l-avatar-spacing-block-end); - --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-l-avatar-spacing-inline-end); - --spectrum-tag-label-spacing-block: var(--system-tag-size-l-label-spacing-block); - --spectrum-tag-corner-radius: var(--system-tag-size-l-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-size-l-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-l-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-l-clear-button-spacing-inline-end); } .spectrum-Tag--sizeS { diff --git a/tokens/components/express/accordion.css b/tokens/components/express/accordion.css index 178d88ab14b..5a214ec733d 100644 --- a/tokens/components/express/accordion.css +++ b/tokens/components/express/accordion.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-accordion-item-height: var(--spectrum-component-height-200); --system-accordion-item-width: var(--spectrum-accordion-minimum-width); --system-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); diff --git a/tokens/components/express/actionbar.css b/tokens/components/express/actionbar.css index 802d677bc81..6015588eb7c 100644 --- a/tokens/components/express/actionbar.css +++ b/tokens/components/express/actionbar.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-action-bar-height: var(--spectrum-action-bar-height); --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); diff --git a/tokens/components/express/actionbutton.css b/tokens/components/express/actionbutton.css index 7add2939b42..6cc4917f807 100644 --- a/tokens/components/express/actionbutton.css +++ b/tokens/components/express/actionbutton.css @@ -11,21 +11,30 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-action-button-background-color-default: var(--spectrum-gray-75); - --system-action-button-background-color-hover: var(--spectrum-gray-200); - --system-action-button-background-color-down: var(--spectrum-gray-300); - --system-action-button-background-color-focus: var(--spectrum-gray-200); - --system-action-button-border-color-default: var(--spectrum-gray-400); - --system-action-button-border-color-hover: var(--spectrum-gray-500); - --system-action-button-border-color-down: var(--spectrum-gray-600); - --system-action-button-border-color-focus: var(--spectrum-gray-500); - --system-action-button-background-color-disabled: transparent; - --system-action-button-border-color-disabled: var(--spectrum-disabled-border-color); +.spectrum.spectrum--express { + --system-action-button-background-color-default: var(--spectrum-gray-200); + --system-action-button-background-color-hover: var(--spectrum-gray-300); + --system-action-button-background-color-down: var(--spectrum-gray-400); + --system-action-button-background-color-focus: var(--spectrum-gray-300); + --system-action-button-border-color-default: transparent; + --system-action-button-border-color-hover: transparent; + --system-action-button-border-color-down: transparent; + --system-action-button-border-color-focus: transparent; + --system-action-button-background-color-disabled: var(--spectrum-disabled-background-color); + --system-action-button-border-color-disabled: transparent; --system-action-button-content-color-disabled: var(--spectrum-disabled-content-color); --system-action-button-animation-duration: var(--spectrum-animation-duration-100); --system-action-button-border-radius: var(--spectrum-corner-radius-100); --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --system-action-button-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); + --system-action-button-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); + --system-action-button-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); --system-action-button-content-color-default: var(--spectrum-neutral-content-color-default); --system-action-button-content-color-hover: var(--spectrum-neutral-content-color-hover); --system-action-button-content-color-down: var(--spectrum-neutral-content-color-down); @@ -34,9 +43,9 @@ --system-action-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --system-action-button-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var(--spectrum-gray-200); - --system-action-button-quiet-background-color-down: var(--spectrum-gray-300); - --system-action-button-quiet-background-color-focus: var(--spectrum-gray-200); + --system-action-button-quiet-background-color-hover: var(--spectrum-gray-300); + --system-action-button-quiet-background-color-down: var(--spectrum-gray-400); + --system-action-button-quiet-background-color-focus: var(--spectrum-gray-300); --system-action-button-quiet-border-color-default: transparent; --system-action-button-quiet-border-color-hover: transparent; --system-action-button-quiet-border-color-down: transparent; @@ -83,23 +92,14 @@ --system-action-button-size-s-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-75) - var(--system-action-button-border-width)); --system-action-button-size-s-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--system-action-button-border-width)); --system-action-button-size-s-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--system-action-button-border-width)); - --system-action-button-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); --system-action-button-size-m-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); - --system-action-button-height: var(--spectrum-component-height-100); --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); --system-action-button-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-font-size: var(--spectrum-font-size-100); --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); --system-action-button-size-m-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); --system-action-button-size-m-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --system-action-button-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); --system-action-button-size-m-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); - --system-action-button-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); --system-action-button-size-m-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); - --system-action-button-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); --system-action-button-size-m-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); --system-action-button-size-l-min-width: calc(var(--spectrum-component-edge-to-visual-only-200) * 2 + var(--spectrum-workflow-icon-size-200)); --system-action-button-size-l-height: var(--spectrum-component-height-200); @@ -129,14 +129,14 @@ --system-action-button-static-white-quiet-border-color-focus: transparent; --system-action-button-static-black-quiet-border-color-disabled: transparent; --system-action-button-static-white-quiet-border-color-disabled: transparent; - --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-background-color-default: var(--spectrum-transparent-black-200); --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300); --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400); --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300); - --system-action-button-static-black-border-color-default: var(--spectrum-transparent-black-400); - --system-action-button-static-black-border-color-hover: var(--spectrum-transparent-black-500); - --system-action-button-static-black-border-color-down: var(--spectrum-transparent-black-600); - --system-action-button-static-black-border-color-focus: var(--spectrum-transparent-black-500); + --system-action-button-static-black-border-color-default: transparent; + --system-action-button-static-black-border-color-hover: transparent; + --system-action-button-static-black-border-color-down: transparent; + --system-action-button-static-black-border-color-focus: transparent; --system-action-button-static-black-content-color-default: var(--spectrum-black); --system-action-button-static-black-content-color-hover: var(--spectrum-black); --system-action-button-static-black-content-color-down: var(--spectrum-black); @@ -155,14 +155,14 @@ --system-action-button-static-black-selected-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); --system-action-button-static-black-selected-background-color-disabled: var(--spectrum-disabled-static-black-background-color); --system-action-button-static-black-selected-border-color-disabled: transparent; - --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-background-color-default: var(--spectrum-transparent-white-200); --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400); --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300); - --system-action-button-static-white-border-color-default: var(--spectrum-transparent-white-400); - --system-action-button-static-white-border-color-hover: var(--spectrum-transparent-white-500); - --system-action-button-static-white-border-color-down: var(--spectrum-transparent-white-600); - --system-action-button-static-white-border-color-focus: var(--spectrum-transparent-white-500); + --system-action-button-static-white-border-color-default: transparent; + --system-action-button-static-white-border-color-hover: transparent; + --system-action-button-static-white-border-color-down: transparent; + --system-action-button-static-white-border-color-focus: transparent; --system-action-button-static-white-content-color-default: var(--spectrum-white); --system-action-button-static-white-content-color-hover: var(--spectrum-white); --system-action-button-static-white-content-color-down: var(--spectrum-white); @@ -182,36 +182,3 @@ --system-action-button-static-white-selected-background-color-disabled: var(--spectrum-disabled-static-white-background-color); --system-action-button-static-white-selected-border-color-disabled: transparent; } - -.spectrum--express { - --system-action-button-background-color-default: var(--spectrum-gray-200); - --system-action-button-background-color-hover: var(--spectrum-gray-300); - --system-action-button-background-color-down: var(--spectrum-gray-400); - --system-action-button-background-color-focus: var(--spectrum-gray-300); - --system-action-button-border-color-default: transparent; - --system-action-button-border-color-hover: transparent; - --system-action-button-border-color-down: transparent; - --system-action-button-border-color-focus: transparent; - --system-action-button-background-color-disabled: var(--spectrum-disabled-background-color); - --system-action-button-border-color-disabled: transparent; - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var(--spectrum-gray-300); - --system-action-button-quiet-background-color-down: var(--spectrum-gray-400); - --system-action-button-quiet-background-color-focus: var(--spectrum-gray-300); - --system-action-button-static-black-border-color-default: transparent; - --system-action-button-static-white-border-color-default: transparent; - --system-action-button-static-black-border-color-hover: transparent; - --system-action-button-static-white-border-color-hover: transparent; - --system-action-button-static-black-border-color-down: transparent; - --system-action-button-static-white-border-color-down: transparent; - --system-action-button-static-black-border-color-focus: transparent; - --system-action-button-static-white-border-color-focus: transparent; - --system-action-button-static-black-background-color-default: var(--spectrum-transparent-black-200); - --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300); - --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400); - --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300); - --system-action-button-static-white-background-color-default: var(--spectrum-transparent-white-200); - --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); - --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400); - --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300); -} diff --git a/tokens/components/express/actiongroup.css b/tokens/components/express/actiongroup.css index ceafbbb9543..952b6c6a704 100644 --- a/tokens/components/express/actiongroup.css +++ b/tokens/components/express/actiongroup.css @@ -11,10 +11,10 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-action-group-gap-size-compact: 0; - --system-action-group-horizontal-spacing-compact: -1px; - --system-action-group-vertical-spacing-compact: -1px; +.spectrum.spectrum--express { + --system-action-group-gap-size-compact: var(--spectrum-spacing-50); + --system-action-group-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); + --system-action-group-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); --system-action-group-button-spacing-reset: 0; --system-action-group-border-radius-reset: 0; --system-action-group-border-radius: var(--spectrum-corner-radius-100); @@ -31,9 +31,3 @@ --system-action-group-size-l-vertical-spacing-regular: var(--spectrum-spacing-100); --system-action-group-size-xl-vertical-spacing-regular: var(--spectrum-spacing-100); } - -.spectrum--express { - --system-action-group-gap-size-compact: var(--spectrum-spacing-50); - --system-action-group-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - --system-action-group-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); -} diff --git a/tokens/components/express/alertbanner.css b/tokens/components/express/alertbanner.css index b126749b606..8f804098211 100644 --- a/tokens/components/express/alertbanner.css +++ b/tokens/components/express/alertbanner.css @@ -11,8 +11,8 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-alert-banner-netural-background: var(--spectrum-neutral-subdued-background-color-default); +.spectrum.spectrum--express { + --system-alert-banner-netural-background: var(--spectrum-neutral-background-color-default); --system-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); --system-alert-banner-size: auto; @@ -29,7 +29,3 @@ --system-alert-banner-negative-background: var(--spectrum-negative-background-color-default); --system-alert-banner-font-color: var(--spectrum-white); } - -.spectrum--express { - --system-alert-banner-netural-background: var(--spectrum-neutral-background-color-default); -} diff --git a/tokens/components/express/alertdialog.css b/tokens/components/express/alertdialog.css index 53598a2327a..a857505b635 100644 --- a/tokens/components/express/alertdialog.css +++ b/tokens/components/express/alertdialog.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); diff --git a/tokens/components/express/asset.css b/tokens/components/express/asset.css index fd5821097ec..826ffe1fb3a 100644 --- a/tokens/components/express/asset.css +++ b/tokens/components/express/asset.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-asset-transition-duration: var(--spectrum-animation-duration-100); --system-asset-folder-background-color: var(--spectrum-gray-300); --system-asset-file-background-color: var(--spectrum-gray-50); diff --git a/tokens/components/express/assetcard.css b/tokens/components/express/assetcard.css index 21f689be61a..240f5648086 100644 --- a/tokens/components/express/assetcard.css +++ b/tokens/components/express/assetcard.css @@ -11,10 +11,92 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-asset-card-overlay-background-color: rgba(27, 127, 245, 0.1); -} - -.spectrum--express { +.spectrum.spectrum--express { --system-asset-card-overlay-background-color: rgba(109, 115, 246, 0.2); + --system-asset-card-asset-size: 224px; + --system-asset-card-background-color: var(--spectrum-gray-100); + --system-asset-card-asset-animation-duration: var(--spectrum-animation-duration-100); + --system-asset-card-asset-container-border-size: 1px; + --system-asset-card-header-margin-block-start: var(--spectrum-spacing-300); + --system-asset-card-border-radius: var(--spectrum-corner-radius-100); + --system-asset-card-border-color: transparent; + --system-asset-card-border-color-hover: var(--spectrum-gray-500); + --system-asset-card-border-color-down: var(--spectrum-gray-600); + --system-asset-card-focus-ring-gap: 5px; + --system-asset-card-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-asset-card-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); + --system-asset-card-selectionindicator-size: var(--spectrum-card-selection-background-size); + --system-asset-card-selectionindicator-border-radius: var(--spectrum-corner-radius-100); + --system-asset-card-selectionindicator-offset-y: 4px; + --system-asset-card-selectionindicator-blur: 6px; + --system-asset-card-selectionindicator-color: var(--spectrum-white); + --system-asset-card-selectionindicator-font-weight: var(--spectrum-bold-font-weight); + --system-asset-card-selectionindicator-font-size: var(--spectrum-font-size-400); + --system-asset-card-title-text-color: var(--spectrum-gray-900); + --system-asset-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-asset-card-title-font-style: var(--spectrum-default-font-style); + --system-asset-card-title-line-height: var(--spectrum-line-height-100); + --system-asset-card-title-letter-spacing: 0; + --system-asset-card-header-content-text-color: var(--spectrum-gray-900); + --system-asset-card-header-content-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-header-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-asset-card-header-content-font-style: var(--spectrum-default-font-style); + --system-asset-card-header-content-line-height: var(--spectrum-line-height-200); + --system-asset-card-header-content-letter-spacing: 0; + --system-asset-card-content-text-color: var(--spectrum-gray-700); + --system-asset-card-content-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-asset-card-content-font-style: var(--spectrum-default-font-style); + --system-asset-card-content-line-height: var(--spectrum-line-height-200); + --system-asset-card-content-letter-spacing: 0; + --system-asset-card-content-margin-block-start: var(--spectrum-spacing-75); + --system-asset-card-lang-zh-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-ja-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-ko-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-zh-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-ja-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-ko-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-zh-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-ja-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-ko-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-zh-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-ja-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-ko-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-zh-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-zh-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ja-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ko-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-zh-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ja-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ko-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-zh-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ja-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ko-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-zh-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-zh-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ja-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ko-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-zh-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ja-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ko-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-zh-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ja-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ko-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-zh-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-content-letter-spacing: var(--spectrum-cjk-letter-spacing); } diff --git a/tokens/components/express/assetlist.css b/tokens/components/express/assetlist.css index b5410328dc7..263c019e6cb 100644 --- a/tokens/components/express/assetlist.css +++ b/tokens/components/express/assetlist.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-asset-list-width: 272px; --system-asset-list-child-indicator-animation: var(--spectrum-animation-duration-100); --system-asset-list-item-height: var(--spectrum-spacing-600); diff --git a/tokens/components/express/avatar.css b/tokens/components/express/avatar.css index 5724acf0626..01d2e3588ed 100644 --- a/tokens/components/express/avatar.css +++ b/tokens/components/express/avatar.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-avatar-color-opacity: 1; --system-avatar-inline-size: var(--spectrum-avatar-size-100); --system-avatar-block-size: var(--spectrum-avatar-size-100); diff --git a/tokens/components/express/badge.css b/tokens/components/express/badge.css index bb82911abc8..3b362d5ee0e 100644 --- a/tokens/components/express/badge.css +++ b/tokens/components/express/badge.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-badge-corner-radius: var(--spectrum-corner-radius-100); --system-badge-line-height: var(--spectrum-line-height-100); --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); diff --git a/tokens/components/express/breadcrumb.css b/tokens/components/express/breadcrumb.css index a55903a72ff..2e8e75843a2 100644 --- a/tokens/components/express/breadcrumb.css +++ b/tokens/components/express/breadcrumb.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); --system-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact); --system-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline); diff --git a/tokens/components/express/button.css b/tokens/components/express/button.css index d33fa9a6e02..c126878b155 100644 --- a/tokens/components/express/button.css +++ b/tokens/components/express/button.css @@ -11,70 +11,31 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-button-background-color-default: var(--spectrum-gray-75); - --system-button-background-color-hover: var(--spectrum-gray-200); - --system-button-background-color-down: var(--spectrum-gray-300); - --system-button-background-color-focus: var(--spectrum-gray-200); - --system-button-border-color-default: var(--spectrum-gray-400); - --system-button-border-color-hover: var(--spectrum-gray-500); - --system-button-border-color-down: var(--spectrum-gray-600); - --system-button-border-color-focus: var(--spectrum-gray-500); +.spectrum.spectrum--express { + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-radius: var(--spectrum-corner-radius-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-border-radius: calc(var(--system-button-border-radius) + var(--system-button-focus-ring-gap)); + --system-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + --system-button-background-color-default: var(--spectrum-gray-200); + --system-button-background-color-hover: var(--spectrum-gray-300); + --system-button-background-color-down: var(--spectrum-gray-400); + --system-button-background-color-focus: var(--spectrum-gray-300); + --system-button-border-color-default: transparent; + --system-button-border-color-hover: transparent; + --system-button-border-color-down: transparent; + --system-button-border-color-focus: transparent; --system-button-content-color-default: var(--spectrum-neutral-content-color-default); --system-button-content-color-hover: var(--spectrum-neutral-content-color-hover); --system-button-content-color-down: var(--spectrum-neutral-content-color-down); --system-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-background-color-disabled: var(--spectrum-disabled-background-color); + --system-button-border-color-disabled: transparent; --system-button-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-size-s-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-s-border-radius: var(--spectrum-component-pill-edge-to-text-75); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); - --system-button-size-s-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); - --system-button-size-s-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); - --system-button-size-s-padding-label-to-icon: var(--spectrum-text-to-visual-75); - --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); - --system-button-size-s-bottom-to-text: var(--spectrum-button-bottom-to-text-small); - --system-button-size-s-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); - --system-button-size-s-intended-icon-size: var(--spectrum-workflow-icon-size-75); - --system-button-size-m-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-m-border-radius: var(--spectrum-component-pill-edge-to-text-100); - --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-size-m-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); - --system-button-size-m-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); - --system-button-size-m-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); - --system-button-size-m-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); - --system-button-size-m-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); - --system-button-size-m-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); - --system-button-size-m-intended-icon-size: var(--spectrum-workflow-icon-size-100); - --system-button-size-l-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-l-border-radius: var(--spectrum-component-pill-edge-to-text-200); - --system-button-size-l-height: var(--spectrum-component-height-200); - --system-button-size-l-font-size: var(--spectrum-font-size-200); - --system-button-size-l-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); - --system-button-size-l-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); - --system-button-size-l-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); - --system-button-size-l-padding-label-to-icon: var(--spectrum-text-to-visual-200); - --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); - --system-button-size-l-bottom-to-text: var(--spectrum-button-bottom-to-text-large); - --system-button-size-l-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); - --system-button-size-l-intended-icon-size: var(--spectrum-workflow-icon-size-200); - --system-button-size-xl-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-xl-border-radius: var(--spectrum-component-pill-edge-to-text-300); - --system-button-size-xl-height: var(--spectrum-component-height-300); - --system-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-button-size-xl-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); - --system-button-size-xl-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); - --system-button-size-xl-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); - --system-button-size-xl-padding-label-to-icon: var(--spectrum-text-to-visual-300); - --system-button-size-xl-top-to-text: var(--spectrum-button-top-to-text-extra-large); - --system-button-size-xl-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); - --system-button-size-xl-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); - --system-button-size-xl-intended-icon-size: var(--spectrum-workflow-icon-size-300); --system-button-accent-background-color-default: var(--spectrum-accent-background-color-default); --system-button-accent-background-color-hover: var(--spectrum-accent-background-color-hover); --system-button-accent-background-color-down: var(--spectrum-accent-background-color-down); @@ -196,19 +157,19 @@ --system-button-secondary-outline-border-color-disabled: var(--spectrum-disabled-border-color); --system-button-secondary-outline-content-color-disabled: var(--spectrum-disabled-content-color); --system-button-quiet-background-color-default: transparent; - --system-button-quiet-background-color-hover: var(--spectrum-gray-200); - --system-button-quiet-background-color-down: var(--spectrum-gray-300); - --system-button-quiet-background-color-focus: var(--spectrum-gray-200); + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); --system-button-quiet-border-color-default: transparent; --system-button-quiet-border-color-hover: transparent; --system-button-quiet-border-color-down: transparent; --system-button-quiet-border-color-focus: transparent; --system-button-quiet-background-color-disabled: transparent; --system-button-quiet-border-color-disabled: transparent; - --system-button-selected-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --system-button-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --system-button-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --system-button-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + --system-button-selected-background-color-default: var(--spectrum-neutral-background-color-default); + --system-button-selected-background-color-hover: var(--spectrum-neutral-background-color-hover); + --system-button-selected-background-color-down: var(--spectrum-neutral-background-color-down); + --system-button-selected-background-color-focus: var(--spectrum-neutral-background-color-key-focus); --system-button-selected-border-color-default: transparent; --system-button-selected-border-color-hover: transparent; --system-button-selected-border-color-down: transparent; @@ -371,21 +332,52 @@ --system-button-static-black-secondary-outline-background-color-disabled: transparent; --system-button-static-black-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); --system-button-static-black-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); -} - -.spectrum--express { - --system-button-background-color-default: var(--spectrum-gray-200); - --system-button-background-color-hover: var(--spectrum-gray-300); - --system-button-background-color-down: var(--spectrum-gray-400); - --system-button-background-color-focus: var(--spectrum-gray-300); - --system-button-border-color-default: transparent; - --system-button-border-color-hover: transparent; - --system-button-border-color-down: transparent; - --system-button-border-color-focus: transparent; - --system-button-background-color-disabled: var(--spectrum-disabled-background-color); - --system-button-border-color-disabled: transparent; - --system-button-selected-background-color-default: var(--spectrum-neutral-background-color-default); - --system-button-selected-background-color-hover: var(--spectrum-neutral-background-color-hover); - --system-button-selected-background-color-down: var(--spectrum-neutral-background-color-down); - --system-button-selected-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + --system-button-size-s-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-s-border-radius: var(--spectrum-component-pill-edge-to-text-75); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--system-button-border-width)); + --system-button-size-s-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); + --system-button-size-s-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--system-button-border-width)); + --system-button-size-s-padding-label-to-icon: var(--spectrum-text-to-visual-75); + --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); + --system-button-size-s-bottom-to-text: var(--spectrum-button-bottom-to-text-small); + --system-button-size-s-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); + --system-button-size-s-intended-icon-size: var(--spectrum-workflow-icon-size-75); + --system-button-size-m-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-m-border-radius: var(--spectrum-component-pill-edge-to-text-100); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-size-m-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--system-button-border-width)); + --system-button-size-m-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); + --system-button-size-m-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--system-button-border-width)); + --system-button-size-m-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); + --system-button-size-m-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --system-button-size-m-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --system-button-size-m-intended-icon-size: var(--spectrum-workflow-icon-size-100); + --system-button-size-l-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-l-border-radius: var(--spectrum-component-pill-edge-to-text-200); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--system-button-border-width)); + --system-button-size-l-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); + --system-button-size-l-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--system-button-border-width)); + --system-button-size-l-padding-label-to-icon: var(--spectrum-text-to-visual-200); + --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); + --system-button-size-l-bottom-to-text: var(--spectrum-button-bottom-to-text-large); + --system-button-size-l-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); + --system-button-size-l-intended-icon-size: var(--spectrum-workflow-icon-size-200); + --system-button-size-xl-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-xl-border-radius: var(--spectrum-component-pill-edge-to-text-300); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--system-button-border-width)); + --system-button-size-xl-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); + --system-button-size-xl-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--system-button-border-width)); + --system-button-size-xl-padding-label-to-icon: var(--spectrum-text-to-visual-300); + --system-button-size-xl-top-to-text: var(--spectrum-button-top-to-text-extra-large); + --system-button-size-xl-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); + --system-button-size-xl-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); + --system-button-size-xl-intended-icon-size: var(--spectrum-workflow-icon-size-300); } diff --git a/tokens/components/express/buttongroup.css b/tokens/components/express/buttongroup.css index f5fd44e2808..ac1ddbbeb88 100644 --- a/tokens/components/express/buttongroup.css +++ b/tokens/components/express/buttongroup.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); --system-button-group-spacing-vertical: var(--spectrum-spacing-300); --system-button-group-size-s-spacing-horizontal: var(--spectrum-spacing-200); diff --git a/tokens/components/express/calendar.css b/tokens/components/express/calendar.css index 782eab6ad8e..30a47478fb8 100644 --- a/tokens/components/express/calendar.css +++ b/tokens/components/express/calendar.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-calendar-day-width: var(--spectrum-component-height-100); --system-calendar-day-height: var(--spectrum-component-height-100); --system-calendar-border-radius-reset: 0; diff --git a/tokens/components/express/card.css b/tokens/components/express/card.css index 9e113936622..85392fbfa40 100644 --- a/tokens/components/express/card.css +++ b/tokens/components/express/card.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-card-background-color: var(--spectrum-background-layer-2-color); --system-card-body-spacing: var(--spectrum-spacing-400); --system-card-title-padding-top: var(--spectrum-spacing-300); @@ -58,7 +58,6 @@ --system-card-light-selected-background-color-rgb: var(--spectrum-blue-900-rgb); --system-card-lightest-selected-background-color-rgb: var(--spectrum-blue-900-rgb); --system-card-dark-selected-background-color-rgb: var(--spectrum-blue-500-rgb); - --system-card-darkest-selected-background-color-rgb: var(--spectrum-blue-600-rgb); --system-card-quiet-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100)); --system-card-gallery-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100)); --system-card-quiet-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width)); diff --git a/tokens/components/express/checkbox.css b/tokens/components/express/checkbox.css index 79da49270cc..379b2890c4a 100644 --- a/tokens/components/express/checkbox.css +++ b/tokens/components/express/checkbox.css @@ -11,11 +11,11 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-checkbox-control-color-default: var(--spectrum-gray-600); - --system-checkbox-control-color-hover: var(--spectrum-gray-700); - --system-checkbox-control-color-down: var(--spectrum-gray-800); - --system-checkbox-control-color-focus: var(--spectrum-gray-700); +.spectrum.spectrum--express { + --system-checkbox-control-color-default: var(--spectrum-gray-800); + --system-checkbox-control-color-hover: var(--spectrum-gray-900); + --system-checkbox-control-color-down: var(--spectrum-gray-900); + --system-checkbox-control-color-focus: var(--spectrum-gray-900); --system-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); --system-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); --system-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); @@ -70,10 +70,3 @@ --system-checkbox-size-xl-top-to-text: var(--spectrum-component-top-to-text-300); --system-checkbox-size-xl-text-to-control: var(--spectrum-text-to-control-300); } - -.spectrum--express { - --system-checkbox-control-color-default: var(--spectrum-gray-800); - --system-checkbox-control-color-hover: var(--spectrum-gray-900); - --system-checkbox-control-color-down: var(--spectrum-gray-900); - --system-checkbox-control-color-focus: var(--spectrum-gray-900); -} diff --git a/tokens/components/express/clearbutton.css b/tokens/components/express/clearbutton.css index c1656d51b8e..05b48564239 100644 --- a/tokens/components/express/clearbutton.css +++ b/tokens/components/express/clearbutton.css @@ -11,11 +11,11 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-clear-button-background-color: transparent; - --system-clear-button-background-color-hover: transparent; - --system-clear-button-background-color-down: transparent; - --system-clear-button-background-color-key-focus: transparent; +.spectrum.spectrum--express { + --system-clear-button-background-color: var(--spectrum-gray-200); + --system-clear-button-background-color-hover: var(--spectrum-gray-300); + --system-clear-button-background-color-down: var(--spectrum-gray-400); + --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); --system-clear-button-height: var(--spectrum-component-height-100); --system-clear-button-width: var(--spectrum-component-height-100); --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); @@ -46,10 +46,3 @@ --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); --system-clear-button-disabled-background-color: var(--mod-clear-button-background-color-disabled, transparent); } - -.spectrum--express { - --system-clear-button-background-color: var(--spectrum-gray-200); - --system-clear-button-background-color-hover: var(--spectrum-gray-300); - --system-clear-button-background-color-down: var(--spectrum-gray-400); - --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); -} diff --git a/tokens/components/express/closebutton.css b/tokens/components/express/closebutton.css index 30395adf676..a278d30e43f 100644 --- a/tokens/components/express/closebutton.css +++ b/tokens/components/express/closebutton.css @@ -11,11 +11,11 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-200); - --system-close-button-background-color-down: var(--spectrum-gray-300); - --system-close-button-background-color-focus: var(--spectrum-gray-200); + --system-close-button-background-color-hover: var(--spectrum-gray-300); + --system-close-button-background-color-down: var(--spectrum-gray-400); + --system-close-button-background-color-focus: var(--spectrum-gray-300); --system-close-button-size-300: 24px; --system-close-button-size-400: 32px; --system-close-button-size-500: 40px; @@ -29,19 +29,24 @@ --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-close-button-height: var(--spectrum-component-height-100); + --system-close-button-width: var(--spectrum-closebutton-height); --system-close-button-size: var(--system-close-button-size-400); --system-close-button-border-radius: var(--system-close-button-size-400); --system-close-button-animation-duration: var(--spectrum-animation-duration-100); --system-closebutton-size-s-height: var(--spectrum-component-height-75); + --system-closebutton-size-s-width: var(--spectrum-closebutton-height); --system-closebutton-size-s-size: var(--system-close-button-size-300); --system-closebutton-size-s-border-radius: var(--system-close-button-size-300); --system-closebutton-size-m-height: var(--spectrum-component-height-100); + --system-closebutton-size-m-width: var(--spectrum-closebutton-height); --system-closebutton-size-m-size: var(--system-close-button-size-400); --system-closebutton-size-m-border-radius: var(--system-close-button-size-400); --system-closebutton-size-l-height: var(--spectrum-component-height-200); + --system-closebutton-size-l-width: var(--spectrum-closebutton-height); --system-closebutton-size-l-size: var(--system-close-button-size-500); --system-closebutton-size-l-border-radius: var(--system-close-button-size-500); --system-closebutton-size-xl-height: var(--spectrum-component-height-300); + --system-closebutton-size-xl-width: var(--spectrum-closebutton-height); --system-closebutton-size-xl-size: var(--system-close-button-size-600); --system-closebutton-size-xl-border-radius: var(--system-close-button-size-600); --system-close-button-static-white-static-background-color-default: transparent; @@ -59,10 +64,3 @@ --system-close-button-static-black-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); --system-close-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); } - -.spectrum--express { - --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-300); - --system-close-button-background-color-down: var(--spectrum-gray-400); - --system-close-button-background-color-focus: var(--spectrum-gray-300); -} diff --git a/tokens/components/express/coachindicator.css b/tokens/components/express/coachindicator.css index e04c48b66e0..e8ed83d8453 100644 --- a/tokens/components/express/coachindicator.css +++ b/tokens/components/express/coachindicator.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); diff --git a/tokens/components/express/coachmark.css b/tokens/components/express/coachmark.css index 01b9590d422..d851a7c017b 100644 --- a/tokens/components/express/coachmark.css +++ b/tokens/components/express/coachmark.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); --system-coach-mark-width: var(--spectrum-coach-mark-width); --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); diff --git a/tokens/components/express/colorarea.css b/tokens/components/express/colorarea.css index 1fb41351a2a..2bf07cc6f27 100644 --- a/tokens/components/express/colorarea.css +++ b/tokens/components/express/colorarea.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-color-area-border-radius: var(--spectrum-color-area-border-rounding); --system-color-area-border-color: rgba(0, 0, 0, 0.1); --system-color-area-disabled-background-color: var(--spectrum-disabled-background-color); diff --git a/tokens/components/express/colorhandle.css b/tokens/components/express/colorhandle.css index 640b304e909..778cb8cc7c5 100644 --- a/tokens/components/express/colorhandle.css +++ b/tokens/components/express/colorhandle.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-color-handle-size: var(--spectrum-color-handle-size); --system-color-handle-focused-size: var(--spectrum-color-handle-size-key-focus); --system-color-handle-hitarea-size: var(--spectrum-color-control-track-width); diff --git a/tokens/components/express/colorloupe.css b/tokens/components/express/colorloupe.css index 4da0e9e3406..2505b202ce4 100644 --- a/tokens/components/express/colorloupe.css +++ b/tokens/components/express/colorloupe.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-color-loupe-width: var(--spectrum-color-loupe-width); --system-color-loupe-height: var(--spectrum-color-loupe-height); --system-color-loupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); diff --git a/tokens/components/express/colorslider.css b/tokens/components/express/colorslider.css index da80d26f174..f49212f7419 100644 --- a/tokens/components/express/colorslider.css +++ b/tokens/components/express/colorslider.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-color-slider-handle-margin-block: var(--spectrum-component-top-to-text-75); --system-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); --system-color-slider-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); diff --git a/tokens/components/express/colorwheel.css b/tokens/components/express/colorwheel.css index 57846b33005..19dc559d60b 100644 --- a/tokens/components/express/colorwheel.css +++ b/tokens/components/express/colorwheel.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-color-wheel-width: var(--spectrum-color-wheel-width); --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); --system-color-wheel-height: var(--spectrum-color-wheel-width); diff --git a/tokens/components/express/combobox.css b/tokens/components/express/combobox.css index 3bcd25cf212..fa175ebce2d 100644 --- a/tokens/components/express/combobox.css +++ b/tokens/components/express/combobox.css @@ -11,12 +11,12 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-combobox-border-color-default: var(--spectrum-gray-500); - --system-combobox-border-color-hover: var(--spectrum-gray-600); - --system-combobox-border-color-focus: var(--spectrum-gray-500); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --system-combobox-border-color-key-focus: var(--spectrum-gray-600); +.spectrum.spectrum--express { + --system-combobox-border-color-default: var(--spectrum-gray-400); + --system-combobox-border-color-hover: var(--spectrum-gray-500); + --system-combobox-border-color-focus: var(--spectrum-gray-900); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); + --system-combobox-border-color-key-focus: var(--spectrum-gray-900); --system-combobox-inline-size: var(--spectrum-field-width); --system-combobox-block-size: var(--spectrum-component-height-100); --system-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--system-combobox-block-size)); @@ -131,11 +131,3 @@ --system-combobox-quiet-size-l-spacing-label-to: var(--spectrum-field-label-to-component-quiet-large); --system-combobox-quiet-size-xl-spacing-label-to: var(--spectrum-field-label-to-component-quiet-extra-large); } - -.spectrum--express { - --system-combobox-border-color-default: var(--spectrum-gray-400); - --system-combobox-border-color-hover: var(--spectrum-gray-500); - --system-combobox-border-color-focus: var(--spectrum-gray-900); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); - --system-combobox-border-color-key-focus: var(--spectrum-gray-900); -} diff --git a/tokens/components/express/contextualhelp.css b/tokens/components/express/contextualhelp.css index d8fc55b51a5..d1bcfc53079 100644 --- a/tokens/components/express/contextualhelp.css +++ b/tokens/components/express/contextualhelp.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-contextual-help-padding: var(--spectrum-spacing-400); --system-contextual-help-content-spacing: var(--spectrum-spacing-100); --system-contextual-help-link-spacing: var(--spectrum-spacing-300); diff --git a/tokens/components/express/datepicker.css b/tokens/components/express/datepicker.css index 59dc30d43cc..31c3d84fd55 100644 --- a/tokens/components/express/datepicker.css +++ b/tokens/components/express/datepicker.css @@ -11,8 +11,8 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-date-picker-initial-height: var(--spectrum-component-height-100); +.spectrum.spectrum--express { + --system-date-picker-initial-height: var(--spectrum-component-height-75); --system-date-picker-border-radius: var(--spectrum-corner-radius-100); --system-date-picker-border-radius-quiet: 0; --system-date-picker-border-width: var(--spectrum-border-width-100); @@ -53,7 +53,3 @@ --system-date-picker-padding-inline-end-invalid: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--system-date-picker-icon-to-button) + var(--system-date-picker-icon-size) - var(--system-date-picker-border-width) * 2); --system-date-picker-padding-inline-end-invalid-quiet: calc(var(--system-date-picker-pickerbutton-width-quiet) + var(--system-date-picker-icon-size) + var(--system-date-picker-icon-to-text)); } - -.spectrum--express { - --system-date-picker-initial-height: var(--spectrum-component-height-75); -} diff --git a/tokens/components/express/dial.css b/tokens/components/express/dial.css index df5dccd2d21..c6ee9812f74 100644 --- a/tokens/components/express/dial.css +++ b/tokens/components/express/dial.css @@ -11,18 +11,18 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-dial-background-color-default: var(--spectrum-gray-75); - --system-dial-handle-marker-color-disabled: var(--spectrum-gray-200); - --system-dial-border-color-disabled: var(--spectrum-gray-200); +.spectrum.spectrum--express { + --system-dial-background-color-default: var(--spectrum-gray-100); + --system-dial-handle-marker-color-disabled: var(--spectrum-gray-300); + --system-dial-border-color-disabled: var(--spectrum-gray-300); --system-dial-handle-marker-color: var(--spectrum-gray-700); --system-dial-border-color: var(--spectrum-gray-700); --system-dial-handle-marker-color-down: var(--spectrum-gray-800); --system-dial-border-color-down: var(--spectrum-gray-800); --system-dial-handle-marker-color-hover: var(--spectrum-gray-800); --system-dial-border-color-hover: var(--spectrum-gray-800); - --system-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); - --system-dial-border-color-key-focus: var(--spectrum-gray-25); + --system-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); + --system-dial-border-color-key-focus: var(--spectrum-gray-50); --system-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); --system-dial-border-color-mouse-focus: var(--spectrum-gray-700); --system-dial-min-max-tick-color: var(--spectrum-gray-600); diff --git a/tokens/components/express/dialog.css b/tokens/components/express/dialog.css index 5b2bbd4fd21..c8a4859d9b5 100644 --- a/tokens/components/express/dialog.css +++ b/tokens/components/express/dialog.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-dialog-fullscreen-header-text-size: 28px; --system-dialog-min-inline-size: 288px; --system-dialog-confirm-small-width: 400px; diff --git a/tokens/components/express/divider.css b/tokens/components/express/divider.css index 5d7b7065ad8..d18664dd892 100644 --- a/tokens/components/express/divider.css +++ b/tokens/components/express/divider.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-divider-background-color-small: var(--spectrum-gray-300); --system-divider-background-color-medium: var(--spectrum-gray-300); --system-divider-background-color-large: var(--spectrum-gray-800); @@ -22,11 +22,7 @@ --system-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300); --system-divider-background-color-large-static-black: var(--spectrum-transparent-black-800); --system-divider-size-s-thickness: var(--spectrum-divider-thickness-small); - --system-divider-size-s-background-color: var(--system-divider-background-color-small, var(--spectrum-gray-300)); --system-divider-thickness: var(--spectrum-divider-thickness-medium); --system-divider-size-m-thickness: var(--spectrum-divider-thickness-medium); - --system-divider-background-color: var(--system-divider-background-color-medium, var(--spectrum-gray-300)); - --system-divider-size-m-background-color: var(--system-divider-background-color-medium, var(--spectrum-gray-300)); --system-divider-size-l-thickness: var(--spectrum-divider-thickness-large); - --system-divider-size-l-background-color: var(--system-divider-background-color-large, var(--spectrum-gray-800)); } diff --git a/tokens/components/express/dropindicator.css b/tokens/components/express/dropindicator.css index 189f629a8d0..54a877e58d1 100644 --- a/tokens/components/express/dropindicator.css +++ b/tokens/components/express/dropindicator.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-drop-indicator-border-color: var(--spectrum-dropindicator-color); --system-drop-indicator-circle-color: var(--spectrum-dropindicator-color); --system-drop-indicator-border-size: var(--spectrum-border-width-200); diff --git a/tokens/components/express/dropzone.css b/tokens/components/express/dropzone.css index 280fdfff928..80763e4e7b5 100644 --- a/tokens/components/express/dropzone.css +++ b/tokens/components/express/dropzone.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-drop-zone-padding: var(--spectrum-spacing-400); --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); diff --git a/tokens/components/express/fieldgroup.css b/tokens/components/express/fieldgroup.css index b063619ffcf..0559fe36e64 100644 --- a/tokens/components/express/fieldgroup.css +++ b/tokens/components/express/fieldgroup.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-field-group-margin: var(--spectrum-spacing-300); --system-field-group-readonly-delimiter: "\002c"; } diff --git a/tokens/components/express/fieldlabel.css b/tokens/components/express/fieldlabel.css index a14b273b42b..d15d4c00ad2 100644 --- a/tokens/components/express/fieldlabel.css +++ b/tokens/components/express/fieldlabel.css @@ -11,8 +11,10 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { + --system-field-label-min-height: var(--spectrum-component-height-75); --system-field-label-color: var(--spectrum-neutral-subdued-content-color-default); + --system-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); --system-field-label-font-weight: var(--spectrum-regular-font-weight); --system-field-label-line-height: var(--spectrum-line-height-100); --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); @@ -23,7 +25,6 @@ --system-field-label-size-s-side-margin-block-start: var(--spectrum-field-label-top-margin-small); --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); --system-field-label-size-s-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); - --system-field-label-min-height: var(--spectrum-component-height-75); --system-field-label-size-m-min-height: var(--spectrum-component-height-75); --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); --system-field-label-size-m-top-to-text: var(--spectrum-component-top-to-text-75); @@ -35,7 +36,6 @@ --system-field-label-size-m-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); --system-field-label-side-padding-right: var(--spectrum-spacing-200); --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); --system-field-label-size-m-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); --system-field-label-size-l-min-height: var(--spectrum-component-height-100); --system-field-label-size-l-top-to-text: var(--spectrum-component-top-to-text-100); diff --git a/tokens/components/express/floatingactionbutton.css b/tokens/components/express/floatingactionbutton.css index 8587f5fa49e..139a49bc745 100644 --- a/tokens/components/express/floatingactionbutton.css +++ b/tokens/components/express/floatingactionbutton.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-floating-action-button-size: var(--spectrum-component-height-200); --system-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200); --system-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200); diff --git a/tokens/components/express/helptext.css b/tokens/components/express/helptext.css index 995eb961db9..8f3121ccd49 100644 --- a/tokens/components/express/helptext.css +++ b/tokens/components/express/helptext.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-help-text-line-height: var(--spectrum-line-height-100); --system-help-text-content-color-default: var(--spectrum-neutral-subdued-content-color-default); --system-help-text-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); diff --git a/tokens/components/express/icon.css b/tokens/components/express/icon.css index b4b1563e1b0..9c3bd21f2c8 100644 --- a/tokens/components/express/icon.css +++ b/tokens/components/express/icon.css @@ -11,14 +11,13 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-icon-size: var(--spectrum-workflow-icon-size-100); --system-icon-size-xxs-size: var(--spectrum-workflow-icon-size-xxs); --system-icon-size-xs-size: var(--spectrum-workflow-icon-size-50); --system-icon-size-s-size: var(--spectrum-workflow-icon-size-75); --system-icon-size-l-size: var(--spectrum-workflow-icon-size-200); --system-icon-size-xl-size: var(--spectrum-workflow-icon-size-300); - --system-icon-size-xxl-size: var(--spectrum-workflow-icon-size-xxl); --system-ui-icon-chevron-right-50-icon-size: var(--spectrum-chevron-icon-size-50); --system-ui-icon-chevron-right-75-icon-size: var(--spectrum-chevron-icon-size-75); --system-ui-icon-chevron-right-100-icon-size: var(--spectrum-chevron-icon-size-100); diff --git a/tokens/components/express/illustratedmessage.css b/tokens/components/express/illustratedmessage.css index b12a22edd05..67b62584a45 100644 --- a/tokens/components/express/illustratedmessage.css +++ b/tokens/components/express/illustratedmessage.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width); --system-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width); --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); diff --git a/tokens/components/express/infieldbutton.css b/tokens/components/express/infieldbutton.css index 634b12d6451..338bdba0bc5 100644 --- a/tokens/components/express/infieldbutton.css +++ b/tokens/components/express/infieldbutton.css @@ -11,17 +11,17 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-infield-button-border-width: var(--spectrum-border-width-100); - --system-infield-button-border-color: inherit; - --system-infield-button-border-radius: var(--spectrum-corner-radius-100); - --system-infield-button-border-radius-reset: 0; - --system-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-border-radius-reset); - --system-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-border-radius-reset); - --system-infield-button-background-color: var(--spectrum-gray-75); - --system-infield-button-background-color-hover: var(--spectrum-gray-200); - --system-infield-button-background-color-down: var(--spectrum-gray-300); - --system-infield-button-background-color-key-focus: var(--spectrum-gray-200); +.spectrum.spectrum--express { + --system-infield-button-border-width: 0; + --system-infield-button-border-color: transparent; + --system-infield-button-border-radius: var(--spectrum-corner-radius-75); + --system-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); + --system-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); + --system-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); + --system-infield-button-background-color: var(--spectrum-gray-200); + --system-infield-button-background-color-hover: var(--spectrum-gray-300); + --system-infield-button-background-color-down: var(--spectrum-gray-400); + --system-infield-button-background-color-key-focus: var(--spectrum-gray-300); --system-infield-button-height: var(--spectrum-component-height-100); --system-infield-button-width: var(--spectrum-component-height-100); --system-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); @@ -77,16 +77,3 @@ --system-infield-button-quiet-disabled-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent); --system-infield-button-quiet-disabled-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent); } - -.spectrum--express { - --system-infield-button-border-width: 0; - --system-infield-button-border-color: transparent; - --system-infield-button-border-radius: var(--spectrum-corner-radius-75); - --system-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); - --system-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); - --system-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); - --system-infield-button-background-color: var(--spectrum-gray-200); - --system-infield-button-background-color-hover: var(--spectrum-gray-300); - --system-infield-button-background-color-down: var(--spectrum-gray-400); - --system-infield-button-background-color-key-focus: var(--spectrum-gray-300); -} diff --git a/tokens/components/express/inlinealert.css b/tokens/components/express/inlinealert.css index 34d774e3085..40f298de61e 100644 --- a/tokens/components/express/inlinealert.css +++ b/tokens/components/express/inlinealert.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-in-line-alert-heading-font-family: var(--spectrum-sans-font-family-stack); --system-in-line-alert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); --system-in-line-alert-heading-font-style: var(--spectrum-heading-sans-serif-font-style); diff --git a/tokens/components/express/link.css b/tokens/components/express/link.css index bcd6d50c2a3..49cf47adef1 100644 --- a/tokens/components/express/link.css +++ b/tokens/components/express/link.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-link-animation-duration: var(--spectrum-animation-duration-100); --system-link-text-color-primary-default: var(--spectrum-accent-content-color-default); --system-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover); diff --git a/tokens/components/express/logicbutton.css b/tokens/components/express/logicbutton.css index a271a04a272..3cf69ffc0f3 100644 --- a/tokens/components/express/logicbutton.css +++ b/tokens/components/express/logicbutton.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-logic-button-height: 24px; --system-logic-button-padding: var(--spectrum-component-edge-to-text-50); --system-logic-button-font-size: var(--spectrum-font-size-100); diff --git a/tokens/components/express/menu.css b/tokens/components/express/menu.css index 4dced0e4946..87a7744dd3b 100644 --- a/tokens/components/express/menu.css +++ b/tokens/components/express/menu.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-menu-item-min-height: var(--spectrum-component-height-100); --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); diff --git a/tokens/components/express/miller.css b/tokens/components/express/miller.css index 7064447cc3e..b39d4a3af76 100644 --- a/tokens/components/express/miller.css +++ b/tokens/components/express/miller.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-miller-columns-inline-size: 272px; --system-miller-columns-padding: var(--spectrum-spacing-100); --system-miller-columns-margin-inline-start: var(--spectrum-spacing-100); diff --git a/tokens/components/express/modal.css b/tokens/components/express/modal.css index 9e418cdfa02..59ff3fd9b1a 100644 --- a/tokens/components/express/modal.css +++ b/tokens/components/express/modal.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0); --system-modal-fullscreen-margin: 32px; --system-modal-max-height: 90vh; diff --git a/tokens/components/express/opacitycheckerboard.css b/tokens/components/express/opacitycheckerboard.css index aa980f00e21..a9d87927425 100644 --- a/tokens/components/express/opacitycheckerboard.css +++ b/tokens/components/express/opacitycheckerboard.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark); --system-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light); --system-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); diff --git a/tokens/components/express/pagination.css b/tokens/components/express/pagination.css index c72926a26e2..a483e2eee7f 100644 --- a/tokens/components/express/pagination.css +++ b/tokens/components/express/pagination.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-pagination-counter-margin-inline-start: var(--spectrum-pagination-item-inline-spacing); --system-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing); --system-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default); diff --git a/tokens/components/express/picker.css b/tokens/components/express/picker.css index 7f06fa7062f..9cea4da7da4 100644 --- a/tokens/components/express/picker.css +++ b/tokens/components/express/picker.css @@ -11,20 +11,20 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-picker-background-color-default: var(--spectrum-gray-75); - --system-picker-background-color-default-open: var(--spectrum-gray-200); - --system-picker-background-color-active: var(--spectrum-gray-300); - --system-picker-background-color-hover: var(--spectrum-gray-200); - --system-picker-background-color-hover-open: var(--spectrum-gray-200); - --system-picker-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-border-color-default: var(--spectrum-gray-500); - --system-picker-border-color-default-open: var(--spectrum-gray-500); - --system-picker-border-color-hover: var(--spectrum-gray-600); - --system-picker-border-color-hover-open: var(--spectrum-gray-600); - --system-picker-border-color-active: var(--spectrum-gray-700); - --system-picker-border-color-key-focus: var(--spectrum-gray-600); - --system-picker-border-width: var(--spectrum-border-width-100); +.spectrum.spectrum--express { + --system-picker-background-color-default: var(--spectrum-gray-200); + --system-picker-background-color-default-open: var(--spectrum-gray-300); + --system-picker-background-color-active: var(--spectrum-gray-400); + --system-picker-background-color-hover: var(--spectrum-gray-300); + --system-picker-background-color-hover-open: var(--spectrum-gray-300); + --system-picker-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-border-color-default: transparent; + --system-picker-border-color-default-open: transparent; + --system-picker-border-color-hover: transparent; + --system-picker-border-color-hover-open: transparent; + --system-picker-border-color-active: transparent; + --system-picker-border-color-key-focus: transparent; + --system-picker-border-width: 0px; --system-picker-font-size: var(--spectrum-font-size-100); --system-picker-font-weight: var(--spectrum-regular-font-weight); --system-picker-placeholder-font-style: var(--spectrum-default-font-style); @@ -116,19 +116,3 @@ --system-picker-size-xl-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-extra-large); } - -.spectrum--express { - --system-picker-background-color-default: var(--spectrum-gray-200); - --system-picker-background-color-default-open: var(--spectrum-gray-300); - --system-picker-background-color-hover: var(--spectrum-gray-300); - --system-picker-background-color-hover-open: var(--spectrum-gray-300); - --system-picker-background-color-active: var(--spectrum-gray-400); - --system-picker-background-color-key-focus: var(--spectrum-gray-300); - --system-picker-border-color-default: transparent; - --system-picker-border-color-default-open: transparent; - --system-picker-border-color-hover: transparent; - --system-picker-border-color-hover-open: transparent; - --system-picker-border-color-active: transparent; - --system-picker-border-color-key-focus: transparent; - --system-picker-border-width: 0px; -} diff --git a/tokens/components/express/pickerbutton.css b/tokens/components/express/pickerbutton.css index 9ddc3c74862..b83b2e683c7 100644 --- a/tokens/components/express/pickerbutton.css +++ b/tokens/components/express/pickerbutton.css @@ -11,16 +11,16 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-picker-button-background-color: var(--spectrum-gray-75); - --system-picker-button-background-color-hover: var(--spectrum-gray-200); - --system-picker-button-background-color-down: var(--spectrum-gray-300); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-button-border-color: inherit; - --system-picker-button-border-radius: var(--spectrum-corner-radius-100); - --system-picker-button-border-radius-rounded-sided: 0; - --system-picker-button-border-radius-sided: 0; - --system-picker-button-border-width: var(--spectrum-border-width-100); +.spectrum.spectrum--express { + --system-picker-button-background-color: var(--spectrum-gray-200); + --system-picker-button-background-color-hover: var(--spectrum-gray-300); + --system-picker-button-background-color-down: var(--spectrum-gray-400); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-button-border-color: none; + --system-picker-button-border-radius: var(--spectrum-corner-radius-75); + --system-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); + --system-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); + --system-picker-button-border-width: 0px; --system-picker-button-height: var(--spectrum-component-height-100); --system-picker-button-width: var(--spectrum-component-height-100); --system-picker-button-gap: var(--spectrum-text-to-visual-50); @@ -72,15 +72,3 @@ --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); --system-picker-button-size-xl-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300); } - -.spectrum--express { - --system-picker-button-background-color: var(--spectrum-gray-200); - --system-picker-button-background-color-hover: var(--spectrum-gray-300); - --system-picker-button-background-color-down: var(--spectrum-gray-400); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); - --system-picker-button-border-color: none; - --system-picker-button-border-radius: var(--spectrum-corner-radius-75); - --system-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); - --system-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); - --system-picker-button-border-width: 0px; -} diff --git a/tokens/components/express/popover.css b/tokens/components/express/popover.css index 04482acfb5a..1f10191f096 100644 --- a/tokens/components/express/popover.css +++ b/tokens/components/express/popover.css @@ -11,8 +11,8 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-popover-border-width: var(--spectrum-border-width-100); +.spectrum.spectrum--express { + --system-popover-border-width: 0; --system-popover-animation-distance: var(--spectrum-spacing-100); --system-popover-background-color: var(--spectrum-background-layer-2-color); --system-popover-border-color: var(--spectrum-gray-400); @@ -27,7 +27,3 @@ --system-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / 2); --system-popover-pointer-edge-spacing: calc(var(--system-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2); } - -.spectrum--express { - --system-popover-border-width: 0; -} diff --git a/tokens/components/express/progressbar.css b/tokens/components/express/progressbar.css index c3d001eb5e0..588c4a55619 100644 --- a/tokens/components/express/progressbar.css +++ b/tokens/components/express/progressbar.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); @@ -48,7 +48,7 @@ --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); - --system-meter-size-s-progressbar-thickness: var(--spectrum-progress-bar-thickness-small); + --system-meter-size-s-progressbar-thickness: var(--system-progress-bar-meter-thickness-s); --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --system-meter-size-s-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); @@ -60,9 +60,9 @@ --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); - --system-meter-size-l-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); + --system-meter-size-l-progressbar-thickness: var(--system-progress-bar-meter-thickness-l); --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); @@ -70,7 +70,4 @@ --system-meter-progressbar-size-default: var(--mod-meter-inline-size, var(--system-progress-bar-meter-inline-size)); --system-meter-progressbar-max-size: var(--mod-meter-max-width, var(--system-progress-bar-meter-max-width)); --system-meter-progressbar-min-size: var(--mod-meter-min-width, var(--system-progress-bar-meter-min-width)); - --system-meter-size-s-progressbar-thickness: var(--system-progress-bar-meter-thickness-s); - --system-meter-size-l-progressbar-thickness: var(--system-progress-bar-meter-thickness-l); - --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); } diff --git a/tokens/components/express/progresscircle.css b/tokens/components/express/progresscircle.css index 8f5ce2842f7..490a89e9852 100644 --- a/tokens/components/express/progresscircle.css +++ b/tokens/components/express/progresscircle.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-progress-circle-track-border-color: var(--spectrum-gray-200); --system-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); diff --git a/tokens/components/express/radio.css b/tokens/components/express/radio.css index 5eb1026d60d..7ec9e01fb04 100644 --- a/tokens/components/express/radio.css +++ b/tokens/components/express/radio.css @@ -11,11 +11,11 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-radio-button-border-color-default: var(--spectrum-gray-600); - --system-radio-button-border-color-hover: var(--spectrum-gray-700); - --system-radio-button-border-color-down: var(--spectrum-gray-800); - --system-radio-button-border-color-focus: var(--spectrum-gray-700); +.spectrum.spectrum--express { + --system-radio-button-border-color-default: var(--spectrum-gray-800); + --system-radio-button-border-color-hover: var(--spectrum-gray-900); + --system-radio-button-border-color-down: var(--spectrum-gray-900); + --system-radio-button-border-color-focus: var(--spectrum-gray-900); --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); @@ -80,10 +80,3 @@ --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); } - -.spectrum--express { - --system-radio-button-border-color-default: var(--spectrum-gray-800); - --system-radio-button-border-color-hover: var(--spectrum-gray-900); - --system-radio-button-border-color-down: var(--spectrum-gray-900); - --system-radio-button-border-color-focus: var(--spectrum-gray-900); -} diff --git a/tokens/components/express/rating.css b/tokens/components/express/rating.css index 2d32157100c..1f5e34b38b0 100644 --- a/tokens/components/express/rating.css +++ b/tokens/components/express/rating.css @@ -11,11 +11,11 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --system-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --system-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --system-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); +.spectrum.spectrum--express { + --system-rating-icon-color-default: var(--spectrum-neutral-content-color-default); + --system-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-rating-icon-color-down: var(--spectrum-neutral-content-color-down); + --system-rating-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); --system-rating-icon-height: var(--spectrum-workflow-icon-size-100); --system-rating-icon-width: var(--spectrum-workflow-icon-size-100); --system-rating-border-radius: var(--spectrum-corner-radius-100); @@ -32,10 +32,3 @@ --system-rating-icon-color-disabled: var(--spectrum-disabled-content-color); --system-rating-icon-count: var(--system-rating-icon-count); } - -.spectrum--express { - --system-rating-icon-color-default: var(--spectrum-neutral-content-color-default); - --system-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-rating-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-rating-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); -} diff --git a/tokens/components/express/search.css b/tokens/components/express/search.css index cfd6d1c943a..41de8fbd3fd 100644 --- a/tokens/components/express/search.css +++ b/tokens/components/express/search.css @@ -11,14 +11,14 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-search-border-color-default: var(--spectrum-gray-500); - --system-search-border-color-hover: var(--spectrum-gray-600); +.spectrum.spectrum--express { + --system-search-border-radius: calc(var(--spectrum-component-height-100) / 2); + --system-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); + --system-search-border-color-default: var(--spectrum-gray-400); + --system-search-border-color-hover: var(--spectrum-gray-500); --system-search-border-color-focus: var(--spectrum-gray-800); --system-search-border-color-focus-hover: var(--spectrum-gray-900); --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); --system-search-inline-size: var(--spectrum-field-width); --system-search-block-size: var(--spectrum-component-height-100); --system-search-button-inline-size: var(--system-search-block-size); @@ -45,18 +45,39 @@ --system-search-color-disabled: var(--spectrum-disabled-content-color); --system-search-background-color-disabled: var(--spectrum-disabled-background-color); --system-search-border-color-disabled: var(--spectrum-disabled-background-color); - --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-s-edge-to-visual: var(--spectrum-component-edge-to-visual-75); + --system-search-textfield-font-family: var(--mod-search-font-family, var(--system-search-font-family)); + --system-search-textfield-font-weight: var(--mod-search-font-weight, var(--system-search-font-weight)); + --system-search-textfield-corner-radius: var(--mod-search-border-radius, var(--system-search-border-radius)); + --system-search-textfield-border-width: var(--mod-search-border-width, var(--system-search-border-width)); + --system-search-textfield-focus-indicator-gap: var(--mod-search-focus-indicator-gap, var(--system-search-focus-indicator-gap)); + --system-search-textfield-focus-indicator-width: var(--mod-search-focus-indicator-thickness, var(--system-search-focus-indicator-thickness)); + --system-search-textfield-focus-indicator-color: var(--mod-search-focus-indicator-color, var(--system-search-focus-indicator-color)); + --system-search-textfield-text-color-default: var(--mod-search-color-default, var(--system-search-color-default)); + --system-search-textfield-text-color-hover: var(--mod-search-color-hover, var(--system-search-color-hover)); + --system-search-textfield-text-color-focus: var(--mod-search-color-focus, var(--system-search-color-focus)); + --system-search-textfield-text-color-focus-hover: var(--mod-search-color-focus-hover, var(--system-search-color-focus-hover)); + --system-search-textfield-text-color-keyboard-focus: var(--mod-search-color-key-focus, var(--system-search-color-key-focus)); + --system-search-textfield-text-color-disabled: var(--mod-search-color-disabled, var(--system-search-color-disabled)); + --system-search-textfield-border-color: var(--mod-search-border-color-default, var(--system-search-border-color-default)); + --system-search-textfield-border-color-hover: var(--mod-search-border-color-hover, var(--system-search-border-color-hover)); + --system-search-textfield-border-color-focus: var(--mod-search-border-color-focus, var(--system-search-border-color-focus)); + --system-search-textfield-border-color-focus-hover: var(--mod-search-border-color-focus-hover, var(--system-search-border-color-focus-hover)); + --system-search-textfield-border-color-keyboard-focus: var(--mod-search-border-color-key-focus, var(--system-search-border-color-key-focus)); + --system-search-textfield-border-color-disabled: var(--mod-search-border-color-disabled, var(--system-search-border-color-disabled)); + --system-search-textfield-background-color: var(--mod-search-background-color, var(--system-search-background-color)); + --system-search-textfield-background-color-disabled: var(--mod-search-background-color-disabled, var(--system-search-background-color-disabled)); + --system-search-size-s-border-radius: calc(var(--spectrum-component-height-75) / 2); + --system-search-size-s-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75); --system-search-size-s-block-size: var(--spectrum-component-height-75); --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); - --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-l-edge-to-visual: var(--spectrum-component-edge-to-visual-200); + --system-search-size-l-border-radius: calc(var(--spectrum-component-height-200) / 2); + --system-search-size-l-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); --system-search-size-l-block-size: var(--spectrum-component-height-200); --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); - --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-xl-edge-to-visual: var(--spectrum-component-edge-to-visual-300); + --system-search-size-xl-border-radius: calc(var(--spectrum-component-height-300) / 2); + --system-search-size-xl-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); --system-search-size-xl-block-size: var(--spectrum-component-height-300); --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); @@ -66,22 +87,6 @@ --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color); --system-search-quiet-border-radius: 0; --system-search-quiet-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); -} - -.spectrum--express { - --system-search-border-radius: calc(var(--spectrum-component-height-100) / 2); - --system-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); - --system-search-border-color-default: var(--spectrum-gray-400); - --system-search-border-color-hover: var(--spectrum-gray-500); - --system-search-border-color-focus: var(--spectrum-gray-800); - --system-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-size-s-border-radius: calc(var(--spectrum-component-height-75) / 2); - --system-search-size-s-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75); --system-search-size-m-border-radius: calc(var(--spectrum-component-height-100) / 2); --system-search-size-m-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); - --system-search-size-l-border-radius: calc(var(--spectrum-component-height-200) / 2); - --system-search-size-l-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); - --system-search-size-xl-border-radius: calc(var(--spectrum-component-height-300) / 2); - --system-search-size-xl-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); } diff --git a/tokens/components/express/sidenav.css b/tokens/components/express/sidenav.css index 61b3dce9b02..73ce4bad86c 100644 --- a/tokens/components/express/sidenav.css +++ b/tokens/components/express/sidenav.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-side-nav-focus-ring-size: var(--spectrum-focus-indicator-thickness); --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); diff --git a/tokens/components/express/slider.css b/tokens/components/express/slider.css index bbe962352ac..d7fa6777038 100644 --- a/tokens/components/express/slider.css +++ b/tokens/components/express/slider.css @@ -11,21 +11,21 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-slider-track-color: var(--spectrum-gray-300); - --system-slider-track-fill-color: var(--spectrum-gray-700); - --system-slider-ramp-track-color: var(--spectrum-gray-400); +.spectrum.spectrum--express { + --system-slider-track-color: var(--spectrum-gray-200); + --system-slider-track-fill-color: var(--spectrum-gray-600); + --system-slider-ramp-track-color: var(--spectrum-gray-300); --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --system-slider-handle-background-color: transparent; - --system-slider-handle-background-color-disabled: transparent; - --system-slider-ramp-handle-background-color: var(--spectrum-gray-100); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-100); - --system-slider-handle-border-color: var(--spectrum-gray-700); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-100); - --system-slider-tick-mark-color: var(--spectrum-gray-300); - --system-slider-handle-border-color-hover: var(--spectrum-gray-800); - --system-slider-handle-border-color-down: var(--spectrum-gray-800); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --system-slider-handle-background-color: var(--spectrum-gray-50); + --system-slider-handle-background-color-disabled: var(--spectrum-gray-50); + --system-slider-ramp-handle-background-color: var(--spectrum-gray-50); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-50); + --system-slider-handle-border-color: var(--spectrum-gray-800); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-50); + --system-slider-tick-mark-color: var(--spectrum-gray-200); + --system-slider-handle-border-color-hover: var(--spectrum-gray-900); + --system-slider-handle-border-color-down: var(--spectrum-gray-900); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); --system-slider-font-size: var(--spectrum-font-size-75); --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); @@ -89,21 +89,3 @@ --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); --system-slider-range-track-reset: 0; } - -.spectrum--express { - --system-slider-track-color: var(--spectrum-gray-200); - --system-slider-track-fill-color: var(--spectrum-gray-600); - --system-slider-ramp-track-color: var(--spectrum-gray-300); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --system-slider-handle-background-color: var(--spectrum-gray-50); - --system-slider-handle-background-color-disabled: var(--spectrum-gray-50); - --system-slider-ramp-handle-background-color: var(--spectrum-gray-50); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-50); - --system-slider-handle-border-color: var(--spectrum-gray-800); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-50); - --system-slider-tick-mark-color: var(--spectrum-gray-200); - --system-slider-handle-border-color-hover: var(--spectrum-gray-900); - --system-slider-handle-border-color-down: var(--spectrum-gray-900); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); - --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); -} diff --git a/tokens/components/express/splitview.css b/tokens/components/express/splitview.css index 7a355b1d8e1..9603947c4f7 100644 --- a/tokens/components/express/splitview.css +++ b/tokens/components/express/splitview.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-split-view-vertical-width: 100%; --system-split-view-vertical-gripper-width: 50%; --system-split-view-vertical-gripper-outer-width: 100%; diff --git a/tokens/components/express/statuslight.css b/tokens/components/express/statuslight.css index 1bf893d1a3c..acdcf90c8e5 100644 --- a/tokens/components/express/statuslight.css +++ b/tokens/components/express/statuslight.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-status-light-corner-radius: 50%; --system-status-light-font-weight: 400; --system-status-light-border-width: var(--spectrum-border-width-100); diff --git a/tokens/components/express/steplist.css b/tokens/components/express/steplist.css index af5cbda4284..85817d6ace9 100644 --- a/tokens/components/express/steplist.css +++ b/tokens/components/express/steplist.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-steplist-step-width: 80px; --system-steplist-marker-diameter: 8px; --system-steplist-marker-hit-area: 20px; diff --git a/tokens/components/express/stepper.css b/tokens/components/express/stepper.css index ab24c35bad5..fa107b6023e 100644 --- a/tokens/components/express/stepper.css +++ b/tokens/components/express/stepper.css @@ -11,28 +11,28 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-stepper-border-width: var(--spectrum-border-width-100); - --system-stepper-buttons-border-style: none; - --system-stepper-buttons-border-width: 0; - --system-stepper-buttons-border-color: var(--spectrum-gray-500); +.spectrum.spectrum--express { + --system-stepper-border-width: var(--spectrum-border-width-200); + --system-stepper-buttons-border-style: solid; + --system-stepper-buttons-border-width: var(--spectrum-border-width-200); + --system-stepper-buttons-border-color: transparent; --system-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --system-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-button-border-radius-reset: 0px; - --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color: var(--spectrum-gray-500); - --system-stepper-border-color-hover: var(--spectrum-gray-600); + --system-stepper-buttons-border-color-hover: transparent; + --system-stepper-buttons-border-color-focus: transparent; + --system-stepper-buttons-border-color-keyboard-focus: transparent; + --system-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); + --system-stepper-button-border-width: 0; + --system-stepper-border-color: var(--spectrum-gray-400); + --system-stepper-border-color-hover: var(--spectrum-gray-500); --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); - --system-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); - --system-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); - --system-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); - --system-stepper-button-background-color-focus: var(--spectrum-gray-300); - --system-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); + --system-stepper-border-color-invalid: transparent; + --system-stepper-border-color-focus-invalid: transparent; + --system-stepper-border-color-focus-hover-invalid: transparent; + --system-stepper-border-color-keyboard-focus-invalid: transparent; + --system-stepper-button-background-color-focus: var(--spectrum-gray-400); + --system-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); --system-stepper-height: var(--spectrum-component-height-100); --system-stepper-border-radius: var(--spectrum-corner-radius-100); --system-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); @@ -43,6 +43,9 @@ --system-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-stepper-button-offset: calc(var(--system-stepper-button-width) / 2); --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-buttons-border-color, var(--system-stepper-buttons-border-color))); + --system-stepper-infield-button-border-width: var(--mod-stepper-button-border-width, var(--system-stepper-button-border-width)); + --system-stepper-textfield-border-width: var(--mod-stepper-border-width, var(--system-stepper-border-width)); --system-stepper-size-s-button-width: var(--spectrum-in-field-button-width-stacked-small); --system-stepper-size-s-height: var(--spectrum-component-height-75); --system-stepper-size-l-button-width: var(--spectrum-in-field-button-width-stacked-large); @@ -66,30 +69,6 @@ --system-stepper-invalid-focus-hover-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--system-stepper-border-color-focus-hover-invalid)); --system-stepper-invalid-keyboard-focused-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--system-stepper-border-color-keyboard-focus-invalid)); --system-stepper-invalid-focus-visible-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--system-stepper-border-color-keyboard-focus-invalid)); -} - -.spectrum--express { - --system-stepper-border-width: var(--spectrum-border-width-200); - --system-stepper-buttons-border-style: solid; - --system-stepper-buttons-border-width: var(--spectrum-border-width-200); - --system-stepper-buttons-border-color: transparent; - --system-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-stepper-buttons-border-color-hover: transparent; - --system-stepper-buttons-border-color-focus: transparent; - --system-stepper-buttons-border-color-keyboard-focus: transparent; - --system-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); - --system-stepper-button-border-width: 0; - --system-stepper-border-color: var(--spectrum-gray-400); - --system-stepper-border-color-hover: var(--spectrum-gray-500); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-color-invalid: transparent; - --system-stepper-border-color-focus-invalid: transparent; - --system-stepper-border-color-focus-hover-invalid: transparent; - --system-stepper-border-color-keyboard-focus-invalid: transparent; - --system-stepper-button-background-color-focus: var(--spectrum-gray-400); - --system-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); --system-stepper-disabled-buttons-background-color: var(--spectrum-disabled-background-color); --system-stepper-disabled-buttons-border-width: 0; } diff --git a/tokens/components/express/swatch.css b/tokens/components/express/swatch.css index 43740ca97ce..00de2927265 100644 --- a/tokens/components/express/swatch.css +++ b/tokens/components/express/swatch.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-swatch-focus-indicator-border-radius: 8px; --system-swatch-icon-border-color: rgba(0, 0, 0, 0.51); --system-swatch-size: var(--spectrum-swatch-size-small); @@ -41,7 +41,4 @@ --system-swatch-size-l-size: var(--spectrum-swatch-size-large); --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200); --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large); - --system-light-swatch-border-color: rgba(0, 0, 0, 0.51); - --system-dark-swatch-border-color: rgba(255, 255, 255, 0.51); - --system-darkest-swatch-border-color: rgba(255, 255, 255, 0.51); } diff --git a/tokens/components/express/swatchgroup.css b/tokens/components/express/swatchgroup.css index fff89ed501d..d1985199b01 100644 --- a/tokens/components/express/swatchgroup.css +++ b/tokens/components/express/swatchgroup.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); diff --git a/tokens/components/express/switch.css b/tokens/components/express/switch.css index a8e263b9b4a..da0464801b9 100644 --- a/tokens/components/express/switch.css +++ b/tokens/components/express/switch.css @@ -11,15 +11,15 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-switch-handle-border-color-default: var(--spectrum-gray-600); - --system-switch-handle-border-color-hover: var(--spectrum-gray-700); - --system-switch-handle-border-color-down: var(--spectrum-gray-800); - --system-switch-handle-border-color-focus: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-default: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); +.spectrum.spectrum--express { + --system-switch-handle-border-color-default: var(--spectrum-gray-800); + --system-switch-handle-border-color-hover: var(--spectrum-gray-900); + --system-switch-handle-border-color-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-focus: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-default: var(--spectrum-gray-800); + --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); + --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); --system-switch-label-color-default: var(--spectrum-neutral-content-color-default); --system-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); --system-switch-label-color-down: var(--spectrum-neutral-content-color-down); @@ -74,14 +74,3 @@ --system-switch-size-xl-spacing-top-to-label: var(--spectrum-component-top-to-text-300); --system-switch-size-xl-font-size: var(--spectrum-font-size-300); } - -.spectrum--express { - --system-switch-handle-border-color-default: var(--spectrum-gray-800); - --system-switch-handle-border-color-hover: var(--spectrum-gray-900); - --system-switch-handle-border-color-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-focus: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-default: var(--spectrum-gray-800); - --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); -} diff --git a/tokens/components/express/table.css b/tokens/components/express/table.css index c16c6460068..bf314fd1aed 100644 --- a/tokens/components/express/table.css +++ b/tokens/components/express/table.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium); --system-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium); --system-table-min-header-height: var(--spectrum-component-height-100); diff --git a/tokens/components/express/tabs.css b/tokens/components/express/tabs.css index aa6c8ac936f..086f71a427a 100644 --- a/tokens/components/express/tabs.css +++ b/tokens/components/express/tabs.css @@ -11,8 +11,8 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-tabs-font-weight: var(--spectrum-default-font-weight); +.spectrum.spectrum--express { + --system-tabs-font-weight: var(--spectrum-bold-font-weight); --system-tabs-item-height: var(--spectrum-tab-item-height-medium); --system-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); --system-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium); @@ -100,7 +100,3 @@ --system-tabs-compact-size-xl-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); --system-tabs-compact-size-xl-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large)); } - -.spectrum--express { - --system-tabs-font-weight: var(--spectrum-bold-font-weight); -} diff --git a/tokens/components/express/tag.css b/tokens/components/express/tag.css index 82bb6e1970d..d87bb463010 100644 --- a/tokens/components/express/tag.css +++ b/tokens/components/express/tag.css @@ -11,37 +11,37 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-tag-border-color: var(--spectrum-gray-700); - --system-tag-border-color-hover: var(--spectrum-gray-800); - --system-tag-border-color-active: var(--spectrum-gray-900); - --system-tag-border-color-focus: var(--spectrum-gray-800); - --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-background-color: var(--spectrum-gray-75); - --system-tag-background-color-hover: var(--spectrum-gray-75); - --system-tag-background-color-active: var(--spectrum-gray-200); - --system-tag-background-color-focus: var(--spectrum-gray-75); - --system-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --system-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); - --system-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --system-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); - --system-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); - --system-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); - --system-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - --system-tag-border-color-disabled: transparent; - --system-tag-background-color-disabled: var(--spectrum-disabled-background-color); - --system-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); - --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); - --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); - --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); - --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); - --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); - --system-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); - --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); - --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); +.spectrum.spectrum--express { + --system-tag-border-color: var(--spectrum-gray-300); + --system-tag-border-color-hover: var(--spectrum-gray-400); + --system-tag-border-color-active: var(--spectrum-gray-500); + --system-tag-border-color-focus: var(--spectrum-gray-400); + --system-tag-size-small-corner-radius: var(--spectrum-component-height-75); + --system-tag-size-medium-corner-radius: var(--spectrum-component-height-100); + --system-tag-size-large-corner-radius: var(--spectrum-component-height-200); + --system-tag-background-color: transparent; + --system-tag-background-color-hover: var(--spectrum-gray-300); + --system-tag-background-color-active: var(--spectrum-gray-400); + --system-tag-background-color-focus: var(--spectrum-gray-300); + --system-tag-content-color: var(--spectrum-neutral-content-color-default); + --system-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-tag-content-color-active: var(--spectrum-neutral-content-color-down); + --system-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --system-tag-border-color-selected: var(--spectrum-neutral-background-color-default); + --system-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover); + --system-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down); + --system-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus); + --system-tag-border-color-disabled: var(--spectrum-disabled-border-color); + --system-tag-background-color-disabled: transparent; + --system-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75); + --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75); + --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75); + --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100); + --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100); + --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100); + --system-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200); + --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200); + --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200); --system-tag-avatar-opacity-disabled: 0.3; --system-tag-animation-duration: var(--spectrum-animation-duration-100); --system-tag-border-width: var(--spectrum-border-width-100); @@ -50,7 +50,7 @@ --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); --system-tag-label-line-height: var(--spectrum-line-height-100); --system-tag-label-font-weight: var(--spectrum-regular-font-weight); - --system-tag-content-color-selected: var(--spectrum-gray-50); + --system-tag-content-color-selected: var(--spectrum-gray-25); --system-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); --system-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); --system-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); @@ -82,6 +82,18 @@ --system-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); --system-tag-content-color-emphasized: var(--spectrum-white); --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-tag-height: var(--spectrum-component-height-100); + --system-tag-font-size: var(--spectrum-font-size-100); + --system-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); --system-tag-size-s-height: var(--spectrum-component-height-75); --system-tag-size-s-font-size: var(--spectrum-font-size-75); --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); @@ -98,37 +110,21 @@ --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); - --system-tag-height: var(--spectrum-component-height-100); --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --system-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --system-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); - --system-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); - --system-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-l-height: var(--spectrum-component-height-200); --system-tag-size-l-font-size: var(--spectrum-font-size-200); @@ -147,36 +143,3 @@ --system-tag-size-l-label-spacing-inline-end: var(--system-tag-size-large-label-spacing-inline-end); --system-tag-size-l-clear-button-spacing-inline-end: var(--system-tag-size-large-clear-button-spacing-inline-end); } - -.spectrum--express { - --system-tag-background-color: transparent; - --system-tag-background-color-hover: var(--spectrum-gray-300); - --system-tag-background-color-active: var(--spectrum-gray-400); - --system-tag-background-color-focus: var(--spectrum-gray-300); - --system-tag-size-small-corner-radius: var(--spectrum-component-height-75); - --system-tag-size-medium-corner-radius: var(--spectrum-component-height-100); - --system-tag-size-large-corner-radius: var(--spectrum-component-height-200); - --system-tag-border-color: var(--spectrum-gray-300); - --system-tag-border-color-hover: var(--spectrum-gray-400); - --system-tag-border-color-active: var(--spectrum-gray-500); - --system-tag-border-color-focus: var(--spectrum-gray-400); - --system-tag-content-color: var(--spectrum-neutral-content-color-default); - --system-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-tag-content-color-active: var(--spectrum-neutral-content-color-down); - --system-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-tag-border-color-selected: var(--spectrum-neutral-background-color-default); - --system-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover); - --system-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down); - --system-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus); - --system-tag-border-color-disabled: var(--spectrum-disabled-border-color); - --system-tag-background-color-disabled: transparent; - --system-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75); - --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75); - --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75); - --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100); - --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100); - --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100); - --system-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200); - --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200); - --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200); -} diff --git a/tokens/components/express/taggroup.css b/tokens/components/express/taggroup.css index 2dfac0237a3..2c9d471de00 100644 --- a/tokens/components/express/taggroup.css +++ b/tokens/components/express/taggroup.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-tag-group-item-margin-block: var(--spectrum-spacing-75); --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); } diff --git a/tokens/components/express/textfield.css b/tokens/components/express/textfield.css index 730a1514fd1..7168722b922 100644 --- a/tokens/components/express/textfield.css +++ b/tokens/components/express/textfield.css @@ -11,13 +11,13 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-textfield-border-color: var(--spectrum-gray-500); - --system-textfield-border-color-hover: var(--spectrum-gray-600); +.spectrum.spectrum--express { + --system-textfield-border-color: var(--spectrum-gray-400); + --system-textfield-border-color-hover: var(--spectrum-gray-500); --system-textfield-border-color-focus: var(--spectrum-gray-800); --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-textfield-border-width: var(--spectrum-border-width-100); + --system-textfield-border-width: var(--spectrum-border-width-200); --system-textfield-texfield-animation-duration: var(--spectrum-animation-duration-100); --system-textfield-width: 240px; --system-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier); @@ -38,7 +38,7 @@ --system-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); --system-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-textfield-background-color: var(--spectrum-gray-50); + --system-textfield-background-color: var(--spectrum-gray-25); --system-textfield-text-color-default: var(--spectrum-neutral-content-color-default); --system-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); --system-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus); @@ -151,12 +151,3 @@ --system-textfield-size-xl-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); --system-textfield-size-xl-text-area-min-block-size-quiet: var(--spectrum-component-height-300); } - -.spectrum--express { - --system-textfield-border-color: var(--spectrum-gray-400); - --system-textfield-border-color-hover: var(--spectrum-gray-500); - --system-textfield-border-color-focus: var(--spectrum-gray-800); - --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-textfield-border-width: var(--spectrum-border-width-200); -} diff --git a/tokens/components/express/thumbnail.css b/tokens/components/express/thumbnail.css index e1a8d647ec3..ab5a5d925a5 100644 --- a/tokens/components/express/thumbnail.css +++ b/tokens/components/express/thumbnail.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-thumbnail-size: var(--spectrum-thumbnail-size-500); --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); --system-thumbnail-border-width: var(--spectrum-border-width-100); diff --git a/tokens/components/express/toast.css b/tokens/components/express/toast.css index 40555cee1b2..4bde6151126 100644 --- a/tokens/components/express/toast.css +++ b/tokens/components/express/toast.css @@ -11,8 +11,8 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); +.spectrum.spectrum--express { + --system-toast-background-color-default: var(--spectrum-neutral-background-color-default); --system-toast-font-weight: var(--spectrum-regular-font-weight); --system-toast-font-size: var(--spectrum-font-size-100); --system-toast-corner-radius: var(--spectrum-corner-radius-100); @@ -39,7 +39,3 @@ --system-toast-text-and-icon-color: var(--spectrum-white); --system-toast-divider-color: var(--spectrum-transparent-white-300); } - -.spectrum--express { - --system-toast-background-color-default: var(--spectrum-neutral-background-color-default); -} diff --git a/tokens/components/express/tooltip.css b/tokens/components/express/tooltip.css index e4b4ac2f00e..557cba4ed11 100644 --- a/tokens/components/express/tooltip.css +++ b/tokens/components/express/tooltip.css @@ -11,8 +11,8 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); +.spectrum.spectrum--express { + --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default); --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); --system-tooltip-margin: 0px; --system-tooltip-height: var(--spectrum-component-height-75); @@ -42,7 +42,3 @@ --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); --system-tooltip-background-color-default: var(--system-tooltip-backgound-color-default-neutral); } - -.spectrum--express { - --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default); -} diff --git a/tokens/components/express/tray.css b/tokens/components/express/tray.css index adfb957ae59..da371a6fc70 100644 --- a/tokens/components/express/tray.css +++ b/tokens/components/express/tray.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-tray-exit-animation-delay: 0ms; --system-tray-entry-animation-delay: 160ms; --system-tray-max-inline-size: 375px; diff --git a/tokens/components/express/treeview.css b/tokens/components/express/treeview.css index 37db29cb6c1..dcc4899b451 100644 --- a/tokens/components/express/treeview.css +++ b/tokens/components/express/treeview.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-tree-view-line-height: var(--spectrum-line-height-200); --system-tree-view-margin-block: 1em; --system-tree-view-font-size: var(--spectrum-font-size-100); diff --git a/tokens/components/express/typography.css b/tokens/components/express/typography.css index 432bbdaeb16..d21a909a434 100644 --- a/tokens/components/express/typography.css +++ b/tokens/components/express/typography.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --system-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --system-font-family: var(--spectrum-sans-font-family-stack); diff --git a/tokens/components/express/underlay.css b/tokens/components/express/underlay.css index 766c58097fc..e55e39888e0 100644 --- a/tokens/components/express/underlay.css +++ b/tokens/components/express/underlay.css @@ -11,13 +11,12 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0); --system-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in); --system-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out); - --system-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100); - --system-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); --system-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300); + --system-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); --system-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200); --system-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); } diff --git a/tokens/components/express/well.css b/tokens/components/express/well.css index 3f754c04003..4d43886a31d 100644 --- a/tokens/components/express/well.css +++ b/tokens/components/express/well.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--express { --system-well-border-width: var(--spectrum-border-width-100); --system-well-content-color: var(--spectrum-body-color); } diff --git a/tokens/components/spectrum-two/actionbutton.css b/tokens/components/spectrum-two/actionbutton.css index 51652f5ec5a..4dc511cd778 100644 --- a/tokens/components/spectrum-two/actionbutton.css +++ b/tokens/components/spectrum-two/actionbutton.css @@ -26,6 +26,15 @@ --system-action-button-animation-duration: var(--spectrum-animation-duration-100); --system-action-button-border-radius: var(--spectrum-corner-radius-100); --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --system-action-button-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); + --system-action-button-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); + --system-action-button-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); --system-action-button-content-color-default: var(--spectrum-neutral-content-color-default); --system-action-button-content-color-hover: var(--spectrum-neutral-content-color-hover); --system-action-button-content-color-down: var(--spectrum-neutral-content-color-down); @@ -83,23 +92,14 @@ --system-action-button-size-s-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-75) - var(--system-action-button-border-width)); --system-action-button-size-s-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--system-action-button-border-width)); --system-action-button-size-s-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--system-action-button-border-width)); - --system-action-button-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); --system-action-button-size-m-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); - --system-action-button-height: var(--spectrum-component-height-100); --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); --system-action-button-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-font-size: var(--spectrum-font-size-100); --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); --system-action-button-size-m-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); --system-action-button-size-m-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --system-action-button-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); --system-action-button-size-m-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); - --system-action-button-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); --system-action-button-size-m-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); - --system-action-button-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); --system-action-button-size-m-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); --system-action-button-size-l-min-width: calc(var(--spectrum-component-edge-to-visual-only-200) * 2 + var(--spectrum-workflow-icon-size-200)); --system-action-button-size-l-height: var(--spectrum-component-height-200); diff --git a/tokens/components/spectrum-two/divider.css b/tokens/components/spectrum-two/divider.css index 50819523a78..a72e2054cba 100644 --- a/tokens/components/spectrum-two/divider.css +++ b/tokens/components/spectrum-two/divider.css @@ -22,11 +22,7 @@ --system-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300); --system-divider-background-color-large-static-black: var(--spectrum-transparent-black-800); --system-divider-size-s-thickness: var(--spectrum-divider-thickness-small); - --system-divider-size-s-background-color: var(--system-divider-background-color-small, var(--spectrum-gray-200)); --system-divider-thickness: var(--spectrum-divider-thickness-medium); --system-divider-size-m-thickness: var(--spectrum-divider-thickness-medium); - --system-divider-background-color: var(--system-divider-background-color-medium, var(--spectrum-gray-200)); - --system-divider-size-m-background-color: var(--system-divider-background-color-medium, var(--spectrum-gray-200)); --system-divider-size-l-thickness: var(--spectrum-divider-thickness-large); - --system-divider-size-l-background-color: var(--system-divider-background-color-large, var(--spectrum-gray-800)); } diff --git a/tokens/components/spectrum-two/fieldlabel.css b/tokens/components/spectrum-two/fieldlabel.css index 43c4b464125..07517e26b3c 100644 --- a/tokens/components/spectrum-two/fieldlabel.css +++ b/tokens/components/spectrum-two/fieldlabel.css @@ -12,7 +12,9 @@ */ .spectrum { + --system-field-label-min-height: var(--spectrum-component-height-75); --system-field-label-color: var(--spectrum-neutral-subdued-content-color-default); + --system-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); --system-field-label-font-weight: var(--spectrum-regular-font-weight); --system-field-label-line-height: var(--spectrum-line-height-100); --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); @@ -23,7 +25,6 @@ --system-field-label-size-s-side-margin-block-start: var(--spectrum-field-label-top-margin-small); --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); --system-field-label-size-s-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); - --system-field-label-min-height: var(--spectrum-component-height-75); --system-field-label-size-m-min-height: var(--spectrum-component-height-75); --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); --system-field-label-size-m-top-to-text: var(--spectrum-component-top-to-text-75); @@ -35,7 +36,6 @@ --system-field-label-size-m-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); --system-field-label-side-padding-right: var(--spectrum-spacing-200); --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); --system-field-label-size-m-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); --system-field-label-size-l-min-height: var(--spectrum-component-height-100); --system-field-label-size-l-top-to-text: var(--spectrum-component-top-to-text-100); diff --git a/tokens/components/spectrum-two/progressbar.css b/tokens/components/spectrum-two/progressbar.css index 7da1391846d..112ace71869 100644 --- a/tokens/components/spectrum-two/progressbar.css +++ b/tokens/components/spectrum-two/progressbar.css @@ -48,7 +48,7 @@ --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); - --system-meter-size-s-progressbar-thickness: var(--spectrum-progress-bar-thickness-small); + --system-meter-size-s-progressbar-thickness: var(--system-progress-bar-meter-thickness-s); --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --system-meter-size-s-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); @@ -60,9 +60,9 @@ --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); - --system-meter-size-l-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); + --system-meter-size-l-progressbar-thickness: var(--system-progress-bar-meter-thickness-l); --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); @@ -70,7 +70,4 @@ --system-meter-progressbar-size-default: var(--mod-meter-inline-size, var(--system-progress-bar-meter-inline-size)); --system-meter-progressbar-max-size: var(--mod-meter-max-width, var(--system-progress-bar-meter-max-width)); --system-meter-progressbar-min-size: var(--mod-meter-min-width, var(--system-progress-bar-meter-min-width)); - --system-meter-size-s-progressbar-thickness: var(--system-progress-bar-meter-thickness-s); - --system-meter-size-l-progressbar-thickness: var(--system-progress-bar-meter-thickness-l); - --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); } diff --git a/tokens/components/spectrum-two/search.css b/tokens/components/spectrum-two/search.css index 5d121d55d6c..94305fdd550 100644 --- a/tokens/components/spectrum-two/search.css +++ b/tokens/components/spectrum-two/search.css @@ -12,13 +12,13 @@ */ .spectrum { + --system-search-border-radius: var(--spectrum-corner-radius-100); + --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); --system-search-border-color-default: var(--spectrum-gray-500); --system-search-border-color-hover: var(--spectrum-gray-600); --system-search-border-color-focus: var(--spectrum-gray-800); --system-search-border-color-focus-hover: var(--spectrum-gray-900); --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); --system-search-inline-size: var(--spectrum-field-width); --system-search-block-size: var(--spectrum-component-height-100); --system-search-button-inline-size: var(--system-search-block-size); diff --git a/tokens/components/spectrum-two/underlay.css b/tokens/components/spectrum-two/underlay.css index c23a18bbbb6..1bf27bc6668 100644 --- a/tokens/components/spectrum-two/underlay.css +++ b/tokens/components/spectrum-two/underlay.css @@ -15,9 +15,8 @@ --system-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0); --system-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in); --system-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out); - --system-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100); - --system-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); --system-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300); + --system-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); --system-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200); --system-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); } diff --git a/tokens/components/spectrum/accordion.css b/tokens/components/spectrum/accordion.css index 178d88ab14b..28f2f31a3c2 100644 --- a/tokens/components/spectrum/accordion.css +++ b/tokens/components/spectrum/accordion.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-accordion-item-height: var(--spectrum-component-height-200); --system-accordion-item-width: var(--spectrum-accordion-minimum-width); --system-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); diff --git a/tokens/components/spectrum/actionbar.css b/tokens/components/spectrum/actionbar.css index 802d677bc81..cf0bbdb6367 100644 --- a/tokens/components/spectrum/actionbar.css +++ b/tokens/components/spectrum/actionbar.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-action-bar-height: var(--spectrum-action-bar-height); --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); diff --git a/tokens/components/spectrum/actionbutton.css b/tokens/components/spectrum/actionbutton.css index 3d797dfb1a7..2a5e622adcd 100644 --- a/tokens/components/spectrum/actionbutton.css +++ b/tokens/components/spectrum/actionbutton.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-action-button-background-color-default: var(--spectrum-gray-75); --system-action-button-background-color-hover: var(--spectrum-gray-200); --system-action-button-background-color-down: var(--spectrum-gray-300); @@ -26,6 +26,15 @@ --system-action-button-animation-duration: var(--spectrum-animation-duration-100); --system-action-button-border-radius: var(--spectrum-corner-radius-100); --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --system-action-button-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); + --system-action-button-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); + --system-action-button-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); --system-action-button-content-color-default: var(--spectrum-neutral-content-color-default); --system-action-button-content-color-hover: var(--spectrum-neutral-content-color-hover); --system-action-button-content-color-down: var(--spectrum-neutral-content-color-down); @@ -83,23 +92,14 @@ --system-action-button-size-s-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-75) - var(--system-action-button-border-width)); --system-action-button-size-s-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--system-action-button-border-width)); --system-action-button-size-s-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--system-action-button-border-width)); - --system-action-button-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); --system-action-button-size-m-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); - --system-action-button-height: var(--spectrum-component-height-100); --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); --system-action-button-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-font-size: var(--spectrum-font-size-100); --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); --system-action-button-size-m-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); --system-action-button-size-m-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --system-action-button-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); --system-action-button-size-m-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); - --system-action-button-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); --system-action-button-size-m-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); - --system-action-button-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); --system-action-button-size-m-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); --system-action-button-size-l-min-width: calc(var(--spectrum-component-edge-to-visual-only-200) * 2 + var(--spectrum-workflow-icon-size-200)); --system-action-button-size-l-height: var(--spectrum-component-height-200); diff --git a/tokens/components/spectrum/actiongroup.css b/tokens/components/spectrum/actiongroup.css index b600d2b7687..f5fd41dd551 100644 --- a/tokens/components/spectrum/actiongroup.css +++ b/tokens/components/spectrum/actiongroup.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-action-group-gap-size-compact: 0; --system-action-group-horizontal-spacing-compact: -1px; --system-action-group-vertical-spacing-compact: -1px; diff --git a/tokens/components/spectrum/alertbanner.css b/tokens/components/spectrum/alertbanner.css index 1f9c1d43df1..259614fd504 100644 --- a/tokens/components/spectrum/alertbanner.css +++ b/tokens/components/spectrum/alertbanner.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-alert-banner-netural-background: var(--spectrum-neutral-subdued-background-color-default); --system-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); diff --git a/tokens/components/spectrum/alertdialog.css b/tokens/components/spectrum/alertdialog.css index 53598a2327a..5363639573b 100644 --- a/tokens/components/spectrum/alertdialog.css +++ b/tokens/components/spectrum/alertdialog.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); diff --git a/tokens/components/spectrum/asset.css b/tokens/components/spectrum/asset.css index fd5821097ec..a3a3d82353f 100644 --- a/tokens/components/spectrum/asset.css +++ b/tokens/components/spectrum/asset.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-asset-transition-duration: var(--spectrum-animation-duration-100); --system-asset-folder-background-color: var(--spectrum-gray-300); --system-asset-file-background-color: var(--spectrum-gray-50); diff --git a/tokens/components/spectrum/assetcard.css b/tokens/components/spectrum/assetcard.css index 6fd39d8c2c3..7f54c0910d0 100644 --- a/tokens/components/spectrum/assetcard.css +++ b/tokens/components/spectrum/assetcard.css @@ -11,6 +11,92 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-asset-card-overlay-background-color: rgba(27, 127, 245, 0.1); + --system-asset-card-asset-size: 224px; + --system-asset-card-background-color: var(--spectrum-gray-100); + --system-asset-card-asset-animation-duration: var(--spectrum-animation-duration-100); + --system-asset-card-asset-container-border-size: 1px; + --system-asset-card-header-margin-block-start: var(--spectrum-spacing-300); + --system-asset-card-border-radius: var(--spectrum-corner-radius-100); + --system-asset-card-border-color: transparent; + --system-asset-card-border-color-hover: var(--spectrum-gray-500); + --system-asset-card-border-color-down: var(--spectrum-gray-600); + --system-asset-card-focus-ring-gap: 5px; + --system-asset-card-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --system-asset-card-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); + --system-asset-card-selectionindicator-size: var(--spectrum-card-selection-background-size); + --system-asset-card-selectionindicator-border-radius: var(--spectrum-corner-radius-100); + --system-asset-card-selectionindicator-offset-y: 4px; + --system-asset-card-selectionindicator-blur: 6px; + --system-asset-card-selectionindicator-color: var(--spectrum-white); + --system-asset-card-selectionindicator-font-weight: var(--spectrum-bold-font-weight); + --system-asset-card-selectionindicator-font-size: var(--spectrum-font-size-400); + --system-asset-card-title-text-color: var(--spectrum-gray-900); + --system-asset-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --system-asset-card-title-font-style: var(--spectrum-default-font-style); + --system-asset-card-title-line-height: var(--spectrum-line-height-100); + --system-asset-card-title-letter-spacing: 0; + --system-asset-card-header-content-text-color: var(--spectrum-gray-900); + --system-asset-card-header-content-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-header-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-asset-card-header-content-font-style: var(--spectrum-default-font-style); + --system-asset-card-header-content-line-height: var(--spectrum-line-height-200); + --system-asset-card-header-content-letter-spacing: 0; + --system-asset-card-content-text-color: var(--spectrum-gray-700); + --system-asset-card-content-font-family: var(--spectrum-sans-font-family-stack); + --system-asset-card-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-asset-card-content-font-style: var(--spectrum-default-font-style); + --system-asset-card-content-line-height: var(--spectrum-line-height-200); + --system-asset-card-content-letter-spacing: 0; + --system-asset-card-content-margin-block-start: var(--spectrum-spacing-75); + --system-asset-card-lang-zh-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-title-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-ja-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-ko-title-font-style: var(--spectrum-heading-cjk-font-style); + --system-asset-card-lang-zh-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-ja-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-ko-title-font-weight: var(--spectrum-heading-cjk-font-weight); + --system-asset-card-lang-zh-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-ja-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-ko-title-font-size: var(--spectrum-heading-cjk-size-xs); + --system-asset-card-lang-zh-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-ja-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-ko-title-line-height: var(--spectrum-heading-cjk-line-height); + --system-asset-card-lang-zh-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-title-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-zh-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-header-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ja-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ko-header-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-zh-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ja-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ko-header-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-zh-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ja-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ko-header-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-zh-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-zh-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ja-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-ko-content-font-family: var(--spectrum-cjk-font-family-stack); + --system-asset-card-lang-zh-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ja-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-ko-content-font-weight: var(--spectrum-body-cjk-font-weight); + --system-asset-card-lang-zh-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ja-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-ko-content-line-height: var(--spectrum-body-cjk-line-height); + --system-asset-card-lang-zh-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ja-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-ko-content-font-style: var(--spectrum-body-cjk-font-style); + --system-asset-card-lang-zh-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ja-content-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-asset-card-lang-ko-content-letter-spacing: var(--spectrum-cjk-letter-spacing); } diff --git a/tokens/components/spectrum/assetlist.css b/tokens/components/spectrum/assetlist.css index b5410328dc7..c78aedb0dcd 100644 --- a/tokens/components/spectrum/assetlist.css +++ b/tokens/components/spectrum/assetlist.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-asset-list-width: 272px; --system-asset-list-child-indicator-animation: var(--spectrum-animation-duration-100); --system-asset-list-item-height: var(--spectrum-spacing-600); diff --git a/tokens/components/spectrum/avatar.css b/tokens/components/spectrum/avatar.css index 5724acf0626..7026ad32871 100644 --- a/tokens/components/spectrum/avatar.css +++ b/tokens/components/spectrum/avatar.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-avatar-color-opacity: 1; --system-avatar-inline-size: var(--spectrum-avatar-size-100); --system-avatar-block-size: var(--spectrum-avatar-size-100); diff --git a/tokens/components/spectrum/badge.css b/tokens/components/spectrum/badge.css index bb82911abc8..3716e3c1d00 100644 --- a/tokens/components/spectrum/badge.css +++ b/tokens/components/spectrum/badge.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-badge-corner-radius: var(--spectrum-corner-radius-100); --system-badge-line-height: var(--spectrum-line-height-100); --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); diff --git a/tokens/components/spectrum/breadcrumb.css b/tokens/components/spectrum/breadcrumb.css index a55903a72ff..a1f3c8844fd 100644 --- a/tokens/components/spectrum/breadcrumb.css +++ b/tokens/components/spectrum/breadcrumb.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); --system-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact); --system-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline); diff --git a/tokens/components/spectrum/button.css b/tokens/components/spectrum/button.css index 8db8126d38a..84f2d39c470 100644 --- a/tokens/components/spectrum/button.css +++ b/tokens/components/spectrum/button.css @@ -11,7 +11,16 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-radius: var(--spectrum-corner-radius-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-border-radius: calc(var(--system-button-border-radius) + var(--system-button-focus-ring-gap)); + --system-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); --system-button-background-color-default: var(--spectrum-gray-75); --system-button-background-color-hover: var(--spectrum-gray-200); --system-button-background-color-down: var(--spectrum-gray-300); @@ -27,54 +36,6 @@ --system-button-background-color-disabled: transparent; --system-button-border-color-disabled: var(--spectrum-disabled-border-color); --system-button-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-size-s-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-s-border-radius: var(--spectrum-component-pill-edge-to-text-75); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); - --system-button-size-s-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); - --system-button-size-s-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); - --system-button-size-s-padding-label-to-icon: var(--spectrum-text-to-visual-75); - --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); - --system-button-size-s-bottom-to-text: var(--spectrum-button-bottom-to-text-small); - --system-button-size-s-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); - --system-button-size-s-intended-icon-size: var(--spectrum-workflow-icon-size-75); - --system-button-size-m-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-m-border-radius: var(--spectrum-component-pill-edge-to-text-100); - --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-size-m-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); - --system-button-size-m-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); - --system-button-size-m-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); - --system-button-size-m-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); - --system-button-size-m-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); - --system-button-size-m-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); - --system-button-size-m-intended-icon-size: var(--spectrum-workflow-icon-size-100); - --system-button-size-l-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-l-border-radius: var(--spectrum-component-pill-edge-to-text-200); - --system-button-size-l-height: var(--spectrum-component-height-200); - --system-button-size-l-font-size: var(--spectrum-font-size-200); - --system-button-size-l-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); - --system-button-size-l-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); - --system-button-size-l-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); - --system-button-size-l-padding-label-to-icon: var(--spectrum-text-to-visual-200); - --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); - --system-button-size-l-bottom-to-text: var(--spectrum-button-bottom-to-text-large); - --system-button-size-l-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); - --system-button-size-l-intended-icon-size: var(--spectrum-workflow-icon-size-200); - --system-button-size-xl-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-xl-border-radius: var(--spectrum-component-pill-edge-to-text-300); - --system-button-size-xl-height: var(--spectrum-component-height-300); - --system-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-button-size-xl-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); - --system-button-size-xl-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); - --system-button-size-xl-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); - --system-button-size-xl-padding-label-to-icon: var(--spectrum-text-to-visual-300); - --system-button-size-xl-top-to-text: var(--spectrum-button-top-to-text-extra-large); - --system-button-size-xl-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); - --system-button-size-xl-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); - --system-button-size-xl-intended-icon-size: var(--spectrum-workflow-icon-size-300); --system-button-accent-background-color-default: var(--spectrum-accent-background-color-default); --system-button-accent-background-color-hover: var(--spectrum-accent-background-color-hover); --system-button-accent-background-color-down: var(--spectrum-accent-background-color-down); @@ -196,9 +157,9 @@ --system-button-secondary-outline-border-color-disabled: var(--spectrum-disabled-border-color); --system-button-secondary-outline-content-color-disabled: var(--spectrum-disabled-content-color); --system-button-quiet-background-color-default: transparent; - --system-button-quiet-background-color-hover: var(--spectrum-gray-200); - --system-button-quiet-background-color-down: var(--spectrum-gray-300); - --system-button-quiet-background-color-focus: var(--spectrum-gray-200); + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); --system-button-quiet-border-color-default: transparent; --system-button-quiet-border-color-hover: transparent; --system-button-quiet-border-color-down: transparent; @@ -371,4 +332,52 @@ --system-button-static-black-secondary-outline-background-color-disabled: transparent; --system-button-static-black-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); --system-button-static-black-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --system-button-size-s-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-s-border-radius: var(--spectrum-component-pill-edge-to-text-75); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--system-button-border-width)); + --system-button-size-s-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); + --system-button-size-s-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--system-button-border-width)); + --system-button-size-s-padding-label-to-icon: var(--spectrum-text-to-visual-75); + --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); + --system-button-size-s-bottom-to-text: var(--spectrum-button-bottom-to-text-small); + --system-button-size-s-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); + --system-button-size-s-intended-icon-size: var(--spectrum-workflow-icon-size-75); + --system-button-size-m-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-m-border-radius: var(--spectrum-component-pill-edge-to-text-100); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-size-m-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--system-button-border-width)); + --system-button-size-m-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); + --system-button-size-m-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--system-button-border-width)); + --system-button-size-m-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); + --system-button-size-m-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --system-button-size-m-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --system-button-size-m-intended-icon-size: var(--spectrum-workflow-icon-size-100); + --system-button-size-l-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-l-border-radius: var(--spectrum-component-pill-edge-to-text-200); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--system-button-border-width)); + --system-button-size-l-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); + --system-button-size-l-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--system-button-border-width)); + --system-button-size-l-padding-label-to-icon: var(--spectrum-text-to-visual-200); + --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); + --system-button-size-l-bottom-to-text: var(--spectrum-button-bottom-to-text-large); + --system-button-size-l-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); + --system-button-size-l-intended-icon-size: var(--spectrum-workflow-icon-size-200); + --system-button-size-xl-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); + --system-button-size-xl-border-radius: var(--spectrum-component-pill-edge-to-text-300); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--system-button-border-width)); + --system-button-size-xl-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); + --system-button-size-xl-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--system-button-border-width)); + --system-button-size-xl-padding-label-to-icon: var(--spectrum-text-to-visual-300); + --system-button-size-xl-top-to-text: var(--spectrum-button-top-to-text-extra-large); + --system-button-size-xl-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); + --system-button-size-xl-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); + --system-button-size-xl-intended-icon-size: var(--spectrum-workflow-icon-size-300); } diff --git a/tokens/components/spectrum/buttongroup.css b/tokens/components/spectrum/buttongroup.css index f5fd44e2808..5496637f625 100644 --- a/tokens/components/spectrum/buttongroup.css +++ b/tokens/components/spectrum/buttongroup.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); --system-button-group-spacing-vertical: var(--spectrum-spacing-300); --system-button-group-size-s-spacing-horizontal: var(--spectrum-spacing-200); diff --git a/tokens/components/spectrum/calendar.css b/tokens/components/spectrum/calendar.css index 782eab6ad8e..1ecb3813315 100644 --- a/tokens/components/spectrum/calendar.css +++ b/tokens/components/spectrum/calendar.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-calendar-day-width: var(--spectrum-component-height-100); --system-calendar-day-height: var(--spectrum-component-height-100); --system-calendar-border-radius-reset: 0; diff --git a/tokens/components/spectrum/card.css b/tokens/components/spectrum/card.css index 9e113936622..847e33c8a99 100644 --- a/tokens/components/spectrum/card.css +++ b/tokens/components/spectrum/card.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-card-background-color: var(--spectrum-background-layer-2-color); --system-card-body-spacing: var(--spectrum-spacing-400); --system-card-title-padding-top: var(--spectrum-spacing-300); @@ -58,7 +58,6 @@ --system-card-light-selected-background-color-rgb: var(--spectrum-blue-900-rgb); --system-card-lightest-selected-background-color-rgb: var(--spectrum-blue-900-rgb); --system-card-dark-selected-background-color-rgb: var(--spectrum-blue-500-rgb); - --system-card-darkest-selected-background-color-rgb: var(--spectrum-blue-600-rgb); --system-card-quiet-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100)); --system-card-gallery-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100)); --system-card-quiet-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width)); diff --git a/tokens/components/spectrum/checkbox.css b/tokens/components/spectrum/checkbox.css index fb290598194..480b070c715 100644 --- a/tokens/components/spectrum/checkbox.css +++ b/tokens/components/spectrum/checkbox.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-checkbox-control-color-default: var(--spectrum-gray-600); --system-checkbox-control-color-hover: var(--spectrum-gray-700); --system-checkbox-control-color-down: var(--spectrum-gray-800); diff --git a/tokens/components/spectrum/clearbutton.css b/tokens/components/spectrum/clearbutton.css index 53d6cc1aeb7..e26e46386bc 100644 --- a/tokens/components/spectrum/clearbutton.css +++ b/tokens/components/spectrum/clearbutton.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-clear-button-background-color: transparent; --system-clear-button-background-color-hover: transparent; --system-clear-button-background-color-down: transparent; diff --git a/tokens/components/spectrum/closebutton.css b/tokens/components/spectrum/closebutton.css index 20bb7b2f1c1..ab1c2ec57f9 100644 --- a/tokens/components/spectrum/closebutton.css +++ b/tokens/components/spectrum/closebutton.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-close-button-background-color-default: transparent; --system-close-button-background-color-hover: var(--spectrum-gray-200); --system-close-button-background-color-down: var(--spectrum-gray-300); @@ -29,19 +29,24 @@ --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-close-button-height: var(--spectrum-component-height-100); + --system-close-button-width: var(--spectrum-closebutton-height); --system-close-button-size: var(--system-close-button-size-400); --system-close-button-border-radius: var(--system-close-button-size-400); --system-close-button-animation-duration: var(--spectrum-animation-duration-100); --system-closebutton-size-s-height: var(--spectrum-component-height-75); + --system-closebutton-size-s-width: var(--spectrum-closebutton-height); --system-closebutton-size-s-size: var(--system-close-button-size-300); --system-closebutton-size-s-border-radius: var(--system-close-button-size-300); --system-closebutton-size-m-height: var(--spectrum-component-height-100); + --system-closebutton-size-m-width: var(--spectrum-closebutton-height); --system-closebutton-size-m-size: var(--system-close-button-size-400); --system-closebutton-size-m-border-radius: var(--system-close-button-size-400); --system-closebutton-size-l-height: var(--spectrum-component-height-200); + --system-closebutton-size-l-width: var(--spectrum-closebutton-height); --system-closebutton-size-l-size: var(--system-close-button-size-500); --system-closebutton-size-l-border-radius: var(--system-close-button-size-500); --system-closebutton-size-xl-height: var(--spectrum-component-height-300); + --system-closebutton-size-xl-width: var(--spectrum-closebutton-height); --system-closebutton-size-xl-size: var(--system-close-button-size-600); --system-closebutton-size-xl-border-radius: var(--system-close-button-size-600); --system-close-button-static-white-static-background-color-default: transparent; diff --git a/tokens/components/spectrum/coachindicator.css b/tokens/components/spectrum/coachindicator.css index e04c48b66e0..c5eabc69032 100644 --- a/tokens/components/spectrum/coachindicator.css +++ b/tokens/components/spectrum/coachindicator.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); diff --git a/tokens/components/spectrum/coachmark.css b/tokens/components/spectrum/coachmark.css index 01b9590d422..af2ef70b70f 100644 --- a/tokens/components/spectrum/coachmark.css +++ b/tokens/components/spectrum/coachmark.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); --system-coach-mark-width: var(--spectrum-coach-mark-width); --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); diff --git a/tokens/components/spectrum/colorarea.css b/tokens/components/spectrum/colorarea.css index 1fb41351a2a..8847d04d5c4 100644 --- a/tokens/components/spectrum/colorarea.css +++ b/tokens/components/spectrum/colorarea.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-color-area-border-radius: var(--spectrum-color-area-border-rounding); --system-color-area-border-color: rgba(0, 0, 0, 0.1); --system-color-area-disabled-background-color: var(--spectrum-disabled-background-color); diff --git a/tokens/components/spectrum/colorhandle.css b/tokens/components/spectrum/colorhandle.css index 640b304e909..fbc1a53e76b 100644 --- a/tokens/components/spectrum/colorhandle.css +++ b/tokens/components/spectrum/colorhandle.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-color-handle-size: var(--spectrum-color-handle-size); --system-color-handle-focused-size: var(--spectrum-color-handle-size-key-focus); --system-color-handle-hitarea-size: var(--spectrum-color-control-track-width); diff --git a/tokens/components/spectrum/colorloupe.css b/tokens/components/spectrum/colorloupe.css index 4da0e9e3406..adbeb35e323 100644 --- a/tokens/components/spectrum/colorloupe.css +++ b/tokens/components/spectrum/colorloupe.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-color-loupe-width: var(--spectrum-color-loupe-width); --system-color-loupe-height: var(--spectrum-color-loupe-height); --system-color-loupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); diff --git a/tokens/components/spectrum/colorslider.css b/tokens/components/spectrum/colorslider.css index da80d26f174..59280a34583 100644 --- a/tokens/components/spectrum/colorslider.css +++ b/tokens/components/spectrum/colorslider.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-color-slider-handle-margin-block: var(--spectrum-component-top-to-text-75); --system-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); --system-color-slider-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); diff --git a/tokens/components/spectrum/colorwheel.css b/tokens/components/spectrum/colorwheel.css index 57846b33005..60e1ba33539 100644 --- a/tokens/components/spectrum/colorwheel.css +++ b/tokens/components/spectrum/colorwheel.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-color-wheel-width: var(--spectrum-color-wheel-width); --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); --system-color-wheel-height: var(--spectrum-color-wheel-width); diff --git a/tokens/components/spectrum/combobox.css b/tokens/components/spectrum/combobox.css index 3383e00fc4d..670acc436a1 100644 --- a/tokens/components/spectrum/combobox.css +++ b/tokens/components/spectrum/combobox.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-combobox-border-color-default: var(--spectrum-gray-500); --system-combobox-border-color-hover: var(--spectrum-gray-600); --system-combobox-border-color-focus: var(--spectrum-gray-500); diff --git a/tokens/components/spectrum/contextualhelp.css b/tokens/components/spectrum/contextualhelp.css index d8fc55b51a5..601870ee9d2 100644 --- a/tokens/components/spectrum/contextualhelp.css +++ b/tokens/components/spectrum/contextualhelp.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-contextual-help-padding: var(--spectrum-spacing-400); --system-contextual-help-content-spacing: var(--spectrum-spacing-100); --system-contextual-help-link-spacing: var(--spectrum-spacing-300); diff --git a/tokens/components/spectrum/datepicker.css b/tokens/components/spectrum/datepicker.css index dc535987c31..b1decd5fd4a 100644 --- a/tokens/components/spectrum/datepicker.css +++ b/tokens/components/spectrum/datepicker.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-date-picker-initial-height: var(--spectrum-component-height-100); --system-date-picker-border-radius: var(--spectrum-corner-radius-100); --system-date-picker-border-radius-quiet: 0; diff --git a/tokens/components/spectrum/dial.css b/tokens/components/spectrum/dial.css index df5dccd2d21..c9b2c3bc0ea 100644 --- a/tokens/components/spectrum/dial.css +++ b/tokens/components/spectrum/dial.css @@ -11,18 +11,18 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { - --system-dial-background-color-default: var(--spectrum-gray-75); - --system-dial-handle-marker-color-disabled: var(--spectrum-gray-200); - --system-dial-border-color-disabled: var(--spectrum-gray-200); +.spectrum.spectrum--legacy { + --system-dial-background-color-default: var(--spectrum-gray-100); + --system-dial-handle-marker-color-disabled: var(--spectrum-gray-300); + --system-dial-border-color-disabled: var(--spectrum-gray-300); --system-dial-handle-marker-color: var(--spectrum-gray-700); --system-dial-border-color: var(--spectrum-gray-700); --system-dial-handle-marker-color-down: var(--spectrum-gray-800); --system-dial-border-color-down: var(--spectrum-gray-800); --system-dial-handle-marker-color-hover: var(--spectrum-gray-800); --system-dial-border-color-hover: var(--spectrum-gray-800); - --system-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); - --system-dial-border-color-key-focus: var(--spectrum-gray-25); + --system-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); + --system-dial-border-color-key-focus: var(--spectrum-gray-50); --system-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); --system-dial-border-color-mouse-focus: var(--spectrum-gray-700); --system-dial-min-max-tick-color: var(--spectrum-gray-600); diff --git a/tokens/components/spectrum/dialog.css b/tokens/components/spectrum/dialog.css index 5b2bbd4fd21..e84cc8b8513 100644 --- a/tokens/components/spectrum/dialog.css +++ b/tokens/components/spectrum/dialog.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-dialog-fullscreen-header-text-size: 28px; --system-dialog-min-inline-size: 288px; --system-dialog-confirm-small-width: 400px; diff --git a/tokens/components/spectrum/divider.css b/tokens/components/spectrum/divider.css index 5d7b7065ad8..da4b7f6597f 100644 --- a/tokens/components/spectrum/divider.css +++ b/tokens/components/spectrum/divider.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-divider-background-color-small: var(--spectrum-gray-300); --system-divider-background-color-medium: var(--spectrum-gray-300); --system-divider-background-color-large: var(--spectrum-gray-800); @@ -22,11 +22,7 @@ --system-divider-background-color-medium-static-black: var(--spectrum-transparent-black-300); --system-divider-background-color-large-static-black: var(--spectrum-transparent-black-800); --system-divider-size-s-thickness: var(--spectrum-divider-thickness-small); - --system-divider-size-s-background-color: var(--system-divider-background-color-small, var(--spectrum-gray-300)); --system-divider-thickness: var(--spectrum-divider-thickness-medium); --system-divider-size-m-thickness: var(--spectrum-divider-thickness-medium); - --system-divider-background-color: var(--system-divider-background-color-medium, var(--spectrum-gray-300)); - --system-divider-size-m-background-color: var(--system-divider-background-color-medium, var(--spectrum-gray-300)); --system-divider-size-l-thickness: var(--spectrum-divider-thickness-large); - --system-divider-size-l-background-color: var(--system-divider-background-color-large, var(--spectrum-gray-800)); } diff --git a/tokens/components/spectrum/dropindicator.css b/tokens/components/spectrum/dropindicator.css index 189f629a8d0..5bf66397ebb 100644 --- a/tokens/components/spectrum/dropindicator.css +++ b/tokens/components/spectrum/dropindicator.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-drop-indicator-border-color: var(--spectrum-dropindicator-color); --system-drop-indicator-circle-color: var(--spectrum-dropindicator-color); --system-drop-indicator-border-size: var(--spectrum-border-width-200); diff --git a/tokens/components/spectrum/dropzone.css b/tokens/components/spectrum/dropzone.css index 280fdfff928..817c3892bf2 100644 --- a/tokens/components/spectrum/dropzone.css +++ b/tokens/components/spectrum/dropzone.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-drop-zone-padding: var(--spectrum-spacing-400); --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); diff --git a/tokens/components/spectrum/fieldgroup.css b/tokens/components/spectrum/fieldgroup.css index b063619ffcf..8eac87e1543 100644 --- a/tokens/components/spectrum/fieldgroup.css +++ b/tokens/components/spectrum/fieldgroup.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-field-group-margin: var(--spectrum-spacing-300); --system-field-group-readonly-delimiter: "\002c"; } diff --git a/tokens/components/spectrum/fieldlabel.css b/tokens/components/spectrum/fieldlabel.css index a14b273b42b..0b51eff909e 100644 --- a/tokens/components/spectrum/fieldlabel.css +++ b/tokens/components/spectrum/fieldlabel.css @@ -11,8 +11,10 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { + --system-field-label-min-height: var(--spectrum-component-height-75); --system-field-label-color: var(--spectrum-neutral-subdued-content-color-default); + --system-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); --system-field-label-font-weight: var(--spectrum-regular-font-weight); --system-field-label-line-height: var(--spectrum-line-height-100); --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); @@ -23,7 +25,6 @@ --system-field-label-size-s-side-margin-block-start: var(--spectrum-field-label-top-margin-small); --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); --system-field-label-size-s-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); - --system-field-label-min-height: var(--spectrum-component-height-75); --system-field-label-size-m-min-height: var(--spectrum-component-height-75); --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); --system-field-label-size-m-top-to-text: var(--spectrum-component-top-to-text-75); @@ -35,7 +36,6 @@ --system-field-label-size-m-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); --system-field-label-side-padding-right: var(--spectrum-spacing-200); --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); --system-field-label-size-m-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); --system-field-label-size-l-min-height: var(--spectrum-component-height-100); --system-field-label-size-l-top-to-text: var(--spectrum-component-top-to-text-100); diff --git a/tokens/components/spectrum/floatingactionbutton.css b/tokens/components/spectrum/floatingactionbutton.css index 8587f5fa49e..c7b67f85aaf 100644 --- a/tokens/components/spectrum/floatingactionbutton.css +++ b/tokens/components/spectrum/floatingactionbutton.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-floating-action-button-size: var(--spectrum-component-height-200); --system-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200); --system-floating-action-button-padding: var(--spectrum-component-pill-edge-to-visual-only-200); diff --git a/tokens/components/spectrum/helptext.css b/tokens/components/spectrum/helptext.css index 995eb961db9..8cc9cdc50c3 100644 --- a/tokens/components/spectrum/helptext.css +++ b/tokens/components/spectrum/helptext.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-help-text-line-height: var(--spectrum-line-height-100); --system-help-text-content-color-default: var(--spectrum-neutral-subdued-content-color-default); --system-help-text-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); diff --git a/tokens/components/spectrum/icon.css b/tokens/components/spectrum/icon.css index b4b1563e1b0..16c8cb0cd60 100644 --- a/tokens/components/spectrum/icon.css +++ b/tokens/components/spectrum/icon.css @@ -11,14 +11,13 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-icon-size: var(--spectrum-workflow-icon-size-100); --system-icon-size-xxs-size: var(--spectrum-workflow-icon-size-xxs); --system-icon-size-xs-size: var(--spectrum-workflow-icon-size-50); --system-icon-size-s-size: var(--spectrum-workflow-icon-size-75); --system-icon-size-l-size: var(--spectrum-workflow-icon-size-200); --system-icon-size-xl-size: var(--spectrum-workflow-icon-size-300); - --system-icon-size-xxl-size: var(--spectrum-workflow-icon-size-xxl); --system-ui-icon-chevron-right-50-icon-size: var(--spectrum-chevron-icon-size-50); --system-ui-icon-chevron-right-75-icon-size: var(--spectrum-chevron-icon-size-75); --system-ui-icon-chevron-right-100-icon-size: var(--spectrum-chevron-icon-size-100); diff --git a/tokens/components/spectrum/illustratedmessage.css b/tokens/components/spectrum/illustratedmessage.css index b12a22edd05..ccf7dc03978 100644 --- a/tokens/components/spectrum/illustratedmessage.css +++ b/tokens/components/spectrum/illustratedmessage.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width); --system-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width); --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); diff --git a/tokens/components/spectrum/infieldbutton.css b/tokens/components/spectrum/infieldbutton.css index c0221e2de9a..24101ecb211 100644 --- a/tokens/components/spectrum/infieldbutton.css +++ b/tokens/components/spectrum/infieldbutton.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-infield-button-border-width: var(--spectrum-border-width-100); --system-infield-button-border-color: inherit; --system-infield-button-border-radius: var(--spectrum-corner-radius-100); diff --git a/tokens/components/spectrum/inlinealert.css b/tokens/components/spectrum/inlinealert.css index 34d774e3085..2aa7b82496e 100644 --- a/tokens/components/spectrum/inlinealert.css +++ b/tokens/components/spectrum/inlinealert.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-in-line-alert-heading-font-family: var(--spectrum-sans-font-family-stack); --system-in-line-alert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); --system-in-line-alert-heading-font-style: var(--spectrum-heading-sans-serif-font-style); diff --git a/tokens/components/spectrum/link.css b/tokens/components/spectrum/link.css index bcd6d50c2a3..cfa404115ab 100644 --- a/tokens/components/spectrum/link.css +++ b/tokens/components/spectrum/link.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-link-animation-duration: var(--spectrum-animation-duration-100); --system-link-text-color-primary-default: var(--spectrum-accent-content-color-default); --system-link-text-color-primary-hover: var(--spectrum-accent-content-color-hover); diff --git a/tokens/components/spectrum/logicbutton.css b/tokens/components/spectrum/logicbutton.css index a271a04a272..824c9f0be93 100644 --- a/tokens/components/spectrum/logicbutton.css +++ b/tokens/components/spectrum/logicbutton.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-logic-button-height: 24px; --system-logic-button-padding: var(--spectrum-component-edge-to-text-50); --system-logic-button-font-size: var(--spectrum-font-size-100); diff --git a/tokens/components/spectrum/menu.css b/tokens/components/spectrum/menu.css index 4dced0e4946..0fdc1d6c0ae 100644 --- a/tokens/components/spectrum/menu.css +++ b/tokens/components/spectrum/menu.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-menu-item-min-height: var(--spectrum-component-height-100); --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); diff --git a/tokens/components/spectrum/miller.css b/tokens/components/spectrum/miller.css index 7064447cc3e..1eeac83a511 100644 --- a/tokens/components/spectrum/miller.css +++ b/tokens/components/spectrum/miller.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-miller-columns-inline-size: 272px; --system-miller-columns-padding: var(--spectrum-spacing-100); --system-miller-columns-margin-inline-start: var(--spectrum-spacing-100); diff --git a/tokens/components/spectrum/modal.css b/tokens/components/spectrum/modal.css index 9e418cdfa02..71b34061aa0 100644 --- a/tokens/components/spectrum/modal.css +++ b/tokens/components/spectrum/modal.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0); --system-modal-fullscreen-margin: 32px; --system-modal-max-height: 90vh; diff --git a/tokens/components/spectrum/opacitycheckerboard.css b/tokens/components/spectrum/opacitycheckerboard.css index aa980f00e21..263538ec316 100644 --- a/tokens/components/spectrum/opacitycheckerboard.css +++ b/tokens/components/spectrum/opacitycheckerboard.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark); --system-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light); --system-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); diff --git a/tokens/components/spectrum/pagination.css b/tokens/components/spectrum/pagination.css index c72926a26e2..19a0ef3b751 100644 --- a/tokens/components/spectrum/pagination.css +++ b/tokens/components/spectrum/pagination.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-pagination-counter-margin-inline-start: var(--spectrum-pagination-item-inline-spacing); --system-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing); --system-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default); diff --git a/tokens/components/spectrum/picker.css b/tokens/components/spectrum/picker.css index 5e90adcc784..58d5da37df3 100644 --- a/tokens/components/spectrum/picker.css +++ b/tokens/components/spectrum/picker.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-picker-background-color-default: var(--spectrum-gray-75); --system-picker-background-color-default-open: var(--spectrum-gray-200); --system-picker-background-color-active: var(--spectrum-gray-300); diff --git a/tokens/components/spectrum/pickerbutton.css b/tokens/components/spectrum/pickerbutton.css index 7c471d9169c..a73a8191b9b 100644 --- a/tokens/components/spectrum/pickerbutton.css +++ b/tokens/components/spectrum/pickerbutton.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-picker-button-background-color: var(--spectrum-gray-75); --system-picker-button-background-color-hover: var(--spectrum-gray-200); --system-picker-button-background-color-down: var(--spectrum-gray-300); diff --git a/tokens/components/spectrum/popover.css b/tokens/components/spectrum/popover.css index 370140efa81..238706431e8 100644 --- a/tokens/components/spectrum/popover.css +++ b/tokens/components/spectrum/popover.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-popover-border-width: var(--spectrum-border-width-100); --system-popover-animation-distance: var(--spectrum-spacing-100); --system-popover-background-color: var(--spectrum-background-layer-2-color); diff --git a/tokens/components/spectrum/progressbar.css b/tokens/components/spectrum/progressbar.css index c3d001eb5e0..84017a308cd 100644 --- a/tokens/components/spectrum/progressbar.css +++ b/tokens/components/spectrum/progressbar.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-progress-bar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); --system-progress-bar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); @@ -48,7 +48,7 @@ --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); --system-progress-bar-size-s-thickness: var(--spectrum-progress-bar-thickness-small); - --system-meter-size-s-progressbar-thickness: var(--spectrum-progress-bar-thickness-small); + --system-meter-size-s-progressbar-thickness: var(--system-progress-bar-meter-thickness-s); --system-progress-bar-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --system-meter-size-s-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --system-progress-bar-size-m-size-default: var(--system-progress-bar-size-2400); @@ -60,9 +60,9 @@ --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); --system-progress-bar-size-l-thickness: var(--spectrum-progress-bar-thickness-large); - --system-meter-size-l-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); + --system-meter-size-l-progressbar-thickness: var(--system-progress-bar-meter-thickness-l); --system-progress-bar-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --system-progress-bar-size-xl-size-default: var(--system-progress-bar-size-2800); --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); --system-progress-bar-size-xl-thickness: var(--spectrum-progress-bar-thickness-extra-large); @@ -70,7 +70,4 @@ --system-meter-progressbar-size-default: var(--mod-meter-inline-size, var(--system-progress-bar-meter-inline-size)); --system-meter-progressbar-max-size: var(--mod-meter-max-width, var(--system-progress-bar-meter-max-width)); --system-meter-progressbar-min-size: var(--mod-meter-min-width, var(--system-progress-bar-meter-min-width)); - --system-meter-size-s-progressbar-thickness: var(--system-progress-bar-meter-thickness-s); - --system-meter-size-l-progressbar-thickness: var(--system-progress-bar-meter-thickness-l); - --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); } diff --git a/tokens/components/spectrum/progresscircle.css b/tokens/components/spectrum/progresscircle.css index 8f5ce2842f7..f27a2dcf642 100644 --- a/tokens/components/spectrum/progresscircle.css +++ b/tokens/components/spectrum/progresscircle.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-progress-circle-track-border-color: var(--spectrum-gray-200); --system-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); --system-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); diff --git a/tokens/components/spectrum/radio.css b/tokens/components/spectrum/radio.css index 81b155f4907..5a014b9a75f 100644 --- a/tokens/components/spectrum/radio.css +++ b/tokens/components/spectrum/radio.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-radio-button-border-color-default: var(--spectrum-gray-600); --system-radio-button-border-color-hover: var(--spectrum-gray-700); --system-radio-button-border-color-down: var(--spectrum-gray-800); diff --git a/tokens/components/spectrum/rating.css b/tokens/components/spectrum/rating.css index 1f4f12eebf1..b12c3c5966d 100644 --- a/tokens/components/spectrum/rating.css +++ b/tokens/components/spectrum/rating.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); --system-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); --system-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); diff --git a/tokens/components/spectrum/search.css b/tokens/components/spectrum/search.css index 13c90263d64..f5ceb971d81 100644 --- a/tokens/components/spectrum/search.css +++ b/tokens/components/spectrum/search.css @@ -11,14 +11,14 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { + --system-search-border-radius: var(--spectrum-corner-radius-100); + --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); --system-search-border-color-default: var(--spectrum-gray-500); --system-search-border-color-hover: var(--spectrum-gray-600); --system-search-border-color-focus: var(--spectrum-gray-800); --system-search-border-color-focus-hover: var(--spectrum-gray-900); --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); --system-search-inline-size: var(--spectrum-field-width); --system-search-block-size: var(--spectrum-component-height-100); --system-search-button-inline-size: var(--system-search-block-size); @@ -45,6 +45,27 @@ --system-search-color-disabled: var(--spectrum-disabled-content-color); --system-search-background-color-disabled: var(--spectrum-disabled-background-color); --system-search-border-color-disabled: var(--spectrum-disabled-background-color); + --system-search-textfield-font-family: var(--mod-search-font-family, var(--system-search-font-family)); + --system-search-textfield-font-weight: var(--mod-search-font-weight, var(--system-search-font-weight)); + --system-search-textfield-corner-radius: var(--mod-search-border-radius, var(--system-search-border-radius)); + --system-search-textfield-border-width: var(--mod-search-border-width, var(--system-search-border-width)); + --system-search-textfield-focus-indicator-gap: var(--mod-search-focus-indicator-gap, var(--system-search-focus-indicator-gap)); + --system-search-textfield-focus-indicator-width: var(--mod-search-focus-indicator-thickness, var(--system-search-focus-indicator-thickness)); + --system-search-textfield-focus-indicator-color: var(--mod-search-focus-indicator-color, var(--system-search-focus-indicator-color)); + --system-search-textfield-text-color-default: var(--mod-search-color-default, var(--system-search-color-default)); + --system-search-textfield-text-color-hover: var(--mod-search-color-hover, var(--system-search-color-hover)); + --system-search-textfield-text-color-focus: var(--mod-search-color-focus, var(--system-search-color-focus)); + --system-search-textfield-text-color-focus-hover: var(--mod-search-color-focus-hover, var(--system-search-color-focus-hover)); + --system-search-textfield-text-color-keyboard-focus: var(--mod-search-color-key-focus, var(--system-search-color-key-focus)); + --system-search-textfield-text-color-disabled: var(--mod-search-color-disabled, var(--system-search-color-disabled)); + --system-search-textfield-border-color: var(--mod-search-border-color-default, var(--system-search-border-color-default)); + --system-search-textfield-border-color-hover: var(--mod-search-border-color-hover, var(--system-search-border-color-hover)); + --system-search-textfield-border-color-focus: var(--mod-search-border-color-focus, var(--system-search-border-color-focus)); + --system-search-textfield-border-color-focus-hover: var(--mod-search-border-color-focus-hover, var(--system-search-border-color-focus-hover)); + --system-search-textfield-border-color-keyboard-focus: var(--mod-search-border-color-key-focus, var(--system-search-border-color-key-focus)); + --system-search-textfield-border-color-disabled: var(--mod-search-border-color-disabled, var(--system-search-border-color-disabled)); + --system-search-textfield-background-color: var(--mod-search-background-color, var(--system-search-background-color)); + --system-search-textfield-background-color-disabled: var(--mod-search-background-color-disabled, var(--system-search-background-color-disabled)); --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); --system-search-size-s-edge-to-visual: var(--spectrum-component-edge-to-visual-75); --system-search-size-s-block-size: var(--spectrum-component-height-75); diff --git a/tokens/components/spectrum/sidenav.css b/tokens/components/spectrum/sidenav.css index 61b3dce9b02..6a2abf43abc 100644 --- a/tokens/components/spectrum/sidenav.css +++ b/tokens/components/spectrum/sidenav.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-side-nav-focus-ring-size: var(--spectrum-focus-indicator-thickness); --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); diff --git a/tokens/components/spectrum/slider.css b/tokens/components/spectrum/slider.css index 0e2d975593b..355a2e2d3ca 100644 --- a/tokens/components/spectrum/slider.css +++ b/tokens/components/spectrum/slider.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-slider-track-color: var(--spectrum-gray-300); --system-slider-track-fill-color: var(--spectrum-gray-700); --system-slider-ramp-track-color: var(--spectrum-gray-400); diff --git a/tokens/components/spectrum/splitview.css b/tokens/components/spectrum/splitview.css index 7a355b1d8e1..5ec7de8b277 100644 --- a/tokens/components/spectrum/splitview.css +++ b/tokens/components/spectrum/splitview.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-split-view-vertical-width: 100%; --system-split-view-vertical-gripper-width: 50%; --system-split-view-vertical-gripper-outer-width: 100%; diff --git a/tokens/components/spectrum/statuslight.css b/tokens/components/spectrum/statuslight.css index 1bf893d1a3c..d5762bc7316 100644 --- a/tokens/components/spectrum/statuslight.css +++ b/tokens/components/spectrum/statuslight.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-status-light-corner-radius: 50%; --system-status-light-font-weight: 400; --system-status-light-border-width: var(--spectrum-border-width-100); diff --git a/tokens/components/spectrum/steplist.css b/tokens/components/spectrum/steplist.css index af5cbda4284..fdd1288a680 100644 --- a/tokens/components/spectrum/steplist.css +++ b/tokens/components/spectrum/steplist.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-steplist-step-width: 80px; --system-steplist-marker-diameter: 8px; --system-steplist-marker-hit-area: 20px; diff --git a/tokens/components/spectrum/stepper.css b/tokens/components/spectrum/stepper.css index fe2031f7bde..ed3ccdc2bd7 100644 --- a/tokens/components/spectrum/stepper.css +++ b/tokens/components/spectrum/stepper.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-stepper-border-width: var(--spectrum-border-width-100); --system-stepper-buttons-border-style: none; --system-stepper-buttons-border-width: 0; @@ -43,6 +43,9 @@ --system-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-stepper-button-offset: calc(var(--system-stepper-button-width) / 2); --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-buttons-border-color, var(--system-stepper-buttons-border-color))); + --system-stepper-infield-button-border-width: var(--mod-stepper-button-border-width, var(--system-stepper-button-border-width)); + --system-stepper-textfield-border-width: var(--mod-stepper-border-width, var(--system-stepper-border-width)); --system-stepper-size-s-button-width: var(--spectrum-in-field-button-width-stacked-small); --system-stepper-size-s-height: var(--spectrum-component-height-75); --system-stepper-size-l-button-width: var(--spectrum-in-field-button-width-stacked-large); diff --git a/tokens/components/spectrum/swatch.css b/tokens/components/spectrum/swatch.css index 43740ca97ce..6645ac2d5f6 100644 --- a/tokens/components/spectrum/swatch.css +++ b/tokens/components/spectrum/swatch.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-swatch-focus-indicator-border-radius: 8px; --system-swatch-icon-border-color: rgba(0, 0, 0, 0.51); --system-swatch-size: var(--spectrum-swatch-size-small); @@ -41,7 +41,4 @@ --system-swatch-size-l-size: var(--spectrum-swatch-size-large); --system-swatch-size-l-disabled-icon-size: var(--spectrum-workflow-icon-size-200); --system-swatch-size-l-slash-thickness: var(--spectrum-swatch-slash-thickness-large); - --system-light-swatch-border-color: rgba(0, 0, 0, 0.51); - --system-dark-swatch-border-color: rgba(255, 255, 255, 0.51); - --system-darkest-swatch-border-color: rgba(255, 255, 255, 0.51); } diff --git a/tokens/components/spectrum/swatchgroup.css b/tokens/components/spectrum/swatchgroup.css index fff89ed501d..9c4533db2cf 100644 --- a/tokens/components/spectrum/swatchgroup.css +++ b/tokens/components/spectrum/swatchgroup.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); diff --git a/tokens/components/spectrum/switch.css b/tokens/components/spectrum/switch.css index 2b76596bfc0..185e0670ab9 100644 --- a/tokens/components/spectrum/switch.css +++ b/tokens/components/spectrum/switch.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-switch-handle-border-color-default: var(--spectrum-gray-600); --system-switch-handle-border-color-hover: var(--spectrum-gray-700); --system-switch-handle-border-color-down: var(--spectrum-gray-800); diff --git a/tokens/components/spectrum/table.css b/tokens/components/spectrum/table.css index c16c6460068..cca8038d1c5 100644 --- a/tokens/components/spectrum/table.css +++ b/tokens/components/spectrum/table.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-table-header-top-to-text: var(--spectrum-table-column-header-row-top-to-text-medium); --system-table-header-bottom-to-text: var(--spectrum-table-column-header-row-bottom-to-text-medium); --system-table-min-header-height: var(--spectrum-component-height-100); diff --git a/tokens/components/spectrum/tabs.css b/tokens/components/spectrum/tabs.css index e8d883a8c83..148fbe336a1 100644 --- a/tokens/components/spectrum/tabs.css +++ b/tokens/components/spectrum/tabs.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-tabs-font-weight: var(--spectrum-default-font-weight); --system-tabs-item-height: var(--spectrum-tab-item-height-medium); --system-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); diff --git a/tokens/components/spectrum/tag.css b/tokens/components/spectrum/tag.css index 98c32c03bbc..f0de83ec814 100644 --- a/tokens/components/spectrum/tag.css +++ b/tokens/components/spectrum/tag.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-tag-border-color: var(--spectrum-gray-700); --system-tag-border-color-hover: var(--spectrum-gray-800); --system-tag-border-color-active: var(--spectrum-gray-900); @@ -50,7 +50,7 @@ --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); --system-tag-label-line-height: var(--spectrum-line-height-100); --system-tag-label-font-weight: var(--spectrum-regular-font-weight); - --system-tag-content-color-selected: var(--spectrum-gray-50); + --system-tag-content-color-selected: var(--spectrum-gray-25); --system-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); --system-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); --system-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); @@ -82,6 +82,18 @@ --system-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); --system-tag-content-color-emphasized: var(--spectrum-white); --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-tag-height: var(--spectrum-component-height-100); + --system-tag-font-size: var(--spectrum-font-size-100); + --system-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); --system-tag-size-s-height: var(--spectrum-component-height-75); --system-tag-size-s-font-size: var(--spectrum-font-size-75); --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); @@ -98,37 +110,21 @@ --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); - --system-tag-height: var(--spectrum-component-height-100); --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --system-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --system-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); - --system-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); - --system-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-l-height: var(--spectrum-component-height-200); --system-tag-size-l-font-size: var(--spectrum-font-size-200); diff --git a/tokens/components/spectrum/taggroup.css b/tokens/components/spectrum/taggroup.css index 2dfac0237a3..d369438384e 100644 --- a/tokens/components/spectrum/taggroup.css +++ b/tokens/components/spectrum/taggroup.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-tag-group-item-margin-block: var(--spectrum-spacing-75); --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); } diff --git a/tokens/components/spectrum/textfield.css b/tokens/components/spectrum/textfield.css index ed69c386c3e..3295c4975b6 100644 --- a/tokens/components/spectrum/textfield.css +++ b/tokens/components/spectrum/textfield.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-textfield-border-color: var(--spectrum-gray-500); --system-textfield-border-color-hover: var(--spectrum-gray-600); --system-textfield-border-color-focus: var(--spectrum-gray-800); @@ -38,7 +38,7 @@ --system-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); --system-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-textfield-background-color: var(--spectrum-gray-50); + --system-textfield-background-color: var(--spectrum-gray-25); --system-textfield-text-color-default: var(--spectrum-neutral-content-color-default); --system-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); --system-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus); diff --git a/tokens/components/spectrum/thumbnail.css b/tokens/components/spectrum/thumbnail.css index e1a8d647ec3..e38539e0bb6 100644 --- a/tokens/components/spectrum/thumbnail.css +++ b/tokens/components/spectrum/thumbnail.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-thumbnail-size: var(--spectrum-thumbnail-size-500); --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); --system-thumbnail-border-width: var(--spectrum-border-width-100); diff --git a/tokens/components/spectrum/toast.css b/tokens/components/spectrum/toast.css index 28dbd4ccf1d..4740c601186 100644 --- a/tokens/components/spectrum/toast.css +++ b/tokens/components/spectrum/toast.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); --system-toast-font-weight: var(--spectrum-regular-font-weight); --system-toast-font-size: var(--spectrum-font-size-100); diff --git a/tokens/components/spectrum/tooltip.css b/tokens/components/spectrum/tooltip.css index 23c2cc3f1af..2dbe0b23c49 100644 --- a/tokens/components/spectrum/tooltip.css +++ b/tokens/components/spectrum/tooltip.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); --system-tooltip-margin: 0px; diff --git a/tokens/components/spectrum/tray.css b/tokens/components/spectrum/tray.css index adfb957ae59..db169e32a1c 100644 --- a/tokens/components/spectrum/tray.css +++ b/tokens/components/spectrum/tray.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-tray-exit-animation-delay: 0ms; --system-tray-entry-animation-delay: 160ms; --system-tray-max-inline-size: 375px; diff --git a/tokens/components/spectrum/treeview.css b/tokens/components/spectrum/treeview.css index 37db29cb6c1..db4fb515549 100644 --- a/tokens/components/spectrum/treeview.css +++ b/tokens/components/spectrum/treeview.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-tree-view-line-height: var(--spectrum-line-height-200); --system-tree-view-margin-block: 1em; --system-tree-view-font-size: var(--spectrum-font-size-100); diff --git a/tokens/components/spectrum/typography.css b/tokens/components/spectrum/typography.css index 432bbdaeb16..190f9ada326 100644 --- a/tokens/components/spectrum/typography.css +++ b/tokens/components/spectrum/typography.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --system-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --system-font-family: var(--spectrum-sans-font-family-stack); diff --git a/tokens/components/spectrum/underlay.css b/tokens/components/spectrum/underlay.css index 766c58097fc..13445d74064 100644 --- a/tokens/components/spectrum/underlay.css +++ b/tokens/components/spectrum/underlay.css @@ -11,13 +11,12 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0); --system-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in); --system-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out); - --system-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100); - --system-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); --system-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300); + --system-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); --system-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200); --system-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); } diff --git a/tokens/components/spectrum/well.css b/tokens/components/spectrum/well.css index 3f754c04003..273dc15527b 100644 --- a/tokens/components/spectrum/well.css +++ b/tokens/components/spectrum/well.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ -.spectrum--legacy { +.spectrum.spectrum--legacy { --system-well-border-width: var(--spectrum-border-width-100); --system-well-content-color: var(--spectrum-body-color); } diff --git a/tokens/dist/css/components/bridge/actionbutton.css b/tokens/dist/css/components/bridge/actionbutton.css deleted file mode 100644 index 5d1fcfd064e..00000000000 --- a/tokens/dist/css/components/bridge/actionbutton.css +++ /dev/null @@ -1,226 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--system-action-button-background-color-default); - --spectrum-actionbutton-background-color-hover: var(--system-action-button-background-color-hover); - --spectrum-actionbutton-background-color-down: var(--system-action-button-background-color-down); - --spectrum-actionbutton-background-color-focus: var(--system-action-button-background-color-focus); - --spectrum-actionbutton-border-color-default: var(--system-action-button-border-color-default); - --spectrum-actionbutton-border-color-hover: var(--system-action-button-border-color-hover); - --spectrum-actionbutton-border-color-down: var(--system-action-button-border-color-down); - --spectrum-actionbutton-border-color-focus: var(--system-action-button-border-color-focus); - --spectrum-actionbutton-background-color-disabled: var(--system-action-button-background-color-disabled); - --spectrum-actionbutton-border-color-disabled: var(--system-action-button-border-color-disabled); - --spectrum-actionbutton-content-color-disabled: var(--system-action-button-content-color-disabled); - --spectrum-actionbutton-animation-duration: var(--system-action-button-animation-duration); - --spectrum-actionbutton-border-radius: var(--system-action-button-border-radius); - --spectrum-actionbutton-border-width: var(--system-action-button-border-width); - --spectrum-actionbutton-min-width: var(--system-action-button-min-width); - --spectrum-actionbutton-height: var(--system-action-button-height); - --spectrum-actionbutton-icon-size: var(--system-action-button-icon-size); - --spectrum-actionbutton-font-size: var(--system-action-button-font-size); - --spectrum-actionbutton-text-to-visual: var(--system-action-button-text-to-visual); - --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-edge-to-hold-icon); - --spectrum-actionbutton-edge-to-visual: var(--system-action-button-edge-to-visual); - --spectrum-actionbutton-edge-to-text: var(--system-action-button-edge-to-text); - --spectrum-actionbutton-edge-to-visual-only: var(--system-action-button-edge-to-visual-only); - --spectrum-actionbutton-content-color-default: var(--system-action-button-content-color-default); - --spectrum-actionbutton-content-color-hover: var(--system-action-button-content-color-hover); - --spectrum-actionbutton-content-color-down: var(--system-action-button-content-color-down); - --spectrum-actionbutton-content-color-focus: var(--system-action-button-content-color-focus); - --spectrum-actionbutton-focus-indicator-gap: var(--system-action-button-focus-indicator-gap); - --spectrum-actionbutton-focus-indicator-thickness: var(--system-action-button-focus-indicator-thickness); - --spectrum-actionbutton-focus-indicator-color: var(--system-action-button-focus-indicator-color); -} - -.spectrum-ActionButton.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: var(--system-action-button-quiet-background-color-default); - --spectrum-actionbutton-background-color-hover: var(--system-action-button-quiet-background-color-hover); - --spectrum-actionbutton-background-color-down: var(--system-action-button-quiet-background-color-down); - --spectrum-actionbutton-background-color-focus: var(--system-action-button-quiet-background-color-focus); - --spectrum-actionbutton-border-color-default: var(--system-action-button-quiet-border-color-default); - --spectrum-actionbutton-border-color-hover: var(--system-action-button-quiet-border-color-hover); - --spectrum-actionbutton-border-color-down: var(--system-action-button-quiet-border-color-down); - --spectrum-actionbutton-border-color-focus: var(--system-action-button-quiet-border-color-focus); - --spectrum-actionbutton-background-color-disabled: var(--system-action-button-quiet-background-color-disabled); - --spectrum-actionbutton-border-color-disabled: var(--system-action-button-quiet-border-color-disabled); -} - -.spectrum-ActionButton.is-selected { - --mod-actionbutton-background-color-default: var(--system-action-button-selected-background-color-default); - --mod-actionbutton-background-color-hover: var(--system-action-button-selected-background-color-hover); - --mod-actionbutton-background-color-down: var(--system-action-button-selected-background-color-down); - --mod-actionbutton-background-color-focus: var(--system-action-button-selected-background-color-focus); - --mod-actionbutton-content-color-default: var(--system-action-button-selected-content-color-default); - --mod-actionbutton-content-color-hover: var(--system-action-button-selected-content-color-hover); - --mod-actionbutton-content-color-down: var(--system-action-button-selected-content-color-down); - --mod-actionbutton-content-color-focus: var(--system-action-button-selected-content-color-focus); - --spectrum-actionbutton-border-color-default: var(--system-action-button-selected-border-color-default); - --spectrum-actionbutton-border-color-hover: var(--system-action-button-selected-border-color-hover); - --spectrum-actionbutton-border-color-down: var(--system-action-button-selected-border-color-down); - --spectrum-actionbutton-border-color-focus: var(--system-action-button-selected-border-color-focus); - --spectrum-actionbutton-background-color-disabled: var(--system-action-button-selected-background-color-disabled); - --spectrum-actionbutton-border-color-disabled: var(--system-action-button-selected-border-color-disabled); -} - -.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized { - --mod-actionbutton-background-color-default: var(--system-action-button-selected-emphasized-background-color-default); - --mod-actionbutton-background-color-hover: var(--system-action-button-selected-emphasized-background-color-hover); - --mod-actionbutton-background-color-down: var(--system-action-button-selected-emphasized-background-color-down); - --mod-actionbutton-background-color-focus: var(--system-action-button-selected-emphasized-background-color-focus); - --mod-actionbutton-content-color-default: var(--system-action-button-selected-emphasized-content-color-default); - --mod-actionbutton-content-color-hover: var(--system-action-button-selected-emphasized-content-color-hover); - --mod-actionbutton-content-color-down: var(--system-action-button-selected-emphasized-content-color-down); - --mod-actionbutton-content-color-focus: var(--system-action-button-selected-emphasized-content-color-focus); -} - -.spectrum-ActionButton.spectrum-ActionButton--sizeXS { - --spectrum-actionbutton-min-width: var(--system-action-button-size-xs-min-width); - --spectrum-actionbutton-height: var(--system-action-button-size-xs-height); - --spectrum-actionbutton-icon-size: var(--system-action-button-size-xs-icon-size); - --spectrum-actionbutton-font-size: var(--system-action-button-size-xs-font-size); - --spectrum-actionbutton-text-to-visual: var(--system-action-button-size-xs-text-to-visual); - --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-size-xs-edge-to-hold-icon); - --spectrum-actionbutton-edge-to-visual: var(--system-action-button-size-xs-edge-to-visual); - --spectrum-actionbutton-edge-to-text: var(--system-action-button-size-xs-edge-to-text); - --spectrum-actionbutton-edge-to-visual-only: var(--system-action-button-size-xs-edge-to-visual-only); -} - -.spectrum-ActionButton.spectrum-ActionButton--sizeS { - --spectrum-actionbutton-min-width: var(--system-action-button-size-s-min-width); - --spectrum-actionbutton-height: var(--system-action-button-size-s-height); - --spectrum-actionbutton-icon-size: var(--system-action-button-size-s-icon-size); - --spectrum-actionbutton-font-size: var(--system-action-button-size-s-font-size); - --spectrum-actionbutton-text-to-visual: var(--system-action-button-size-s-text-to-visual); - --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-size-s-edge-to-hold-icon); - --spectrum-actionbutton-edge-to-visual: var(--system-action-button-size-s-edge-to-visual); - --spectrum-actionbutton-edge-to-text: var(--system-action-button-size-s-edge-to-text); - --spectrum-actionbutton-edge-to-visual-only: var(--system-action-button-size-s-edge-to-visual-only); -} - -.spectrum-ActionButton.spectrum-ActionButton--sizeM { - --spectrum-actionbutton-min-width: var(--system-action-button-size-m-min-width); - --spectrum-actionbutton-height: var(--system-action-button-size-m-height); - --spectrum-actionbutton-icon-size: var(--system-action-button-size-m-icon-size); - --spectrum-actionbutton-font-size: var(--system-action-button-size-m-font-size); - --spectrum-actionbutton-text-to-visual: var(--system-action-button-size-m-text-to-visual); - --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-size-m-edge-to-hold-icon); - --spectrum-actionbutton-edge-to-visual: var(--system-action-button-size-m-edge-to-visual); - --spectrum-actionbutton-edge-to-text: var(--system-action-button-size-m-edge-to-text); - --spectrum-actionbutton-edge-to-visual-only: var(--system-action-button-size-m-edge-to-visual-only); -} - -.spectrum-ActionButton.spectrum-ActionButton--sizeL { - --spectrum-actionbutton-min-width: var(--system-action-button-size-l-min-width); - --spectrum-actionbutton-height: var(--system-action-button-size-l-height); - --spectrum-actionbutton-icon-size: var(--system-action-button-size-l-icon-size); - --spectrum-actionbutton-font-size: var(--system-action-button-size-l-font-size); - --spectrum-actionbutton-text-to-visual: var(--system-action-button-size-l-text-to-visual); - --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-size-l-edge-to-hold-icon); - --spectrum-actionbutton-edge-to-visual: var(--system-action-button-size-l-edge-to-visual); - --spectrum-actionbutton-edge-to-text: var(--system-action-button-size-l-edge-to-text); - --spectrum-actionbutton-edge-to-visual-only: var(--system-action-button-size-l-edge-to-visual-only); -} - -.spectrum-ActionButton.spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-min-width: var(--system-action-button-size-xl-min-width); - --spectrum-actionbutton-height: var(--system-action-button-size-xl-height); - --spectrum-actionbutton-icon-size: var(--system-action-button-size-xl-icon-size); - --spectrum-actionbutton-font-size: var(--system-action-button-size-xl-font-size); - --spectrum-actionbutton-text-to-visual: var(--system-action-button-size-xl-text-to-visual); - --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-size-xl-edge-to-hold-icon); - --spectrum-actionbutton-edge-to-visual: var(--system-action-button-size-xl-edge-to-visual); - --spectrum-actionbutton-edge-to-text: var(--system-action-button-size-xl-edge-to-text); - --spectrum-actionbutton-edge-to-visual-only: var(--system-action-button-size-xl-edge-to-visual-only); -} - -.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet { - --spectrum-actionbutton-border-color-default: var(--system-action-button-static-black-quiet-border-color-default); - --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-black-quiet-border-color-hover); - --spectrum-actionbutton-border-color-down: var(--system-action-button-static-black-quiet-border-color-down); - --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-black-quiet-border-color-focus); - --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-black-quiet-border-color-disabled); -} - -.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet { - --spectrum-actionbutton-border-color-default: var(--system-action-button-static-white-quiet-border-color-default); - --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-white-quiet-border-color-hover); - --spectrum-actionbutton-border-color-down: var(--system-action-button-static-white-quiet-border-color-down); - --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-white-quiet-border-color-focus); - --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-white-quiet-border-color-disabled); -} - -.spectrum-ActionButton.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-background-color-default: var(--system-action-button-static-black-background-color-default); - --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-black-background-color-hover); - --spectrum-actionbutton-background-color-down: var(--system-action-button-static-black-background-color-down); - --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-black-background-color-focus); - --spectrum-actionbutton-border-color-default: var(--system-action-button-static-black-border-color-default); - --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-black-border-color-hover); - --spectrum-actionbutton-border-color-down: var(--system-action-button-static-black-border-color-down); - --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-black-border-color-focus); - --spectrum-actionbutton-content-color-default: var(--system-action-button-static-black-content-color-default); - --spectrum-actionbutton-content-color-hover: var(--system-action-button-static-black-content-color-hover); - --spectrum-actionbutton-content-color-down: var(--system-action-button-static-black-content-color-down); - --spectrum-actionbutton-content-color-focus: var(--system-action-button-static-black-content-color-focus); - --spectrum-actionbutton-focus-indicator-color: var(--system-action-button-static-black-focus-indicator-color); - --spectrum-actionbutton-background-color-disabled: var(--system-action-button-static-black-background-color-disabled); - --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-black-border-color-disabled); - --spectrum-actionbutton-content-color-disabled: var(--system-action-button-static-black-content-color-disabled); -} - -.spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected { - --mod-actionbutton-background-color-default: var(--system-action-button-static-black-selected-background-color-default); - --mod-actionbutton-background-color-hover: var(--system-action-button-static-black-selected-background-color-hover); - --mod-actionbutton-background-color-down: var(--system-action-button-static-black-selected-background-color-down); - --mod-actionbutton-background-color-focus: var(--system-action-button-static-black-selected-background-color-focus); - --mod-actionbutton-content-color-defaul-selectedt: var(--system-action-button-static-black-selected-content-color-defaul-selectedt); - --mod-actionbutton-content-color-hover: var(--system-action-button-static-black-selected-content-color-hover); - --mod-actionbutton-content-color-down: var(--system-action-button-static-black-selected-content-color-down); - --mod-actionbutton-content-color-focus: var(--system-action-button-static-black-selected-content-color-focus); - --mod-actionbutton-background-color-disabled: var(--system-action-button-static-black-selected-background-color-disabled); - --mod-actionbutton-border-color-disabled: var(--system-action-button-static-black-selected-border-color-disabled); -} - -.spectrum-ActionButton.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-background-color-default: var(--system-action-button-static-white-background-color-default); - --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-white-background-color-hover); - --spectrum-actionbutton-background-color-down: var(--system-action-button-static-white-background-color-down); - --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-white-background-color-focus); - --spectrum-actionbutton-border-color-default: var(--system-action-button-static-white-border-color-default); - --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-white-border-color-hover); - --spectrum-actionbutton-border-color-down: var(--system-action-button-static-white-border-color-down); - --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-white-border-color-focus); - --spectrum-actionbutton-content-color-default: var(--system-action-button-static-white-content-color-default); - --spectrum-actionbutton-content-color-hover: var(--system-action-button-static-white-content-color-hover); - --spectrum-actionbutton-content-color-down: var(--system-action-button-static-white-content-color-down); - --spectrum-actionbutton-content-color-focus: var(--system-action-button-static-white-content-color-focus); - --spectrum-actionbutton-focus-indicator-color: var(--system-action-button-static-white-focus-indicator-color); - --spectrum-actionbutton-background-color-disabled: var(--system-action-button-static-white-background-color-disabled); - --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-white-border-color-disabled); - --spectrum-actionbutton-content-color-disabled: var(--system-action-button-static-white-content-color-disabled); -} - -.spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected { - --mod-actionbutton-background-color-default: var(--system-action-button-static-white-selected-background-color-default); - --mod-actionbutton-background-color-hover: var(--system-action-button-static-white-selected-background-color-hover); - --mod-actionbutton-background-color-down: var(--system-action-button-static-white-selected-background-color-down); - --mod-actionbutton-background-color-focus: var(--system-action-button-static-white-selected-background-color-focus); - --mod-actionbutton-content-color-default: var(--system-action-button-static-white-selected-content-color-default); - --mod-actionbutton-content-color-hover: var(--system-action-button-static-white-selected-content-color-hover); - --mod-actionbutton-content-color-down: var(--system-action-button-static-white-selected-content-color-down); - --mod-actionbutton-content-color-focus: var(--system-action-button-static-white-selected-content-color-focus); - --mod-actionbutton-background-color-disabled: var(--system-action-button-static-white-selected-background-color-disabled); - --mod-actionbutton-border-color-disabled: var(--system-action-button-static-white-selected-border-color-disabled); -} diff --git a/tokens/dist/css/components/bridge/actiongroup.css b/tokens/dist/css/components/bridge/actiongroup.css deleted file mode 100644 index 195bc97ba1f..00000000000 --- a/tokens/dist/css/components/bridge/actiongroup.css +++ /dev/null @@ -1,48 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: var(--system-action-group-gap-size-compact); - --spectrum-actiongroup-horizontal-spacing-compact: var(--system-action-group-horizontal-spacing-compact); - --spectrum-actiongroup-vertical-spacing-compact: var(--system-action-group-vertical-spacing-compact); - --spectrum-actiongroup-button-spacing-reset: var(--system-action-group-button-spacing-reset); - --spectrum-actiongroup-border-radius-reset: var(--system-action-group-border-radius-reset); - --spectrum-actiongroup-border-radius: var(--system-action-group-border-radius); - --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-horizontal-spacing-regular); - --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-vertical-spacing-regular); -} - -.spectrum-ActionGroup.spectrum-ActionGroup--sizeXS { - --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-size-xs-horizontal-spacing-regular); - --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-size-xs-vertical-spacing-regular); -} - -.spectrum-ActionGroup.spectrum-ActionGroup--sizeS { - --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-size-s-horizontal-spacing-regular); - --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-size-s-vertical-spacing-regular); -} - -.spectrum-ActionGroup.spectrum-ActionGroup--sizeM { - --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-size-m-horizontal-spacing-regular); - --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-size-m-vertical-spacing-regular); -} - -.spectrum-ActionGroup.spectrum-ActionGroup--sizeL { - --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-size-l-horizontal-spacing-regular); - --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-size-l-vertical-spacing-regular); -} - -.spectrum-ActionGroup.spectrum-ActionGroup--sizeXL { - --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-size-xl-horizontal-spacing-regular); - --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-size-xl-vertical-spacing-regular); -} diff --git a/tokens/dist/css/components/bridge/alertbanner.css b/tokens/dist/css/components/bridge/alertbanner.css deleted file mode 100644 index 11119abb76b..00000000000 --- a/tokens/dist/css/components/bridge/alertbanner.css +++ /dev/null @@ -1,31 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-AlertBanner { - --spectrum-alert-banner-netural-background: var(--system-alert-banner-netural-background); - --spectrum-alert-banner-min-height: var(--system-alert-banner-min-height); - --spectrum-alert-banner-max-inline-size: var(--system-alert-banner-max-inline-size); - --spectrum-alert-banner-size: var(--system-alert-banner-size); - --spectrum-alert-banner-font-size: var(--system-alert-banner-font-size); - --spectrum-alert-banner-icon-size: var(--system-alert-banner-icon-size); - --spectrum-alert-banner-icon-to-text: var(--system-alert-banner-icon-to-text); - --spectrum-alert-banner-start-edge: var(--system-alert-banner-start-edge); - --spectrum-alert-banner-text-to-button-horizontal: var(--system-alert-banner-text-to-button-horizontal); - --spectrum-alert-banner-text-to-divider: var(--system-alert-banner-text-to-divider); - --spectrum-alert-banner-top-icon: var(--system-alert-banner-top-icon); - --spectrum-alert-banner-top-text: var(--system-alert-banner-top-text); - --spectrum-alert-banner-bottom-text: var(--system-alert-banner-bottom-text); - --spectrum-alert-banner-informative-background: var(--system-alert-banner-informative-background); - --spectrum-alert-banner-negative-background: var(--system-alert-banner-negative-background); - --spectrum-alert-banner-font-color: var(--system-alert-banner-font-color); -} diff --git a/tokens/dist/css/components/bridge/assetcard.css b/tokens/dist/css/components/bridge/assetcard.css deleted file mode 100644 index af5ef4fa9ec..00000000000 --- a/tokens/dist/css/components/bridge/assetcard.css +++ /dev/null @@ -1,111 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: var(--system-asset-card-overlay-background-color); - --spectrum-assetcard-asset-size: var(--system-asset-card-asset-size); - --spectrum-assetcard-background-color: var(--system-asset-card-background-color); - --spectrum-assetcard-asset-animation-duration: var(--system-asset-card-asset-animation-duration); - --spectrum-assetcard-asset-container-border-size: var(--system-asset-card-asset-container-border-size); - --spectrum-assetcard-header-margin-block-start: var(--system-asset-card-header-margin-block-start); - --spectrum-assetcard-border-radius: var(--system-asset-card-border-radius); - --spectrum-assetcard-border-color: var(--system-asset-card-border-color); - --spectrum-assetcard-border-color-hover: var(--system-asset-card-border-color-hover); - --spectrum-assetcard-border-color-down: var(--system-asset-card-border-color-down); - --spectrum-assetcard-focus-ring-gap: var(--system-asset-card-focus-ring-gap); - --spectrum-assetcard-focus-indicator-thickness: var(--system-asset-card-focus-indicator-thickness); - --spectrum-assetcard-selectionindicator-background-color-default: var(--system-asset-card-selectionindicator-background-color-default); - --spectrum-assetcard-selectionindicator-size: var(--system-asset-card-selectionindicator-size); - --spectrum-assetcard-selectionindicator-border-radius: var(--system-asset-card-selectionindicator-border-radius); - --spectrum-assetcard-selectionindicator-offset-y: var(--system-asset-card-selectionindicator-offset-y); - --spectrum-assetcard-selectionindicator-blur: var(--system-asset-card-selectionindicator-blur); - --spectrum-assetcard-selectionindicator-color: var(--system-asset-card-selectionindicator-color); - --spectrum-assetcard-selectionindicator-font-weight: var(--system-asset-card-selectionindicator-font-weight); - --spectrum-assetcard-selectionindicator-font-size: var(--system-asset-card-selectionindicator-font-size); - --spectrum-assetcard-title-text-color: var(--system-asset-card-title-text-color); - --spectrum-assetcard-title-font-family: var(--system-asset-card-title-font-family); - --spectrum-assetcard-title-font-weight: var(--system-asset-card-title-font-weight); - --spectrum-assetcard-title-font-style: var(--system-asset-card-title-font-style); - --spectrum-assetcard-title-line-height: var(--system-asset-card-title-line-height); - --spectrum-assetcard-title-letter-spacing: var(--system-asset-card-title-letter-spacing); - --spectrum-assetcard-header-content-text-color: var(--system-asset-card-header-content-text-color); - --spectrum-assetcard-header-content-font-family: var(--system-asset-card-header-content-font-family); - --spectrum-assetcard-header-content-font-weight: var(--system-asset-card-header-content-font-weight); - --spectrum-assetcard-header-content-font-style: var(--system-asset-card-header-content-font-style); - --spectrum-assetcard-header-content-line-height: var(--system-asset-card-header-content-line-height); - --spectrum-assetcard-header-content-letter-spacing: var(--system-asset-card-header-content-letter-spacing); - --spectrum-assetcard-content-text-color: var(--system-asset-card-content-text-color); - --spectrum-assetcard-content-font-family: var(--system-asset-card-content-font-family); - --spectrum-assetcard-content-font-weight: var(--system-asset-card-content-font-weight); - --spectrum-assetcard-content-font-style: var(--system-asset-card-content-font-style); - --spectrum-assetcard-content-line-height: var(--system-asset-card-content-line-height); - --spectrum-assetcard-content-letter-spacing: var(--system-asset-card-content-letter-spacing); - --spectrum-assetcard-content-margin-block-start: var(--system-asset-card-content-margin-block-start); -} - -.spectrum-AssetCard:lang(zh) { - --spectrum-assetcard-title-font-family: var(--system-asset-card-lang-zh-title-font-family); - --spectrum-assetcard-title-font-style: var(--system-asset-card-lang-zh-title-font-style); - --spectrum-assetcard-title-font-weight: var(--system-asset-card-lang-zh-title-font-weight); - --spectrum-assetcard-title-font-size: var(--system-asset-card-lang-zh-title-font-size); - --spectrum-assetcard-title-line-height: var(--system-asset-card-lang-zh-title-line-height); - --spectrum-assetcard-title-letter-spacing: var(--system-asset-card-lang-zh-title-letter-spacing); - --spectrum-assetcard-header-content-font-family: var(--system-asset-card-lang-zh-header-content-font-family); - --spectrum-assetcard-header-content-font-weight: var(--system-asset-card-lang-zh-header-content-font-weight); - --spectrum-assetcard-header-content-line-height: var(--system-asset-card-lang-zh-header-content-line-height); - --spectrum-assetcard-header-content-font-style: var(--system-asset-card-lang-zh-header-content-font-style); - --spectrum-assetcard-header-content-letter-spacing: var(--system-asset-card-lang-zh-header-content-letter-spacing); - --spectrum-assetcard-content-font-family: var(--system-asset-card-lang-zh-content-font-family); - --spectrum-assetcard-content-font-weight: var(--system-asset-card-lang-zh-content-font-weight); - --spectrum-assetcard-content-line-height: var(--system-asset-card-lang-zh-content-line-height); - --spectrum-assetcard-content-font-style: var(--system-asset-card-lang-zh-content-font-style); - --spectrum-assetcard-content-letter-spacing: var(--system-asset-card-lang-zh-content-letter-spacing); -} - -.spectrum-AssetCard:lang(ja) { - --spectrum-assetcard-title-font-family: var(--system-asset-card-lang-ja-title-font-family); - --spectrum-assetcard-title-font-style: var(--system-asset-card-lang-ja-title-font-style); - --spectrum-assetcard-title-font-weight: var(--system-asset-card-lang-ja-title-font-weight); - --spectrum-assetcard-title-font-size: var(--system-asset-card-lang-ja-title-font-size); - --spectrum-assetcard-title-line-height: var(--system-asset-card-lang-ja-title-line-height); - --spectrum-assetcard-title-letter-spacing: var(--system-asset-card-lang-ja-title-letter-spacing); - --spectrum-assetcard-header-content-font-family: var(--system-asset-card-lang-ja-header-content-font-family); - --spectrum-assetcard-header-content-font-weight: var(--system-asset-card-lang-ja-header-content-font-weight); - --spectrum-assetcard-header-content-line-height: var(--system-asset-card-lang-ja-header-content-line-height); - --spectrum-assetcard-header-content-font-style: var(--system-asset-card-lang-ja-header-content-font-style); - --spectrum-assetcard-header-content-letter-spacing: var(--system-asset-card-lang-ja-header-content-letter-spacing); - --spectrum-assetcard-content-font-family: var(--system-asset-card-lang-ja-content-font-family); - --spectrum-assetcard-content-font-weight: var(--system-asset-card-lang-ja-content-font-weight); - --spectrum-assetcard-content-line-height: var(--system-asset-card-lang-ja-content-line-height); - --spectrum-assetcard-content-font-style: var(--system-asset-card-lang-ja-content-font-style); - --spectrum-assetcard-content-letter-spacing: var(--system-asset-card-lang-ja-content-letter-spacing); -} - -.spectrum-AssetCard:lang(ko) { - --spectrum-assetcard-title-font-family: var(--system-asset-card-lang-ko-title-font-family); - --spectrum-assetcard-title-font-style: var(--system-asset-card-lang-ko-title-font-style); - --spectrum-assetcard-title-font-weight: var(--system-asset-card-lang-ko-title-font-weight); - --spectrum-assetcard-title-font-size: var(--system-asset-card-lang-ko-title-font-size); - --spectrum-assetcard-title-line-height: var(--system-asset-card-lang-ko-title-line-height); - --spectrum-assetcard-title-letter-spacing: var(--system-asset-card-lang-ko-title-letter-spacing); - --spectrum-assetcard-header-content-font-family: var(--system-asset-card-lang-ko-header-content-font-family); - --spectrum-assetcard-header-content-font-weight: var(--system-asset-card-lang-ko-header-content-font-weight); - --spectrum-assetcard-header-content-line-height: var(--system-asset-card-lang-ko-header-content-line-height); - --spectrum-assetcard-header-content-font-style: var(--system-asset-card-lang-ko-header-content-font-style); - --spectrum-assetcard-header-content-letter-spacing: var(--system-asset-card-lang-ko-header-content-letter-spacing); - --spectrum-assetcard-content-font-family: var(--system-asset-card-lang-ko-content-font-family); - --spectrum-assetcard-content-font-weight: var(--system-asset-card-lang-ko-content-font-weight); - --spectrum-assetcard-content-line-height: var(--system-asset-card-lang-ko-content-line-height); - --spectrum-assetcard-content-font-style: var(--system-asset-card-lang-ko-content-font-style); - --spectrum-assetcard-content-letter-spacing: var(--system-asset-card-lang-ko-content-letter-spacing); -} diff --git a/tokens/dist/css/components/bridge/button.css b/tokens/dist/css/components/bridge/button.css deleted file mode 100644 index 9b422b84525..00000000000 --- a/tokens/dist/css/components/bridge/button.css +++ /dev/null @@ -1,521 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Button { - --spectrum-button-background-color-default: var(--system-button-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-content-color-focus); - --spectrum-button-background-color-disabled: var(--system-button-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-content-color-disabled); - --spectrum-button-animation-duration: var(--system-button-animation-duration); - --spectrum-button-border-radius: var(--system-button-border-radius); - --spectrum-button-border-width: var(--system-button-border-width); - --spectrum-button-line-height: var(--system-button-line-height); - --spectrum-button-focus-ring-gap: var(--system-button-focus-ring-gap); - --spectrum-button-focus-ring-border-radius: var(--system-button-focus-ring-border-radius); - --spectrum-button-focus-ring-thickness: var(--system-button-focus-ring-thickness); - --spectrum-button-focus-indicator-color: var(--system-button-focus-indicator-color); - --spectrum-button-intended-icon-size: var(--system-button-intended-icon-size); -} - -.spectrum-Button.spectrum-Button--sizeS { - --spectrum-button-min-width: var(--system-button-size-s-min-width); - --spectrum-button-border-radius: var(--system-button-size-s-border-radius); - --spectrum-button-height: var(--system-button-size-s-height); - --spectrum-button-font-size: var(--system-button-size-s-font-size); - --spectrum-button-edge-to-visual: var(--system-button-size-s-edge-to-visual); - --spectrum-button-edge-to-visual-only: var(--system-button-size-s-edge-to-visual-only); - --spectrum-button-edge-to-text: var(--system-button-size-s-edge-to-text); - --spectrum-button-padding-label-to-icon: var(--system-button-size-s-padding-label-to-icon); - --spectrum-button-top-to-text: var(--system-button-size-s-top-to-text); - --spectrum-button-bottom-to-text: var(--system-button-size-s-bottom-to-text); - --spectrum-button-top-to-icon: var(--system-button-size-s-top-to-icon); - --spectrum-button-intended-icon-size: var(--system-button-size-s-intended-icon-size); -} - -.spectrum-Button.spectrum-Button--sizeM { - --spectrum-button-min-width: var(--system-button-size-m-min-width); - --spectrum-button-border-radius: var(--system-button-size-m-border-radius); - --spectrum-button-height: var(--system-button-size-m-height); - --spectrum-button-font-size: var(--system-button-size-m-font-size); - --spectrum-button-edge-to-visual: var(--system-button-size-m-edge-to-visual); - --spectrum-button-edge-to-visual-only: var(--system-button-size-m-edge-to-visual-only); - --spectrum-button-edge-to-text: var(--system-button-size-m-edge-to-text); - --spectrum-button-padding-label-to-icon: var(--system-button-size-m-padding-label-to-icon); - --spectrum-button-top-to-text: var(--system-button-size-m-top-to-text); - --spectrum-button-bottom-to-text: var(--system-button-size-m-bottom-to-text); - --spectrum-button-top-to-icon: var(--system-button-size-m-top-to-icon); - --spectrum-button-intended-icon-size: var(--system-button-size-m-intended-icon-size); -} - -.spectrum-Button.spectrum-Button--sizeL { - --spectrum-button-min-width: var(--system-button-size-l-min-width); - --spectrum-button-border-radius: var(--system-button-size-l-border-radius); - --spectrum-button-height: var(--system-button-size-l-height); - --spectrum-button-font-size: var(--system-button-size-l-font-size); - --spectrum-button-edge-to-visual: var(--system-button-size-l-edge-to-visual); - --spectrum-button-edge-to-visual-only: var(--system-button-size-l-edge-to-visual-only); - --spectrum-button-edge-to-text: var(--system-button-size-l-edge-to-text); - --spectrum-button-padding-label-to-icon: var(--system-button-size-l-padding-label-to-icon); - --spectrum-button-top-to-text: var(--system-button-size-l-top-to-text); - --spectrum-button-bottom-to-text: var(--system-button-size-l-bottom-to-text); - --spectrum-button-top-to-icon: var(--system-button-size-l-top-to-icon); - --spectrum-button-intended-icon-size: var(--system-button-size-l-intended-icon-size); -} - -.spectrum-Button.spectrum-Button--sizeXL { - --spectrum-button-min-width: var(--system-button-size-xl-min-width); - --spectrum-button-border-radius: var(--system-button-size-xl-border-radius); - --spectrum-button-height: var(--system-button-size-xl-height); - --spectrum-button-font-size: var(--system-button-size-xl-font-size); - --spectrum-button-edge-to-visual: var(--system-button-size-xl-edge-to-visual); - --spectrum-button-edge-to-visual-only: var(--system-button-size-xl-edge-to-visual-only); - --spectrum-button-edge-to-text: var(--system-button-size-xl-edge-to-text); - --spectrum-button-padding-label-to-icon: var(--system-button-size-xl-padding-label-to-icon); - --spectrum-button-top-to-text: var(--system-button-size-xl-top-to-text); - --spectrum-button-bottom-to-text: var(--system-button-size-xl-bottom-to-text); - --spectrum-button-top-to-icon: var(--system-button-size-xl-top-to-icon); - --spectrum-button-intended-icon-size: var(--system-button-size-xl-intended-icon-size); -} - -.spectrum-Button.spectrum-Button--accent { - --spectrum-button-background-color-default: var(--system-button-accent-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-accent-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-accent-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-accent-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-accent-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-accent-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-accent-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-accent-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-accent-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-accent-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-accent-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-accent-content-color-focus); - --spectrum-button-background-color-disabled: var(--system-button-accent-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-accent-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-accent-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline { - --spectrum-button-background-color-default: var(--system-button-accent-outline-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-accent-outline-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-accent-outline-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-accent-outline-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-accent-outline-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-accent-outline-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-accent-outline-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-accent-outline-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-accent-outline-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-accent-outline-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-accent-outline-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-accent-outline-content-color-focus); - --spectrum-button-background-color-disabled: var(--system-button-accent-outline-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-accent-outline-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-accent-outline-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--negative { - --spectrum-button-background-color-default: var(--system-button-negative-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-negative-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-negative-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-negative-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-negative-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-negative-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-negative-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-negative-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-negative-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-negative-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-negative-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-negative-content-color-focus); - --spectrum-button-background-color-disabled: var(--system-button-negative-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-negative-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-negative-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline { - --spectrum-button-background-color-default: var(--system-button-negative-outline-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-negative-outline-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-negative-outline-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-negative-outline-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-negative-outline-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-negative-outline-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-negative-outline-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-negative-outline-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-negative-outline-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-negative-outline-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-negative-outline-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-negative-outline-content-color-focus); - --spectrum-button-background-color-disabled: var(--system-button-negative-outline-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-negative-outline-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-negative-outline-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--primary { - --spectrum-button-background-color-default: var(--system-button-primary-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-primary-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-primary-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-primary-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-primary-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-primary-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-primary-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-primary-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-primary-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-primary-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-primary-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-primary-content-color-focus); - --spectrum-button-background-color-disabled: var(--system-button-primary-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-primary-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-primary-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline { - --spectrum-button-background-color-default: var(--system-button-primary-outline-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-primary-outline-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-primary-outline-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-primary-outline-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-primary-outline-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-primary-outline-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-primary-outline-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-primary-outline-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-primary-outline-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-primary-outline-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-primary-outline-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-primary-outline-content-color-focus); - --spectrum-button-background-color-disabled: var(--system-button-primary-outline-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-primary-outline-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-primary-outline-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--system-button-secondary-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-secondary-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-secondary-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-secondary-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-secondary-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-secondary-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-secondary-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-secondary-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-secondary-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-secondary-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-secondary-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-secondary-content-color-focus); - --spectrum-button-background-color-disabled: var(--system-button-secondary-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-secondary-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-secondary-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline { - --spectrum-button-background-color-default: var(--system-button-secondary-outline-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-secondary-outline-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-secondary-outline-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-secondary-outline-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-secondary-outline-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-secondary-outline-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-secondary-outline-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-secondary-outline-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-secondary-outline-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-secondary-outline-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-secondary-outline-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-secondary-outline-content-color-focus); - --spectrum-button-background-color-disabled: var(--system-button-secondary-outline-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-secondary-outline-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-secondary-outline-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--quiet { - --spectrum-button-background-color-default: var(--system-button-quiet-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-quiet-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-quiet-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-quiet-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-quiet-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-quiet-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-quiet-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-quiet-border-color-focus); - --spectrum-button-background-color-disabled: var(--system-button-quiet-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-quiet-border-color-disabled); -} - -.spectrum-Button.is-selected { - --spectrum-button-background-color-default: var(--system-button-selected-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-selected-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-selected-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-selected-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-selected-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-selected-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-selected-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-selected-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-selected-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-selected-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-selected-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-selected-content-color-focus); - --spectrum-button-background-color-disabled: var(--system-button-selected-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-selected-border-color-disabled); -} - -.spectrum-Button.is-selected.spectrum-Button--emphasized { - --spectrum-button-background-color-default: var(--system-button-selected-emphasized-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-selected-emphasized-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-selected-emphasized-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-selected-emphasized-background-color-focus); -} - -.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet { - --spectrum-button-border-color-default: var(--system-button-static-black-quiet-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-static-black-quiet-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-static-black-quiet-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-static-black-quiet-border-color-focus); - --spectrum-button-border-color-disabled: var(--system-button-static-black-quiet-border-color-disabled); -} - -.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet { - --spectrum-button-border-color-default: var(--system-button-static-white-quiet-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-static-white-quiet-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-static-white-quiet-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-static-white-quiet-border-color-focus); - --spectrum-button-border-color-disabled: var(--system-button-static-white-quiet-border-color-disabled); -} - -.spectrum-Button.spectrum-Button--staticWhite { - --spectrum-button-background-color-default: var(--system-button-static-white-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-static-white-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-static-white-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-static-white-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-static-white-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-static-white-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-static-white-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-static-white-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-static-white-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-static-white-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-static-white-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-static-white-content-color-focus); - --spectrum-button-focus-indicator-color: var(--system-button-static-white-focus-indicator-color); - --spectrum-button-background-color-disabled: var(--system-button-static-white-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-static-white-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-static-white-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline { - --spectrum-button-background-color-default: var(--system-button-static-white-outline-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-static-white-outline-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-static-white-outline-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-static-white-outline-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-static-white-outline-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-static-white-outline-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-static-white-outline-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-static-white-outline-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-static-white-outline-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-static-white-outline-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-static-white-outline-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-static-white-outline-content-color-focus); - --spectrum-button-focus-indicator-color: var(--system-button-static-white-outline-focus-indicator-color); - --spectrum-button-background-color-disabled: var(--system-button-static-white-outline-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-static-white-outline-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-static-white-outline-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--staticWhite.is-selected { - --spectrum-button-background-color-default: var(--system-button-static-white-selected-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-static-white-selected-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-static-white-selected-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-static-white-selected-background-color-focus); - --spectrum-button-content-color-default: var(--system-button-static-white-selected-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-static-white-selected-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-static-white-selected-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-static-white-selected-content-color-focus); - --spectrum-button-background-color-disabled: var(--system-button-static-white-selected-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-static-white-selected-border-color-disabled); -} - -.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--system-button-static-white-secondary-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-static-white-secondary-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-static-white-secondary-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-static-white-secondary-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-static-white-secondary-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-static-white-secondary-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-static-white-secondary-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-static-white-secondary-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-static-white-secondary-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-static-white-secondary-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-static-white-secondary-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-static-white-secondary-content-color-focus); - --spectrum-button-focus-indicator-color: var(--system-button-static-white-secondary-focus-indicator-color); - --spectrum-button-background-color-disabled: var(--system-button-static-white-secondary-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-static-white-secondary-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-static-white-secondary-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline { - --spectrum-button-background-color-default: var(--system-button-static-white-secondary-outline-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-static-white-secondary-outline-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-static-white-secondary-outline-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-static-white-secondary-outline-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-static-white-secondary-outline-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-static-white-secondary-outline-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-static-white-secondary-outline-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-static-white-secondary-outline-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-static-white-secondary-outline-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-static-white-secondary-outline-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-static-white-secondary-outline-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-static-white-secondary-outline-content-color-focus); - --spectrum-button-focus-indicator-color: var(--system-button-static-white-secondary-outline-focus-indicator-color); - --spectrum-button-background-color-disabled: var(--system-button-static-white-secondary-outline-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-static-white-secondary-outline-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-static-white-secondary-outline-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--staticBlack { - --spectrum-button-background-color-default: var(--system-button-static-black-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-static-black-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-static-black-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-static-black-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-static-black-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-static-black-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-static-black-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-static-black-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-static-black-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-static-black-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-static-black-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-static-black-content-color-focus); - --spectrum-button-focus-indicator-color: var(--system-button-static-black-focus-indicator-color); - --spectrum-button-background-color-disabled: var(--system-button-static-black-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-static-black-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-static-black-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline { - --spectrum-button-background-color-default: var(--system-button-static-black-outline-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-static-black-outline-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-static-black-outline-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-static-black-outline-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-static-black-outline-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-static-black-outline-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-static-black-outline-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-static-black-outline-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-static-black-outline-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-static-black-outline-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-static-black-outline-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-static-black-outline-content-color-focus); - --spectrum-button-focus-indicator-color: var(--system-button-static-black-outline-focus-indicator-color); - --spectrum-button-background-color-disabled: var(--system-button-static-black-outline-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-static-black-outline-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-static-black-outline-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--system-button-static-black-secondary-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-static-black-secondary-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-static-black-secondary-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-static-black-secondary-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-static-black-secondary-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-static-black-secondary-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-static-black-secondary-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-static-black-secondary-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-static-black-secondary-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-static-black-secondary-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-static-black-secondary-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-static-black-secondary-content-color-focus); - --spectrum-button-focus-indicator-color: var(--system-button-static-black-secondary-focus-indicator-color); - --spectrum-button-background-color-disabled: var(--system-button-static-black-secondary-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-static-black-secondary-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-static-black-secondary-content-color-disabled); -} - -.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline { - --spectrum-button-background-color-default: var(--system-button-static-black-secondary-outline-background-color-default); - --spectrum-button-background-color-hover: var(--system-button-static-black-secondary-outline-background-color-hover); - --spectrum-button-background-color-down: var(--system-button-static-black-secondary-outline-background-color-down); - --spectrum-button-background-color-focus: var(--system-button-static-black-secondary-outline-background-color-focus); - --spectrum-button-border-color-default: var(--system-button-static-black-secondary-outline-border-color-default); - --spectrum-button-border-color-hover: var(--system-button-static-black-secondary-outline-border-color-hover); - --spectrum-button-border-color-down: var(--system-button-static-black-secondary-outline-border-color-down); - --spectrum-button-border-color-focus: var(--system-button-static-black-secondary-outline-border-color-focus); - --spectrum-button-content-color-default: var(--system-button-static-black-secondary-outline-content-color-default); - --spectrum-button-content-color-hover: var(--system-button-static-black-secondary-outline-content-color-hover); - --spectrum-button-content-color-down: var(--system-button-static-black-secondary-outline-content-color-down); - --spectrum-button-content-color-focus: var(--system-button-static-black-secondary-outline-content-color-focus); - --spectrum-button-focus-indicator-color: var(--system-button-static-black-secondary-outline-focus-indicator-color); - --spectrum-button-background-color-disabled: var(--system-button-static-black-secondary-outline-background-color-disabled); - --spectrum-button-border-color-disabled: var(--system-button-static-black-secondary-outline-border-color-disabled); - --spectrum-button-content-color-disabled: var(--system-button-static-black-secondary-outline-content-color-disabled); -} - -.spectrum-Button--sizeS { - --spectrum-button-min-width: var(--system-button-size-s-min-width); - --spectrum-button-border-radius: var(--system-button-size-s-border-radius); - --spectrum-button-height: var(--system-button-size-s-height); - --spectrum-button-font-size: var(--system-button-size-s-font-size); - --spectrum-button-edge-to-visual: var(--system-button-size-s-edge-to-visual); - --spectrum-button-edge-to-visual-only: var(--system-button-size-s-edge-to-visual-only); - --spectrum-button-edge-to-text: var(--system-button-size-s-edge-to-text); - --spectrum-button-padding-label-to-icon: var(--system-button-size-s-padding-label-to-icon); - --spectrum-button-top-to-text: var(--system-button-size-s-top-to-text); - --spectrum-button-bottom-to-text: var(--system-button-size-s-bottom-to-text); - --spectrum-button-top-to-icon: var(--system-button-size-s-top-to-icon); - --spectrum-button-intended-icon-size: var(--system-button-size-s-intended-icon-size); -} - -.spectrum-Button--sizeM { - --spectrum-button-min-width: var(--system-button-size-m-min-width); - --spectrum-button-border-radius: var(--system-button-size-m-border-radius); - --spectrum-button-height: var(--system-button-size-m-height); - --spectrum-button-font-size: var(--system-button-size-m-font-size); - --spectrum-button-edge-to-visual: var(--system-button-size-m-edge-to-visual); - --spectrum-button-edge-to-visual-only: var(--system-button-size-m-edge-to-visual-only); - --spectrum-button-edge-to-text: var(--system-button-size-m-edge-to-text); - --spectrum-button-padding-label-to-icon: var(--system-button-size-m-padding-label-to-icon); - --spectrum-button-top-to-text: var(--system-button-size-m-top-to-text); - --spectrum-button-bottom-to-text: var(--system-button-size-m-bottom-to-text); - --spectrum-button-top-to-icon: var(--system-button-size-m-top-to-icon); - --spectrum-button-intended-icon-size: var(--system-button-size-m-intended-icon-size); -} - -.spectrum-Button--sizeL { - --spectrum-button-min-width: var(--system-button-size-l-min-width); - --spectrum-button-border-radius: var(--system-button-size-l-border-radius); - --spectrum-button-height: var(--system-button-size-l-height); - --spectrum-button-font-size: var(--system-button-size-l-font-size); - --spectrum-button-edge-to-visual: var(--system-button-size-l-edge-to-visual); - --spectrum-button-edge-to-visual-only: var(--system-button-size-l-edge-to-visual-only); - --spectrum-button-edge-to-text: var(--system-button-size-l-edge-to-text); - --spectrum-button-padding-label-to-icon: var(--system-button-size-l-padding-label-to-icon); - --spectrum-button-top-to-text: var(--system-button-size-l-top-to-text); - --spectrum-button-bottom-to-text: var(--system-button-size-l-bottom-to-text); - --spectrum-button-top-to-icon: var(--system-button-size-l-top-to-icon); - --spectrum-button-intended-icon-size: var(--system-button-size-l-intended-icon-size); -} - -.spectrum-Button--sizeXL { - --spectrum-button-min-width: var(--system-button-size-xl-min-width); - --spectrum-button-border-radius: var(--system-button-size-xl-border-radius); - --spectrum-button-height: var(--system-button-size-xl-height); - --spectrum-button-font-size: var(--system-button-size-xl-font-size); - --spectrum-button-edge-to-visual: var(--system-button-size-xl-edge-to-visual); - --spectrum-button-edge-to-visual-only: var(--system-button-size-xl-edge-to-visual-only); - --spectrum-button-edge-to-text: var(--system-button-size-xl-edge-to-text); - --spectrum-button-padding-label-to-icon: var(--system-button-size-xl-padding-label-to-icon); - --spectrum-button-top-to-text: var(--system-button-size-xl-top-to-text); - --spectrum-button-bottom-to-text: var(--system-button-size-xl-bottom-to-text); - --spectrum-button-top-to-icon: var(--system-button-size-xl-top-to-icon); - --spectrum-button-intended-icon-size: var(--system-button-size-xl-intended-icon-size); -} diff --git a/tokens/dist/css/components/bridge/checkbox.css b/tokens/dist/css/components/bridge/checkbox.css deleted file mode 100644 index b00da68de41..00000000000 --- a/tokens/dist/css/components/bridge/checkbox.css +++ /dev/null @@ -1,84 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--system-checkbox-control-color-default); - --spectrum-checkbox-control-color-hover: var(--system-checkbox-control-color-hover); - --spectrum-checkbox-control-color-down: var(--system-checkbox-control-color-down); - --spectrum-checkbox-control-color-focus: var(--system-checkbox-control-color-focus); - --spectrum-checkbox-content-color-default: var(--system-checkbox-content-color-default); - --spectrum-checkbox-content-color-hover: var(--system-checkbox-content-color-hover); - --spectrum-checkbox-content-color-down: var(--system-checkbox-content-color-down); - --spectrum-checkbox-content-color-focus: var(--system-checkbox-content-color-focus); - --spectrum-checkbox-focus-indicator-color: var(--system-checkbox-focus-indicator-color); - --spectrum-checkbox-content-color-disabled: var(--system-checkbox-content-color-disabled); - --spectrum-checkbox-control-color-disabled: var(--system-checkbox-control-color-disabled); - --spectrum-checkbox-checkmark-color: var(--system-checkbox-checkmark-color); - --spectrum-checkbox-invalid-color-default: var(--system-checkbox-invalid-color-default); - --spectrum-checkbox-invalid-color-hover: var(--system-checkbox-invalid-color-hover); - --spectrum-checkbox-invalid-color-down: var(--system-checkbox-invalid-color-down); - --spectrum-checkbox-invalid-color-focus: var(--system-checkbox-invalid-color-focus); - --spectrum-checkbox-emphasized-color-default: var(--system-checkbox-emphasized-color-default); - --spectrum-checkbox-emphasized-color-hover: var(--system-checkbox-emphasized-color-hover); - --spectrum-checkbox-emphasized-color-down: var(--system-checkbox-emphasized-color-down); - --spectrum-checkbox-emphasized-color-focus: var(--system-checkbox-emphasized-color-focus); - --spectrum-checkbox-control-selected-color-default: var(--system-checkbox-control-selected-color-default); - --spectrum-checkbox-control-selected-color-hover: var(--system-checkbox-control-selected-color-hover); - --spectrum-checkbox-control-selected-color-down: var(--system-checkbox-control-selected-color-down); - --spectrum-checkbox-control-selected-color-focus: var(--system-checkbox-control-selected-color-focus); - --spectrum-checkbox-line-height: var(--system-checkbox-line-height); - --spectrum-checkbox-line-height-cjk: var(--system-checkbox-line-height-cjk); - --spectrum-checkbox-control-corner-radius: var(--system-checkbox-control-corner-radius); - --spectrum-checkbox-focus-indicator-gap: var(--system-checkbox-focus-indicator-gap); - --spectrum-checkbox-focus-indicator-thickness: var(--system-checkbox-focus-indicator-thickness); - --spectrum-checkbox-border-width: var(--system-checkbox-border-width); - --spectrum-checkbox-selected-border-width: var(--system-checkbox-selected-border-width); - --spectrum-checkbox-animation-duration: var(--system-checkbox-animation-duration); - --spectrum-checkbox-font-size: var(--system-checkbox-font-size); - --spectrum-checkbox-height: var(--system-checkbox-height); - --spectrum-checkbox-control-size: var(--system-checkbox-control-size); - --spectrum-checkbox-top-to-text: var(--system-checkbox-top-to-text); - --spectrum-checkbox-text-to-control: var(--system-checkbox-text-to-control); -} - -.spectrum-Checkbox.spectrum-Checkbox--sizeS { - --spectrum-checkbox-font-size: var(--system-checkbox-size-s-font-size); - --spectrum-checkbox-height: var(--system-checkbox-size-s-height); - --spectrum-checkbox-control-size: var(--system-checkbox-size-s-control-size); - --spectrum-checkbox-top-to-text: var(--system-checkbox-size-s-top-to-text); - --spectrum-checkbox-text-to-control: var(--system-checkbox-size-s-text-to-control); -} - -.spectrum-Checkbox.spectrum-Checkbox--sizeM { - --spectrum-checkbox-font-size: var(--system-checkbox-size-m-font-size); - --spectrum-checkbox-height: var(--system-checkbox-size-m-height); - --spectrum-checkbox-control-size: var(--system-checkbox-size-m-control-size); - --spectrum-checkbox-top-to-text: var(--system-checkbox-size-m-top-to-text); - --spectrum-checkbox-text-to-control: var(--system-checkbox-size-m-text-to-control); -} - -.spectrum-Checkbox.spectrum-Checkbox--sizeL { - --spectrum-checkbox-font-size: var(--system-checkbox-size-l-font-size); - --spectrum-checkbox-height: var(--system-checkbox-size-l-height); - --spectrum-checkbox-control-size: var(--system-checkbox-size-l-control-size); - --spectrum-checkbox-top-to-text: var(--system-checkbox-size-l-top-to-text); - --spectrum-checkbox-text-to-control: var(--system-checkbox-size-l-text-to-control); -} - -.spectrum-Checkbox.spectrum-Checkbox--sizeXL { - --spectrum-checkbox-font-size: var(--system-checkbox-size-xl-font-size); - --spectrum-checkbox-height: var(--system-checkbox-size-xl-height); - --spectrum-checkbox-control-size: var(--system-checkbox-size-xl-control-size); - --spectrum-checkbox-top-to-text: var(--system-checkbox-size-xl-top-to-text); - --spectrum-checkbox-text-to-control: var(--system-checkbox-size-xl-text-to-control); -} diff --git a/tokens/dist/css/components/bridge/clearbutton.css b/tokens/dist/css/components/bridge/clearbutton.css deleted file mode 100644 index 5e4d53f59c8..00000000000 --- a/tokens/dist/css/components/bridge/clearbutton.css +++ /dev/null @@ -1,67 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-ClearButton { - --spectrum-clear-button-background-color: var(--system-clear-button-background-color); - --spectrum-clear-button-background-color-hover: var(--system-clear-button-background-color-hover); - --spectrum-clear-button-background-color-down: var(--system-clear-button-background-color-down); - --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-background-color-key-focus); - --spectrum-clear-button-height: var(--system-clear-button-height); - --spectrum-clear-button-width: var(--system-clear-button-width); - --spectrum-clear-button-padding: var(--system-clear-button-padding); - --spectrum-clear-button-icon-color: var(--system-clear-button-icon-color); - --spectrum-clear-button-icon-color-hover: var(--system-clear-button-icon-color-hover); - --spectrum-clear-button-icon-color-down: var(--system-clear-button-icon-color-down); - --spectrum-clear-button-icon-color-key-focus: var(--system-clear-button-icon-color-key-focus); -} - -.spectrum-ClearButton.spectrum-ClearButton--sizeS { - --spectrum-clear-button-height: var(--system-clear-button-size-s-height); - --spectrum-clear-button-width: var(--system-clear-button-size-s-width); -} - -.spectrum-ClearButton.spectrum-ClearButton--sizeL { - --spectrum-clear-button-height: var(--system-clear-button-size-l-height); - --spectrum-clear-button-width: var(--system-clear-button-size-l-width); -} - -.spectrum-ClearButton.spectrum-ClearButton--sizeXL { - --spectrum-clear-button-height: var(--system-clear-button-size-xl-height); - --spectrum-clear-button-width: var(--system-clear-button-size-xl-width); -} - -.spectrum-ClearButton.spectrum-ClearButton--quiet { - --spectrum-clear-button-background-color: var(--system-clear-button-quiet-background-color); - --spectrum-clear-button-background-color-hover: var(--system-clear-button-quiet-background-color-hover); - --spectrum-clear-button-background-color-down: var(--system-clear-button-quiet-background-color-down); - --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-quiet-background-color-key-focus); -} - -.spectrum-ClearButton.spectrum-ClearButton--overBackground { - --spectrum-clear-button-icon-color: var(--system-clear-button-over-background-icon-color); - --spectrum-clear-button-icon-color-hover: var(--system-clear-button-over-background-icon-color-hover); - --spectrum-clear-button-icon-color-down: var(--system-clear-button-over-background-icon-color-down); - --spectrum-clear-button-icon-color-key-focus: var(--system-clear-button-over-background-icon-color-key-focus); - --spectrum-clear-button-background-color: var(--system-clear-button-over-background-background-color); - --spectrum-clear-button-background-color-hover: var(--system-clear-button-over-background-background-color-hover); - --spectrum-clear-button-background-color-down: var(--system-clear-button-over-background-background-color-down); - --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-over-background-background-color-key-focus); -} - -.spectrum-ClearButton.is-disabled, -.spectrum-ClearButton:disabled { - --spectrum-clear-button-icon-color: var(--system-clear-button-disabled-icon-color); - --spectrum-clear-button-icon-color-hover: var(--system-clear-button-disabled-icon-color-hover); - --spectrum-clear-button-icon-color-down: var(--system-clear-button-disabled-icon-color-down); - --spectrum-clear-button-background-color: var(--system-clear-button-disabled-background-color); -} diff --git a/tokens/dist/css/components/bridge/closebutton.css b/tokens/dist/css/components/bridge/closebutton.css deleted file mode 100644 index d93f68bce58..00000000000 --- a/tokens/dist/css/components/bridge/closebutton.css +++ /dev/null @@ -1,84 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-CloseButton { - --spectrum-closebutton-background-color-default: var(--system-close-button-background-color-default); - --spectrum-closebutton-background-color-hover: var(--system-close-button-background-color-hover); - --spectrum-closebutton-background-color-down: var(--system-close-button-background-color-down); - --spectrum-closebutton-background-color-focus: var(--system-close-button-background-color-focus); - --spectrum-closebutton-size-300: var(--system-close-button-size-300); - --spectrum-closebutton-size-400: var(--system-close-button-size-400); - --spectrum-closebutton-size-500: var(--system-close-button-size-500); - --spectrum-closebutton-size-600: var(--system-close-button-size-600); - --spectrum-closebutton-icon-color-default: var(--system-close-button-icon-color-default); - --spectrum-closebutton-icon-color-hover: var(--system-close-button-icon-color-hover); - --spectrum-closebutton-icon-color-down: var(--system-close-button-icon-color-down); - --spectrum-closebutton-icon-color-focus: var(--system-close-button-icon-color-focus); - --spectrum-closebutton-icon-color-disabled: var(--system-close-button-icon-color-disabled); - --spectrum-closebutton-focus-indicator-thickness: var(--system-close-button-focus-indicator-thickness); - --spectrum-closebutton-focus-indicator-gap: var(--system-close-button-focus-indicator-gap); - --spectrum-closebutton-focus-indicator-color: var(--system-close-button-focus-indicator-color); - --spectrum-closebutton-height: var(--system-close-button-height); - --spectrum-closebutton-size: var(--system-close-button-size); - --spectrum-closebutton-border-radius: var(--system-close-button-border-radius); - --spectrum-closebutton-animation-duration: var(--system-close-button-animation-duration); - --spectrum-closebutton-width: var(--system-close-button-width); -} - -.spectrum-Closebutton--sizeS { - --spectrum-closebutton-height: var(--system-closebutton-size-s-height); - --spectrum-closebutton-size: var(--system-closebutton-size-s-size); - --spectrum-closebutton-border-radius: var(--system-closebutton-size-s-border-radius); - --spectrum-closebutton-width: var(--system-closebutton-size-s-width); -} - -.spectrum-Closebutton--sizeM { - --spectrum-closebutton-height: var(--system-closebutton-size-m-height); - --spectrum-closebutton-size: var(--system-closebutton-size-m-size); - --spectrum-closebutton-border-radius: var(--system-closebutton-size-m-border-radius); - --spectrum-closebutton-width: var(--system-closebutton-size-m-width); -} - -.spectrum-Closebutton--sizeL { - --spectrum-closebutton-height: var(--system-closebutton-size-l-height); - --spectrum-closebutton-size: var(--system-closebutton-size-l-size); - --spectrum-closebutton-border-radius: var(--system-closebutton-size-l-border-radius); - --spectrum-closebutton-width: var(--system-closebutton-size-l-width); -} - -.spectrum-Closebutton--sizeXL { - --spectrum-closebutton-height: var(--system-closebutton-size-xl-height); - --spectrum-closebutton-size: var(--system-closebutton-size-xl-size); - --spectrum-closebutton-border-radius: var(--system-closebutton-size-xl-border-radius); - --spectrum-closebutton-width: var(--system-closebutton-size-xl-width); -} - -.spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-default: var(--system-close-button-static-white-static-background-color-default); - --spectrum-closebutton-static-background-color-hover: var(--system-close-button-static-white-static-background-color-hover); - --spectrum-closebutton-static-background-color-down: var(--system-close-button-static-white-static-background-color-down); - --spectrum-closebutton-static-background-color-focus: var(--system-close-button-static-white-static-background-color-focus); - --spectrum-closebutton-icon-color-default: var(--system-close-button-static-white-icon-color-default); - --spectrum-closebutton-icon-color-disabled: var(--system-close-button-static-white-icon-color-disabled); - --spectrum-closebutton-focus-indicator-color: var(--system-close-button-static-white-focus-indicator-color); -} - -.spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-default: var(--system-close-button-static-black-static-background-color-default); - --spectrum-closebutton-static-background-color-hover: var(--system-close-button-static-black-static-background-color-hover); - --spectrum-closebutton-static-background-color-down: var(--system-close-button-static-black-static-background-color-down); - --spectrum-closebutton-static-background-color-focus: var(--system-close-button-static-black-static-background-color-focus); - --spectrum-closebutton-icon-color-default: var(--system-close-button-static-black-icon-color-default); - --spectrum-closebutton-icon-color-disabled: var(--system-close-button-static-black-icon-color-disabled); - --spectrum-closebutton-focus-indicator-color: var(--system-close-button-static-black-focus-indicator-color); -} diff --git a/tokens/dist/css/components/bridge/combobox.css b/tokens/dist/css/components/bridge/combobox.css deleted file mode 100644 index 017adebf7da..00000000000 --- a/tokens/dist/css/components/bridge/combobox.css +++ /dev/null @@ -1,160 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Combobox { - --spectrum-combobox-border-color-default: var(--system-combobox-border-color-default); - --spectrum-combobox-border-color-hover: var(--system-combobox-border-color-hover); - --spectrum-combobox-border-color-focus: var(--system-combobox-border-color-focus); - --spectrum-combobox-border-color-focus-hover: var(--system-combobox-border-color-focus-hover); - --spectrum-combobox-border-color-key-focus: var(--system-combobox-border-color-key-focus); - --spectrum-combobox-inline-size: var(--system-combobox-inline-size); - --spectrum-combobox-block-size: var(--system-combobox-block-size); - --spectrum-combobox-min-inline-size: var(--system-combobox-min-inline-size); - --spectrum-combobox-button-width: var(--system-combobox-button-width); - --spectrum-combobox-icon-size: var(--system-combobox-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-spacing-inline-icon-to-button); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--system-combobox-block-spacing-edge-to-progress-circle); - --spectrum-combobox-block-spacing-edge-to-alert: var(--system-combobox-block-spacing-edge-to-alert); - --spectrum-combobox-spacing-edge-to-menu: var(--system-combobox-spacing-edge-to-menu); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--system-combobox-spacing-block-start-edge-to-text); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--system-combobox-spacing-block-end-edge-to-text); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-spacing-inline-start-edge-to-text); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--system-combobox-spacing-inline-end-edge-to-text); - --spectrum-combobox-focus-indicator-thickness: var(--system-combobox-focus-indicator-thickness); - --spectrum-combobox-focus-indicator-gap: var(--system-combobox-focus-indicator-gap); - --spectrum-combobox-focus-indicator-color: var(--system-combobox-focus-indicator-color); - --spectrum-combobox-border-radius: var(--system-combobox-border-radius); - --spectrum-combobox-border-width: var(--system-combobox-border-width); - --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-spacing-label-to); - --spectrum-combobox-font-style: var(--system-combobox-font-style); - --spectrum-combobox-line-height: var(--system-combobox-line-height); - --spectrum-combobox-border-color-invalid-default: var(--system-combobox-border-color-invalid-default); - --spectrum-combobox-border-color-invalid-hover: var(--system-combobox-border-color-invalid-hover); - --spectrum-combobox-border-color-invalid-focus: var(--system-combobox-border-color-invalid-focus); - --spectrum-combobox-border-color-invalid-focus-hover: var(--system-combobox-border-color-invalid-focus-hover); - --spectrum-combobox-border-color-invalid-key-focus: var(--system-combobox-border-color-invalid-key-focus); - --mod-textfield-focus-indicator-gap: var(--system-combobox-textfield-focus-indicator-gap); - --mod-textfield-focus-indicator-width: var(--system-combobox-textfield-focus-indicator-width); - --mod-textfield-focus-indicator-color: var(--system-combobox-textfield-focus-indicator-color); - --mod-textfield-background-color: var(--system-combobox-textfield-background-color); - --mod-textfield-background-color-disabled: var(--system-combobox-textfield-background-color-disabled); - --mod-textfield-font-family: var(--system-combobox-textfield-font-family); - --mod-textfield-font-weight: var(--system-combobox-textfield-font-weight); - --mod-textfield-text-color-default: var(--system-combobox-textfield-text-color-default); - --mod-textfield-text-color-hover: var(--system-combobox-textfield-text-color-hover); - --mod-textfield-text-color-focus: var(--system-combobox-textfield-text-color-focus); - --mod-textfield-text-color-focus-hover: var(--system-combobox-textfield-text-color-focus-hover); - --mod-textfield-text-color-keyboard-focus: var(--system-combobox-textfield-text-color-keyboard-focus); - --mod-textfield-text-color-disabled: var(--system-combobox-textfield-text-color-disabled); - --mod-textfield-border-width: var(--system-combobox-textfield-border-width); - --mod-textfield-border-color: var(--system-combobox-textfield-border-color); - --mod-textfield-border-color-disabled: var(--system-combobox-textfield-border-color-disabled); - --mod-textfield-border-color-focus: var(--system-combobox-textfield-border-color-focus); - --mod-textfield-border-color-focus-hover: var(--system-combobox-textfield-border-color-focus-hover); - --mod-textfield-border-color-hover: var(--system-combobox-textfield-border-color-hover); - --mod-textfield-border-color-keyboard-focus: var(--system-combobox-textfield-border-color-keyboard-focus); - --mod-textfield-border-color-invalid-default: var(--system-combobox-textfield-border-color-invalid-default); - --mod-textfield-border-color-invalid-hover: var(--system-combobox-textfield-border-color-invalid-hover); - --mod-textfield-border-color-invalid-focus: var(--system-combobox-textfield-border-color-invalid-focus); - --mod-textfield-border-color-invalid-focus-hover: var(--system-combobox-textfield-border-color-invalid-focus-hover); - --mod-textfield-border-color-invalid-keyboard-focus: var(--system-combobox-textfield-border-color-invalid-keyboard-focus); - --mod-textfield-icon-color-invalid: var(--system-combobox-textfield-icon-color-invalid); - --mod-picker-button-border-width: var(--system-combobox-picker-button-border-width); - --mod-picker-button-border-color: var(--system-combobox-picker-button-border-color); - --mod-picker-button-background-color: var(--system-combobox-picker-button-background-color); - --mod-picker-button-background-color-disabled: var(--system-combobox-picker-button-background-color-disabled); - --mod-picker-button-font-color-disabled: var(--system-combobox-picker-button-font-color-disabled); -} - -.spectrum-Combobox--sizeS { - --spectrum-combobox-block-size: var(--system-combobox-size-s-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-s-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-s-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-size-s-spacing-inline-icon-to-button); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--system-combobox-size-s-block-spacing-edge-to-progress-circle); - --spectrum-combobox-block-spacing-edge-to-alert: var(--system-combobox-size-s-block-spacing-edge-to-alert); - --spectrum-combobox-spacing-edge-to-menu: var(--system-combobox-size-s-spacing-edge-to-menu); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--system-combobox-size-s-spacing-block-start-edge-to-text); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--system-combobox-size-s-spacing-block-end-edge-to-text); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-size-s-spacing-inline-start-edge-to-text); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--system-combobox-size-s-spacing-inline-end-edge-to-text); -} - -.spectrum-Combobox--sizeM { - --spectrum-combobox-block-size: var(--system-combobox-size-m-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-m-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-m-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-size-m-spacing-inline-icon-to-button); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--system-combobox-size-m-block-spacing-edge-to-progress-circle); - --spectrum-combobox-block-spacing-edge-to-alert: var(--system-combobox-size-m-block-spacing-edge-to-alert); - --spectrum-combobox-spacing-edge-to-menu: var(--system-combobox-size-m-spacing-edge-to-menu); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--system-combobox-size-m-spacing-block-start-edge-to-text); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--system-combobox-size-m-spacing-block-end-edge-to-text); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-size-m-spacing-inline-start-edge-to-text); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--system-combobox-size-m-spacing-inline-end-edge-to-text); -} - -.spectrum-Combobox--sizeL { - --spectrum-combobox-block-size: var(--system-combobox-size-l-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-l-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-l-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-size-l-spacing-inline-icon-to-button); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--system-combobox-size-l-block-spacing-edge-to-progress-circle); - --spectrum-combobox-block-spacing-edge-to-alert: var(--system-combobox-size-l-block-spacing-edge-to-alert); - --spectrum-combobox-spacing-edge-to-menu: var(--system-combobox-size-l-spacing-edge-to-menu); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--system-combobox-size-l-spacing-block-start-edge-to-text); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--system-combobox-size-l-spacing-block-end-edge-to-text); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-size-l-spacing-inline-start-edge-to-text); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--system-combobox-size-l-spacing-inline-end-edge-to-text); -} - -.spectrum-Combobox--sizeXL { - --spectrum-combobox-block-size: var(--system-combobox-size-xl-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-xl-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-xl-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-size-xl-spacing-inline-icon-to-button); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--system-combobox-size-xl-block-spacing-edge-to-progress-circle); - --spectrum-combobox-block-spacing-edge-to-alert: var(--system-combobox-size-xl-block-spacing-edge-to-alert); - --spectrum-combobox-spacing-edge-to-menu: var(--system-combobox-size-xl-spacing-edge-to-menu); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--system-combobox-size-xl-spacing-block-start-edge-to-text); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--system-combobox-size-xl-spacing-block-end-edge-to-text); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-size-xl-spacing-inline-start-edge-to-text); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--system-combobox-size-xl-spacing-inline-end-edge-to-text); -} - -.spectrum-Combobox--quiet { - --spectrum-combobox-min-inline-size: var(--system-combobox-quiet-min-inline-size); - --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-quiet-spacing-inline-icon-to-button); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-quiet-spacing-inline-start-edge-to-text); - --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-quiet-spacing-label-to); - --spectrum-combobox-button-inline-offset: var(--system-combobox-quiet-button-inline-offset); - --mod-picker-button-background-color-quiet: var(--system-combobox-quiet-picker-button-background-color-quiet); - --mod-picker-button-border-color-quiet: var(--system-combobox-quiet-picker-button-border-color-quiet); -} - -.spectrum-Combobox--quiet.spectrum-Combobox--sizeS { - --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-quiet-size-s-spacing-label-to); -} - -.spectrum-Combobox--quiet.spectrum-Combobox--sizeM { - --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-quiet-size-m-spacing-label-to); -} - -.spectrum-Combobox--quiet.spectrum-Combobox--sizeL { - --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-quiet-size-l-spacing-label-to); -} - -.spectrum-Combobox--quiet.spectrum-Combobox--sizeXL { - --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-quiet-size-xl-spacing-label-to); -} diff --git a/tokens/dist/css/components/bridge/datepicker.css b/tokens/dist/css/components/bridge/datepicker.css deleted file mode 100644 index ec87c191bff..00000000000 --- a/tokens/dist/css/components/bridge/datepicker.css +++ /dev/null @@ -1,55 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-DatePicker { - --spectrum-datepicker-initial-height: var(--system-date-picker-initial-height); - --spectrum-datepicker-border-radius: var(--system-date-picker-border-radius); - --spectrum-datepicker-border-radius-quiet: var(--system-date-picker-border-radius-quiet); - --spectrum-datepicker-border-width: var(--system-date-picker-border-width); - --spectrum-datepicker-min-width: var(--system-date-picker-min-width); - --spectrum-datepicker-icon-size: var(--system-date-picker-icon-size); - --spectrum-datepicker-pickerbutton-border-color: var(--system-date-picker-pickerbutton-border-color); - --spectrum-datepicker-pickerbutton-border-color-invalid: var(--system-date-picker-pickerbutton-border-color-invalid); - --spectrum-datepicker-pickerbutton-width: var(--system-date-picker-pickerbutton-width); - --spectrum-datepicker-pickerbutton-width-quiet: var(--system-date-picker-pickerbutton-width-quiet); - --spectrum-datepicker-quiet-button-offset: var(--system-date-picker-quiet-button-offset); - --spectrum-datepicker-icon-to-button: var(--system-date-picker-icon-to-button); - --spectrum-datepicker-icon-to-text: var(--system-date-picker-icon-to-text); - --spectrum-datepicker-focus-ring-gap: var(--system-date-picker-focus-ring-gap); - --spectrum-datepicker-focus-thickness: var(--system-date-picker-focus-thickness); - --spectrum-datepicker-focus-animation: var(--system-date-picker-focus-animation); - --spectrum-datepicker-focus-ring-width: var(--system-date-picker-focus-ring-width); - --spectrum-datepicker-focus-ring-color: var(--system-date-picker-focus-ring-color); - --spectrum-datepicker-focus-line-gap: var(--system-date-picker-focus-line-gap); - --spectrum-datepicker-invalid-quiet-color: var(--system-date-picker-invalid-quiet-color); - --spectrum-datepicker-quiet-border-color-hover: var(--system-date-picker-quiet-border-color-hover); - --spectrum-datepicker-border-color-disabled: var(--system-date-picker-border-color-disabled); - --spectrum-datepicker-dash-font-size: var(--system-date-picker-dash-font-size); - --spectrum-datepicker-dash-color: var(--system-date-picker-dash-color); - --spectrum-datepicker-dash-color-disabled: var(--system-date-picker-dash-color-disabled); - --spectrum-datepicker-range-dash-marin-inline-start: var(--system-date-picker-range-dash-marin-inline-start); - --spectrum-datepicker-range-dash-padding-top: var(--system-date-picker-range-dash-padding-top); - --spectrum-datepicker-input-width-base: var(--system-date-picker-input-width-base); - --spectrum-datepicker-input-width: var(--system-date-picker-input-width); - --spectrum-datepicker-input-width-quiet: var(--system-date-picker-input-width-quiet); - --spectrum-datepicker-range-input-width-first: var(--system-date-picker-range-input-width-first); - --spectrum-datepicker-range-input-width-quiet-first: var(--system-date-picker-range-input-width-quiet-first); - --spectrum-datepicker-datetime-input-width-first: var(--system-date-picker-datetime-input-width-first); - --spectrum-datepicker-datetime-input-width: var(--system-date-picker-datetime-input-width); - --spectrum-datepicker-datetime-quiet-input-width-first: var(--system-date-picker-datetime-quiet-input-width-first); - --spectrum-datepicker-datetime-quiet-input-width: var(--system-date-picker-datetime-quiet-input-width); - --spectrum-datepicker-padding-inline-end: var(--system-date-picker-padding-inline-end); - --spectrum-datepicker-padding-inline-end-quiet: var(--system-date-picker-padding-inline-end-quiet); - --spectrum-datepicker-padding-inline-end-invalid: var(--system-date-picker-padding-inline-end-invalid); - --spectrum-datepicker-padding-inline-end-invalid-quiet: var(--system-date-picker-padding-inline-end-invalid-quiet); -} diff --git a/tokens/dist/css/components/bridge/infieldbutton.css b/tokens/dist/css/components/bridge/infieldbutton.css deleted file mode 100644 index 71a73865f9c..00000000000 --- a/tokens/dist/css/components/bridge/infieldbutton.css +++ /dev/null @@ -1,121 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-InfieldButton { - --spectrum-infield-button-border-width: var(--system-infield-button-border-width); - --spectrum-infield-button-border-color: var(--system-infield-button-border-color); - --spectrum-infield-button-border-radius: var(--system-infield-button-border-radius); - --spectrum-infield-button-border-radius-reset: var(--system-infield-button-border-radius-reset); - --spectrum-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-stacked-top-border-radius-start-start); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-stacked-bottom-border-radius-end-start); - --spectrum-infield-button-background-color: var(--system-infield-button-background-color); - --spectrum-infield-button-background-color-hover: var(--system-infield-button-background-color-hover); - --spectrum-infield-button-background-color-down: var(--system-infield-button-background-color-down); - --spectrum-infield-button-background-color-key-focus: var(--system-infield-button-background-color-key-focus); - --spectrum-infield-button-height: var(--system-infield-button-height); - --spectrum-infield-button-width: var(--system-infield-button-width); - --spectrum-infield-button-stacked-border-radius-reset: var(--system-infield-button-stacked-border-radius-reset); - --spectrum-infield-button-edge-to-fill: var(--system-infield-button-edge-to-fill); - --spectrum-infield-button-inner-edge-to-fill: var(--system-infield-button-inner-edge-to-fill); - --spectrum-infield-button-fill-padding: var(--system-infield-button-fill-padding); - --spectrum-infield-button-stacked-fill-padding-inline: var(--system-infield-button-stacked-fill-padding-inline); - --spectrum-infield-button-stacked-fill-padding-outer: var(--system-infield-button-stacked-fill-padding-outer); - --spectrum-infield-button-stacked-fill-padding-inner: var(--system-infield-button-stacked-fill-padding-inner); - --spectrum-infield-button-animation-duration: var(--system-infield-button-animation-duration); - --spectrum-infield-button-icon-color: var(--system-infield-button-icon-color); - --spectrum-infield-button-icon-color-hover: var(--system-infield-button-icon-color-hover); - --spectrum-infield-button-icon-color-down: var(--system-infield-button-icon-color-down); - --spectrum-infield-button-icon-color-key-focus: var(--system-infield-button-icon-color-key-focus); - --spectrum-infield-button-fill-justify-content: var(--system-infield-button-fill-justify-content); -} - -.spectrum-InfieldButton:disabled { - --spectrum-infield-button-background-color: var(--system-infield-button-disabled-background-color); - --spectrum-infield-button-background-color-hover: var(--system-infield-button-disabled-background-color-hover); - --spectrum-infield-button-background-color-down: var(--system-infield-button-disabled-background-color-down); - --spectrum-infield-button-border-color: var(--system-infield-button-disabled-border-color); - --spectrum-infield-button-icon-color: var(--system-infield-button-disabled-icon-color); - --spectrum-infield-button-icon-color-hover: var(--system-infield-button-disabled-icon-color-hover); - --spectrum-infield-button-icon-color-down: var(--system-infield-button-disabled-icon-color-down); - --spectrum-infield-button-icon-color-key-focus: var(--system-infield-button-disabled-icon-color-key-focus); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--sizeS { - --spectrum-infield-button-height: var(--system-infield-button-size-s-height); - --spectrum-infield-button-width: var(--system-infield-button-size-s-width); - --spectrum-infield-button-stacked-fill-padding-inline: var(--system-infield-button-size-s-stacked-fill-padding-inline); - --spectrum-infield-button-stacked-fill-padding-outer: var(--system-infield-button-size-s-stacked-fill-padding-outer); - --spectrum-infield-button-stacked-fill-padding-inner: var(--system-infield-button-size-s-stacked-fill-padding-inner); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--sizeL { - --spectrum-infield-button-height: var(--system-infield-button-size-l-height); - --spectrum-infield-button-width: var(--system-infield-button-size-l-width); - --spectrum-infield-button-stacked-fill-padding-inline: var(--system-infield-button-size-l-stacked-fill-padding-inline); - --spectrum-infield-button-stacked-fill-padding-outer: var(--system-infield-button-size-l-stacked-fill-padding-outer); - --spectrum-infield-button-stacked-fill-padding-inner: var(--system-infield-button-size-l-stacked-fill-padding-inner); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL { - --spectrum-infield-button-height: var(--system-infield-button-size-xl-height); - --spectrum-infield-button-width: var(--system-infield-button-size-xl-width); - --spectrum-infield-button-stacked-fill-padding-inline: var(--system-infield-button-size-xl-stacked-fill-padding-inline); - --spectrum-infield-button-stacked-fill-padding-outer: var(--system-infield-button-size-xl-stacked-fill-padding-outer); - --spectrum-infield-button-stacked-fill-padding-inner: var(--system-infield-button-size-xl-stacked-fill-padding-inner); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--top { - --spectrum-infield-button-width: var(--system-infield-button-top-width); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--bottom { - --spectrum-infield-button-width: var(--system-infield-button-bottom-width); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeS { - --spectrum-infield-button-width: var(--system-infield-button-top-size-s-width); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeS { - --spectrum-infield-button-width: var(--system-infield-button-bottom-size-s-width); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeL { - --spectrum-infield-button-width: var(--system-infield-button-top-size-l-width); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeL { - --spectrum-infield-button-width: var(--system-infield-button-bottom-size-l-width); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL { - --spectrum-infield-button-width: var(--system-infield-button-top-size-xl-width); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeXL { - --spectrum-infield-button-width: var(--system-infield-button-bottom-size-xl-width); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--quiet { - --spectrum-infield-button-background-color: var(--system-infield-button-quiet-background-color); - --spectrum-infield-button-background-color-hover: var(--system-infield-button-quiet-background-color-hover); - --spectrum-infield-button-background-color-down: var(--system-infield-button-quiet-background-color-down); - --spectrum-infield-button-background-color-key-focus: var(--system-infield-button-quiet-background-color-key-focus); - --spectrum-infield-border-color: var(--system-infield-button-quiet-infield-border-color); - --spectrum-infield-button-border-width: var(--system-infield-button-quiet-border-width); -} - -.spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled { - --spectrum-infield-button-background-color: var(--system-infield-button-quiet-disabled-background-color); - --spectrum-infield-button-border-color: var(--system-infield-button-quiet-disabled-border-color); -} diff --git a/tokens/dist/css/components/bridge/picker.css b/tokens/dist/css/components/bridge/picker.css deleted file mode 100644 index b23c1ab9cd1..00000000000 --- a/tokens/dist/css/components/bridge/picker.css +++ /dev/null @@ -1,139 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Picker { - --spectrum-picker-background-color-default: var(--system-picker-background-color-default); - --spectrum-picker-background-color-default-open: var(--system-picker-background-color-default-open); - --spectrum-picker-background-color-active: var(--system-picker-background-color-active); - --spectrum-picker-background-color-hover: var(--system-picker-background-color-hover); - --spectrum-picker-background-color-hover-open: var(--system-picker-background-color-hover-open); - --spectrum-picker-background-color-key-focus: var(--system-picker-background-color-key-focus); - --spectrum-picker-border-color-default: var(--system-picker-border-color-default); - --spectrum-picker-border-color-default-open: var(--system-picker-border-color-default-open); - --spectrum-picker-border-color-hover: var(--system-picker-border-color-hover); - --spectrum-picker-border-color-hover-open: var(--system-picker-border-color-hover-open); - --spectrum-picker-border-color-active: var(--system-picker-border-color-active); - --spectrum-picker-border-color-key-focus: var(--system-picker-border-color-key-focus); - --spectrum-picker-border-width: var(--system-picker-border-width); - --spectrum-picker-font-size: var(--system-picker-font-size); - --spectrum-picker-font-weight: var(--system-picker-font-weight); - --spectrum-picker-placeholder-font-style: var(--system-picker-placeholder-font-style); - --spectrum-picker-line-height: var(--system-picker-line-height); - --spectrum-picker-block-size: var(--system-picker-block-size); - --spectrum-picker-inline-size: var(--system-picker-inline-size); - --spectrum-picker-border-radius: var(--system-picker-border-radius); - --spectrum-picker-spacing-top-to-text: var(--system-picker-spacing-top-to-text); - --spectrum-picker-spacing-bottom-to-text: var(--system-picker-spacing-bottom-to-text); - --spectrum-picker-spacing-edge-to-text: var(--system-picker-spacing-edge-to-text); - --spectrum-picker-spacing-edge-to-text-quiet: var(--system-picker-spacing-edge-to-text-quiet); - --spectrum-picker-spacing-label-to-picker: var(--system-picker-spacing-label-to); - --spectrum-picker-spacing-text-to-icon: var(--system-picker-spacing-text-to-icon); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--system-picker-spacing-text-to-icon-inline-end); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--system-picker-spacing-icon-to-disclosure-icon); - --spectrum-picker-spacing-label-to-picker-quiet: var(--system-picker-spacing-label-to-quiet); - --spectrum-picker-spacing-top-to-alert-icon: var(--system-picker-spacing-top-to-alert-icon); - --spectrum-picker-spacing-top-to-progress-circle: var(--system-picker-spacing-top-to-progress-circle); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--system-picker-spacing-top-to-disclosure-icon); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--system-picker-spacing-edge-to-disclosure-icon); - --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--system-picker-spacing-edge-to-disclosure-icon-quiet); - --spectrum-picker-animation-duration: var(--system-picker-animation-duration); - --spectrum-picker-font-color-default: var(--system-picker-font-color-default); - --spectrum-picker-font-color-default-open: var(--system-picker-font-color-default-open); - --spectrum-picker-font-color-hover: var(--system-picker-font-color-hover); - --spectrum-picker-font-color-hover-open: var(--system-picker-font-color-hover-open); - --spectrum-picker-font-color-active: var(--system-picker-font-color-active); - --spectrum-picker-font-color-key-focus: var(--system-picker-font-color-key-focus); - --spectrum-picker-icon-color-default: var(--system-picker-icon-color-default); - --spectrum-picker-icon-color-default-open: var(--system-picker-icon-color-default-open); - --spectrum-picker-icon-color-hover: var(--system-picker-icon-color-hover); - --spectrum-picker-icon-color-hover-open: var(--system-picker-icon-color-hover-open); - --spectrum-picker-icon-color-active: var(--system-picker-icon-color-active); - --spectrum-picker-icon-color-key-focus: var(--system-picker-icon-color-key-focus); - --spectrum-picker-border-color-error-default: var(--system-picker-border-color-error-default); - --spectrum-picker-border-color-error-default-open: var(--system-picker-border-color-error-default-open); - --spectrum-picker-border-color-error-hover: var(--system-picker-border-color-error-hover); - --spectrum-picker-border-color-error-hover-open: var(--system-picker-border-color-error-hover-open); - --spectrum-picker-border-color-error-active: var(--system-picker-border-color-error-active); - --spectrum-picker-border-color-error-key-focus: var(--system-picker-border-color-error-key-focus); - --spectrum-picker-icon-color-error: var(--system-picker-icon-color-error); - --spectrum-picker-background-color-disabled: var(--system-picker-background-color-disabled); - --spectrum-picker-font-color-disabled: var(--system-picker-font-color-disabled); - --spectrum-picker-icon-color-disabled: var(--system-picker-icon-color-disabled); - --spectrum-picker-focus-indicator-gap: var(--system-picker-focus-indicator-gap); - --spectrum-picker-focus-indicator-thickness: var(--system-picker-focus-indicator-thickness); - --spectrum-picker-focus-indicator-color: var(--system-picker-focus-indicator-color); -} - -.spectrum-Picker + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--system-picker-next-to-popover-bottom-open-spacing-to-popover); -} - -.spectrum-Picker--sizeS { - --spectrum-picker-font-size: var(--system-picker-size-s-font-size); - --spectrum-picker-block-size: var(--system-picker-size-s-block-size); - --spectrum-picker-spacing-top-to-text: var(--system-picker-size-s-spacing-top-to-text); - --spectrum-picker-spacing-bottom-to-text: var(--system-picker-size-s-spacing-bottom-to-text); - --spectrum-picker-spacing-edge-to-text: var(--system-picker-size-s-spacing-edge-to-text); - --spectrum-picker-spacing-text-to-icon: var(--system-picker-size-s-spacing-text-to-icon); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--system-picker-size-s-spacing-text-to-icon-inline-end); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--system-picker-size-s-spacing-icon-to-disclosure-icon); - --spectrum-picker-spacing-label-to-picker-quiet: var(--system-picker-size-s-spacing-label-to-quiet); - --spectrum-picker-spacing-top-to-alert-icon: var(--system-picker-size-s-spacing-top-to-alert-icon); - --spectrum-picker-spacing-top-to-progress-circle: var(--system-picker-size-s-spacing-top-to-progress-circle); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--system-picker-size-s-spacing-top-to-disclosure-icon); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--system-picker-size-s-spacing-edge-to-disclosure-icon); -} - -.spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover); -} - -.spectrum-Picker--sizeL { - --spectrum-picker-font-size: var(--system-picker-size-l-font-size); - --spectrum-picker-block-size: var(--system-picker-size-l-block-size); - --spectrum-picker-spacing-top-to-text: var(--system-picker-size-l-spacing-top-to-text); - --spectrum-picker-spacing-bottom-to-text: var(--system-picker-size-l-spacing-bottom-to-text); - --spectrum-picker-spacing-edge-to-text: var(--system-picker-size-l-spacing-edge-to-text); - --spectrum-picker-spacing-text-to-icon: var(--system-picker-size-l-spacing-text-to-icon); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--system-picker-size-l-spacing-text-to-icon-inline-end); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--system-picker-size-l-spacing-icon-to-disclosure-icon); - --spectrum-picker-spacing-label-to-picker-quiet: var(--system-picker-size-l-spacing-label-to-quiet); - --spectrum-picker-spacing-top-to-alert-icon: var(--system-picker-size-l-spacing-top-to-alert-icon); - --spectrum-picker-spacing-top-to-progress-circle: var(--system-picker-size-l-spacing-top-to-progress-circle); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--system-picker-size-l-spacing-top-to-disclosure-icon); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--system-picker-size-l-spacing-edge-to-disclosure-icon); -} - -.spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover); -} - -.spectrum-Picker--sizeXL { - --spectrum-picker-font-size: var(--system-picker-size-xl-font-size); - --spectrum-picker-block-size: var(--system-picker-size-xl-block-size); - --spectrum-picker-spacing-top-to-text: var(--system-picker-size-xl-spacing-top-to-text); - --spectrum-picker-spacing-bottom-to-text: var(--system-picker-size-xl-spacing-bottom-to-text); - --spectrum-picker-spacing-edge-to-text: var(--system-picker-size-xl-spacing-edge-to-text); - --spectrum-picker-spacing-text-to-icon: var(--system-picker-size-xl-spacing-text-to-icon); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--system-picker-size-xl-spacing-text-to-icon-inline-end); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--system-picker-size-xl-spacing-icon-to-disclosure-icon); - --spectrum-picker-spacing-label-to-picker-quiet: var(--system-picker-size-xl-spacing-label-to-quiet); - --spectrum-picker-spacing-top-to-alert-icon: var(--system-picker-size-xl-spacing-top-to-alert-icon); - --spectrum-picker-spacing-top-to-progress-circle: var(--system-picker-size-xl-spacing-top-to-progress-circle); - --spectrum-picker-spacing-top-to-disclosure-icon: var(--system-picker-size-xl-spacing-top-to-disclosure-icon); - --spectrum-picker-spacing-edge-to-disclosure-icon: var(--system-picker-size-xl-spacing-edge-to-disclosure-icon); -} - -.spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover); -} diff --git a/tokens/dist/css/components/bridge/pickerbutton.css b/tokens/dist/css/components/bridge/pickerbutton.css deleted file mode 100644 index e8c9cfc834f..00000000000 --- a/tokens/dist/css/components/bridge/pickerbutton.css +++ /dev/null @@ -1,86 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--system-picker-button-background-color); - --spectrum-picker-button-background-color-hover: var(--system-picker-button-background-color-hover); - --spectrum-picker-button-background-color-down: var(--system-picker-button-background-color-down); - --spectrum-picker-button-background-color-key-focus: var(--system-picker-button-background-color-key-focus); - --spectrum-picker-button-border-color: var(--system-picker-button-border-color); - --spectrum-picker-button-border-radius: var(--system-picker-button-border-radius); - --spectrum-picker-button-border-radius-rounded-sided: var(--system-picker-button-border-radius-rounded-sided); - --spectrum-picker-button-border-radius-sided: var(--system-picker-button-border-radius-sided); - --spectrum-picker-button-border-width: var(--system-picker-button-border-width); - --spectrum-picker-button-height: var(--system-picker-button-height); - --spectrum-picker-button-width: var(--system-picker-button-width); - --spectrum-picker-button-gap: var(--system-picker-button-gap); - --spectrum-picker-button-padding: var(--system-picker-button-padding); - --spectrum-picker-button-label-padding: var(--system-picker-button-label-padding); - --spectrum-picker-button-fill-padding: var(--system-picker-button-fill-padding); - --spectrum-picker-button-border-radius-rounded: var(--system-picker-button-border-radius-rounded); - --spectrum-picker-button-icon-color: var(--system-picker-button-icon-color); - --spectrum-picker-button-icon-color-hover: var(--system-picker-button-icon-color-hover); - --spectrum-picker-button-icon-color-down: var(--system-picker-button-icon-color-down); - --spectrum-picker-button-icon-color-key-focus: var(--system-picker-button-icon-color-key-focus); - --spectrum-picker-button-font-color: var(--system-picker-button-font-color); - --spectrum-picker-button-font-color-hover: var(--system-picker-button-font-color-hover); - --spectrum-picker-button-font-color-down: var(--system-picker-button-font-color-down); - --spectrum-picker-button-font-color-key-focus: var(--system-picker-button-font-color-key-focus); - --spectrum-picker-button-font-family: var(--system-picker-button-font-family); - --spectrum-picker-button-font-style: var(--system-picker-button-font-style); - --spectrum-picker-button-font-weight: var(--system-picker-button-font-weight); - --spectrum-picker-button-font-size: var(--system-picker-button-font-size); - --spectrum-picker-button-background-animation-duration: var(--system-picker-button-background-animation-duration); - --spectrum-picker-button-background-color-disabled: var(--system-picker-button-background-color-disabled); - --spectrum-picker-button-background-color-hover-disabled: var(--system-picker-button-background-color-hover-disabled); - --spectrum-picker-button-background-color-down-disabled: var(--system-picker-button-background-color-down-disabled); - --spectrum-picker-button-border-color-disabled: var(--system-picker-button-border-color-disabled); - --spectrum-picker-button-font-color-disabled: var(--system-picker-button-font-color-disabled); - --spectrum-picker-button-font-color-hover-disabled: var(--system-picker-button-font-color-hover-disabled); - --spectrum-picker-button-font-color-down-disabled: var(--system-picker-button-font-color-down-disabled); - --spectrum-picker-button-icon-color-disabled: var(--system-picker-button-icon-color-disabled); - --spectrum-picker-button-icon-color-hover-disabled: var(--system-picker-button-icon-color-hover-disabled); - --spectrum-picker-button-icon-color-down-disabled: var(--system-picker-button-icon-color-down-disabled); -} - -.spectrum-PickerButton.spectrum-PickerButton--quiet { - --spectrum-picker-button-background-color: var(--system-picker-button-quiet-background-color); - --spectrum-picker-button-background-color-hover: var(--system-picker-button-quiet-background-color-hover); - --spectrum-picker-button-background-color-down: var(--system-picker-button-quiet-background-color-down); - --spectrum-picker-button-background-color-key-focus: var(--system-picker-button-quiet-background-color-key-focus); - --spectrum-picker-button-border-color: var(--system-picker-button-quiet-border-color); -} - -.spectrum-PickerButton.spectrum-PickerButton--sizeS { - --spectrum-picker-button-height: var(--system-picker-button-size-s-height); - --spectrum-picker-button-width: var(--system-picker-button-size-s-width); - --spectrum-picker-button-label-padding: var(--system-picker-button-size-s-label-padding); - --spectrum-picker-button-font-size: var(--system-picker-button-size-s-font-size); - --spectrum-picker-button-fill-padding: var(--system-picker-button-size-s-fill-padding); -} - -.spectrum-PickerButton.spectrum-PickerButton--sizeL { - --spectrum-picker-button-height: var(--system-picker-button-size-l-height); - --spectrum-picker-button-width: var(--system-picker-button-size-l-width); - --spectrum-picker-button-label-padding: var(--system-picker-button-size-l-label-padding); - --spectrum-picker-button-font-size: var(--system-picker-button-size-l-font-size); - --spectrum-picker-button-fill-padding: var(--system-picker-button-size-l-fill-padding); -} - -.spectrum-PickerButton.spectrum-PickerButton--sizeXL { - --spectrum-picker-button-height: var(--system-picker-button-size-xl-height); - --spectrum-picker-button-width: var(--system-picker-button-size-xl-width); - --spectrum-picker-button-label-padding: var(--system-picker-button-size-xl-label-padding); - --spectrum-picker-button-font-size: var(--system-picker-button-size-xl-font-size); - --spectrum-picker-button-fill-padding: var(--system-picker-button-size-xl-fill-padding); -} diff --git a/tokens/dist/css/components/bridge/popover.css b/tokens/dist/css/components/bridge/popover.css deleted file mode 100644 index cd5801d5f68..00000000000 --- a/tokens/dist/css/components/bridge/popover.css +++ /dev/null @@ -1,29 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Popover { - --spectrum-popover-border-width: var(--system-popover-border-width); - --spectrum-popover-animation-distance: var(--system-popover-animation-distance); - --spectrum-popover-background-color: var(--system-popover-background-color); - --spectrum-popover-border-color: var(--system-popover-border-color); - --spectrum-popover-content-area-spacing-vertical: var(--system-popover-content-area-spacing-vertical); - --spectrum-popover-shadow-horizontal: var(--system-popover-shadow-horizontal); - --spectrum-popover-shadow-vertical: var(--system-popover-shadow-vertical); - --spectrum-popover-shadow-blur: var(--system-popover-shadow-blur); - --spectrum-popover-shadow-color: var(--system-popover-shadow-color); - --spectrum-popover-corner-radius: var(--system-popover-corner-radius); - --spectrum-popover-pointer-width: var(--system-popover-pointer-width); - --spectrum-popover-pointer-height: var(--system-popover-pointer-height); - --spectrum-popover-pointer-edge-offset: var(--system-popover-pointer-edge-offset); - --spectrum-popover-pointer-edge-spacing: var(--system-popover-pointer-edge-spacing); -} diff --git a/tokens/dist/css/components/bridge/radio.css b/tokens/dist/css/components/bridge/radio.css deleted file mode 100644 index abcc197663c..00000000000 --- a/tokens/dist/css/components/bridge/radio.css +++ /dev/null @@ -1,106 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Radio { - --spectrum-radio-button-border-color-default: var(--system-radio-button-border-color-default); - --spectrum-radio-button-border-color-hover: var(--system-radio-button-border-color-hover); - --spectrum-radio-button-border-color-down: var(--system-radio-button-border-color-down); - --spectrum-radio-button-border-color-focus: var(--system-radio-button-border-color-focus); - --spectrum-radio-neutral-content-color: var(--system-radio-neutral-content-color); - --spectrum-radio-neutral-content-color-hover: var(--system-radio-neutral-content-color-hover); - --spectrum-radio-neutral-content-color-down: var(--system-radio-neutral-content-color-down); - --spectrum-radio-neutral-content-color-focus: var(--system-radio-neutral-content-color-focus); - --spectrum-radio-focus-indicator-thickness: var(--system-radio-focus-indicator-thickness); - --spectrum-radio-focus-indicator-gap: var(--system-radio-focus-indicator-gap); - --spectrum-radio-focus-indicator-color: var(--system-radio-focus-indicator-color); - --spectrum-radio-disabled-content-color: var(--system-radio-disabled-content-color); - --spectrum-radio-disabled-border-color: var(--system-radio-disabled-border-color); - --spectrum-radio-emphasized-accent-color: var(--system-radio-emphasized-accent-color); - --spectrum-radio-emphasized-accent-color-hover: var(--system-radio-emphasized-accent-color-hover); - --spectrum-radio-emphasized-accent-color-down: var(--system-radio-emphasized-accent-color-down); - --spectrum-radio-emphasized-accent-color-focus: var(--system-radio-emphasized-accent-color-focus); - --spectrum-radio-border-width: var(--system-radio-border-width); - --spectrum-radio-button-background-color: var(--system-radio-button-background-color); - --spectrum-radio-button-checked-border-color-default: var(--system-radio-button-checked-border-color-default); - --spectrum-radio-button-checked-border-color-hover: var(--system-radio-button-checked-border-color-hover); - --spectrum-radio-button-checked-border-color-down: var(--system-radio-button-checked-border-color-down); - --spectrum-radio-button-checked-border-color-focus: var(--system-radio-button-checked-border-color-focus); - --spectrum-radio-text-to-control: var(--system-radio-text-to-control); - --spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text); - --spectrum-radio-label-bottom-to-text: var(--system-radio-label-bottom-to-text); - --spectrum-radio-font-size: var(--system-radio-font-size); - --spectrum-radio-line-height: var(--system-radio-line-height); - --spectrum-radio-animation-duration: var(--system-radio-animation-duration); - --spectrum-radio-height: var(--system-radio-height); - --spectrum-radio-button-control-size: var(--system-radio-button-control-size); - --spectrum-radio-button-top-to-control: var(--system-radio-button-top-to-control); -} - -.spectrum-Radio:lang(ja) { - --spectrum-radio-line-height-cjk: var(--system-radio-lang-ja-line-height-cjk); -} - -.spectrum-Radio:lang(zh) { - --spectrum-radio-line-height-cjk: var(--system-radio-lang-zh-line-height-cjk); -} - -.spectrum-Radio:lang(ko) { - --spectrum-radio-line-height-cjk: var(--system-radio-lang-ko-line-height-cjk); -} - -.spectrum-Radio--sizeS { - --spectrum-radio-height: var(--system-radio-size-s-height); - --spectrum-radio-button-control-size: var(--system-radio-size-s-button-control-size); - --spectrum-radio-text-to-control: var(--system-radio-size-s-text-to-control); - --spectrum-radio-label-top-to-text: var(--system-radio-size-s-label-top-to-text); - --spectrum-radio-label-bottom-to-text: var(--system-radio-size-s-label-bottom-to-text); - --spectrum-radio-button-top-to-control: var(--system-radio-size-s-button-top-to-control); - --spectrum-radio-font-size: var(--system-radio-size-s-font-size); -} - -.spectrum-Radio--sizeM { - --spectrum-radio-height: var(--system-radio-size-m-height); - --spectrum-radio-button-control-size: var(--system-radio-size-m-button-control-size); - --spectrum-radio-text-to-control: var(--system-radio-size-m-text-to-control); - --spectrum-radio-label-top-to-text: var(--system-radio-size-m-label-top-to-text); - --spectrum-radio-label-bottom-to-text: var(--system-radio-size-m-label-bottom-to-text); - --spectrum-radio-button-top-to-control: var(--system-radio-size-m-button-top-to-control); - --spectrum-radio-font-size: var(--system-radio-size-m-font-size); -} - -.spectrum-Radio--sizeL { - --spectrum-radio-height: var(--system-radio-size-l-height); - --spectrum-radio-button-control-size: var(--system-radio-size-l-button-control-size); - --spectrum-radio-text-to-control: var(--system-radio-size-l-text-to-control); - --spectrum-radio-label-top-to-text: var(--system-radio-size-l-label-top-to-text); - --spectrum-radio-label-bottom-to-text: var(--system-radio-size-l-label-bottom-to-text); - --spectrum-radio-button-top-to-control: var(--system-radio-size-l-button-top-to-control); - --spectrum-radio-font-size: var(--system-radio-size-l-font-size); -} - -.spectrum-Radio--sizeXL { - --spectrum-radio-height: var(--system-radio-size-xl-height); - --spectrum-radio-button-control-size: var(--system-radio-size-xl-button-control-size); - --spectrum-radio-text-to-control: var(--system-radio-size-xl-text-to-control); - --spectrum-radio-label-top-to-text: var(--system-radio-size-xl-label-top-to-text); - --spectrum-radio-label-bottom-to-text: var(--system-radio-size-xl-label-bottom-to-text); - --spectrum-radio-button-top-to-control: var(--system-radio-size-xl-button-top-to-control); - --spectrum-radio-font-size: var(--system-radio-size-xl-font-size); -} - -.spectrum-Radio--emphasized { - --spectrum-radio-button-checked-border-color-default: var(--system-radio-emphasized-button-checked-border-color-default); - --spectrum-radio-button-checked-border-color-hover: var(--system-radio-emphasized-button-checked-border-color-hover); - --spectrum-radio-button-checked-border-color-down: var(--system-radio-emphasized-button-checked-border-color-down); - --spectrum-radio-button-checked-border-color-focus: var(--system-radio-emphasized-button-checked-border-color-focus); -} diff --git a/tokens/dist/css/components/bridge/rating.css b/tokens/dist/css/components/bridge/rating.css deleted file mode 100644 index 4d043b0681f..00000000000 --- a/tokens/dist/css/components/bridge/rating.css +++ /dev/null @@ -1,34 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Rating { - --spectrum-rating-icon-color-default: var(--system-rating-icon-color-default); - --spectrum-rating-icon-color-hover: var(--system-rating-icon-color-hover); - --spectrum-rating-icon-color-down: var(--system-rating-icon-color-down); - --spectrum-rating-icon-color-key-focus: var(--system-rating-icon-color-key-focus); - --spectrum-rating-icon-height: var(--system-rating-icon-height); - --spectrum-rating-icon-width: var(--system-rating-icon-width); - --spectrum-rating-border-radius: var(--system-rating-border-radius); - --spectrum-rating-focus-indicator-thickness: var(--system-rating-focus-indicator-thickness); - --spectrum-rating-focus-indicator-color: var(--system-rating-focus-indicator-color); - --spectrum-rating-focus-indicator-gap: var(--system-rating-focus-indicator-gap); - --spectrum-rating-icon-spacing-vertical-top: var(--system-rating-icon-spacing-vertical-top); - --spectrum-rating-indicator-border-radius: var(--system-rating-indicator-border-radius); - --spectrum-rating-indicator-height: var(--system-rating-indicator-height); - --spectrum-rating-emphasized-icon-color-default: var(--system-rating-emphasized-icon-color-default); - --spectrum-rating-emphasized-icon-color-hover: var(--system-rating-emphasized-icon-color-hover); - --spectrum-rating-emphasized-icon-color-down: var(--system-rating-emphasized-icon-color-down); - --spectrum-rating-emphasized-icon-color-key-focus: var(--system-rating-emphasized-icon-color-key-focus); - --spectrum-rating-icon-color-disabled: var(--system-rating-icon-color-disabled); - --spectrum-rating-icon-count: var(--system-rating-icon-count); -} diff --git a/tokens/dist/css/components/bridge/search.css b/tokens/dist/css/components/bridge/search.css deleted file mode 100644 index 58ed2192a6f..00000000000 --- a/tokens/dist/css/components/bridge/search.css +++ /dev/null @@ -1,110 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Search { - --spectrum-search-border-radius: var(--system-search-border-radius); - --spectrum-search-edge-to-visual: var(--system-search-edge-to-visual); - --spectrum-search-border-color-default: var(--system-search-border-color-default); - --spectrum-search-border-color-hover: var(--system-search-border-color-hover); - --spectrum-search-border-color-focus: var(--system-search-border-color-focus); - --spectrum-search-border-color-focus-hover: var(--system-search-border-color-focus-hover); - --spectrum-search-border-color-key-focus: var(--system-search-border-color-key-focus); - --spectrum-search-inline-size: var(--system-search-inline-size); - --spectrum-search-block-size: var(--system-search-block-size); - --spectrum-search-button-inline-size: var(--system-search-button-inline-size); - --spectrum-search-min-inline-size: var(--system-search-min-inline-size); - --spectrum-search-icon-size: var(--system-search-icon-size); - --spectrum-search-text-to-icon: var(--system-search-text-to-icon); - --spectrum-search-to-help-text: var(--system-search-to-help-text); - --spectrum-search-top-to-text: var(--system-search-top-to-text); - --spectrum-search-bottom-to-text: var(--system-search-bottom-to-text); - --spectrum-search-focus-indicator-thickness: var(--system-search-focus-indicator-thickness); - --spectrum-search-focus-indicator-gap: var(--system-search-focus-indicator-gap); - --spectrum-search-focus-indicator-color: var(--system-search-focus-indicator-color); - --spectrum-search-font-family: var(--system-search-font-family); - --spectrum-search-font-weight: var(--system-search-font-weight); - --spectrum-search-font-style: var(--system-search-font-style); - --spectrum-search-line-height: var(--system-search-line-height); - --spectrum-search-color-default: var(--system-search-color-default); - --spectrum-search-color-hover: var(--system-search-color-hover); - --spectrum-search-color-focus: var(--system-search-color-focus); - --spectrum-search-color-focus-hover: var(--system-search-color-focus-hover); - --spectrum-search-color-key-focus: var(--system-search-color-key-focus); - --spectrum-search-border-width: var(--system-search-border-width); - --spectrum-search-background-color: var(--system-search-background-color); - --spectrum-search-color-disabled: var(--system-search-color-disabled); - --spectrum-search-background-color-disabled: var(--system-search-background-color-disabled); - --spectrum-search-border-color-disabled: var(--system-search-border-color-disabled); - --mod-textfield-font-family: var(--system-search-textfield-font-family); - --mod-textfield-font-weight: var(--system-search-textfield-font-weight); - --mod-textfield-corner-radius: var(--system-search-textfield-corner-radius); - --mod-textfield-border-width: var(--system-search-textfield-border-width); - --mod-textfield-focus-indicator-gap: var(--system-search-textfield-focus-indicator-gap); - --mod-textfield-focus-indicator-width: var(--system-search-textfield-focus-indicator-width); - --mod-textfield-focus-indicator-color: var(--system-search-textfield-focus-indicator-color); - --mod-textfield-text-color-default: var(--system-search-textfield-text-color-default); - --mod-textfield-text-color-hover: var(--system-search-textfield-text-color-hover); - --mod-textfield-text-color-focus: var(--system-search-textfield-text-color-focus); - --mod-textfield-text-color-focus-hover: var(--system-search-textfield-text-color-focus-hover); - --mod-textfield-text-color-keyboard-focus: var(--system-search-textfield-text-color-keyboard-focus); - --mod-textfield-text-color-disabled: var(--system-search-textfield-text-color-disabled); - --mod-textfield-border-color: var(--system-search-textfield-border-color); - --mod-textfield-border-color-hover: var(--system-search-textfield-border-color-hover); - --mod-textfield-border-color-focus: var(--system-search-textfield-border-color-focus); - --mod-textfield-border-color-focus-hover: var(--system-search-textfield-border-color-focus-hover); - --mod-textfield-border-color-keyboard-focus: var(--system-search-textfield-border-color-keyboard-focus); - --mod-textfield-border-color-disabled: var(--system-search-textfield-border-color-disabled); - --mod-textfield-background-color: var(--system-search-textfield-background-color); - --mod-textfield-background-color-disabled: var(--system-search-textfield-background-color-disabled); -} - -.spectrum-Search--sizeS { - --spectrum-search-border-radius: var(--system-search-size-s-border-radius); - --spectrum-search-edge-to-visual: var(--system-search-size-s-edge-to-visual); - --spectrum-search-block-size: var(--system-search-size-s-block-size); - --spectrum-search-icon-size: var(--system-search-size-s-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-s-text-to-icon); -} - -.spectrum-Search--sizeL { - --spectrum-search-border-radius: var(--system-search-size-l-border-radius); - --spectrum-search-edge-to-visual: var(--system-search-size-l-edge-to-visual); - --spectrum-search-block-size: var(--system-search-size-l-block-size); - --spectrum-search-icon-size: var(--system-search-size-l-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-l-text-to-icon); -} - -.spectrum-Search--sizeXL { - --spectrum-search-border-radius: var(--system-search-size-xl-border-radius); - --spectrum-search-edge-to-visual: var(--system-search-size-xl-edge-to-visual); - --spectrum-search-block-size: var(--system-search-size-xl-block-size); - --spectrum-search-icon-size: var(--system-search-size-xl-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-xl-text-to-icon); -} - -.spectrum-Search--quiet { - --spectrum-search-quiet-button-offset: var(--system-search-quiet-quiet-button-offset); - --spectrum-search-background-color: var(--system-search-quiet-background-color); - --spectrum-search-background-color-disabled: var(--system-search-quiet-background-color-disabled); - --spectrum-search-border-color-disabled: var(--system-search-quiet-border-color-disabled); -} - -.spectrum-Search--quiet.spectrum-Search { - --spectrum-search-border-radius: var(--system-search-quiet-border-radius); - --spectrum-search-edge-to-visual: var(--system-search-quiet-edge-to-visual); -} - -.spectrum-Search--sizeM { - --spectrum-search-border-radius: var(--system-search-size-m-border-radius); - --spectrum-search-edge-to-visual: var(--system-search-size-m-edge-to-visual); -} diff --git a/tokens/dist/css/components/bridge/slider.css b/tokens/dist/css/components/bridge/slider.css deleted file mode 100644 index 5122c4ab005..00000000000 --- a/tokens/dist/css/components/bridge/slider.css +++ /dev/null @@ -1,103 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Slider { - --spectrum-slider-track-color: var(--system-slider-track-color); - --spectrum-slider-track-fill-color: var(--system-slider-track-fill-color); - --spectrum-slider-ramp-track-color: var(--system-slider-ramp-track-color); - --spectrum-slider-ramp-track-color-disabled: var(--system-slider-ramp-track-color-disabled); - --spectrum-slider-handle-background-color: var(--system-slider-handle-background-color); - --spectrum-slider-handle-background-color-disabled: var(--system-slider-handle-background-color-disabled); - --spectrum-slider-ramp-handle-background-color: var(--system-slider-ramp-handle-background-color); - --spectrum-slider-ticks-handle-background-color: var(--system-slider-ticks-handle-background-color); - --spectrum-slider-handle-border-color: var(--system-slider-handle-border-color); - --spectrum-slider-handle-disabled-background-color: var(--system-slider-handle-disabled-background-color); - --spectrum-slider-tick-mark-color: var(--system-slider-tick-mark-color); - --spectrum-slider-handle-border-color-hover: var(--system-slider-handle-border-color-hover); - --spectrum-slider-handle-border-color-down: var(--system-slider-handle-border-color-down); - --spectrum-slider-handle-border-color-key-focus: var(--system-slider-handle-border-color-key-focus); - --spectrum-slider-handle-focus-ring-color-key-focus: var(--system-slider-handle-focus-ring-color-key-focus); - --spectrum-slider-font-size: var(--system-slider-font-size); - --spectrum-slider-handle-size: var(--system-slider-handle-size); - --spectrum-slider-control-height: var(--system-slider-control-height); - --spectrum-slider-handle-border-radius: var(--system-slider-handle-border-radius); - --spectrum-slider-handle-border-width-down: var(--system-slider-handle-border-width-down); - --spectrum-slider-label-top-to-text: var(--system-slider-label-top-to-text); - --spectrum-slider-control-to-field-label: var(--system-slider-control-to-field-label); - --spectrum-slider-value-side-padding-inline: var(--system-slider-value-side-padding-inline); - --spectrum-slider-value-inline-size: var(--system-slider-value-inline-size); - --spectrum-slider-cjk-line-height: var(--system-slider-cjk-line-height); - --spectrum-slider-min-size: var(--system-slider-min-size); - --spectrum-slider-track-corner-radius: var(--system-slider-track-corner-radius); - --spectrum-slider-label-margin-start: var(--system-slider-label-margin-start); - --spectrum-slider-handle-border-width: var(--system-slider-handle-border-width); - --spectrum-slider-handle-margin-left: var(--system-slider-handle-margin-left); - --spectrum-slider-controls-margin: var(--system-slider-controls-margin); - --spectrum-slider-track-margin-offset: var(--system-slider-track-margin-offset); - --spectrum-slider-track-middle-handleoffset: var(--system-slider-track-middle-handleoffset); - --spectrum-slider-input-top-size: var(--system-slider-input-top-size); - --spectrum-slider-track-fill-thickness: var(--system-slider-track-fill-thickness); - --spectrum-slider-tick-mark-width: var(--system-slider-tick-mark-width); - --spectrum-slider-tick-mark-border-radius: var(--system-slider-tick-mark-border-radius); - --spectrum-slider-tick-handle-background-color: var(--system-slider-tick-handle-background-color); - --spectrum-slider-track-color-disabled: var(--system-slider-track-color-disabled); - --spectrum-slider-track-fill-color-disabled: var(--system-slider-track-fill-color-disabled); - --spectrum-slider-handle-border-color-disabled: var(--system-slider-handle-border-color-disabled); - --spectrum-slider-label-text-color: var(--system-slider-label-text-color); - --spectrum-slider-tick-label-color: var(--system-slider-tick-label-color); - --spectrum-slider-label-text-color-disabled: var(--system-slider-label-text-color-disabled); - --spectrum-slider-tick-mark-color-disabled: var(--system-slider-tick-mark-color-disabled); - --spectrum-slider-ramp-handle-border-color-active: var(--system-slider-ramp-handle-border-color-active); - --spectrum-slider-input-left: var(--system-slider-input-left); - --spectrum-slider-track-handleoffset: var(--system-slider-track-handleoffset); - --spectrum-slider-range-track-reset: var(--system-slider-range-track-reset); -} - -.spectrum-Slider:dir(rtl) { - --spectrum-logical-rotation: var(--system-slider-dir-rtl-logical-rotation); -} - -.spectrum-Slider--sizeS { - --spectrum-slider-font-size: var(--system-slider-size-s-font-size); - --spectrum-slider-handle-size: var(--system-slider-size-s-handle-size); - --spectrum-slider-control-height: var(--system-slider-size-s-control-height); - --spectrum-slider-handle-border-radius: var(--system-slider-size-s-handle-border-radius); - --spectrum-slider-handle-border-width-down: var(--system-slider-size-s-handle-border-width-down); - --spectrum-slider-label-top-to-text: var(--system-slider-size-s-label-top-to-text); - --spectrum-slider-control-to-field-label: var(--system-slider-size-s-control-to-field-label); - --spectrum-slider-value-side-padding-inline: var(--system-slider-size-s-value-side-padding-inline); -} - -.spectrum-Slider--sizeL { - --spectrum-slider-font-size: var(--system-slider-size-l-font-size); - --spectrum-slider-handle-size: var(--system-slider-size-l-handle-size); - --spectrum-slider-control-height: var(--system-slider-size-l-control-height); - --spectrum-slider-handle-border-radius: var(--system-slider-size-l-handle-border-radius); - --spectrum-slider-handle-border-width-down: var(--system-slider-size-l-handle-border-width-down); - --spectrum-slider-label-top-to-text: var(--system-slider-size-l-label-top-to-text); - --spectrum-slider-control-to-field-label: var(--system-slider-size-l-control-to-field-label); - --spectrum-slider-value-side-padding-inline: var(--system-slider-size-l-value-side-padding-inline); - --spectrum-slider-value-inline-size: var(--system-slider-size-l-value-inline-size); -} - -.spectrum-Slider--sizeXL { - --spectrum-slider-font-size: var(--system-slider-size-xl-font-size); - --spectrum-slider-handle-size: var(--system-slider-size-xl-handle-size); - --spectrum-slider-control-height: var(--system-slider-size-xl-control-height); - --spectrum-slider-handle-border-radius: var(--system-slider-size-xl-handle-border-radius); - --spectrum-slider-handle-border-width-down: var(--system-slider-size-xl-handle-border-width-down); - --spectrum-slider-label-top-to-text: var(--system-slider-size-xl-label-top-to-text); - --spectrum-slider-control-to-field-label: var(--system-slider-size-xl-control-to-field-label); - --spectrum-slider-value-side-padding-inline: var(--system-slider-size-xl-value-side-padding-inline); - --spectrum-slider-value-inline-size: var(--system-slider-size-xl-value-inline-size); -} diff --git a/tokens/dist/css/components/bridge/stepper.css b/tokens/dist/css/components/bridge/stepper.css deleted file mode 100644 index dc5181c4671..00000000000 --- a/tokens/dist/css/components/bridge/stepper.css +++ /dev/null @@ -1,118 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Stepper { - --spectrum-stepper-border-width: var(--system-stepper-border-width); - --spectrum-stepper-buttons-border-style: var(--system-stepper-buttons-border-style); - --spectrum-stepper-buttons-border-width: var(--system-stepper-buttons-border-width); - --spectrum-stepper-buttons-border-color: var(--system-stepper-buttons-border-color); - --spectrum-stepper-buttons-background-color: var(--system-stepper-buttons-background-color); - --spectrum-stepper-buttons-border-color-hover: var(--system-stepper-buttons-border-color-hover); - --spectrum-stepper-buttons-border-color-focus: var(--system-stepper-buttons-border-color-focus); - --spectrum-stepper-buttons-border-color-keyboard-focus: var(--system-stepper-buttons-border-color-keyboard-focus); - --spectrum-stepper-button-border-radius-reset: var(--system-stepper-button-border-radius-reset); - --spectrum-stepper-button-border-width: var(--system-stepper-button-border-width); - --spectrum-stepper-border-color: var(--system-stepper-border-color); - --spectrum-stepper-border-color-hover: var(--system-stepper-border-color-hover); - --spectrum-stepper-border-color-focus: var(--system-stepper-border-color-focus); - --spectrum-stepper-border-color-focus-hover: var(--system-stepper-border-color-focus-hover); - --spectrum-stepper-border-color-keyboard-focus: var(--system-stepper-border-color-keyboard-focus); - --spectrum-stepper-border-color-invalid: var(--system-stepper-border-color-invalid); - --spectrum-stepper-border-color-focus-invalid: var(--system-stepper-border-color-focus-invalid); - --spectrum-stepper-border-color-focus-hover-invalid: var(--system-stepper-border-color-focus-hover-invalid); - --spectrum-stepper-border-color-keyboard-focus-invalid: var(--system-stepper-border-color-keyboard-focus-invalid); - --spectrum-stepper-button-background-color-focus: var(--system-stepper-button-background-color-focus); - --spectrum-stepper-button-background-color-keyboard-focus: var(--system-stepper-button-background-color-keyboard-focus); - --spectrum-stepper-height: var(--system-stepper-height); - --spectrum-stepper-border-radius: var(--system-stepper-border-radius); - --spectrum-stepper-button-width: var(--system-stepper-button-width); - --spectrum-stepper-button-padding: var(--system-stepper-button-padding); - --spectrum-stepper-width: var(--system-stepper-width); - --spectrum-stepper-focus-indicator-width: var(--system-stepper-focus-indicator-width); - --spectrum-stepper-focus-indicator-gap: var(--system-stepper-focus-indicator-gap); - --spectrum-stepper-focus-indicator-color: var(--system-stepper-focus-indicator-color); - --spectrum-stepper-button-offset: var(--system-stepper-button-offset); - --spectrum-stepper-animation-duration: var(--system-stepper-animation-duration); - --mod-infield-button-border-color: var(--system-stepper-infield-button-border-color); - --mod-infield-button-border-width: var(--system-stepper-infield-button-border-width); - --mod-textfield-border-width: var(--system-stepper-textfield-border-width); -} - -.spectrum-Stepper.spectrum-Stepper--sizeS { - --spectrum-stepper-button-width: var(--system-stepper-size-s-button-width); - --spectrum-stepper-height: var(--system-stepper-size-s-height); -} - -.spectrum-Stepper.spectrum-Stepper--sizeL { - --spectrum-stepper-button-width: var(--system-stepper-size-l-button-width); - --spectrum-stepper-height: var(--system-stepper-size-l-height); -} - -.spectrum-Stepper.spectrum-Stepper--sizeXL { - --spectrum-stepper-button-width: var(--system-stepper-size-xl-button-width); - --spectrum-stepper-height: var(--system-stepper-size-xl-height); -} - -.spectrum-Stepper.spectrum-Stepper--quiet { - --mod-infield-button-width-stacked: var(--system-stepper-quiet-infield-button-width-stacked); - --mod-textfield-focus-indicator-color: var(--system-stepper-quiet-textfield-focus-indicator-color); -} - -.spectrum-Stepper.is-disabled { - --mod-infield-button-border-color-quiet-disabled: var(--system-stepper-disabled-infield-button-border-color-quiet-disabled); - --spectrum-stepper-buttons-background-color: var(--system-stepper-disabled-buttons-background-color); - --spectrum-stepper-buttons-border-width: var(--system-stepper-disabled-buttons-border-width); -} - -.spectrum-Stepper.is-invalid { - --spectrum-stepper-border-color: var(--system-stepper-invalid-border-color); - --spectrum-stepper-border-color-hover: var(--system-stepper-invalid-border-color-hover); - --spectrum-stepper-border-color-focus: var(--system-stepper-invalid-border-color-focus); - --spectrum-stepper-border-color-focus-hover: var(--system-stepper-invalid-border-color-focus-hover); - --spectrum-stepper-border-color-keyboard-focus: var(--system-stepper-invalid-border-color-keyboard-focus); - --mod-infield-button-border-color: var(--system-stepper-invalid-infield-button-border-color); - --mod-textfield-icon-spacing-inline-start-invalid: var(--system-stepper-invalid-textfield-icon-spacing-inline-start-invalid); - --mod-stepper-border-color: var(--system-stepper-invalid-border-color); - --mod-stepper-border-color-hover: var(--system-stepper-invalid-border-color-hover); - --mod-stepper-border-color-focus: var(--system-stepper-invalid-border-color-focus); - --mod-stepper-border-color-focus-hover: var(--system-stepper-invalid-border-color-focus-hover); - --mod-stepper-border-color-keyboard-focus: var(--system-stepper-invalid-border-color-keyboard-focus); -} - -.spectrum-Stepper.is-invalid.is-focused { - --mod-infield-button-border-color: var(--system-stepper-invalid-focused-infield-button-border-color); -} - -.spectrum-Stepper.is-invalid:focus { - --mod-infield-button-border-color: var(--system-stepper-invalid-focus-infield-button-border-color); -} - -.spectrum-Stepper.is-invalid:hover { - --mod-infield-button-border-color: var(--system-stepper-invalid-hover-infield-button-border-color); -} - -.spectrum-Stepper.is-invalid.is-focused:hover { - --mod-infield-button-border-color: var(--system-stepper-invalid-focused-hover-infield-button-border-color); -} - -.spectrum-Stepper.is-invalid:focus:hover { - --mod-infield-button-border-color: var(--system-stepper-invalid-focus-hover-infield-button-border-color); -} - -.spectrum-Stepper.is-invalid.is-keyboardFocused { - --mod-infield-button-border-color: var(--system-stepper-invalid-keyboard-focused-infield-button-border-color); -} - -.spectrum-Stepper.is-invalid:focus-visible { - --mod-infield-button-border-color: var(--system-stepper-invalid-focus-visible-infield-button-border-color); -} diff --git a/tokens/dist/css/components/bridge/switch.css b/tokens/dist/css/components/bridge/switch.css deleted file mode 100644 index 1e3303731a2..00000000000 --- a/tokens/dist/css/components/bridge/switch.css +++ /dev/null @@ -1,94 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Switch { - --spectrum-switch-handle-border-color-default: var(--system-switch-handle-border-color-default); - --spectrum-switch-handle-border-color-hover: var(--system-switch-handle-border-color-hover); - --spectrum-switch-handle-border-color-down: var(--system-switch-handle-border-color-down); - --spectrum-switch-handle-border-color-focus: var(--system-switch-handle-border-color-focus); - --spectrum-switch-handle-border-color-selected-default: var(--system-switch-handle-border-color-selected-default); - --spectrum-switch-handle-border-color-selected-hover: var(--system-switch-handle-border-color-selected-hover); - --spectrum-switch-handle-border-color-selected-down: var(--system-switch-handle-border-color-selected-down); - --spectrum-switch-handle-border-color-selected-focus: var(--system-switch-handle-border-color-selected-focus); - --spectrum-switch-label-color-default: var(--system-switch-label-color-default); - --spectrum-switch-label-color-hover: var(--system-switch-label-color-hover); - --spectrum-switch-label-color-down: var(--system-switch-label-color-down); - --spectrum-switch-label-color-focus: var(--system-switch-label-color-focus); - --spectrum-switch-label-color-disabled: var(--system-switch-label-color-disabled); - --spectrum-switch-background-color: var(--system-switch-background-color); - --spectrum-switch-background-color-disabled: var(--system-switch-background-color-disabled); - --spectrum-switch-background-color-selected-disabled: var(--system-switch-background-color-selected-disabled); - --spectrum-switch-background-color-selected-default: var(--system-switch-background-color-selected-default); - --spectrum-switch-background-color-selected-hover: var(--system-switch-background-color-selected-hover); - --spectrum-switch-background-color-selected-down: var(--system-switch-background-color-selected-down); - --spectrum-switch-background-color-selected-focus: var(--system-switch-background-color-selected-focus); - --spectrum-switch-focus-indicator-thickness: var(--system-switch-focus-indicator-thickness); - --spectrum-switch-focus-indicator-color: var(--system-switch-focus-indicator-color); - --spectrum-switch-handle-background-color: var(--system-switch-handle-background-color); - --spectrum-switch-handle-border-color-disabled: var(--system-switch-handle-border-color-disabled); -} - -.spectrum-Switch--disabled { - --spectrum-switch-label-color-default: var(--system-switch-disabled-label-color-default); -} - -.spectrum-Switch.spectrum-Switch--emphasized { - --spectrum-switch-background-color-selected-default: var(--system-switch-emphasized-background-color-selected-default); - --spectrum-switch-background-color-selected-hover: var(--system-switch-emphasized-background-color-selected-hover); - --spectrum-switch-background-color-selected-down: var(--system-switch-emphasized-background-color-selected-down); - --spectrum-switch-background-color-selected-focus: var(--system-switch-emphasized-background-color-selected-focus); - --spectrum-switch-handle-border-color-selected-default: var(--system-switch-emphasized-handle-border-color-selected-default); - --spectrum-switch-handle-border-color-selected-hover: var(--system-switch-emphasized-handle-border-color-selected-hover); - --spectrum-switch-handle-border-color-selected-down: var(--system-switch-emphasized-handle-border-color-selected-down); - --spectrum-switch-handle-border-color-selected-focus: var(--system-switch-emphasized-handle-border-color-selected-focus); -} - -.spectrum-Switch--sizeS { - --spectrum-switch-min-height: var(--system-switch-size-s-min-height); - --spectrum-switch-control-width: var(--system-switch-size-s-control-width); - --spectrum-switch-control-height: var(--system-switch-size-s-control-height); - --spectrum-switch-control-label-spacing: var(--system-switch-size-s-control-label-spacing); - --spectrum-switch-spacing-top-to-control: var(--system-switch-size-s-spacing-top-to-control); - --spectrum-switch-spacing-top-to-label: var(--system-switch-size-s-spacing-top-to-label); - --spectrum-switch-font-size: var(--system-switch-size-s-font-size); -} - -.spectrum-Switch--sizeM { - --spectrum-switch-min-height: var(--system-switch-size-m-min-height); - --spectrum-switch-control-width: var(--system-switch-size-m-control-width); - --spectrum-switch-control-height: var(--system-switch-size-m-control-height); - --spectrum-switch-control-label-spacing: var(--system-switch-size-m-control-label-spacing); - --spectrum-switch-spacing-top-to-control: var(--system-switch-size-m-spacing-top-to-control); - --spectrum-switch-spacing-top-to-label: var(--system-switch-size-m-spacing-top-to-label); - --spectrum-switch-font-size: var(--system-switch-size-m-font-size); -} - -.spectrum-Switch--sizeL { - --spectrum-switch-min-height: var(--system-switch-size-l-min-height); - --spectrum-switch-control-width: var(--system-switch-size-l-control-width); - --spectrum-switch-control-height: var(--system-switch-size-l-control-height); - --spectrum-switch-control-label-spacing: var(--system-switch-size-l-control-label-spacing); - --spectrum-switch-spacing-top-to-control: var(--system-switch-size-l-spacing-top-to-control); - --spectrum-switch-spacing-top-to-label: var(--system-switch-size-l-spacing-top-to-label); - --spectrum-switch-font-size: var(--system-switch-size-l-font-size); -} - -.spectrum-Switch--sizeXL { - --spectrum-switch-min-height: var(--system-switch-size-xl-min-height); - --spectrum-switch-control-width: var(--system-switch-size-xl-control-width); - --spectrum-switch-control-height: var(--system-switch-size-xl-control-height); - --spectrum-switch-control-label-spacing: var(--system-switch-size-xl-control-label-spacing); - --spectrum-switch-spacing-top-to-control: var(--system-switch-size-xl-spacing-top-to-control); - --spectrum-switch-spacing-top-to-label: var(--system-switch-size-xl-spacing-top-to-label); - --spectrum-switch-font-size: var(--system-switch-size-xl-font-size); -} diff --git a/tokens/dist/css/components/bridge/tabs.css b/tokens/dist/css/components/bridge/tabs.css deleted file mode 100644 index 367b5968871..00000000000 --- a/tokens/dist/css/components/bridge/tabs.css +++ /dev/null @@ -1,154 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Tabs { - --spectrum-tabs-font-weight: var(--system-tabs-font-weight); - --spectrum-tabs-item-height: var(--system-tabs-item-height); - --spectrum-tabs-item-horizontal-spacing: var(--system-tabs-item-horizontal-spacing); - --spectrum-tabs-item-vertical-spacing: var(--system-tabs-item-vertical-spacing); - --spectrum-tabs-start-to-edge: var(--system-tabs-start-to-edge); - --spectrum-tabs-top-to-text: var(--system-tabs-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-bottom-to-text); - --spectrum-tabs-icon-size: var(--system-tabs-icon-size); - --spectrum-tabs-icon-to-text: var(--system-tabs-icon-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-top-to-icon); - --spectrum-tabs-color: var(--system-tabs-color); - --spectrum-tabs-color-selected: var(--system-tabs-color-selected); - --spectrum-tabs-color-hover: var(--system-tabs-color-hover); - --spectrum-tabs-color-key-focus: var(--system-tabs-color-key-focus); - --spectrum-tabs-color-disabled: var(--system-tabs-color-disabled); - --spectrum-tabs-font-family: var(--system-tabs-font-family); - --spectrum-tabs-font-style: var(--system-tabs-font-style); - --spectrum-tabs-font-size: var(--system-tabs-font-size); - --spectrum-tabs-line-height: var(--system-tabs-line-height); - --spectrum-tabs-focus-indicator-width: var(--system-tabs-focus-indicator-width); - --spectrum-tabs-focus-indicator-border-radius: var(--system-tabs-focus-indicator-border-radius); - --spectrum-tabs-focus-indicator-gap: var(--system-tabs-focus-indicator-gap); - --spectrum-tabs-focus-indicator-color: var(--system-tabs-focus-indicator-color); - --spectrum-tabs-selection-indicator-color: var(--system-tabs-selection-indicator-color); - --spectrum-tabs-list-background-direction: var(--system-tabs-list-background-direction); - --spectrum-tabs-divider-background-color: var(--system-tabs-divider-background-color); - --spectrum-tabs-divider-size: var(--system-tabs-divider-size); - --spectrum-tabs-divider-border-radius: var(--system-tabs-divider-border-radius); - --spectrum-tabs-animation-duration: var(--system-tabs-animation-duration); - --spectrum-tabs-animation-ease: var(--system-tabs-animation-ease); -} - -.spectrum-Tabs.spectrum-Tabs--sizeS { - --spectrum-tabs-item-height: var(--system-tabs-size-s-item-height); - --spectrum-tabs-item-horizontal-spacing: var(--system-tabs-size-s-item-horizontal-spacing); - --spectrum-tabs-item-vertical-spacing: var(--system-tabs-size-s-item-vertical-spacing); - --spectrum-tabs-start-to-edge: var(--system-tabs-size-s-start-to-edge); - --spectrum-tabs-top-to-text: var(--system-tabs-size-s-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-size-s-bottom-to-text); - --spectrum-tabs-icon-size: var(--system-tabs-size-s-icon-size); - --spectrum-tabs-icon-to-text: var(--system-tabs-size-s-icon-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-size-s-top-to-icon); - --spectrum-tabs-focus-indicator-gap: var(--system-tabs-size-s-focus-indicator-gap); - --spectrum-tabs-font-size: var(--system-tabs-size-s-font-size); -} - -.spectrum-Tabs.spectrum-Tabs--sizeL { - --spectrum-tabs-item-height: var(--system-tabs-size-l-item-height); - --spectrum-tabs-item-horizontal-spacing: var(--system-tabs-size-l-item-horizontal-spacing); - --spectrum-tabs-item-vertical-spacing: var(--system-tabs-size-l-item-vertical-spacing); - --spectrum-tabs-start-to-edge: var(--system-tabs-size-l-start-to-edge); - --spectrum-tabs-top-to-text: var(--system-tabs-size-l-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-size-l-bottom-to-text); - --spectrum-tabs-icon-size: var(--system-tabs-size-l-icon-size); - --spectrum-tabs-icon-to-text: var(--system-tabs-size-l-icon-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-size-l-top-to-icon); - --spectrum-tabs-focus-indicator-gap: var(--system-tabs-size-l-focus-indicator-gap); - --spectrum-tabs-font-size: var(--system-tabs-size-l-font-size); -} - -.spectrum-Tabs.spectrum-Tabs--sizeXL { - --spectrum-tabs-item-height: var(--system-tabs-size-xl-item-height); - --spectrum-tabs-item-horizontal-spacing: var(--system-tabs-size-xl-item-horizontal-spacing); - --spectrum-tabs-item-vertical-spacing: var(--system-tabs-size-xl-item-vertical-spacing); - --spectrum-tabs-start-to-edge: var(--system-tabs-size-xl-start-to-edge); - --spectrum-tabs-top-to-text: var(--system-tabs-size-xl-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-size-xl-bottom-to-text); - --spectrum-tabs-icon-size: var(--system-tabs-size-xl-icon-size); - --spectrum-tabs-icon-to-text: var(--system-tabs-size-xl-icon-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-size-xl-top-to-icon); - --spectrum-tabs-focus-indicator-gap: var(--system-tabs-size-xl-focus-indicator-gap); - --spectrum-tabs-font-size: var(--system-tabs-size-xl-font-size); -} - -.spectrum-Tabs.spectrum-Tabs--emphasized { - --spectrum-tabs-color-selected: var(--system-tabs-emphasized-color-selected); - --spectrum-tabs-color-hover: var(--system-tabs-emphasized-color-hover); - --spectrum-tabs-color-key-focus: var(--system-tabs-emphasized-color-key-focus); - --spectrum-tabs-selection-indicator-color: var(--system-tabs-emphasized-selection-indicator-color); -} - -.spectrum-Tabs.spectrum-Tabs--vertical { - --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-list-background-direction); -} - -.spectrum-Tabs.spectrum-Tabs--vertical-right { - --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-right-list-background-direction); -} - -.spectrum-Tabs.spectrum-Tabs--vertical:dir(rtl) { - --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-dir-rtl-list-background-direction); -} - -.spectrum-Tabs.spectrum-Tabs--vertical-right:dir(rtl) { - --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-right-dir-rtl-list-background-direction); -} - -.spectrum-Tabs.spectrum-Tabs--compact { - --spectrum-tabs-item-height: var(--system-tabs-compact-item-height); - --spectrum-tabs-top-to-text: var(--system-tabs-compact-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-compact-bottom-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-compact-top-to-icon); -} - -.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeS { - --spectrum-tabs-item-height: var(--system-tabs-compact-size-s-item-height); - --spectrum-tabs-top-to-text: var(--system-tabs-compact-size-s-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-compact-size-s-bottom-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-compact-size-s-top-to-icon); -} - -.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeL { - --spectrum-tabs-item-height: var(--system-tabs-compact-size-l-item-height); - --spectrum-tabs-top-to-text: var(--system-tabs-compact-size-l-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-compact-size-l-bottom-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-compact-size-l-top-to-icon); -} - -.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeXL { - --spectrum-tabs-item-height: var(--system-tabs-compact-size-xl-item-height); - --spectrum-tabs-top-to-text: var(--system-tabs-compact-size-xl-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-compact-size-xl-bottom-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-compact-size-xl-top-to-icon); -} - -.spectrum-Tabs--vertical { - --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-list-background-direction); -} - -.spectrum-Tabs--vertical-right { - --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-right-list-background-direction); -} - -.spectrum-Tabs--vertical:dir(rtl) { - --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-dir-rtl-list-background-direction); -} - -.spectrum-Tabs--vertical-right:dir(rtl) { - --spectrum-tabs-list-background-direction: var(--system-tabs-vertical-right-dir-rtl-list-background-direction); -} diff --git a/tokens/dist/css/components/bridge/tag.css b/tokens/dist/css/components/bridge/tag.css deleted file mode 100644 index f7764dbb8c4..00000000000 --- a/tokens/dist/css/components/bridge/tag.css +++ /dev/null @@ -1,215 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Tag { - --spectrum-tag-border-color: var(--system-tag-border-color); - --spectrum-tag-border-color-hover: var(--system-tag-border-color-hover); - --spectrum-tag-border-color-active: var(--system-tag-border-color-active); - --spectrum-tag-border-color-focus: var(--system-tag-border-color-focus); - --spectrum-tag-size-small-corner-radius: var(--system-tag-size-small-corner-radius); - --spectrum-tag-size-medium-corner-radius: var(--system-tag-size-medium-corner-radius); - --spectrum-tag-size-large-corner-radius: var(--system-tag-size-large-corner-radius); - --spectrum-tag-background-color: var(--system-tag-background-color); - --spectrum-tag-background-color-hover: var(--system-tag-background-color-hover); - --spectrum-tag-background-color-active: var(--system-tag-background-color-active); - --spectrum-tag-background-color-focus: var(--system-tag-background-color-focus); - --spectrum-tag-content-color: var(--system-tag-content-color); - --spectrum-tag-content-color-hover: var(--system-tag-content-color-hover); - --spectrum-tag-content-color-active: var(--system-tag-content-color-active); - --spectrum-tag-content-color-focus: var(--system-tag-content-color-focus); - --spectrum-tag-border-color-selected: var(--system-tag-border-color-selected); - --spectrum-tag-border-color-selected-hover: var(--system-tag-border-color-selected-hover); - --spectrum-tag-border-color-selected-active: var(--system-tag-border-color-selected-active); - --spectrum-tag-border-color-selected-focus: var(--system-tag-border-color-selected-focus); - --spectrum-tag-border-color-disabled: var(--system-tag-border-color-disabled); - --spectrum-tag-background-color-disabled: var(--system-tag-background-color-disabled); - --spectrum-tag-size-small-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); - --spectrum-tag-size-small-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); - --spectrum-tag-size-medium-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); - --spectrum-tag-size-medium-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); - --spectrum-tag-size-large-spacing-inline-start: var(--system-tag-size-large-spacing-inline-start); - --spectrum-tag-size-large-label-spacing-inline-end: var(--system-tag-size-large-label-spacing-inline-end); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--system-tag-size-large-clear-button-spacing-inline-end); - --spectrum-avatar-opacity-disabled: var(--system-tag-avatar-opacity-disabled); - --spectrum-tag-animation-duration: var(--system-tag-animation-duration); - --spectrum-tag-border-width: var(--system-tag-border-width); - --spectrum-tag-focus-ring-thickness: var(--system-tag-focus-ring-thickness); - --spectrum-tag-focus-ring-gap: var(--system-tag-focus-ring-gap); - --spectrum-tag-focus-ring-color: var(--system-tag-focus-ring-color); - --spectrum-tag-label-line-height: var(--system-tag-label-line-height); - --spectrum-tag-label-font-weight: var(--system-tag-label-font-weight); - --spectrum-tag-content-color-selected: var(--system-tag-content-color-selected); - --spectrum-tag-background-color-selected: var(--system-tag-background-color-selected); - --spectrum-tag-background-color-selected-hover: var(--system-tag-background-color-selected-hover); - --spectrum-tag-background-color-selected-active: var(--system-tag-background-color-selected-active); - --spectrum-tag-background-color-selected-focus: var(--system-tag-background-color-selected-focus); - --spectrum-tag-border-color-invalid: var(--system-tag-border-color-invalid); - --spectrum-tag-border-color-invalid-hover: var(--system-tag-border-color-invalid-hover); - --spectrum-tag-border-color-invalid-active: var(--system-tag-border-color-invalid-active); - --spectrum-tag-border-color-invalid-focus: var(--system-tag-border-color-invalid-focus); - --spectrum-tag-content-color-invalid: var(--system-tag-content-color-invalid); - --spectrum-tag-content-color-invalid-hover: var(--system-tag-content-color-invalid-hover); - --spectrum-tag-content-color-invalid-active: var(--system-tag-content-color-invalid-active); - --spectrum-tag-content-color-invalid-focus: var(--system-tag-content-color-invalid-focus); - --spectrum-tag-border-color-invalid-selected: var(--system-tag-border-color-invalid-selected); - --spectrum-tag-border-color-invalid-selected-hover: var(--system-tag-border-color-invalid-selected-hover); - --spectrum-tag-border-color-invalid-selected-focus: var(--system-tag-border-color-invalid-selected-focus); - --spectrum-tag-border-color-invalid-selected-active: var(--system-tag-border-color-invalid-selected-active); - --spectrum-tag-background-color-invalid-selected: var(--system-tag-background-color-invalid-selected); - --spectrum-tag-background-color-invalid-selected-hover: var(--system-tag-background-color-invalid-selected-hover); - --spectrum-tag-background-color-invalid-selected-active: var(--system-tag-background-color-invalid-selected-active); - --spectrum-tag-background-color-invalid-selected-focus: var(--system-tag-background-color-invalid-selected-focus); - --spectrum-tag-content-color-invalid-selected: var(--system-tag-content-color-invalid-selected); - --spectrum-tag-border-color-emphasized: var(--system-tag-border-color-emphasized); - --spectrum-tag-border-color-emphasized-hover: var(--system-tag-border-color-emphasized-hover); - --spectrum-tag-border-color-emphasized-active: var(--system-tag-border-color-emphasized-active); - --spectrum-tag-border-color-emphasized-focus: var(--system-tag-border-color-emphasized-focus); - --spectrum-tag-background-color-emphasized: var(--system-tag-background-color-emphasized); - --spectrum-tag-background-color-emphasized-hover: var(--system-tag-background-color-emphasized-hover); - --spectrum-tag-background-color-emphasized-active: var(--system-tag-background-color-emphasized-active); - --spectrum-tag-background-color-emphasized-focus: var(--system-tag-background-color-emphasized-focus); - --spectrum-tag-content-color-emphasized: var(--system-tag-content-color-emphasized); - --spectrum-tag-content-color-disabled: var(--system-tag-content-color-disabled); - --spectrum-tag-icon-spacing-inline-end: var(--system-tag-icon-spacing-inline-end); - --spectrum-tag-icon-size: var(--system-tag-icon-size); - --spectrum-tag-icon-spacing-block-start: var(--system-tag-icon-spacing-block-start); - --spectrum-tag-icon-spacing-block-end: var(--system-tag-icon-spacing-block-end); - --spectrum-tag-avatar-spacing-block-start: var(--system-tag-avatar-spacing-block-start); - --spectrum-tag-avatar-spacing-block-end: var(--system-tag-avatar-spacing-block-end); - --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-avatar-spacing-inline-end); - --spectrum-tag-label-spacing-block: var(--system-tag-label-spacing-block); - --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-clear-button-spacing-inline-start); - --spectrum-tag-height: var(--system-tag-height); - --spectrum-tag-font-size: var(--system-tag-font-size); - --spectrum-tag-clear-button-spacing-block: var(--system-tag-clear-button-spacing-block); - --spectrum-tag-corner-radius: var(--system-tag-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--system-tag-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-clear-button-spacing-inline-end); -} - -.spectrum-Tag.spectrum-Tag--sizeS { - --spectrum-tag-height: var(--system-tag-size-s-height); - --spectrum-tag-font-size: var(--system-tag-size-s-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-s-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-s-clear-button-spacing-inline-start); - --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-s-clear-button-spacing-block); - --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-s-icon-spacing-block-start); - --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-s-icon-spacing-block-end); - --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-s-icon-spacing-inline-end); - --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-s-avatar-spacing-block-start); - --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-s-avatar-spacing-block-end); - --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-s-avatar-spacing-inline-end); - --spectrum-tag-label-spacing-block: var(--system-tag-size-s-label-spacing-block); - --spectrum-tag-corner-radius: var(--system-tag-size-s-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-size-s-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-s-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-s-clear-button-spacing-inline-end); -} - -.spectrum-Tag.spectrum-Tag--sizeM { - --spectrum-tag-height: var(--system-tag-size-m-height); - --spectrum-tag-font-size: var(--system-tag-size-m-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-m-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-m-clear-button-spacing-inline-start); - --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-m-clear-button-spacing-block); - --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-m-icon-spacing-block-start); - --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-m-icon-spacing-block-end); - --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-m-icon-spacing-inline-end); - --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-m-avatar-spacing-block-start); - --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-m-avatar-spacing-block-end); - --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-m-avatar-spacing-inline-end); - --spectrum-tag-label-spacing-block: var(--system-tag-size-m-label-spacing-block); - --spectrum-tag-corner-radius: var(--system-tag-size-m-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-size-m-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-m-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-m-clear-button-spacing-inline-end); -} - -.spectrum-Tag.spectrum-Tag--sizeL { - --spectrum-tag-height: var(--system-tag-size-l-height); - --spectrum-tag-font-size: var(--system-tag-size-l-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-l-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-l-clear-button-spacing-inline-start); - --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-l-clear-button-spacing-block); - --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-l-icon-spacing-block-start); - --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-l-icon-spacing-block-end); - --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-l-icon-spacing-inline-end); - --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-l-avatar-spacing-block-start); - --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-l-avatar-spacing-block-end); - --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-l-avatar-spacing-inline-end); - --spectrum-tag-label-spacing-block: var(--system-tag-size-l-label-spacing-block); - --spectrum-tag-corner-radius: var(--system-tag-size-l-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-size-l-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-l-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-l-clear-button-spacing-inline-end); -} - -.spectrum-Tag--sizeS { - --spectrum-tag-height: var(--system-tag-size-s-height); - --spectrum-tag-font-size: var(--system-tag-size-s-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-s-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-s-clear-button-spacing-inline-start); - --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-s-clear-button-spacing-block); - --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-s-icon-spacing-block-start); - --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-s-icon-spacing-block-end); - --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-s-icon-spacing-inline-end); - --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-s-avatar-spacing-block-start); - --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-s-avatar-spacing-block-end); - --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-s-avatar-spacing-inline-end); - --spectrum-tag-label-spacing-block: var(--system-tag-size-s-label-spacing-block); - --spectrum-tag-corner-radius: var(--system-tag-size-s-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-size-s-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-s-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-s-clear-button-spacing-inline-end); -} - -.spectrum-Tag--sizeM { - --spectrum-tag-height: var(--system-tag-size-m-height); - --spectrum-tag-font-size: var(--system-tag-size-m-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-m-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-m-clear-button-spacing-inline-start); - --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-m-clear-button-spacing-block); - --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-m-icon-spacing-block-start); - --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-m-icon-spacing-block-end); - --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-m-icon-spacing-inline-end); - --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-m-avatar-spacing-block-start); - --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-m-avatar-spacing-block-end); - --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-m-avatar-spacing-inline-end); - --spectrum-tag-label-spacing-block: var(--system-tag-size-m-label-spacing-block); - --spectrum-tag-corner-radius: var(--system-tag-size-m-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-size-m-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-m-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-m-clear-button-spacing-inline-end); -} - -.spectrum-Tag--sizeL { - --spectrum-tag-height: var(--system-tag-size-l-height); - --spectrum-tag-font-size: var(--system-tag-size-l-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-l-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-l-clear-button-spacing-inline-start); - --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-l-clear-button-spacing-block); - --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-l-icon-spacing-block-start); - --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-l-icon-spacing-block-end); - --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-l-icon-spacing-inline-end); - --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-l-avatar-spacing-block-start); - --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-l-avatar-spacing-block-end); - --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-l-avatar-spacing-inline-end); - --spectrum-tag-label-spacing-block: var(--system-tag-size-l-label-spacing-block); - --spectrum-tag-corner-radius: var(--system-tag-size-l-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-size-l-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-l-label-spacing-inline-end); - --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-l-clear-button-spacing-inline-end); -} diff --git a/tokens/dist/css/components/bridge/textfield.css b/tokens/dist/css/components/bridge/textfield.css deleted file mode 100644 index 657d954348c..00000000000 --- a/tokens/dist/css/components/bridge/textfield.css +++ /dev/null @@ -1,165 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Textfield { - --spectrum-textfield-border-color: var(--system-textfield-border-color); - --spectrum-textfield-border-color-hover: var(--system-textfield-border-color-hover); - --spectrum-textfield-border-color-focus: var(--system-textfield-border-color-focus); - --spectrum-textfield-border-color-focus-hover: var(--system-textfield-border-color-focus-hover); - --spectrum-textfield-border-color-keyboard-focus: var(--system-textfield-border-color-keyboard-focus); - --spectrum-textfield-border-width: var(--system-textfield-border-width); - --spectrum-texfield-animation-duration: var(--system-textfield-texfield-animation-duration); - --spectrum-textfield-width: var(--system-textfield-width); - --spectrum-textfield-min-width: var(--system-textfield-min-width); - --spectrum-textfield-corner-radius: var(--system-textfield-corner-radius); - --spectrum-textfield-spacing-inline-quiet: var(--system-textfield-spacing-inline-quiet); - --spectrum-textfield-spacing-block-start: var(--system-textfield-spacing-block-start); - --spectrum-textfield-spacing-block-end: var(--system-textfield-spacing-block-end); - --spectrum-textfield-spacing-block-quiet: var(--system-textfield-spacing-block-quiet); - --spectrum-textfield-label-spacing-block: var(--system-textfield-label-spacing-block); - --spectrum-textfield-helptext-spacing-block: var(--system-textfield-helptext-spacing-block); - --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--system-textfield-icon-spacing-inline-end-quiet-invalid); - --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--system-textfield-icon-spacing-inline-end-quiet-valid); - --spectrum-textfield-font-family: var(--system-textfield-font-family); - --spectrum-textfield-font-weight: var(--system-textfield-font-weight); - --spectrum-textfield-character-count-font-family: var(--system-textfield-character-count-font-family); - --spectrum-textfield-character-count-font-weight: var(--system-textfield-character-count-font-weight); - --spectrum-textfield-character-count-spacing-inline: var(--system-textfield-character-count-spacing-inline); - --spectrum-textfield-character-count-spacing-inline-side: var(--system-textfield-character-count-spacing-inline-side); - --spectrum-textfield-focus-indicator-width: var(--system-textfield-focus-indicator-width); - --spectrum-textfield-focus-indicator-gap: var(--system-textfield-focus-indicator-gap); - --spectrum-textfield-background-color: var(--system-textfield-background-color); - --spectrum-textfield-text-color-default: var(--system-textfield-text-color-default); - --spectrum-textfield-text-color-hover: var(--system-textfield-text-color-hover); - --spectrum-textfield-text-color-focus: var(--system-textfield-text-color-focus); - --spectrum-textfield-text-color-focus-hover: var(--system-textfield-text-color-focus-hover); - --spectrum-textfield-text-color-keyboard-focus: var(--system-textfield-text-color-keyboard-focus); - --spectrum-textfield-text-color-readonly: var(--system-textfield-text-color-readonly); - --spectrum-textfield-background-color-disabled: var(--system-textfield-background-color-disabled); - --spectrum-textfield-border-color-disabled: var(--system-textfield-border-color-disabled); - --spectrum-textfield-text-color-disabled: var(--system-textfield-text-color-disabled); - --spectrum-textfield-border-color-invalid-default: var(--system-textfield-border-color-invalid-default); - --spectrum-textfield-border-color-invalid-hover: var(--system-textfield-border-color-invalid-hover); - --spectrum-textfield-border-color-invalid-focus: var(--system-textfield-border-color-invalid-focus); - --spectrum-textfield-border-color-invalid-focus-hover: var(--system-textfield-border-color-invalid-focus-hover); - --spectrum-textfield-border-color-invalid-keyboard-focus: var(--system-textfield-border-color-invalid-keyboard-focus); - --spectrum-textfield-icon-color-invalid: var(--system-textfield-icon-color-invalid); - --spectrum-textfield-text-color-invalid: var(--system-textfield-text-color-invalid); - --spectrum-textfield-text-color-valid: var(--system-textfield-text-color-valid); - --spectrum-textfield-icon-color-valid: var(--system-textfield-icon-color-valid); - --spectrum-textfield-focus-indicator-color: var(--system-textfield-focus-indicator-color); - --spectrum-text-area-min-inline-size: var(--system-textfield-text-area-min-inline-size); - --spectrum-text-area-min-block-size: var(--system-textfield-text-area-min-block-size); - --spectrum-textfield-height: var(--system-textfield-height); - --spectrum-textfield-label-spacing-block-quiet: var(--system-textfield-label-spacing-block-quiet); - --spectrum-textfield-label-spacing-inline-side-label: var(--system-textfield-label-spacing-inline-side-label); - --spectrum-textfield-placeholder-font-size: var(--system-textfield-placeholder-font-size); - --spectrum-textfield-spacing-inline: var(--system-textfield-spacing-inline); - --spectrum-textfield-icon-size-invalid: var(--system-textfield-icon-size-invalid); - --spectrum-textfield-icon-size-valid: var(--system-textfield-icon-size-valid); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--system-textfield-icon-spacing-inline-end-invalid); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--system-textfield-icon-spacing-inline-end-valid); - --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-icon-spacing-block-invalid); - --spectrum-textfield-icon-spacing-block-valid: var(--system-textfield-icon-spacing-block-valid); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--system-textfield-icon-spacing-inline-start-invalid); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--system-textfield-icon-spacing-inline-start-valid); - --spectrum-textfield-character-count-font-size: var(--system-textfield-character-count-font-size); - --spectrum-textfield-character-count-spacing-block: var(--system-textfield-character-count-spacing-block); - --spectrum-textfield-character-count-spacing-block-quiet: var(--system-textfield-character-count-spacing-block-quiet); - --spectrum-textfield-character-count-spacing-block-side: var(--system-textfield-character-count-spacing-block-side); - --spectrum-text-area-min-block-size-quiet: var(--system-textfield-text-area-min-block-size-quiet); -} - -.spectrum-Textfield.spectrum-Textfield--sizeS { - --spectrum-textfield-height: var(--system-textfield-size-s-height); - --spectrum-textfield-label-spacing-block-quiet: var(--system-textfield-size-s-label-spacing-block-quiet); - --spectrum-textfield-label-spacing-inline-side-label: var(--system-textfield-size-s-label-spacing-inline-side-label); - --spectrum-textfield-placeholder-font-size: var(--system-textfield-size-s-placeholder-font-size); - --spectrum-textfield-spacing-inline: var(--system-textfield-size-s-spacing-inline); - --spectrum-textfield-icon-size-invalid: var(--system-textfield-size-s-icon-size-invalid); - --spectrum-textfield-icon-size-valid: var(--system-textfield-size-s-icon-size-valid); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--system-textfield-size-s-icon-spacing-inline-end-invalid); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--system-textfield-size-s-icon-spacing-inline-end-valid); - --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-size-s-icon-spacing-block-invalid); - --spectrum-textfield-icon-spacing-block-valid: var(--system-textfield-size-s-icon-spacing-block-valid); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--system-textfield-size-s-icon-spacing-inline-start-invalid); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--system-textfield-size-s-icon-spacing-inline-start-valid); - --spectrum-textfield-character-count-font-size: var(--system-textfield-size-s-character-count-font-size); - --spectrum-textfield-character-count-spacing-block: var(--system-textfield-size-s-character-count-spacing-block); - --spectrum-textfield-character-count-spacing-block-quiet: var(--system-textfield-size-s-character-count-spacing-block-quiet); - --spectrum-textfield-character-count-spacing-block-side: var(--system-textfield-size-s-character-count-spacing-block-side); - --spectrum-text-area-min-block-size-quiet: var(--system-textfield-size-s-text-area-min-block-size-quiet); -} - -.spectrum-Textfield.spectrum-Textfield--sizeM { - --spectrum-textfield-height: var(--system-textfield-size-m-height); - --spectrum-textfield-label-spacing-block-quiet: var(--system-textfield-size-m-label-spacing-block-quiet); - --spectrum-textfield-label-spacing-inline-side-label: var(--system-textfield-size-m-label-spacing-inline-side-label); - --spectrum-textfield-placeholder-font-size: var(--system-textfield-size-m-placeholder-font-size); - --spectrum-textfield-spacing-inline: var(--system-textfield-size-m-spacing-inline); - --spectrum-textfield-icon-size-invalid: var(--system-textfield-size-m-icon-size-invalid); - --spectrum-textfield-icon-size-valid: var(--system-textfield-size-m-icon-size-valid); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--system-textfield-size-m-icon-spacing-inline-end-invalid); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--system-textfield-size-m-icon-spacing-inline-end-valid); - --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-size-m-icon-spacing-block-invalid); - --spectrum-textfield-icon-spacing-block-valid: var(--system-textfield-size-m-icon-spacing-block-valid); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--system-textfield-size-m-icon-spacing-inline-start-invalid); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--system-textfield-size-m-icon-spacing-inline-start-valid); - --spectrum-textfield-character-count-font-size: var(--system-textfield-size-m-character-count-font-size); - --spectrum-textfield-character-count-spacing-block: var(--system-textfield-size-m-character-count-spacing-block); - --spectrum-textfield-character-count-spacing-block-quiet: var(--system-textfield-size-m-character-count-spacing-block-quiet); - --spectrum-textfield-character-count-spacing-block-side: var(--system-textfield-size-m-character-count-spacing-block-side); - --spectrum-text-area-min-block-size-quiet: var(--system-textfield-size-m-text-area-min-block-size-quiet); -} - -.spectrum-Textfield.spectrum-Textfield--sizeL { - --spectrum-textfield-height: var(--system-textfield-size-l-height); - --spectrum-textfield-label-spacing-block-quiet: var(--system-textfield-size-l-label-spacing-block-quiet); - --spectrum-textfield-label-spacing-inline-side-label: var(--system-textfield-size-l-label-spacing-inline-side-label); - --spectrum-textfield-placeholder-font-size: var(--system-textfield-size-l-placeholder-font-size); - --spectrum-textfield-spacing-inline: var(--system-textfield-size-l-spacing-inline); - --spectrum-textfield-icon-size-invalid: var(--system-textfield-size-l-icon-size-invalid); - --spectrum-textfield-icon-size-valid: var(--system-textfield-size-l-icon-size-valid); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--system-textfield-size-l-icon-spacing-inline-end-invalid); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--system-textfield-size-l-icon-spacing-inline-end-valid); - --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-size-l-icon-spacing-block-invalid); - --spectrum-textfield-icon-spacing-block-valid: var(--system-textfield-size-l-icon-spacing-block-valid); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--system-textfield-size-l-icon-spacing-inline-start-invalid); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--system-textfield-size-l-icon-spacing-inline-start-valid); - --spectrum-textfield-character-count-font-size: var(--system-textfield-size-l-character-count-font-size); - --spectrum-textfield-character-count-spacing-block: var(--system-textfield-size-l-character-count-spacing-block); - --spectrum-textfield-character-count-spacing-block-quiet: var(--system-textfield-size-l-character-count-spacing-block-quiet); - --spectrum-textfield-character-count-spacing-block-side: var(--system-textfield-size-l-character-count-spacing-block-side); - --spectrum-text-area-min-block-size-quiet: var(--system-textfield-size-l-text-area-min-block-size-quiet); -} - -.spectrum-Textfield.spectrum-Textfield--sizeXL { - --spectrum-textfield-height: var(--system-textfield-size-xl-height); - --spectrum-textfield-label-spacing-block-quiet: var(--system-textfield-size-xl-label-spacing-block-quiet); - --spectrum-textfield-label-spacing-inline-side-label: var(--system-textfield-size-xl-label-spacing-inline-side-label); - --spectrum-textfield-placeholder-font-size: var(--system-textfield-size-xl-placeholder-font-size); - --spectrum-textfield-spacing-inline: var(--system-textfield-size-xl-spacing-inline); - --spectrum-textfield-icon-size-invalid: var(--system-textfield-size-xl-icon-size-invalid); - --spectrum-textfield-icon-size-valid: var(--system-textfield-size-xl-icon-size-valid); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--system-textfield-size-xl-icon-spacing-inline-end-invalid); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--system-textfield-size-xl-icon-spacing-inline-end-valid); - --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-size-xl-icon-spacing-block-invalid); - --spectrum-textfield-icon-spacing-block-valid: var(--system-textfield-size-xl-icon-spacing-block-valid); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--system-textfield-size-xl-icon-spacing-inline-start-invalid); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--system-textfield-size-xl-icon-spacing-inline-start-valid); - --spectrum-textfield-character-count-font-size: var(--system-textfield-size-xl-character-count-font-size); - --spectrum-textfield-character-count-spacing-block: var(--system-textfield-size-xl-character-count-spacing-block); - --spectrum-textfield-character-count-spacing-block-quiet: var(--system-textfield-size-xl-character-count-spacing-block-quiet); - --spectrum-textfield-character-count-spacing-block-side: var(--system-textfield-size-xl-character-count-spacing-block-side); - --spectrum-text-area-min-block-size-quiet: var(--system-textfield-size-xl-text-area-min-block-size-quiet); -} diff --git a/tokens/dist/css/components/bridge/toast.css b/tokens/dist/css/components/bridge/toast.css deleted file mode 100644 index 9f0e75c39d5..00000000000 --- a/tokens/dist/css/components/bridge/toast.css +++ /dev/null @@ -1,41 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Toast { - --spectrum-toast-background-color-default: var(--system-toast-background-color-default); - --spectrum-toast-font-weight: var(--system-toast-font-weight); - --spectrum-toast-font-size: var(--system-toast-font-size); - --spectrum-toast-corner-radius: var(--system-toast-corner-radius); - --spectrum-toast-block-size: var(--system-toast-block-size); - --spectrum-toast-max-inline-size: var(--system-toast-max-inline-size); - --spectrum-toast-border-width: var(--system-toast-border-width); - --spectrum-toast-line-height: var(--system-toast-line-height); - --spectrum-toast-line-height-cjk: var(--system-toast-line-height-cjk); - --spectrum-toast-spacing-icon-to-text: var(--system-toast-spacing-icon-to-text); - --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--system-toast-spacing-start-edge-to-text-and-icon); - --spectrum-toast-spacing-text-and-action-button-to-divider: var(--system-toast-spacing-text-and-action-button-to-divider); - --spectrum-toast-spacing-top-edge-to-divider: var(--system-toast-spacing-top-edge-to-divider); - --spectrum-toast-spacing-bottom-edge-to-divider: var(--system-toast-spacing-bottom-edge-to-divider); - --spectrum-toast-spacing-top-edge-to-icon: var(--system-toast-spacing-top-edge-to-icon); - --spectrum-toast-spacing-text-to-action-button-horizontal: var(--system-toast-spacing-text-to-action-button-horizontal); - --spectrum-toast-spacing-close-button: var(--system-toast-spacing-close-button); - --spectrum-toast-spacing-block-start: var(--system-toast-spacing-block-start); - --spectrum-toast-spacing-block-end: var(--system-toast-spacing-block-end); - --spectrum-toast-spacing-top-edge-to-text: var(--system-toast-spacing-top-edge-to-text); - --spectrum-toast-spacing-bottom-edge-to-text: var(--system-toast-spacing-bottom-edge-to-text); - --spectrum-toast-negative-background-color-default: var(--system-toast-negative-background-color-default); - --spectrum-toast-positive-background-color-default: var(--system-toast-positive-background-color-default); - --spectrum-toast-informative-background-color-default: var(--system-toast-informative-background-color-default); - --spectrum-toast-text-and-icon-color: var(--system-toast-text-and-icon-color); - --spectrum-toast-divider-color: var(--system-toast-divider-color); -} diff --git a/tokens/dist/css/components/bridge/tooltip.css b/tokens/dist/css/components/bridge/tooltip.css deleted file mode 100644 index ce61b72f141..00000000000 --- a/tokens/dist/css/components/bridge/tooltip.css +++ /dev/null @@ -1,44 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum-Tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var(--system-tooltip-backgound-color-default-neutral); - --spectrum-tooltip-animation-duration: var(--system-tooltip-animation-duration); - --spectrum-tooltip-margin: var(--system-tooltip-margin); - --spectrum-tooltip-height: var(--system-tooltip-height); - --spectrum-tooltip-max-inline-size: var(--system-tooltip-max-inline-size); - --spectrum-tooltip-border-radius: var(--system-tooltip-border-radius); - --spectrum-tooltip-icon-width: var(--system-tooltip-icon-width); - --spectrum-tooltip-icon-height: var(--system-tooltip-icon-height); - --spectrum-tooltip-font-size: var(--system-tooltip-font-size); - --spectrum-tooltip-line-height: var(--system-tooltip-line-height); - --spectrum-tooltip-cjk-line-height: var(--system-tooltip-cjk-line-height); - --spectrum-tooltip-font-weight: var(--system-tooltip-font-weight); - --spectrum-tooltip-spacing-inline: var(--system-tooltip-spacing-inline); - --spectrum-tooltip-spacing-block-start: var(--system-tooltip-spacing-block-start); - --spectrum-tooltip-spacing-block-end: var(--system-tooltip-spacing-block-end); - --spectrum-tooltip-icon-spacing-inline-start: var(--system-tooltip-icon-spacing-inline-start); - --spectrum-tooltip-icon-spacing-inline-end: var(--system-tooltip-icon-spacing-inline-end); - --spectrum-tooltip-icon-spacing-block-start: var(--system-tooltip-icon-spacing-block-start); - --spectrum-tooltip-background-color-informative: var(--system-tooltip-background-color-informative); - --spectrum-tooltip-background-color-positive: var(--system-tooltip-background-color-positive); - --spectrum-tooltip-background-color-negative: var(--system-tooltip-background-color-negative); - --spectrum-tooltip-content-color: var(--system-tooltip-content-color); - --spectrum-tooltip-tip-inline-size: var(--system-tooltip-tip-inline-size); - --spectrum-tooltip-tip-block-size: var(--system-tooltip-tip-block-size); - --spectrum-tooltip-tip-square-size: var(--system-tooltip-tip-square-size); - --spectrum-tooltip-tip-height-percentage: var(--system-tooltip-tip-height-percentage); - --spectrum-tooltip-tip-antialiasing-inset: var(--system-tooltip-tip-antialiasing-inset); - --spectrum-tooltip-pointer-corner-spacing: var(--system-tooltip-pointer-corner-spacing); - --spectrum-tooltip-background-color-default: var(--system-tooltip-background-color-default); -} diff --git a/tokens/dist/css/components/express/actionbutton.css b/tokens/dist/css/components/express/actionbutton.css deleted file mode 100644 index 7add2939b42..00000000000 --- a/tokens/dist/css/components/express/actionbutton.css +++ /dev/null @@ -1,217 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-action-button-background-color-default: var(--spectrum-gray-75); - --system-action-button-background-color-hover: var(--spectrum-gray-200); - --system-action-button-background-color-down: var(--spectrum-gray-300); - --system-action-button-background-color-focus: var(--spectrum-gray-200); - --system-action-button-border-color-default: var(--spectrum-gray-400); - --system-action-button-border-color-hover: var(--spectrum-gray-500); - --system-action-button-border-color-down: var(--spectrum-gray-600); - --system-action-button-border-color-focus: var(--spectrum-gray-500); - --system-action-button-background-color-disabled: transparent; - --system-action-button-border-color-disabled: var(--spectrum-disabled-border-color); - --system-action-button-content-color-disabled: var(--spectrum-disabled-content-color); - --system-action-button-animation-duration: var(--spectrum-animation-duration-100); - --system-action-button-border-radius: var(--spectrum-corner-radius-100); - --system-action-button-border-width: var(--spectrum-border-width-100); - --system-action-button-content-color-default: var(--spectrum-neutral-content-color-default); - --system-action-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-action-button-content-color-down: var(--spectrum-neutral-content-color-down); - --system-action-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-action-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-action-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-action-button-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var(--spectrum-gray-200); - --system-action-button-quiet-background-color-down: var(--spectrum-gray-300); - --system-action-button-quiet-background-color-focus: var(--spectrum-gray-200); - --system-action-button-quiet-border-color-default: transparent; - --system-action-button-quiet-border-color-hover: transparent; - --system-action-button-quiet-border-color-down: transparent; - --system-action-button-quiet-border-color-focus: transparent; - --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-border-color-disabled: transparent; - --system-action-button-selected-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); - --system-action-button-selected-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); - --system-action-button-selected-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); - --system-action-button-selected-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); - --system-action-button-selected-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50)); - --system-action-button-selected-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50)); - --system-action-button-selected-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50)); - --system-action-button-selected-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50)); - --system-action-button-selected-border-color-default: transparent; - --system-action-button-selected-border-color-hover: transparent; - --system-action-button-selected-border-color-down: transparent; - --system-action-button-selected-border-color-focus: transparent; - --system-action-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); - --system-action-button-selected-border-color-disabled: transparent; - --system-action-button-selected-emphasized-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); - --system-action-button-selected-emphasized-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); - --system-action-button-selected-emphasized-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); - --system-action-button-selected-emphasized-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); - --system-action-button-selected-emphasized-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); - --system-action-button-selected-emphasized-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); - --system-action-button-selected-emphasized-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); - --system-action-button-selected-emphasized-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); - --system-action-button-size-xs-min-width: calc(var(--spectrum-component-edge-to-visual-only-50) * 2 + var(--spectrum-workflow-icon-size-50)); - --system-action-button-size-xs-height: var(--spectrum-component-height-50); - --system-action-button-size-xs-icon-size: var(--spectrum-workflow-icon-size-50); - --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); - --system-action-button-size-xs-text-to-visual: var(--spectrum-text-to-visual-50); - --system-action-button-size-xs-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); - --system-action-button-size-xs-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-50) - var(--system-action-button-border-width)); - --system-action-button-size-xs-edge-to-text: calc(var(--spectrum-component-edge-to-text-50) - var(--system-action-button-border-width)); - --system-action-button-size-xs-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-50) - var(--system-action-button-border-width)); - --system-action-button-size-s-min-width: calc(var(--spectrum-component-edge-to-visual-only-75) * 2 + var(--spectrum-workflow-icon-size-75)); - --system-action-button-size-s-height: var(--spectrum-component-height-75); - --system-action-button-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-action-button-size-s-font-size: var(--spectrum-font-size-75); - --system-action-button-size-s-text-to-visual: var(--spectrum-text-to-visual-75); - --system-action-button-size-s-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); - --system-action-button-size-s-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-75) - var(--system-action-button-border-width)); - --system-action-button-size-s-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--system-action-button-border-width)); - --system-action-button-size-s-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--system-action-button-border-width)); - --system-action-button-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); - --system-action-button-size-m-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); - --system-action-button-height: var(--spectrum-component-height-100); - --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-font-size: var(--spectrum-font-size-100); - --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-size-m-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --system-action-button-size-m-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --system-action-button-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); - --system-action-button-size-m-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); - --system-action-button-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); - --system-action-button-size-m-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); - --system-action-button-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); - --system-action-button-size-m-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); - --system-action-button-size-l-min-width: calc(var(--spectrum-component-edge-to-visual-only-200) * 2 + var(--spectrum-workflow-icon-size-200)); - --system-action-button-size-l-height: var(--spectrum-component-height-200); - --system-action-button-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-action-button-size-l-font-size: var(--spectrum-font-size-200); - --system-action-button-size-l-text-to-visual: var(--spectrum-text-to-visual-200); - --system-action-button-size-l-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); - --system-action-button-size-l-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-200) - var(--system-action-button-border-width)); - --system-action-button-size-l-edge-to-text: calc(var(--spectrum-component-edge-to-text-200) - var(--system-action-button-border-width)); - --system-action-button-size-l-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-200) - var(--system-action-button-border-width)); - --system-action-button-size-xl-min-width: calc(var(--spectrum-component-edge-to-visual-only-300) * 2 + var(--spectrum-workflow-icon-size-300)); - --system-action-button-size-xl-height: var(--spectrum-component-height-300); - --system-action-button-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-action-button-size-xl-text-to-visual: var(--spectrum-text-to-visual-300); - --system-action-button-size-xl-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); - --system-action-button-size-xl-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-300) - var(--system-action-button-border-width)); - --system-action-button-size-xl-edge-to-text: calc(var(--spectrum-component-edge-to-text-300) - var(--system-action-button-border-width)); - --system-action-button-size-xl-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-300) - var(--system-action-button-border-width)); - --system-action-button-static-black-quiet-border-color-default: transparent; - --system-action-button-static-white-quiet-border-color-default: transparent; - --system-action-button-static-black-quiet-border-color-hover: transparent; - --system-action-button-static-white-quiet-border-color-hover: transparent; - --system-action-button-static-black-quiet-border-color-down: transparent; - --system-action-button-static-white-quiet-border-color-down: transparent; - --system-action-button-static-black-quiet-border-color-focus: transparent; - --system-action-button-static-white-quiet-border-color-focus: transparent; - --system-action-button-static-black-quiet-border-color-disabled: transparent; - --system-action-button-static-white-quiet-border-color-disabled: transparent; - --system-action-button-static-black-background-color-default: transparent; - --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300); - --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400); - --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300); - --system-action-button-static-black-border-color-default: var(--spectrum-transparent-black-400); - --system-action-button-static-black-border-color-hover: var(--spectrum-transparent-black-500); - --system-action-button-static-black-border-color-down: var(--spectrum-transparent-black-600); - --system-action-button-static-black-border-color-focus: var(--spectrum-transparent-black-500); - --system-action-button-static-black-content-color-default: var(--spectrum-black); - --system-action-button-static-black-content-color-hover: var(--spectrum-black); - --system-action-button-static-black-content-color-down: var(--spectrum-black); - --system-action-button-static-black-content-color-focus: var(--spectrum-black); - --system-action-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --system-action-button-static-black-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - --system-action-button-static-black-selected-background-color-default: var(--spectrum-transparent-black-800); - --system-action-button-static-black-selected-background-color-hover: var(--spectrum-transparent-black-900); - --system-action-button-static-black-selected-background-color-down: var(--spectrum-transparent-black-900); - --system-action-button-static-black-selected-background-color-focus: var(--spectrum-transparent-black-900); - --system-action-button-static-black-selected-content-color-defaul-selectedt: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --system-action-button-static-black-selected-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --system-action-button-static-black-selected-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --system-action-button-static-black-selected-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --system-action-button-static-black-selected-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --system-action-button-static-black-selected-border-color-disabled: transparent; - --system-action-button-static-white-background-color-default: transparent; - --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); - --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400); - --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300); - --system-action-button-static-white-border-color-default: var(--spectrum-transparent-white-400); - --system-action-button-static-white-border-color-hover: var(--spectrum-transparent-white-500); - --system-action-button-static-white-border-color-down: var(--spectrum-transparent-white-600); - --system-action-button-static-white-border-color-focus: var(--spectrum-transparent-white-500); - --system-action-button-static-white-content-color-default: var(--spectrum-white); - --system-action-button-static-white-content-color-hover: var(--spectrum-white); - --system-action-button-static-white-content-color-down: var(--spectrum-white); - --system-action-button-static-white-content-color-focus: var(--spectrum-white); - --system-action-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --system-action-button-static-white-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --system-action-button-static-white-selected-background-color-default: var(--spectrum-transparent-white-800); - --system-action-button-static-white-selected-background-color-hover: var(--spectrum-transparent-white-900); - --system-action-button-static-white-selected-background-color-down: var(--spectrum-transparent-white-900); - --system-action-button-static-white-selected-background-color-focus: var(--spectrum-transparent-white-900); - --system-action-button-static-white-selected-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --system-action-button-static-white-selected-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --system-action-button-static-white-selected-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --system-action-button-static-white-selected-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --system-action-button-static-white-selected-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --system-action-button-static-white-selected-border-color-disabled: transparent; -} - -.spectrum--express { - --system-action-button-background-color-default: var(--spectrum-gray-200); - --system-action-button-background-color-hover: var(--spectrum-gray-300); - --system-action-button-background-color-down: var(--spectrum-gray-400); - --system-action-button-background-color-focus: var(--spectrum-gray-300); - --system-action-button-border-color-default: transparent; - --system-action-button-border-color-hover: transparent; - --system-action-button-border-color-down: transparent; - --system-action-button-border-color-focus: transparent; - --system-action-button-background-color-disabled: var(--spectrum-disabled-background-color); - --system-action-button-border-color-disabled: transparent; - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var(--spectrum-gray-300); - --system-action-button-quiet-background-color-down: var(--spectrum-gray-400); - --system-action-button-quiet-background-color-focus: var(--spectrum-gray-300); - --system-action-button-static-black-border-color-default: transparent; - --system-action-button-static-white-border-color-default: transparent; - --system-action-button-static-black-border-color-hover: transparent; - --system-action-button-static-white-border-color-hover: transparent; - --system-action-button-static-black-border-color-down: transparent; - --system-action-button-static-white-border-color-down: transparent; - --system-action-button-static-black-border-color-focus: transparent; - --system-action-button-static-white-border-color-focus: transparent; - --system-action-button-static-black-background-color-default: var(--spectrum-transparent-black-200); - --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300); - --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400); - --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300); - --system-action-button-static-white-background-color-default: var(--spectrum-transparent-white-200); - --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); - --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400); - --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300); -} diff --git a/tokens/dist/css/components/express/actiongroup.css b/tokens/dist/css/components/express/actiongroup.css deleted file mode 100644 index ceafbbb9543..00000000000 --- a/tokens/dist/css/components/express/actiongroup.css +++ /dev/null @@ -1,39 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-action-group-gap-size-compact: 0; - --system-action-group-horizontal-spacing-compact: -1px; - --system-action-group-vertical-spacing-compact: -1px; - --system-action-group-button-spacing-reset: 0; - --system-action-group-border-radius-reset: 0; - --system-action-group-border-radius: var(--spectrum-corner-radius-100); - --system-action-group-size-xs-horizontal-spacing-regular: var(--spectrum-spacing-75); - --system-action-group-size-s-horizontal-spacing-regular: var(--spectrum-spacing-75); - --system-action-group-size-xs-vertical-spacing-regular: var(--spectrum-spacing-75); - --system-action-group-size-s-vertical-spacing-regular: var(--spectrum-spacing-75); - --system-action-group-horizontal-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-m-horizontal-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-l-horizontal-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-xl-horizontal-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-m-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-l-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-xl-vertical-spacing-regular: var(--spectrum-spacing-100); -} - -.spectrum--express { - --system-action-group-gap-size-compact: var(--spectrum-spacing-50); - --system-action-group-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - --system-action-group-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); -} diff --git a/tokens/dist/css/components/express/alertbanner.css b/tokens/dist/css/components/express/alertbanner.css deleted file mode 100644 index b126749b606..00000000000 --- a/tokens/dist/css/components/express/alertbanner.css +++ /dev/null @@ -1,35 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-alert-banner-netural-background: var(--spectrum-neutral-subdued-background-color-default); - --system-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); - --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --system-alert-banner-size: auto; - --system-alert-banner-font-size: var(--spectrum-font-size-100); - --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --system-alert-banner-start-edge: var(--spectrum-spacing-300); - --system-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); - --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --system-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); - --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --system-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); - --system-alert-banner-informative-background: var(--spectrum-informative-background-color-default); - --system-alert-banner-negative-background: var(--spectrum-negative-background-color-default); - --system-alert-banner-font-color: var(--spectrum-white); -} - -.spectrum--express { - --system-alert-banner-netural-background: var(--spectrum-neutral-background-color-default); -} diff --git a/tokens/dist/css/components/express/assetcard.css b/tokens/dist/css/components/express/assetcard.css deleted file mode 100644 index 21f689be61a..00000000000 --- a/tokens/dist/css/components/express/assetcard.css +++ /dev/null @@ -1,20 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-asset-card-overlay-background-color: rgba(27, 127, 245, 0.1); -} - -.spectrum--express { - --system-asset-card-overlay-background-color: rgba(109, 115, 246, 0.2); -} diff --git a/tokens/dist/css/components/express/button.css b/tokens/dist/css/components/express/button.css deleted file mode 100644 index d33fa9a6e02..00000000000 --- a/tokens/dist/css/components/express/button.css +++ /dev/null @@ -1,391 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-button-background-color-default: var(--spectrum-gray-75); - --system-button-background-color-hover: var(--spectrum-gray-200); - --system-button-background-color-down: var(--spectrum-gray-300); - --system-button-background-color-focus: var(--spectrum-gray-200); - --system-button-border-color-default: var(--spectrum-gray-400); - --system-button-border-color-hover: var(--spectrum-gray-500); - --system-button-border-color-down: var(--spectrum-gray-600); - --system-button-border-color-focus: var(--spectrum-gray-500); - --system-button-content-color-default: var(--spectrum-neutral-content-color-default); - --system-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-button-content-color-down: var(--spectrum-neutral-content-color-down); - --system-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var(--spectrum-disabled-border-color); - --system-button-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-size-s-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-s-border-radius: var(--spectrum-component-pill-edge-to-text-75); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); - --system-button-size-s-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); - --system-button-size-s-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); - --system-button-size-s-padding-label-to-icon: var(--spectrum-text-to-visual-75); - --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); - --system-button-size-s-bottom-to-text: var(--spectrum-button-bottom-to-text-small); - --system-button-size-s-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); - --system-button-size-s-intended-icon-size: var(--spectrum-workflow-icon-size-75); - --system-button-size-m-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-m-border-radius: var(--spectrum-component-pill-edge-to-text-100); - --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-size-m-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); - --system-button-size-m-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); - --system-button-size-m-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); - --system-button-size-m-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); - --system-button-size-m-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); - --system-button-size-m-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); - --system-button-size-m-intended-icon-size: var(--spectrum-workflow-icon-size-100); - --system-button-size-l-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-l-border-radius: var(--spectrum-component-pill-edge-to-text-200); - --system-button-size-l-height: var(--spectrum-component-height-200); - --system-button-size-l-font-size: var(--spectrum-font-size-200); - --system-button-size-l-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); - --system-button-size-l-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); - --system-button-size-l-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); - --system-button-size-l-padding-label-to-icon: var(--spectrum-text-to-visual-200); - --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); - --system-button-size-l-bottom-to-text: var(--spectrum-button-bottom-to-text-large); - --system-button-size-l-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); - --system-button-size-l-intended-icon-size: var(--spectrum-workflow-icon-size-200); - --system-button-size-xl-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-xl-border-radius: var(--spectrum-component-pill-edge-to-text-300); - --system-button-size-xl-height: var(--spectrum-component-height-300); - --system-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-button-size-xl-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); - --system-button-size-xl-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); - --system-button-size-xl-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); - --system-button-size-xl-padding-label-to-icon: var(--spectrum-text-to-visual-300); - --system-button-size-xl-top-to-text: var(--spectrum-button-top-to-text-extra-large); - --system-button-size-xl-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); - --system-button-size-xl-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); - --system-button-size-xl-intended-icon-size: var(--spectrum-workflow-icon-size-300); - --system-button-accent-background-color-default: var(--spectrum-accent-background-color-default); - --system-button-accent-background-color-hover: var(--spectrum-accent-background-color-hover); - --system-button-accent-background-color-down: var(--spectrum-accent-background-color-down); - --system-button-accent-background-color-focus: var(--spectrum-accent-background-color-key-focus); - --system-button-accent-border-color-default: transparent; - --system-button-accent-border-color-hover: transparent; - --system-button-accent-border-color-down: transparent; - --system-button-accent-border-color-focus: transparent; - --system-button-accent-content-color-default: var(--spectrum-white); - --system-button-accent-content-color-hover: var(--spectrum-white); - --system-button-accent-content-color-down: var(--spectrum-white); - --system-button-accent-content-color-focus: var(--spectrum-white); - --system-button-accent-background-color-disabled: var(--spectrum-disabled-background-color); - --system-button-accent-border-color-disabled: transparent; - --system-button-accent-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-accent-outline-background-color-default: transparent; - --system-button-accent-outline-background-color-hover: var(--spectrum-accent-color-200); - --system-button-accent-outline-background-color-down: var(--spectrum-accent-color-300); - --system-button-accent-outline-background-color-focus: var(--spectrum-accent-color-200); - --system-button-accent-outline-border-color-default: var(--spectrum-accent-color-900); - --system-button-accent-outline-border-color-hover: var(--spectrum-accent-color-1000); - --system-button-accent-outline-border-color-down: var(--spectrum-accent-color-1100); - --system-button-accent-outline-border-color-focus: var(--spectrum-accent-color-1000); - --system-button-accent-outline-content-color-default: var(--spectrum-accent-content-color-default); - --system-button-accent-outline-content-color-hover: var(--spectrum-accent-content-color-hover); - --system-button-accent-outline-content-color-down: var(--spectrum-accent-content-color-down); - --system-button-accent-outline-content-color-focus: var(--spectrum-accent-content-color-key-focus); - --system-button-accent-outline-background-color-disabled: transparent; - --system-button-accent-outline-border-color-disabled: var(--spectrum-disabled-border-color); - --system-button-accent-outline-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-negative-background-color-default: var(--spectrum-negative-background-color-default); - --system-button-negative-background-color-hover: var(--spectrum-negative-background-color-hover); - --system-button-negative-background-color-down: var(--spectrum-negative-background-color-down); - --system-button-negative-background-color-focus: var(--spectrum-negative-background-color-key-focus); - --system-button-negative-border-color-default: transparent; - --system-button-negative-border-color-hover: transparent; - --system-button-negative-border-color-down: transparent; - --system-button-negative-border-color-focus: transparent; - --system-button-negative-content-color-default: var(--spectrum-white); - --system-button-negative-content-color-hover: var(--spectrum-white); - --system-button-negative-content-color-down: var(--spectrum-white); - --system-button-negative-content-color-focus: var(--spectrum-white); - --system-button-negative-background-color-disabled: var(--spectrum-disabled-background-color); - --system-button-negative-border-color-disabled: transparent; - --system-button-negative-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-negative-outline-background-color-default: transparent; - --system-button-negative-outline-background-color-hover: var(--spectrum-negative-color-200); - --system-button-negative-outline-background-color-down: var(--spectrum-negative-color-300); - --system-button-negative-outline-background-color-focus: var(--spectrum-negative-color-200); - --system-button-negative-outline-border-color-default: var(--spectrum-negative-color-900); - --system-button-negative-outline-border-color-hover: var(--spectrum-negative-color-1000); - --system-button-negative-outline-border-color-down: var(--spectrum-negative-color-1100); - --system-button-negative-outline-border-color-focus: var(--spectrum-negative-color-1000); - --system-button-negative-outline-content-color-default: var(--spectrum-negative-content-color-default); - --system-button-negative-outline-content-color-hover: var(--spectrum-negative-content-color-hover); - --system-button-negative-outline-content-color-down: var(--spectrum-negative-content-color-down); - --system-button-negative-outline-content-color-focus: var(--spectrum-negative-content-color-key-focus); - --system-button-negative-outline-background-color-disabled: transparent; - --system-button-negative-outline-border-color-disabled: var(--spectrum-disabled-border-color); - --system-button-negative-outline-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-primary-background-color-default: var(--spectrum-neutral-background-color-default); - --system-button-primary-background-color-hover: var(--spectrum-neutral-background-color-hover); - --system-button-primary-background-color-down: var(--spectrum-neutral-background-color-down); - --system-button-primary-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - --system-button-primary-border-color-default: transparent; - --system-button-primary-border-color-hover: transparent; - --system-button-primary-border-color-down: transparent; - --system-button-primary-border-color-focus: transparent; - --system-button-primary-content-color-default: var(--spectrum-white); - --system-button-primary-content-color-hover: var(--spectrum-white); - --system-button-primary-content-color-down: var(--spectrum-white); - --system-button-primary-content-color-focus: var(--spectrum-white); - --system-button-primary-background-color-disabled: var(--spectrum-disabled-background-color); - --system-button-primary-border-color-disabled: transparent; - --system-button-primary-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-primary-outline-background-color-default: transparent; - --system-button-primary-outline-background-color-hover: var(--spectrum-gray-300); - --system-button-primary-outline-background-color-down: var(--spectrum-gray-400); - --system-button-primary-outline-background-color-focus: var(--spectrum-gray-300); - --system-button-primary-outline-border-color-default: var(--spectrum-gray-800); - --system-button-primary-outline-border-color-hover: var(--spectrum-gray-900); - --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); - --system-button-primary-outline-border-color-focus: var(--spectrum-gray-900); - --system-button-primary-outline-content-color-default: var(--spectrum-neutral-content-color-default); - --system-button-primary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-button-primary-outline-content-color-down: var(--spectrum-neutral-content-color-down); - --system-button-primary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-button-primary-outline-background-color-disabled: transparent; - --system-button-primary-outline-border-color-disabled: var(--spectrum-disabled-border-color); - --system-button-primary-outline-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-secondary-background-color-default: var(--spectrum-gray-200); - --system-button-secondary-background-color-hover: var(--spectrum-gray-300); - --system-button-secondary-background-color-down: var(--spectrum-gray-400); - --system-button-secondary-background-color-focus: var(--spectrum-gray-300); - --system-button-secondary-border-color-default: transparent; - --system-button-secondary-border-color-hover: transparent; - --system-button-secondary-border-color-down: transparent; - --system-button-secondary-border-color-focus: transparent; - --system-button-secondary-content-color-default: var(--spectrum-neutral-content-color-default); - --system-button-secondary-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-button-secondary-content-color-down: var(--spectrum-neutral-content-color-down); - --system-button-secondary-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-button-secondary-background-color-disabled: var(--spectrum-disabled-background-color); - --system-button-secondary-border-color-disabled: transparent; - --system-button-secondary-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-secondary-outline-background-color-default: transparent; - --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-300); - --system-button-secondary-outline-background-color-down: var(--spectrum-gray-400); - --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-300); - --system-button-secondary-outline-border-color-default: var(--spectrum-gray-300); - --system-button-secondary-outline-border-color-hover: var(--spectrum-gray-400); - --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500); - --system-button-secondary-outline-border-color-focus: var(--spectrum-gray-400); - --system-button-secondary-outline-content-color-default: var(--spectrum-neutral-content-color-default); - --system-button-secondary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-button-secondary-outline-content-color-down: var(--spectrum-neutral-content-color-down); - --system-button-secondary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-button-secondary-outline-background-color-disabled: transparent; - --system-button-secondary-outline-border-color-disabled: var(--spectrum-disabled-border-color); - --system-button-secondary-outline-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-quiet-background-color-default: transparent; - --system-button-quiet-background-color-hover: var(--spectrum-gray-200); - --system-button-quiet-background-color-down: var(--spectrum-gray-300); - --system-button-quiet-background-color-focus: var(--spectrum-gray-200); - --system-button-quiet-border-color-default: transparent; - --system-button-quiet-border-color-hover: transparent; - --system-button-quiet-border-color-down: transparent; - --system-button-quiet-border-color-focus: transparent; - --system-button-quiet-background-color-disabled: transparent; - --system-button-quiet-border-color-disabled: transparent; - --system-button-selected-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --system-button-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --system-button-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --system-button-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - --system-button-selected-border-color-default: transparent; - --system-button-selected-border-color-hover: transparent; - --system-button-selected-border-color-down: transparent; - --system-button-selected-border-color-focus: transparent; - --system-button-selected-content-color-default: var(--spectrum-white); - --system-button-selected-content-color-hover: var(--spectrum-white); - --system-button-selected-content-color-down: var(--spectrum-white); - --system-button-selected-content-color-focus: var(--spectrum-white); - --system-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); - --system-button-selected-border-color-disabled: transparent; - --system-button-selected-emphasized-background-color-default: var(--spectrum-accent-background-color-default); - --system-button-selected-emphasized-background-color-hover: var(--spectrum-accent-background-color-hover); - --system-button-selected-emphasized-background-color-down: var(--spectrum-accent-background-color-down); - --system-button-selected-emphasized-background-color-focus: var(--spectrum-accent-background-color-key-focus); - --system-button-static-black-quiet-border-color-default: transparent; - --system-button-static-white-quiet-border-color-default: transparent; - --system-button-static-black-quiet-border-color-hover: transparent; - --system-button-static-white-quiet-border-color-hover: transparent; - --system-button-static-black-quiet-border-color-down: transparent; - --system-button-static-white-quiet-border-color-down: transparent; - --system-button-static-black-quiet-border-color-focus: transparent; - --system-button-static-white-quiet-border-color-focus: transparent; - --system-button-static-black-quiet-border-color-disabled: transparent; - --system-button-static-white-quiet-border-color-disabled: transparent; - --system-button-static-white-background-color-default: var(--spectrum-transparent-white-800); - --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-900); - --system-button-static-white-background-color-down: var(--spectrum-transparent-white-900); - --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-900); - --system-button-static-white-border-color-default: transparent; - --system-button-static-white-border-color-hover: transparent; - --system-button-static-white-border-color-down: transparent; - --system-button-static-white-border-color-focus: transparent; - --system-button-static-white-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --system-button-static-white-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --system-button-static-white-border-color-disabled: transparent; - --system-button-static-white-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --system-button-static-white-outline-background-color-default: transparent; - --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-300); - --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-400); - --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-300); - --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-800); - --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-900); - --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-900); - --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-900); - --system-button-static-white-outline-content-color-default: var(--spectrum-white); - --system-button-static-white-outline-content-color-hover: var(--spectrum-white); - --system-button-static-white-outline-content-color-down: var(--spectrum-white); - --system-button-static-white-outline-content-color-focus: var(--spectrum-white); - --system-button-static-white-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --system-button-static-white-outline-background-color-disabled: transparent; - --system-button-static-white-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --system-button-static-white-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --system-button-static-white-selected-background-color-default: var(--spectrum-transparent-white-800); - --system-button-static-white-selected-background-color-hover: var(--spectrum-transparent-white-900); - --system-button-static-white-selected-background-color-down: var(--spectrum-transparent-white-900); - --system-button-static-white-selected-background-color-focus: var(--spectrum-transparent-white-900); - --system-button-static-white-selected-content-color-default: var(--mod-button-static-content-color, var(--spectrum-black)); - --system-button-static-white-selected-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-black)); - --system-button-static-white-selected-content-color-down: var(--mod-button-static-content-color, var(--spectrum-black)); - --system-button-static-white-selected-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-black)); - --system-button-static-white-selected-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --system-button-static-white-selected-border-color-disabled: transparent; - --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-200); - --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-300); - --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-400); - --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-300); - --system-button-static-white-secondary-border-color-default: transparent; - --system-button-static-white-secondary-border-color-hover: transparent; - --system-button-static-white-secondary-border-color-down: transparent; - --system-button-static-white-secondary-border-color-focus: transparent; - --system-button-static-white-secondary-content-color-default: var(--spectrum-white); - --system-button-static-white-secondary-content-color-hover: var(--spectrum-white); - --system-button-static-white-secondary-content-color-down: var(--spectrum-white); - --system-button-static-white-secondary-content-color-focus: var(--spectrum-white); - --system-button-static-white-secondary-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --system-button-static-white-secondary-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --system-button-static-white-secondary-border-color-disabled: transparent; - --system-button-static-white-secondary-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --system-button-static-white-secondary-outline-background-color-default: transparent; - --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-300); - --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-400); - --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-300); - --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-300); - --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400); - --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-500); - --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400); - --system-button-static-white-secondary-outline-content-color-default: var(--spectrum-white); - --system-button-static-white-secondary-outline-content-color-hover: var(--spectrum-white); - --system-button-static-white-secondary-outline-content-color-down: var(--spectrum-white); - --system-button-static-white-secondary-outline-content-color-focus: var(--spectrum-white); - --system-button-static-white-secondary-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --system-button-static-white-secondary-outline-background-color-disabled: transparent; - --system-button-static-white-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --system-button-static-white-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --system-button-static-black-background-color-default: var(--spectrum-transparent-black-800); - --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-900); - --system-button-static-black-background-color-down: var(--spectrum-transparent-black-900); - --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-900); - --system-button-static-black-border-color-default: transparent; - --system-button-static-black-border-color-hover: transparent; - --system-button-static-black-border-color-down: transparent; - --system-button-static-black-border-color-focus: transparent; - --system-button-static-black-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - --system-button-static-black-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --system-button-static-black-border-color-disabled: transparent; - --system-button-static-black-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - --system-button-static-black-outline-background-color-default: transparent; - --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-300); - --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-400); - --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-300); - --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-400); - --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-500); - --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-600); - --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-500); - --system-button-static-black-outline-content-color-default: var(--spectrum-black); - --system-button-static-black-outline-content-color-hover: var(--spectrum-black); - --system-button-static-black-outline-content-color-down: var(--spectrum-black); - --system-button-static-black-outline-content-color-focus: var(--spectrum-black); - --system-button-static-black-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - --system-button-static-black-outline-background-color-disabled: transparent; - --system-button-static-black-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --system-button-static-black-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-200); - --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-300); - --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-400); - --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-300); - --system-button-static-black-secondary-border-color-default: transparent; - --system-button-static-black-secondary-border-color-hover: transparent; - --system-button-static-black-secondary-border-color-down: transparent; - --system-button-static-black-secondary-border-color-focus: transparent; - --system-button-static-black-secondary-content-color-default: var(--spectrum-black); - --system-button-static-black-secondary-content-color-hover: var(--spectrum-black); - --system-button-static-black-secondary-content-color-down: var(--spectrum-black); - --system-button-static-black-secondary-content-color-focus: var(--spectrum-black); - --system-button-static-black-secondary-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - --system-button-static-black-secondary-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --system-button-static-black-secondary-border-color-disabled: transparent; - --system-button-static-black-secondary-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - --system-button-static-black-secondary-outline-background-color-default: transparent; - --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-300); - --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-400); - --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-300); - --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-300); - --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400); - --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-500); - --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400); - --system-button-static-black-secondary-outline-content-color-default: var(--spectrum-black); - --system-button-static-black-secondary-outline-content-color-hover: var(--spectrum-black); - --system-button-static-black-secondary-outline-content-color-down: var(--spectrum-black); - --system-button-static-black-secondary-outline-content-color-focus: var(--spectrum-black); - --system-button-static-black-secondary-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - --system-button-static-black-secondary-outline-background-color-disabled: transparent; - --system-button-static-black-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --system-button-static-black-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); -} - -.spectrum--express { - --system-button-background-color-default: var(--spectrum-gray-200); - --system-button-background-color-hover: var(--spectrum-gray-300); - --system-button-background-color-down: var(--spectrum-gray-400); - --system-button-background-color-focus: var(--spectrum-gray-300); - --system-button-border-color-default: transparent; - --system-button-border-color-hover: transparent; - --system-button-border-color-down: transparent; - --system-button-border-color-focus: transparent; - --system-button-background-color-disabled: var(--spectrum-disabled-background-color); - --system-button-border-color-disabled: transparent; - --system-button-selected-background-color-default: var(--spectrum-neutral-background-color-default); - --system-button-selected-background-color-hover: var(--spectrum-neutral-background-color-hover); - --system-button-selected-background-color-down: var(--spectrum-neutral-background-color-down); - --system-button-selected-background-color-focus: var(--spectrum-neutral-background-color-key-focus); -} diff --git a/tokens/dist/css/components/express/checkbox.css b/tokens/dist/css/components/express/checkbox.css deleted file mode 100644 index 79da49270cc..00000000000 --- a/tokens/dist/css/components/express/checkbox.css +++ /dev/null @@ -1,79 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-checkbox-control-color-default: var(--spectrum-gray-600); - --system-checkbox-control-color-hover: var(--spectrum-gray-700); - --system-checkbox-control-color-down: var(--spectrum-gray-800); - --system-checkbox-control-color-focus: var(--spectrum-gray-700); - --system-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); - --system-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); - --system-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); - --system-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); - --system-checkbox-checkmark-color: var(--spectrum-gray-50); - --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - --system-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); - --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - --system-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default); - --system-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --system-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down); - --system-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); - --system-checkbox-line-height: var(--spectrum-line-height-100); - --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-checkbox-border-width: var(--spectrum-border-width-200); - --system-checkbox-selected-border-width: calc(var(--system-checkbox-control-size) / 2); - --system-checkbox-animation-duration: var(--spectrum-animation-duration-100); - --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); - --system-checkbox-size-s-height: var(--spectrum-component-height-75); - --system-checkbox-size-s-control-size: var(--spectrum-checkbox-control-size-small); - --system-checkbox-size-s-top-to-text: var(--spectrum-component-top-to-text-75); - --system-checkbox-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-checkbox-font-size: var(--spectrum-font-size-100); - --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); - --system-checkbox-height: var(--spectrum-component-height-100); - --system-checkbox-size-m-height: var(--spectrum-component-height-100); - --system-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); - --system-checkbox-size-m-control-size: var(--spectrum-checkbox-control-size-medium); - --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --system-checkbox-size-m-top-to-text: var(--spectrum-component-top-to-text-100); - --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); - --system-checkbox-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); - --system-checkbox-size-l-height: var(--spectrum-component-height-200); - --system-checkbox-size-l-control-size: var(--spectrum-checkbox-control-size-large); - --system-checkbox-size-l-top-to-text: var(--spectrum-component-top-to-text-200); - --system-checkbox-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); - --system-checkbox-size-xl-height: var(--spectrum-component-height-300); - --system-checkbox-size-xl-control-size: var(--spectrum-checkbox-control-size-extra-large); - --system-checkbox-size-xl-top-to-text: var(--spectrum-component-top-to-text-300); - --system-checkbox-size-xl-text-to-control: var(--spectrum-text-to-control-300); -} - -.spectrum--express { - --system-checkbox-control-color-default: var(--spectrum-gray-800); - --system-checkbox-control-color-hover: var(--spectrum-gray-900); - --system-checkbox-control-color-down: var(--spectrum-gray-900); - --system-checkbox-control-color-focus: var(--spectrum-gray-900); -} diff --git a/tokens/dist/css/components/express/clearbutton.css b/tokens/dist/css/components/express/clearbutton.css deleted file mode 100644 index c1656d51b8e..00000000000 --- a/tokens/dist/css/components/express/clearbutton.css +++ /dev/null @@ -1,55 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-clear-button-background-color: transparent; - --system-clear-button-background-color-hover: transparent; - --system-clear-button-background-color-down: transparent; - --system-clear-button-background-color-key-focus: transparent; - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); - --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); - --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); - --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); - --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); - --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); - --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); - --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); - --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --system-clear-button-disabled-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-background-color: var(--mod-clear-button-background-color-disabled, transparent); -} - -.spectrum--express { - --system-clear-button-background-color: var(--spectrum-gray-200); - --system-clear-button-background-color-hover: var(--spectrum-gray-300); - --system-clear-button-background-color-down: var(--spectrum-gray-400); - --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); -} diff --git a/tokens/dist/css/components/express/closebutton.css b/tokens/dist/css/components/express/closebutton.css deleted file mode 100644 index 30395adf676..00000000000 --- a/tokens/dist/css/components/express/closebutton.css +++ /dev/null @@ -1,68 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-200); - --system-close-button-background-color-down: var(--spectrum-gray-300); - --system-close-button-background-color-focus: var(--spectrum-gray-200); - --system-close-button-size-300: 24px; - --system-close-button-size-400: 32px; - --system-close-button-size-500: 40px; - --system-close-button-size-600: 48px; - --system-close-button-icon-color-default: var(--spectrum-neutral-content-color-default); - --system-close-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-close-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-close-button-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-close-button-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-close-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-close-button-height: var(--spectrum-component-height-100); - --system-close-button-size: var(--system-close-button-size-400); - --system-close-button-border-radius: var(--system-close-button-size-400); - --system-close-button-animation-duration: var(--spectrum-animation-duration-100); - --system-closebutton-size-s-height: var(--spectrum-component-height-75); - --system-closebutton-size-s-size: var(--system-close-button-size-300); - --system-closebutton-size-s-border-radius: var(--system-close-button-size-300); - --system-closebutton-size-m-height: var(--spectrum-component-height-100); - --system-closebutton-size-m-size: var(--system-close-button-size-400); - --system-closebutton-size-m-border-radius: var(--system-close-button-size-400); - --system-closebutton-size-l-height: var(--spectrum-component-height-200); - --system-closebutton-size-l-size: var(--system-close-button-size-500); - --system-closebutton-size-l-border-radius: var(--system-close-button-size-500); - --system-closebutton-size-xl-height: var(--spectrum-component-height-300); - --system-closebutton-size-xl-size: var(--system-close-button-size-600); - --system-closebutton-size-xl-border-radius: var(--system-close-button-size-600); - --system-close-button-static-white-static-background-color-default: transparent; - --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300); - --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400); - --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-300); - --system-close-button-static-white-icon-color-default: var(--spectrum-white); - --system-close-button-static-white-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); - --system-close-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --system-close-button-static-black-static-background-color-default: transparent; - --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-300); - --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-400); - --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-300); - --system-close-button-static-black-icon-color-default: var(--spectrum-black); - --system-close-button-static-black-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); - --system-close-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); -} - -.spectrum--express { - --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-300); - --system-close-button-background-color-down: var(--spectrum-gray-400); - --system-close-button-background-color-focus: var(--spectrum-gray-300); -} diff --git a/tokens/dist/css/components/express/combobox.css b/tokens/dist/css/components/express/combobox.css deleted file mode 100644 index 3bcd25cf212..00000000000 --- a/tokens/dist/css/components/express/combobox.css +++ /dev/null @@ -1,141 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-combobox-border-color-default: var(--spectrum-gray-500); - --system-combobox-border-color-hover: var(--spectrum-gray-600); - --system-combobox-border-color-focus: var(--spectrum-gray-500); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --system-combobox-border-color-key-focus: var(--spectrum-gray-600); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--system-combobox-block-size)); - --system-combobox-button-width: var(--system-combobox-block-size); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); - --system-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --system-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); - --system-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); - --system-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); - --system-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --system-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); - --system-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); - --system-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var(--spectrum-field-label-to-component); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); - --system-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); - --system-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); - --system-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); - --system-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); - --system-combobox-textfield-focus-indicator-gap: var(--mod-combobox-focus-indicator-gap, var(--system-combobox-focus-indicator-gap)); - --system-combobox-textfield-focus-indicator-width: var(--mod-combobox-focus-indicator-thickness, var(--system-combobox-focus-indicator-thickness)); - --system-combobox-textfield-focus-indicator-color: var(--mod-combobox-focus-indicator-color, var(--system-combobox-focus-indicator-color)); - --system-combobox-textfield-background-color: var(--mod-combobox-background-color-default); - --system-combobox-textfield-background-color-disabled: var(--mod-combobox-background-color-disabled); - --system-combobox-textfield-font-family: var(--mod-combobox-font-family); - --system-combobox-textfield-font-weight: var(--mod-combobox-font-weight); - --system-combobox-textfield-text-color-default: var(--mod-combobox-font-color-default); - --system-combobox-textfield-text-color-hover: var(--mod-combobox-font-color-hover); - --system-combobox-textfield-text-color-focus: var(--mod-combobox-font-color-focus); - --system-combobox-textfield-text-color-focus-hover: var(--mod-combobox-font-color-focus-hover); - --system-combobox-textfield-text-color-keyboard-focus: var(--mod-combobox-font-color-key-focus); - --system-combobox-textfield-text-color-disabled: var(--mod-combobox-font-color-disabled); - --system-combobox-textfield-border-width: var(--mod-combobox-border-width, var(--system-combobox-border-width)); - --system-combobox-textfield-border-color: var(--mod-combobox-border-color-default, var(--system-combobox-border-color-default)); - --system-combobox-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled); - --system-combobox-textfield-border-color-focus: var(--mod-combobox-border-color-focus, var(--system-combobox-border-color-focus)); - --system-combobox-textfield-border-color-focus-hover: var(--mod-combobox-border-color-focus-hover, var(--system-combobox-border-color-focus-hover)); - --system-combobox-textfield-border-color-hover: var(--mod-combobox-border-color-hover, var(--system-combobox-border-color-hover)); - --system-combobox-textfield-border-color-keyboard-focus: var(--mod-combobox-border-color-key-focus, var(--system-combobox-border-color-key-focus)); - --system-combobox-textfield-border-color-invalid-default: var(--mod-combobox-border-color-invalid-default, var(--system-combobox-border-color-invalid-default)); - --system-combobox-textfield-border-color-invalid-hover: var(--mod-combobox-border-color-invalid-hover, var(--system-combobox-border-color-invalid-hover)); - --system-combobox-textfield-border-color-invalid-focus: var(--mod-combobox-border-color-invalid-focus, var(--system-combobox-border-color-invalid-focus)); - --system-combobox-textfield-border-color-invalid-focus-hover: var(--mod-combobox-border-color-invalid-focus-hover, var(--system-combobox-border-color-invalid-focus-hover)); - --system-combobox-textfield-border-color-invalid-keyboard-focus: var(--mod-combobox-border-color-invalid-key-focus, var(--system-combobox-border-color-invalid-key-focus)); - --system-combobox-textfield-icon-color-invalid: var(--mod-combobox-alert-icon-color); - --system-combobox-picker-button-border-width: var(--mod-combobox-border-width, var(--system-combobox-border-width)); - --system-combobox-picker-button-border-color: var(--mod-combobox-border-color-default, var(--system-combobox-border-color-default)); - --system-combobox-picker-button-background-color: var(--mod-combobox-background-color-default); - --system-combobox-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled); - --system-combobox-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --system-combobox-size-s-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small); - --system-combobox-size-s-spacing-edge-to-menu: var(--spectrum-component-to-menu-small); - --system-combobox-size-s-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); - --system-combobox-size-s-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --system-combobox-size-m-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); - --system-combobox-size-m-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); - --system-combobox-size-m-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); - --system-combobox-size-m-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --system-combobox-size-l-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); - --system-combobox-size-l-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); - --system-combobox-size-l-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); - --system-combobox-size-l-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --system-combobox-size-xl-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); - --system-combobox-size-xl-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); - --system-combobox-quiet-min-inline-size: calc(var(--spectrum-combo-box-quiet-minimum-width-multiplier) * var(--system-combobox-block-size)); - --system-combobox-quiet-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); - --system-combobox-quiet-spacing-label-to: var(--spectrum-field-label-to-component-quiet-medium); - --system-combobox-quiet-button-inline-offset: calc(var(--mod-combobox-block-size, var(--system-combobox-block-size)) / 2 - var(--mod-combobox-icon-size, var(--system-combobox-icon-size)) / 2); - --system-combobox-quiet-picker-button-background-color-quiet: transparent; - --system-combobox-quiet-picker-button-border-color-quiet: transparent; - --system-combobox-quiet-size-s-spacing-label-to: var(--spectrum-field-label-to-component-quiet-small); - --system-combobox-quiet-size-m-spacing-label-to: var(--spectrum-field-label-to-component-quiet-medium); - --system-combobox-quiet-size-l-spacing-label-to: var(--spectrum-field-label-to-component-quiet-large); - --system-combobox-quiet-size-xl-spacing-label-to: var(--spectrum-field-label-to-component-quiet-extra-large); -} - -.spectrum--express { - --system-combobox-border-color-default: var(--spectrum-gray-400); - --system-combobox-border-color-hover: var(--spectrum-gray-500); - --system-combobox-border-color-focus: var(--spectrum-gray-900); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); - --system-combobox-border-color-key-focus: var(--spectrum-gray-900); -} diff --git a/tokens/dist/css/components/express/datepicker.css b/tokens/dist/css/components/express/datepicker.css deleted file mode 100644 index 59dc30d43cc..00000000000 --- a/tokens/dist/css/components/express/datepicker.css +++ /dev/null @@ -1,59 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-date-picker-initial-height: var(--spectrum-component-height-100); - --system-date-picker-border-radius: var(--spectrum-corner-radius-100); - --system-date-picker-border-radius-quiet: 0; - --system-date-picker-border-width: var(--spectrum-border-width-100); - --system-date-picker-min-width: var(--spectrum-field-width); - --system-date-picker-icon-size: var(--spectrum-workflow-icon-size-100); - --system-date-picker-pickerbutton-border-color: var(--spectrum-gray-500); - --system-date-picker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); - --system-date-picker-pickerbutton-width: calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100)); - --system-date-picker-pickerbutton-width-quiet: calc(var(--system-date-picker-pickerbutton-width) - var(--system-date-picker-quiet-button-offset)); - --system-date-picker-quiet-button-offset: var(--spectrum-text-to-visual-100); - --system-date-picker-icon-to-button: var(--spectrum-text-to-visual-100); - --system-date-picker-icon-to-text: var(--spectrum-component-edge-to-text-100); - --system-date-picker-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-date-picker-focus-thickness: var(--spectrum-focus-indicator-thickness); - --system-date-picker-focus-animation: var(--spectrum-animation-duration-100); - --system-date-picker-focus-ring-width: var(--spectrum-border-width-100); - --system-date-picker-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-date-picker-focus-line-gap: var(--spectrum-spacing-75); - --system-date-picker-invalid-quiet-color: var(--spectrum-negative-border-color-default); - --system-date-picker-quiet-border-color-hover: var(--spectrum-gray-500); - --system-date-picker-border-color-disabled: var(--spectrum-disabled-border-color); - --system-date-picker-dash-font-size: var(--spectrum-font-size-100); - --system-date-picker-dash-color: var(--spectrum-neutral-content-color-default); - --system-date-picker-dash-color-disabled: var(--spectrum-disabled-content-color); - --system-date-picker-range-dash-marin-inline-start: calc(var(--system-date-picker-dash-font-size) * -0.5); - --system-date-picker-range-dash-padding-top: 0; - --system-date-picker-input-width-base: calc(var(--system-date-picker-range-input-width-first) + var(--system-date-picker-icon-size)); - --system-date-picker-input-width: calc(var(--system-date-picker-input-width-base) + var(--system-date-picker-initial-height)); - --system-date-picker-input-width-quiet: calc(var(--system-date-picker-range-input-width-quiet-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); - --system-date-picker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2); - --system-date-picker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); - --system-date-picker-datetime-input-width-first: calc(var(--system-date-picker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); - --system-date-picker-datetime-input-width: calc(var(--system-date-picker-datetime-input-width-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); - --system-date-picker-datetime-quiet-input-width-first: calc(var(--system-date-picker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); - --system-date-picker-datetime-quiet-input-width: calc(var(--system-date-picker-datetime-quiet-input-width-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); - --system-date-picker-padding-inline-end: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--system-date-picker-border-width) * 2); - --system-date-picker-padding-inline-end-quiet: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--system-date-picker-quiet-button-offset)); - --system-date-picker-padding-inline-end-invalid: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--system-date-picker-icon-to-button) + var(--system-date-picker-icon-size) - var(--system-date-picker-border-width) * 2); - --system-date-picker-padding-inline-end-invalid-quiet: calc(var(--system-date-picker-pickerbutton-width-quiet) + var(--system-date-picker-icon-size) + var(--system-date-picker-icon-to-text)); -} - -.spectrum--express { - --system-date-picker-initial-height: var(--spectrum-component-height-75); -} diff --git a/tokens/dist/css/components/express/infieldbutton.css b/tokens/dist/css/components/express/infieldbutton.css deleted file mode 100644 index 634b12d6451..00000000000 --- a/tokens/dist/css/components/express/infieldbutton.css +++ /dev/null @@ -1,92 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-infield-button-border-width: var(--spectrum-border-width-100); - --system-infield-button-border-color: inherit; - --system-infield-button-border-radius: var(--spectrum-corner-radius-100); - --system-infield-button-border-radius-reset: 0; - --system-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-border-radius-reset); - --system-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-border-radius-reset); - --system-infield-button-background-color: var(--spectrum-gray-75); - --system-infield-button-background-color-hover: var(--spectrum-gray-200); - --system-infield-button-background-color-down: var(--spectrum-gray-300); - --system-infield-button-background-color-key-focus: var(--spectrum-gray-200); - --system-infield-button-height: var(--spectrum-component-height-100); - --system-infield-button-width: var(--spectrum-component-height-100); - --system-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); - --system-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill); - --system-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill); - --system-infield-button-fill-padding: 0px; - --system-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium); - --system-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); - --system-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium); - --system-infield-button-animation-duration: var(--spectrum-animation-duration-100); - --system-infield-button-icon-color: var(--spectrum-neutral-content-color-default); - --system-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-infield-button-fill-justify-content: center; - --system-infield-button-disabled-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color)); - --system-infield-button-disabled-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); - --system-infield-button-disabled-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --system-infield-button-disabled-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color)); - --system-infield-button-disabled-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --system-infield-button-disabled-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-infield-button-disabled-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-infield-button-disabled-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color)); - --system-infield-button-size-s-height: var(--spectrum-component-height-75); - --system-infield-button-size-s-width: var(--spectrum-component-height-75); - --system-infield-button-size-s-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small); - --system-infield-button-size-s-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); - --system-infield-button-size-s-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small); - --system-infield-button-size-l-height: var(--spectrum-component-height-200); - --system-infield-button-size-l-width: var(--spectrum-component-height-200); - --system-infield-button-size-l-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large); - --system-infield-button-size-l-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); - --system-infield-button-size-l-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large); - --system-infield-button-size-xl-height: var(--spectrum-component-height-300); - --system-infield-button-size-xl-width: var(--spectrum-component-height-300); - --system-infield-button-size-xl-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large); - --system-infield-button-size-xl-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); - --system-infield-button-size-xl-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large); - --system-infield-button-top-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium)); - --system-infield-button-bottom-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium)); - --system-infield-button-top-size-s-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small)); - --system-infield-button-bottom-size-s-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small)); - --system-infield-button-top-size-l-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large)); - --system-infield-button-bottom-size-l-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large)); - --system-infield-button-top-size-xl-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large)); - --system-infield-button-bottom-size-xl-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large)); - --system-infield-button-quiet-background-color: var(--mod-infield-button-background-color-quiet, transparent); - --system-infield-button-quiet-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent); - --system-infield-button-quiet-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent); - --system-infield-button-quiet-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent); - --system-infield-button-quiet-infield-border-color: var(--mod-infield-border-color-quiet, transparent); - --system-infield-button-quiet-border-width: var(--mod-infield-button-border-width-quiet, 0); - --system-infield-button-quiet-disabled-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent); - --system-infield-button-quiet-disabled-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent); -} - -.spectrum--express { - --system-infield-button-border-width: 0; - --system-infield-button-border-color: transparent; - --system-infield-button-border-radius: var(--spectrum-corner-radius-75); - --system-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); - --system-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); - --system-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); - --system-infield-button-background-color: var(--spectrum-gray-200); - --system-infield-button-background-color-hover: var(--spectrum-gray-300); - --system-infield-button-background-color-down: var(--spectrum-gray-400); - --system-infield-button-background-color-key-focus: var(--spectrum-gray-300); -} diff --git a/tokens/dist/css/components/express/picker.css b/tokens/dist/css/components/express/picker.css deleted file mode 100644 index 7f06fa7062f..00000000000 --- a/tokens/dist/css/components/express/picker.css +++ /dev/null @@ -1,134 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-picker-background-color-default: var(--spectrum-gray-75); - --system-picker-background-color-default-open: var(--spectrum-gray-200); - --system-picker-background-color-active: var(--spectrum-gray-300); - --system-picker-background-color-hover: var(--spectrum-gray-200); - --system-picker-background-color-hover-open: var(--spectrum-gray-200); - --system-picker-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-border-color-default: var(--spectrum-gray-500); - --system-picker-border-color-default-open: var(--spectrum-gray-500); - --system-picker-border-color-hover: var(--spectrum-gray-600); - --system-picker-border-color-hover-open: var(--spectrum-gray-600); - --system-picker-border-color-active: var(--spectrum-gray-700); - --system-picker-border-color-key-focus: var(--spectrum-gray-600); - --system-picker-border-width: var(--spectrum-border-width-100); - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); - --system-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); - --system-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); - --system-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); - --system-picker-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --system-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); - --system-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --system-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); - --system-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var(--spectrum-neutral-content-color-default); - --system-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus); - --system-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); - --system-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); - --system-picker-font-color-active: var(--spectrum-neutral-content-color-down); - --system-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-picker-icon-color-default: var(--spectrum-neutral-content-color-default); - --system-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus); - --system-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); - --system-picker-icon-color-active: var(--spectrum-neutral-content-color-down); - --system-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-picker-border-color-error-default: var(--spectrum-negative-border-color-default); - --system-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus); - --system-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover); - --system-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover); - --system-picker-border-color-error-active: var(--spectrum-negative-border-color-down); - --system-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var(--spectrum-disabled-background-color); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-medium); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --system-picker-size-s-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --system-picker-size-s-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); - --system-picker-size-s-spacing-text-to-icon: var(--spectrum-text-to-visual-75); - --system-picker-size-s-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); - --system-picker-size-s-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-small); - --system-picker-size-s-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); - --system-picker-size-s-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --system-picker-size-s-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-small); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - --system-picker-size-l-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --system-picker-size-l-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); - --system-picker-size-l-spacing-text-to-icon: var(--spectrum-text-to-visual-200); - --system-picker-size-l-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); - --system-picker-size-l-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-large); - --system-picker-size-l-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); - --system-picker-size-l-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --system-picker-size-l-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-large); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); - --system-picker-size-xl-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --system-picker-size-xl-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); - --system-picker-size-xl-spacing-text-to-icon: var(--spectrum-text-to-visual-300); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); - --system-picker-size-xl-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --system-picker-size-xl-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); - --system-picker-size-xl-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-extra-large); -} - -.spectrum--express { - --system-picker-background-color-default: var(--spectrum-gray-200); - --system-picker-background-color-default-open: var(--spectrum-gray-300); - --system-picker-background-color-hover: var(--spectrum-gray-300); - --system-picker-background-color-hover-open: var(--spectrum-gray-300); - --system-picker-background-color-active: var(--spectrum-gray-400); - --system-picker-background-color-key-focus: var(--spectrum-gray-300); - --system-picker-border-color-default: transparent; - --system-picker-border-color-default-open: transparent; - --system-picker-border-color-hover: transparent; - --system-picker-border-color-hover-open: transparent; - --system-picker-border-color-active: transparent; - --system-picker-border-color-key-focus: transparent; - --system-picker-border-width: 0px; -} diff --git a/tokens/dist/css/components/express/pickerbutton.css b/tokens/dist/css/components/express/pickerbutton.css deleted file mode 100644 index 9ddc3c74862..00000000000 --- a/tokens/dist/css/components/express/pickerbutton.css +++ /dev/null @@ -1,86 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-picker-button-background-color: var(--spectrum-gray-75); - --system-picker-button-background-color-hover: var(--spectrum-gray-200); - --system-picker-button-background-color-down: var(--spectrum-gray-300); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-button-border-color: inherit; - --system-picker-button-border-radius: var(--spectrum-corner-radius-100); - --system-picker-button-border-radius-rounded-sided: 0; - --system-picker-button-border-radius-sided: 0; - --system-picker-button-border-width: var(--spectrum-border-width-100); - --system-picker-button-height: var(--spectrum-component-height-100); - --system-picker-button-width: var(--spectrum-component-height-100); - --system-picker-button-gap: var(--spectrum-text-to-visual-50); - --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --system-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); - --system-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200); - --system-picker-button-icon-color: var(--spectrum-neutral-content-color-default); - --system-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-picker-button-font-color: var(--spectrum-neutral-content-color-default); - --system-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover); - --system-picker-button-font-color-down: var(--spectrum-neutral-content-color-down); - --system-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --system-picker-button-font-style: var(--spectrum-default-font-style); - --system-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-picker-button-font-size: var(--spectrum-font-size-100); - --system-picker-button-background-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-button-background-color-disabled: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color)); - --system-picker-button-background-color-hover-disabled: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); - --system-picker-button-background-color-down-disabled: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --system-picker-button-border-color-disabled: var(--mod-picker-button-border-color-disabled, var(--spectrum-disabled-background-color)); - --system-picker-button-font-color-disabled: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color)); - --system-picker-button-font-color-hover-disabled: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-picker-button-font-color-down-disabled: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-picker-button-icon-color-disabled: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --system-picker-button-icon-color-hover-disabled: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-picker-button-icon-color-down-disabled: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-picker-button-quiet-background-color: var(--mod-picker-button-background-color-quiet, transparent); - --system-picker-button-quiet-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent); - --system-picker-button-quiet-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent); - --system-picker-button-quiet-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent); - --system-picker-button-quiet-border-color: var(--mod-picker-button-border-color-quiet, transparent); - --system-picker-button-size-s-height: var(--spectrum-component-height-75); - --system-picker-button-size-s-width: var(--spectrum-component-height-75); - --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); - --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-button-size-s-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75); - --system-picker-button-size-l-height: var(--spectrum-component-height-200); - --system-picker-button-size-l-width: var(--spectrum-component-height-200); - --system-picker-button-size-l-label-padding: var(--spectrum-text-to-visual-200); - --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-button-size-l-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200); - --system-picker-button-size-xl-height: var(--spectrum-component-height-300); - --system-picker-button-size-xl-width: var(--spectrum-component-height-300); - --system-picker-button-size-xl-label-padding: var(--spectrum-text-to-visual-300); - --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-button-size-xl-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300); -} - -.spectrum--express { - --system-picker-button-background-color: var(--spectrum-gray-200); - --system-picker-button-background-color-hover: var(--spectrum-gray-300); - --system-picker-button-background-color-down: var(--spectrum-gray-400); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); - --system-picker-button-border-color: none; - --system-picker-button-border-radius: var(--spectrum-corner-radius-75); - --system-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); - --system-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); - --system-picker-button-border-width: 0px; -} diff --git a/tokens/dist/css/components/express/popover.css b/tokens/dist/css/components/express/popover.css deleted file mode 100644 index 04482acfb5a..00000000000 --- a/tokens/dist/css/components/express/popover.css +++ /dev/null @@ -1,33 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-popover-border-width: var(--spectrum-border-width-100); - --system-popover-animation-distance: var(--spectrum-spacing-100); - --system-popover-background-color: var(--spectrum-background-layer-2-color); - --system-popover-border-color: var(--spectrum-gray-400); - --system-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area); - --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-popover-shadow-color: var(--spectrum-drop-shadow-color); - --system-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-popover-pointer-width: var(--spectrum-popover-tip-width); - --system-popover-pointer-height: var(--spectrum-popover-tip-height); - --system-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / 2); - --system-popover-pointer-edge-spacing: calc(var(--system-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2); -} - -.spectrum--express { - --system-popover-border-width: 0; -} diff --git a/tokens/dist/css/components/express/radio.css b/tokens/dist/css/components/express/radio.css deleted file mode 100644 index 5eb1026d60d..00000000000 --- a/tokens/dist/css/components/express/radio.css +++ /dev/null @@ -1,89 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-radio-button-border-color-default: var(--spectrum-gray-600); - --system-radio-button-border-color-hover: var(--spectrum-gray-700); - --system-radio-button-border-color-down: var(--spectrum-gray-800); - --system-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); - --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); - --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); - --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); - --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); - --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); - --system-radio-border-width: var(--spectrum-border-width-200); - --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); - --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); - --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); - --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); - --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); - --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); - --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); - --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); - --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); -} - -.spectrum--express { - --system-radio-button-border-color-default: var(--spectrum-gray-800); - --system-radio-button-border-color-hover: var(--spectrum-gray-900); - --system-radio-button-border-color-down: var(--spectrum-gray-900); - --system-radio-button-border-color-focus: var(--spectrum-gray-900); -} diff --git a/tokens/dist/css/components/express/rating.css b/tokens/dist/css/components/express/rating.css deleted file mode 100644 index 2d32157100c..00000000000 --- a/tokens/dist/css/components/express/rating.css +++ /dev/null @@ -1,41 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --system-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --system-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --system-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --system-rating-icon-height: var(--spectrum-workflow-icon-size-100); - --system-rating-icon-width: var(--spectrum-workflow-icon-size-100); - --system-rating-border-radius: var(--spectrum-corner-radius-100); - --system-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-rating-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); - --system-rating-indicator-border-radius: var(--spectrum-corner-radius-75); - --system-rating-indicator-height: var(--spectrum-border-width-200); - --system-rating-emphasized-icon-color-default: var(--spectrum-accent-content-color-default); - --system-rating-emphasized-icon-color-hover: var(--spectrum-accent-content-color-hover); - --system-rating-emphasized-icon-color-down: var(--spectrum-accent-content-color-down); - --system-rating-emphasized-icon-color-key-focus: var(--spectrum-accent-content-color-key-focus); - --system-rating-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-rating-icon-count: var(--system-rating-icon-count); -} - -.spectrum--express { - --system-rating-icon-color-default: var(--spectrum-neutral-content-color-default); - --system-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-rating-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-rating-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); -} diff --git a/tokens/dist/css/components/express/search.css b/tokens/dist/css/components/express/search.css deleted file mode 100644 index cfd6d1c943a..00000000000 --- a/tokens/dist/css/components/express/search.css +++ /dev/null @@ -1,87 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-search-border-color-default: var(--spectrum-gray-500); - --system-search-border-color-hover: var(--spectrum-gray-600); - --system-search-border-color-focus: var(--spectrum-gray-800); - --system-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-button-inline-size: var(--system-search-block-size); - --system-search-min-inline-size: calc(var(--spectrum-search-field-minimum-width-multiplier) * var(--system-search-block-size)); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var(--spectrum-neutral-content-color-default); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); - --system-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-search-border-width: var(--spectrum-border-width-100); - --system-search-background-color: var(--spectrum-gray-25); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var(--spectrum-disabled-background-color); - --system-search-border-color-disabled: var(--spectrum-disabled-background-color); - --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-s-edge-to-visual: var(--spectrum-component-edge-to-visual-75); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); - --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-l-edge-to-visual: var(--spectrum-component-edge-to-visual-200); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); - --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-xl-edge-to-visual: var(--spectrum-component-edge-to-visual-300); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-quiet-button-offset: calc(var(--mod-search-block-size, var(--system-search-block-size)) / 2 - var(--mod-workflow-icon-size-100, var(--spectrum-workflow-icon-size-100)) / 2); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); -} - -.spectrum--express { - --system-search-border-radius: calc(var(--spectrum-component-height-100) / 2); - --system-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); - --system-search-border-color-default: var(--spectrum-gray-400); - --system-search-border-color-hover: var(--spectrum-gray-500); - --system-search-border-color-focus: var(--spectrum-gray-800); - --system-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-size-s-border-radius: calc(var(--spectrum-component-height-75) / 2); - --system-search-size-s-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75); - --system-search-size-m-border-radius: calc(var(--spectrum-component-height-100) / 2); - --system-search-size-m-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); - --system-search-size-l-border-radius: calc(var(--spectrum-component-height-200) / 2); - --system-search-size-l-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); - --system-search-size-xl-border-radius: calc(var(--spectrum-component-height-300) / 2); - --system-search-size-xl-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); -} diff --git a/tokens/dist/css/components/express/slider.css b/tokens/dist/css/components/express/slider.css deleted file mode 100644 index bbe962352ac..00000000000 --- a/tokens/dist/css/components/express/slider.css +++ /dev/null @@ -1,109 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-slider-track-color: var(--spectrum-gray-300); - --system-slider-track-fill-color: var(--spectrum-gray-700); - --system-slider-ramp-track-color: var(--spectrum-gray-400); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --system-slider-handle-background-color: transparent; - --system-slider-handle-background-color-disabled: transparent; - --system-slider-ramp-handle-background-color: var(--spectrum-gray-100); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-100); - --system-slider-handle-border-color: var(--spectrum-gray-700); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-100); - --system-slider-tick-mark-color: var(--spectrum-gray-300); - --system-slider-handle-border-color-hover: var(--spectrum-gray-800); - --system-slider-handle-border-color-down: var(--spectrum-gray-800); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - --system-slider-font-size: var(--spectrum-font-size-75); - --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --system-slider-control-height: var(--spectrum-component-height-100); - --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); - --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); - --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-value-inline-size: 18px; - --system-slider-dir-rtl-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - --system-slider-size-s-font-size: var(--spectrum-font-size-75); - --system-slider-size-s-handle-size: var(--spectrum-slider-handle-size-small); - --system-slider-size-s-control-height: var(--spectrum-component-height-75); - --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-size-s-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); - --system-slider-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-slider-size-s-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); - --system-slider-size-s-value-side-padding-inline: var(--spectrum-spacing-100); - --system-slider-size-l-font-size: var(--spectrum-font-size-100); - --system-slider-size-l-handle-size: var(--spectrum-slider-handle-size-large); - --system-slider-size-l-control-height: var(--spectrum-component-height-200); - --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - --system-slider-size-l-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); - --system-slider-size-l-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-slider-size-l-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); - --system-slider-size-l-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-size-l-value-inline-size: 18px; - --system-slider-size-xl-font-size: var(--spectrum-font-size-200); - --system-slider-size-xl-handle-size: var(--spectrum-slider-handle-size-extra-large); - --system-slider-size-xl-control-height: var(--spectrum-component-height-300); - --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - --system-slider-size-xl-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); - --system-slider-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-200); - --system-slider-size-xl-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); - --system-slider-size-xl-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-size-xl-value-inline-size: 22px; - --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-slider-min-size: var(--spectrum-spacing-900); - --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); - --system-slider-label-margin-start: var(--spectrum-spacing-300); - --system-slider-handle-border-width: var(--spectrum-border-width-200); - --system-slider-handle-margin-left: calc(var(--system-slider-handle-size) / -2); - --system-slider-controls-margin: calc(var(--system-slider-handle-size) / 2); - --system-slider-track-margin-offset: calc(var(--system-slider-controls-margin) * -1); - --system-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + var(--system-slider-handle-size) / 2); - --system-slider-input-top-size: calc(var(--system-slider-handle-size) / -2 / 4); - --system-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); - --system-slider-tick-mark-width: var(--spectrum-border-width-200); - --system-slider-tick-mark-border-radius: 2px; - --system-slider-tick-handle-background-color: var(--spectrum-gray-75); - --system-slider-track-color-disabled: var(--spectrum-disabled-background-color); - --system-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); - --system-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); - --system-slider-label-text-color: var(--spectrum-neutral-content-color-default); - --system-slider-tick-label-color: var(--spectrum-neutral-content-color-default); - --system-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); - --system-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); - --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); - --system-slider-input-left: calc(var(--system-slider-handle-margin-left) / 4); - --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --system-slider-range-track-reset: 0; -} - -.spectrum--express { - --system-slider-track-color: var(--spectrum-gray-200); - --system-slider-track-fill-color: var(--spectrum-gray-600); - --system-slider-ramp-track-color: var(--spectrum-gray-300); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --system-slider-handle-background-color: var(--spectrum-gray-50); - --system-slider-handle-background-color-disabled: var(--spectrum-gray-50); - --system-slider-ramp-handle-background-color: var(--spectrum-gray-50); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-50); - --system-slider-handle-border-color: var(--spectrum-gray-800); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-50); - --system-slider-tick-mark-color: var(--spectrum-gray-200); - --system-slider-handle-border-color-hover: var(--spectrum-gray-900); - --system-slider-handle-border-color-down: var(--spectrum-gray-900); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); - --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); -} diff --git a/tokens/dist/css/components/express/stepper.css b/tokens/dist/css/components/express/stepper.css deleted file mode 100644 index ab24c35bad5..00000000000 --- a/tokens/dist/css/components/express/stepper.css +++ /dev/null @@ -1,95 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-stepper-border-width: var(--spectrum-border-width-100); - --system-stepper-buttons-border-style: none; - --system-stepper-buttons-border-width: 0; - --system-stepper-buttons-border-color: var(--spectrum-gray-500); - --system-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --system-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-button-border-radius-reset: 0px; - --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color: var(--spectrum-gray-500); - --system-stepper-border-color-hover: var(--spectrum-gray-600); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); - --system-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); - --system-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); - --system-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); - --system-stepper-button-background-color-focus: var(--spectrum-gray-300); - --system-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); - --system-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-stepper-width: calc(var(--mod-stepper-height, var(--system-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--system-stepper-button-width)) + var(--mod-stepper-border-width, var(--system-stepper-border-width)) * 2); - --system-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-stepper-button-offset: calc(var(--system-stepper-button-width) / 2); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); - --system-stepper-size-s-button-width: var(--spectrum-in-field-button-width-stacked-small); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-size-l-button-width: var(--spectrum-in-field-button-width-stacked-large); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var(--spectrum-in-field-button-width-stacked-extra-large); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); - --system-stepper-quiet-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--system-stepper-button-width)); - --system-stepper-quiet-textfield-focus-indicator-color: transparent; - --system-stepper-disabled-infield-button-border-color-quiet-disabled: var(--spectrum-disabled-border-color); - --system-stepper-invalid-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default)); - --system-stepper-invalid-border-color-hover: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); - --system-stepper-invalid-border-color-focus: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-negative-border-color-focus)); - --system-stepper-invalid-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover)); - --system-stepper-invalid-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus)); - --system-stepper-invalid-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--system-stepper-border-color-invalid)); - --system-stepper-invalid-textfield-icon-spacing-inline-start-invalid: 0; - --system-stepper-invalid-focused-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--system-stepper-border-color-focus-invalid)); - --system-stepper-invalid-focus-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--system-stepper-border-color-focus-invalid)); - --system-stepper-invalid-hover-infield-button-border-color: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); - --system-stepper-invalid-focused-hover-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--system-stepper-border-color-focus-hover-invalid)); - --system-stepper-invalid-focus-hover-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--system-stepper-border-color-focus-hover-invalid)); - --system-stepper-invalid-keyboard-focused-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--system-stepper-border-color-keyboard-focus-invalid)); - --system-stepper-invalid-focus-visible-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--system-stepper-border-color-keyboard-focus-invalid)); -} - -.spectrum--express { - --system-stepper-border-width: var(--spectrum-border-width-200); - --system-stepper-buttons-border-style: solid; - --system-stepper-buttons-border-width: var(--spectrum-border-width-200); - --system-stepper-buttons-border-color: transparent; - --system-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-stepper-buttons-border-color-hover: transparent; - --system-stepper-buttons-border-color-focus: transparent; - --system-stepper-buttons-border-color-keyboard-focus: transparent; - --system-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); - --system-stepper-button-border-width: 0; - --system-stepper-border-color: var(--spectrum-gray-400); - --system-stepper-border-color-hover: var(--spectrum-gray-500); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-color-invalid: transparent; - --system-stepper-border-color-focus-invalid: transparent; - --system-stepper-border-color-focus-hover-invalid: transparent; - --system-stepper-border-color-keyboard-focus-invalid: transparent; - --system-stepper-button-background-color-focus: var(--spectrum-gray-400); - --system-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); - --system-stepper-disabled-buttons-background-color: var(--spectrum-disabled-background-color); - --system-stepper-disabled-buttons-border-width: 0; -} diff --git a/tokens/dist/css/components/express/switch.css b/tokens/dist/css/components/express/switch.css deleted file mode 100644 index a8e263b9b4a..00000000000 --- a/tokens/dist/css/components/express/switch.css +++ /dev/null @@ -1,87 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-switch-handle-border-color-default: var(--spectrum-gray-600); - --system-switch-handle-border-color-hover: var(--spectrum-gray-700); - --system-switch-handle-border-color-down: var(--spectrum-gray-800); - --system-switch-handle-border-color-focus: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-default: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); - --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); - --system-switch-label-color-default: var(--spectrum-neutral-content-color-default); - --system-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); - --system-switch-label-color-down: var(--spectrum-neutral-content-color-down); - --system-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-switch-label-color-disabled: var(--spectrum-disabled-content-color); - --system-switch-background-color: var(--spectrum-gray-200); - --system-switch-background-color-disabled: var(--spectrum-gray-200); - --system-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); - --system-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); - --system-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --system-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); - --system-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - --system-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - --system-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-switch-handle-background-color: var(--spectrum-gray-50); - --system-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); - --system-switch-disabled-label-color-default: var(--spectrum-disabled-content-color); - --system-switch-emphasized-background-color-selected-default: var(--spectrum-accent-color-900); - --system-switch-emphasized-background-color-selected-hover: var(--spectrum-accent-color-1000); - --system-switch-emphasized-background-color-selected-down: var(--spectrum-accent-color-1100); - --system-switch-emphasized-background-color-selected-focus: var(--spectrum-accent-color-1000); - --system-switch-emphasized-handle-border-color-selected-default: var(--spectrum-accent-color-900); - --system-switch-emphasized-handle-border-color-selected-hover: var(--spectrum-accent-color-1000); - --system-switch-emphasized-handle-border-color-selected-down: var(--spectrum-accent-color-1100); - --system-switch-emphasized-handle-border-color-selected-focus: var(--spectrum-accent-color-1000); - --system-switch-size-s-min-height: var(--spectrum-component-height-75); - --system-switch-size-s-control-width: var(--spectrum-switch-control-width-small); - --system-switch-size-s-control-height: var(--spectrum-switch-control-height-small); - --system-switch-size-s-control-label-spacing: var(--spectrum-text-to-control-75); - --system-switch-size-s-spacing-top-to-control: var(--spectrum-switch-top-to-control-small); - --system-switch-size-s-spacing-top-to-label: var(--spectrum-component-top-to-text-75); - --system-switch-size-s-font-size: var(--spectrum-font-size-75); - --system-switch-size-m-min-height: var(--spectrum-component-height-100); - --system-switch-size-m-control-width: var(--spectrum-switch-control-width-medium); - --system-switch-size-m-control-height: var(--spectrum-switch-control-height-medium); - --system-switch-size-m-control-label-spacing: var(--spectrum-text-to-control-100); - --system-switch-size-m-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium); - --system-switch-size-m-spacing-top-to-label: var(--spectrum-component-top-to-text-100); - --system-switch-size-m-font-size: var(--spectrum-font-size-100); - --system-switch-size-l-min-height: var(--spectrum-component-height-200); - --system-switch-size-l-control-width: var(--spectrum-switch-control-width-large); - --system-switch-size-l-control-height: var(--spectrum-switch-control-height-large); - --system-switch-size-l-control-label-spacing: var(--spectrum-text-to-control-200); - --system-switch-size-l-spacing-top-to-control: var(--spectrum-switch-top-to-control-large); - --system-switch-size-l-spacing-top-to-label: var(--spectrum-component-top-to-text-200); - --system-switch-size-l-font-size: var(--spectrum-font-size-200); - --system-switch-size-xl-min-height: var(--spectrum-component-height-300); - --system-switch-size-xl-control-width: var(--spectrum-switch-control-width-extra-large); - --system-switch-size-xl-control-height: var(--spectrum-switch-control-height-extra-large); - --system-switch-size-xl-control-label-spacing: var(--spectrum-text-to-control-300); - --system-switch-size-xl-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large); - --system-switch-size-xl-spacing-top-to-label: var(--spectrum-component-top-to-text-300); - --system-switch-size-xl-font-size: var(--spectrum-font-size-300); -} - -.spectrum--express { - --system-switch-handle-border-color-default: var(--spectrum-gray-800); - --system-switch-handle-border-color-hover: var(--spectrum-gray-900); - --system-switch-handle-border-color-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-focus: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-default: var(--spectrum-gray-800); - --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); -} diff --git a/tokens/dist/css/components/express/tabs.css b/tokens/dist/css/components/express/tabs.css deleted file mode 100644 index aa6c8ac936f..00000000000 --- a/tokens/dist/css/components/express/tabs.css +++ /dev/null @@ -1,106 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-tabs-font-weight: var(--spectrum-default-font-weight); - --system-tabs-item-height: var(--spectrum-tab-item-height-medium); - --system-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); - --system-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium); - --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); - --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --system-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); - --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --system-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium); - --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down); - --system-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --system-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --system-tabs-color-disabled: var(--spectrum-gray-500); - --system-tabs-font-family: var(--spectrum-sans-font-family-stack); - --system-tabs-font-style: var(--spectrum-default-font-style); - --system-tabs-font-size: var(--spectrum-font-size-100); - --system-tabs-line-height: var(--spectrum-line-height-100); - --system-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --system-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100); - --system-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium); - --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down); - --system-tabs-list-background-direction: top; - --system-tabs-divider-background-color: var(--spectrum-gray-300); - --system-tabs-divider-size: var(--spectrum-border-width-200); - --system-tabs-divider-border-radius: 1px; - --system-tabs-animation-duration: var(--spectrum-animation-duration-100); - --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); - --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); - --system-tabs-size-s-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small); - --system-tabs-size-s-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small); - --system-tabs-size-s-start-to-edge: var(--spectrum-tab-item-start-to-edge-small); - --system-tabs-size-s-top-to-text: var(--spectrum-tab-item-top-to-text-small); - --system-tabs-size-s-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small); - --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); - --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); - --system-tabs-size-s-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small); - --system-tabs-size-s-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small); - --system-tabs-size-s-font-size: var(--spectrum-font-size-75); - --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); - --system-tabs-size-l-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large); - --system-tabs-size-l-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large); - --system-tabs-size-l-start-to-edge: var(--spectrum-tab-item-start-to-edge-large); - --system-tabs-size-l-top-to-text: var(--spectrum-tab-item-top-to-text-large); - --system-tabs-size-l-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large); - --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-tabs-size-l-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large); - --system-tabs-size-l-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large); - --system-tabs-size-l-font-size: var(--spectrum-font-size-200); - --system-tabs-size-xl-item-height: var(--spectrum-tab-item-height-extra-large); - --system-tabs-size-xl-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large); - --system-tabs-size-xl-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large); - --system-tabs-size-xl-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large); - --system-tabs-size-xl-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large); - --system-tabs-size-xl-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large); - --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-tabs-size-xl-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large); - --system-tabs-size-xl-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large); - --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); - --system-tabs-emphasized-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-accent-content-color-default)); - --system-tabs-emphasized-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-accent-content-color-hover)); - --system-tabs-emphasized-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-accent-content-color-key-focus)); - --system-tabs-emphasized-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-accent-content-color-default)); - --system-tabs-vertical-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); - --system-tabs-vertical-right-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left); - --system-tabs-vertical-dir-rtl-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left); - --system-tabs-vertical-right-dir-rtl-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); - --system-tabs-compact-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium)); - --system-tabs-compact-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); - --system-tabs-compact-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); - --system-tabs-compact-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)); - --system-tabs-compact-size-s-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small)); - --system-tabs-compact-size-s-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); - --system-tabs-compact-size-s-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); - --system-tabs-compact-size-s-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small)); - --system-tabs-compact-size-l-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large)); - --system-tabs-compact-size-l-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); - --system-tabs-compact-size-l-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); - --system-tabs-compact-size-l-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large)); - --system-tabs-compact-size-xl-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large)); - --system-tabs-compact-size-xl-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); - --system-tabs-compact-size-xl-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); - --system-tabs-compact-size-xl-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large)); -} - -.spectrum--express { - --system-tabs-font-weight: var(--spectrum-bold-font-weight); -} diff --git a/tokens/dist/css/components/express/tag.css b/tokens/dist/css/components/express/tag.css deleted file mode 100644 index 82bb6e1970d..00000000000 --- a/tokens/dist/css/components/express/tag.css +++ /dev/null @@ -1,182 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-tag-border-color: var(--spectrum-gray-700); - --system-tag-border-color-hover: var(--spectrum-gray-800); - --system-tag-border-color-active: var(--spectrum-gray-900); - --system-tag-border-color-focus: var(--spectrum-gray-800); - --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-background-color: var(--spectrum-gray-75); - --system-tag-background-color-hover: var(--spectrum-gray-75); - --system-tag-background-color-active: var(--spectrum-gray-200); - --system-tag-background-color-focus: var(--spectrum-gray-75); - --system-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --system-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); - --system-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --system-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); - --system-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); - --system-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); - --system-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - --system-tag-border-color-disabled: transparent; - --system-tag-background-color-disabled: var(--spectrum-disabled-background-color); - --system-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); - --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); - --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); - --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); - --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); - --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); - --system-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); - --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); - --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); - --system-tag-avatar-opacity-disabled: 0.3; - --system-tag-animation-duration: var(--spectrum-animation-duration-100); - --system-tag-border-width: var(--spectrum-border-width-100); - --system-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); - --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-tag-label-line-height: var(--spectrum-line-height-100); - --system-tag-label-font-weight: var(--spectrum-regular-font-weight); - --system-tag-content-color-selected: var(--spectrum-gray-50); - --system-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); - --system-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --system-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); - --system-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - --system-tag-border-color-invalid: var(--spectrum-negative-color-900); - --system-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); - --system-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); - --system-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); - --system-tag-content-color-invalid: var(--spectrum-negative-content-color-default); - --system-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover); - --system-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down); - --system-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus); - --system-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default); - --system-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --system-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down); - --system-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus); - --system-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default); - --system-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --system-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down); - --system-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus); - --system-tag-content-color-invalid-selected: var(--spectrum-white); - --system-tag-border-color-emphasized: var(--spectrum-accent-background-color-default); - --system-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover); - --system-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down); - --system-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); - --system-tag-background-color-emphasized: var(--spectrum-accent-background-color-default); - --system-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover); - --system-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down); - --system-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); - --system-tag-content-color-emphasized: var(--spectrum-white); - --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); - --system-tag-size-s-height: var(--spectrum-component-height-75); - --system-tag-size-s-font-size: var(--spectrum-font-size-75); - --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tag-size-s-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75); - --system-tag-size-s-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); - --system-tag-size-s-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); - --system-tag-size-s-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); - --system-tag-size-s-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tag-size-s-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); - --system-tag-size-s-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); - --system-tag-size-s-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tag-size-s-label-spacing-block: var(--spectrum-component-top-to-text-75); - --system-tag-size-s-corner-radius: var(--system-tag-size-small-corner-radius); - --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); - --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); - --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); - --system-tag-height: var(--spectrum-component-height-100); - --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); - --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --system-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --system-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); - --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); - --system-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); - --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); - --system-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); - --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); - --system-tag-size-l-height: var(--spectrum-component-height-200); - --system-tag-size-l-font-size: var(--spectrum-font-size-200); - --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tag-size-l-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200); - --system-tag-size-l-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large); - --system-tag-size-l-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200); - --system-tag-size-l-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200); - --system-tag-size-l-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); - --system-tag-size-l-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large); - --system-tag-size-l-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large); - --system-tag-size-l-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200); - --system-tag-size-l-label-spacing-block: var(--spectrum-component-top-to-text-200); - --system-tag-size-l-corner-radius: var(--system-tag-size-large-corner-radius); - --system-tag-size-l-spacing-inline-start: var(--system-tag-size-large-spacing-inline-start); - --system-tag-size-l-label-spacing-inline-end: var(--system-tag-size-large-label-spacing-inline-end); - --system-tag-size-l-clear-button-spacing-inline-end: var(--system-tag-size-large-clear-button-spacing-inline-end); -} - -.spectrum--express { - --system-tag-background-color: transparent; - --system-tag-background-color-hover: var(--spectrum-gray-300); - --system-tag-background-color-active: var(--spectrum-gray-400); - --system-tag-background-color-focus: var(--spectrum-gray-300); - --system-tag-size-small-corner-radius: var(--spectrum-component-height-75); - --system-tag-size-medium-corner-radius: var(--spectrum-component-height-100); - --system-tag-size-large-corner-radius: var(--spectrum-component-height-200); - --system-tag-border-color: var(--spectrum-gray-300); - --system-tag-border-color-hover: var(--spectrum-gray-400); - --system-tag-border-color-active: var(--spectrum-gray-500); - --system-tag-border-color-focus: var(--spectrum-gray-400); - --system-tag-content-color: var(--spectrum-neutral-content-color-default); - --system-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-tag-content-color-active: var(--spectrum-neutral-content-color-down); - --system-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-tag-border-color-selected: var(--spectrum-neutral-background-color-default); - --system-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover); - --system-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down); - --system-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus); - --system-tag-border-color-disabled: var(--spectrum-disabled-border-color); - --system-tag-background-color-disabled: transparent; - --system-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75); - --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75); - --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75); - --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100); - --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100); - --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100); - --system-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200); - --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200); - --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200); -} diff --git a/tokens/dist/css/components/express/textfield.css b/tokens/dist/css/components/express/textfield.css deleted file mode 100644 index 730a1514fd1..00000000000 --- a/tokens/dist/css/components/express/textfield.css +++ /dev/null @@ -1,162 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-textfield-border-color: var(--spectrum-gray-500); - --system-textfield-border-color-hover: var(--spectrum-gray-600); - --system-textfield-border-color-focus: var(--spectrum-gray-800); - --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-textfield-border-width: var(--spectrum-border-width-100); - --system-textfield-texfield-animation-duration: var(--spectrum-animation-duration-100); - --system-textfield-width: 240px; - --system-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet); - --system-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100); - --system-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100); - --system-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet); - --system-textfield-label-spacing-block: var(--spectrum-field-label-to-component); - --system-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet); - --system-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-character-count-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-spacing-inline: var(--spectrum-spacing-200); - --system-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); - --system-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-textfield-background-color: var(--spectrum-gray-50); - --system-textfield-text-color-default: var(--spectrum-neutral-content-color-default); - --system-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); - --system-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus); - --system-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); - --system-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus); - --system-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); - --system-textfield-background-color-disabled: var(--spectrum-disabled-background-color); - --system-textfield-border-color-disabled: var(--spectrum-disabled-border-color); - --system-textfield-text-color-disabled: var(--spectrum-disabled-content-color); - --system-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default); - --system-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); - --system-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); - --system-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); - --system-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); - --system-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); - --system-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default); - --system-textfield-text-color-valid: var(--spectrum-neutral-content-color-default); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-textfield-text-area-min-inline-size: var(--spectrum-text-area-minimum-width); - --system-textfield-text-area-min-block-size: var(--spectrum-text-area-minimum-height); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); - --system-textfield-size-s-label-spacing-inline-side-label: var(--spectrum-spacing-100); - --system-textfield-size-s-placeholder-font-size: var(--spectrum-font-size-75); - --system-textfield-size-s-spacing-inline: var(--spectrum-component-edge-to-text-75); - --system-textfield-size-s-icon-size-invalid: var(--spectrum-workflow-icon-size-75); - --system-textfield-size-s-icon-size-valid: var(--spectrum-checkmark-icon-size-75); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); - --system-textfield-size-s-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); - --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); - --system-textfield-size-s-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); - --system-textfield-size-s-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); - --system-textfield-size-s-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-s-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --system-textfield-size-s-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); - --system-textfield-size-s-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); - --system-textfield-size-s-text-area-min-block-size-quiet: var(--spectrum-component-height-75); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --system-textfield-size-m-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --system-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --system-textfield-size-m-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); - --system-textfield-size-m-spacing-inline: var(--spectrum-component-edge-to-text-100); - --system-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); - --system-textfield-size-m-icon-size-invalid: var(--spectrum-workflow-icon-size-100); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); - --system-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); - --system-textfield-size-m-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); - --system-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); - --system-textfield-size-m-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); - --system-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); - --system-textfield-size-m-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); - --system-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); - --system-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); - --system-textfield-size-m-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --system-textfield-size-m-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --system-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); - --system-textfield-size-m-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); - --system-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); - --system-textfield-size-m-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); - --system-textfield-text-area-min-block-size-quiet: var(--spectrum-component-height-100); - --system-textfield-size-m-text-area-min-block-size-quiet: var(--spectrum-component-height-100); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); - --system-textfield-size-l-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --system-textfield-size-l-placeholder-font-size: var(--spectrum-font-size-200); - --system-textfield-size-l-spacing-inline: var(--spectrum-component-edge-to-text-200); - --system-textfield-size-l-icon-size-invalid: var(--spectrum-workflow-icon-size-200); - --system-textfield-size-l-icon-size-valid: var(--spectrum-checkmark-icon-size-200); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); - --system-textfield-size-l-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); - --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); - --system-textfield-size-l-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); - --system-textfield-size-l-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); - --system-textfield-size-l-character-count-font-size: var(--spectrum-font-size-100); - --system-textfield-size-l-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); - --system-textfield-size-l-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); - --system-textfield-size-l-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); - --system-textfield-size-l-text-area-min-block-size-quiet: var(--spectrum-component-height-200); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --system-textfield-size-xl-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --system-textfield-size-xl-placeholder-font-size: var(--spectrum-font-size-300); - --system-textfield-size-xl-spacing-inline: var(--spectrum-component-edge-to-text-200); - --system-textfield-size-xl-icon-size-invalid: var(--spectrum-workflow-icon-size-300); - --system-textfield-size-xl-icon-size-valid: var(--spectrum-checkmark-icon-size-300); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); - --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); - --system-textfield-size-xl-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); - --system-textfield-size-xl-character-count-font-size: var(--spectrum-font-size-200); - --system-textfield-size-xl-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); - --system-textfield-size-xl-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); - --system-textfield-size-xl-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); - --system-textfield-size-xl-text-area-min-block-size-quiet: var(--spectrum-component-height-300); -} - -.spectrum--express { - --system-textfield-border-color: var(--spectrum-gray-400); - --system-textfield-border-color-hover: var(--spectrum-gray-500); - --system-textfield-border-color-focus: var(--spectrum-gray-800); - --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-textfield-border-width: var(--spectrum-border-width-200); -} diff --git a/tokens/dist/css/components/express/toast.css b/tokens/dist/css/components/express/toast.css deleted file mode 100644 index 40555cee1b2..00000000000 --- a/tokens/dist/css/components/express/toast.css +++ /dev/null @@ -1,45 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); - --system-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); - --system-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); - --system-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); - --system-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); - --system-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); - --system-toast-text-and-icon-color: var(--spectrum-white); - --system-toast-divider-color: var(--spectrum-transparent-white-300); -} - -.spectrum--express { - --system-toast-background-color-default: var(--spectrum-neutral-background-color-default); -} diff --git a/tokens/dist/css/components/express/tooltip.css b/tokens/dist/css/components/express/tooltip.css deleted file mode 100644 index e4b4ac2f00e..00000000000 --- a/tokens/dist/css/components/express/tooltip.css +++ /dev/null @@ -1,48 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); - --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); - --system-tooltip-margin: 0px; - --system-tooltip-height: var(--spectrum-component-height-75); - --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --system-tooltip-border-radius: var(--spectrum-corner-radius-100); - --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --system-tooltip-font-size: var(--spectrum-font-size-75); - --system-tooltip-line-height: var(--spectrum-line-height-100); - --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-tooltip-font-weight: var(--spectrum-regular-font-weight); - --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - --system-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75); - --system-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75); - --system-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); - --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); - --system-tooltip-background-color-informative: var(--spectrum-informative-background-color-default); - --system-tooltip-background-color-positive: var(--spectrum-positive-background-color-default); - --system-tooltip-background-color-negative: var(--spectrum-negative-background-color-default); - --system-tooltip-content-color: var(--spectrum-white); - --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); - --system-tooltip-tip-height-percentage: 50%; - --system-tooltip-tip-antialiasing-inset: 0.5px; - --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - --system-tooltip-background-color-default: var(--system-tooltip-backgound-color-default-neutral); -} - -.spectrum--express { - --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default); -} diff --git a/tokens/dist/css/components/spectrum/actionbutton.css b/tokens/dist/css/components/spectrum/actionbutton.css deleted file mode 100644 index 3d797dfb1a7..00000000000 --- a/tokens/dist/css/components/spectrum/actionbutton.css +++ /dev/null @@ -1,184 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-action-button-background-color-default: var(--spectrum-gray-75); - --system-action-button-background-color-hover: var(--spectrum-gray-200); - --system-action-button-background-color-down: var(--spectrum-gray-300); - --system-action-button-background-color-focus: var(--spectrum-gray-200); - --system-action-button-border-color-default: var(--spectrum-gray-400); - --system-action-button-border-color-hover: var(--spectrum-gray-500); - --system-action-button-border-color-down: var(--spectrum-gray-600); - --system-action-button-border-color-focus: var(--spectrum-gray-500); - --system-action-button-background-color-disabled: transparent; - --system-action-button-border-color-disabled: var(--spectrum-disabled-border-color); - --system-action-button-content-color-disabled: var(--spectrum-disabled-content-color); - --system-action-button-animation-duration: var(--spectrum-animation-duration-100); - --system-action-button-border-radius: var(--spectrum-corner-radius-100); - --system-action-button-border-width: var(--spectrum-border-width-100); - --system-action-button-content-color-default: var(--spectrum-neutral-content-color-default); - --system-action-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-action-button-content-color-down: var(--spectrum-neutral-content-color-down); - --system-action-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-action-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-action-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-action-button-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var(--spectrum-gray-200); - --system-action-button-quiet-background-color-down: var(--spectrum-gray-300); - --system-action-button-quiet-background-color-focus: var(--spectrum-gray-200); - --system-action-button-quiet-border-color-default: transparent; - --system-action-button-quiet-border-color-hover: transparent; - --system-action-button-quiet-border-color-down: transparent; - --system-action-button-quiet-border-color-focus: transparent; - --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-border-color-disabled: transparent; - --system-action-button-selected-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); - --system-action-button-selected-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); - --system-action-button-selected-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); - --system-action-button-selected-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); - --system-action-button-selected-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50)); - --system-action-button-selected-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50)); - --system-action-button-selected-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50)); - --system-action-button-selected-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50)); - --system-action-button-selected-border-color-default: transparent; - --system-action-button-selected-border-color-hover: transparent; - --system-action-button-selected-border-color-down: transparent; - --system-action-button-selected-border-color-focus: transparent; - --system-action-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); - --system-action-button-selected-border-color-disabled: transparent; - --system-action-button-selected-emphasized-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); - --system-action-button-selected-emphasized-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); - --system-action-button-selected-emphasized-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); - --system-action-button-selected-emphasized-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); - --system-action-button-selected-emphasized-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); - --system-action-button-selected-emphasized-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); - --system-action-button-selected-emphasized-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); - --system-action-button-selected-emphasized-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); - --system-action-button-size-xs-min-width: calc(var(--spectrum-component-edge-to-visual-only-50) * 2 + var(--spectrum-workflow-icon-size-50)); - --system-action-button-size-xs-height: var(--spectrum-component-height-50); - --system-action-button-size-xs-icon-size: var(--spectrum-workflow-icon-size-50); - --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); - --system-action-button-size-xs-text-to-visual: var(--spectrum-text-to-visual-50); - --system-action-button-size-xs-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); - --system-action-button-size-xs-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-50) - var(--system-action-button-border-width)); - --system-action-button-size-xs-edge-to-text: calc(var(--spectrum-component-edge-to-text-50) - var(--system-action-button-border-width)); - --system-action-button-size-xs-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-50) - var(--system-action-button-border-width)); - --system-action-button-size-s-min-width: calc(var(--spectrum-component-edge-to-visual-only-75) * 2 + var(--spectrum-workflow-icon-size-75)); - --system-action-button-size-s-height: var(--spectrum-component-height-75); - --system-action-button-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-action-button-size-s-font-size: var(--spectrum-font-size-75); - --system-action-button-size-s-text-to-visual: var(--spectrum-text-to-visual-75); - --system-action-button-size-s-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); - --system-action-button-size-s-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-75) - var(--system-action-button-border-width)); - --system-action-button-size-s-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--system-action-button-border-width)); - --system-action-button-size-s-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-75) - var(--system-action-button-border-width)); - --system-action-button-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); - --system-action-button-size-m-min-width: calc(var(--spectrum-component-edge-to-visual-only-100) * 2 + var(--spectrum-workflow-icon-size-100)); - --system-action-button-height: var(--spectrum-component-height-100); - --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-font-size: var(--spectrum-font-size-100); - --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-size-m-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --system-action-button-size-m-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --system-action-button-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); - --system-action-button-size-m-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-100) - var(--system-action-button-border-width)); - --system-action-button-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); - --system-action-button-size-m-edge-to-text: calc(var(--spectrum-component-edge-to-text-100) - var(--system-action-button-border-width)); - --system-action-button-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); - --system-action-button-size-m-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-100) - var(--system-action-button-border-width)); - --system-action-button-size-l-min-width: calc(var(--spectrum-component-edge-to-visual-only-200) * 2 + var(--spectrum-workflow-icon-size-200)); - --system-action-button-size-l-height: var(--spectrum-component-height-200); - --system-action-button-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-action-button-size-l-font-size: var(--spectrum-font-size-200); - --system-action-button-size-l-text-to-visual: var(--spectrum-text-to-visual-200); - --system-action-button-size-l-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); - --system-action-button-size-l-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-200) - var(--system-action-button-border-width)); - --system-action-button-size-l-edge-to-text: calc(var(--spectrum-component-edge-to-text-200) - var(--system-action-button-border-width)); - --system-action-button-size-l-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-200) - var(--system-action-button-border-width)); - --system-action-button-size-xl-min-width: calc(var(--spectrum-component-edge-to-visual-only-300) * 2 + var(--spectrum-workflow-icon-size-300)); - --system-action-button-size-xl-height: var(--spectrum-component-height-300); - --system-action-button-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-action-button-size-xl-text-to-visual: var(--spectrum-text-to-visual-300); - --system-action-button-size-xl-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); - --system-action-button-size-xl-edge-to-visual: calc(var(--spectrum-component-edge-to-visual-300) - var(--system-action-button-border-width)); - --system-action-button-size-xl-edge-to-text: calc(var(--spectrum-component-edge-to-text-300) - var(--system-action-button-border-width)); - --system-action-button-size-xl-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-300) - var(--system-action-button-border-width)); - --system-action-button-static-black-quiet-border-color-default: transparent; - --system-action-button-static-white-quiet-border-color-default: transparent; - --system-action-button-static-black-quiet-border-color-hover: transparent; - --system-action-button-static-white-quiet-border-color-hover: transparent; - --system-action-button-static-black-quiet-border-color-down: transparent; - --system-action-button-static-white-quiet-border-color-down: transparent; - --system-action-button-static-black-quiet-border-color-focus: transparent; - --system-action-button-static-white-quiet-border-color-focus: transparent; - --system-action-button-static-black-quiet-border-color-disabled: transparent; - --system-action-button-static-white-quiet-border-color-disabled: transparent; - --system-action-button-static-black-background-color-default: transparent; - --system-action-button-static-black-background-color-hover: var(--spectrum-transparent-black-300); - --system-action-button-static-black-background-color-down: var(--spectrum-transparent-black-400); - --system-action-button-static-black-background-color-focus: var(--spectrum-transparent-black-300); - --system-action-button-static-black-border-color-default: var(--spectrum-transparent-black-400); - --system-action-button-static-black-border-color-hover: var(--spectrum-transparent-black-500); - --system-action-button-static-black-border-color-down: var(--spectrum-transparent-black-600); - --system-action-button-static-black-border-color-focus: var(--spectrum-transparent-black-500); - --system-action-button-static-black-content-color-default: var(--spectrum-black); - --system-action-button-static-black-content-color-hover: var(--spectrum-black); - --system-action-button-static-black-content-color-down: var(--spectrum-black); - --system-action-button-static-black-content-color-focus: var(--spectrum-black); - --system-action-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --system-action-button-static-black-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - --system-action-button-static-black-selected-background-color-default: var(--spectrum-transparent-black-800); - --system-action-button-static-black-selected-background-color-hover: var(--spectrum-transparent-black-900); - --system-action-button-static-black-selected-background-color-down: var(--spectrum-transparent-black-900); - --system-action-button-static-black-selected-background-color-focus: var(--spectrum-transparent-black-900); - --system-action-button-static-black-selected-content-color-defaul-selectedt: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --system-action-button-static-black-selected-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --system-action-button-static-black-selected-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --system-action-button-static-black-selected-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --system-action-button-static-black-selected-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --system-action-button-static-black-selected-border-color-disabled: transparent; - --system-action-button-static-white-background-color-default: transparent; - --system-action-button-static-white-background-color-hover: var(--spectrum-transparent-white-300); - --system-action-button-static-white-background-color-down: var(--spectrum-transparent-white-400); - --system-action-button-static-white-background-color-focus: var(--spectrum-transparent-white-300); - --system-action-button-static-white-border-color-default: var(--spectrum-transparent-white-400); - --system-action-button-static-white-border-color-hover: var(--spectrum-transparent-white-500); - --system-action-button-static-white-border-color-down: var(--spectrum-transparent-white-600); - --system-action-button-static-white-border-color-focus: var(--spectrum-transparent-white-500); - --system-action-button-static-white-content-color-default: var(--spectrum-white); - --system-action-button-static-white-content-color-hover: var(--spectrum-white); - --system-action-button-static-white-content-color-down: var(--spectrum-white); - --system-action-button-static-white-content-color-focus: var(--spectrum-white); - --system-action-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --system-action-button-static-white-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --system-action-button-static-white-selected-background-color-default: var(--spectrum-transparent-white-800); - --system-action-button-static-white-selected-background-color-hover: var(--spectrum-transparent-white-900); - --system-action-button-static-white-selected-background-color-down: var(--spectrum-transparent-white-900); - --system-action-button-static-white-selected-background-color-focus: var(--spectrum-transparent-white-900); - --system-action-button-static-white-selected-content-color-default: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --system-action-button-static-white-selected-content-color-hover: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --system-action-button-static-white-selected-content-color-down: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --system-action-button-static-white-selected-content-color-focus: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --system-action-button-static-white-selected-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --system-action-button-static-white-selected-border-color-disabled: transparent; -} diff --git a/tokens/dist/css/components/spectrum/actiongroup.css b/tokens/dist/css/components/spectrum/actiongroup.css deleted file mode 100644 index b600d2b7687..00000000000 --- a/tokens/dist/css/components/spectrum/actiongroup.css +++ /dev/null @@ -1,33 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-action-group-gap-size-compact: 0; - --system-action-group-horizontal-spacing-compact: -1px; - --system-action-group-vertical-spacing-compact: -1px; - --system-action-group-button-spacing-reset: 0; - --system-action-group-border-radius-reset: 0; - --system-action-group-border-radius: var(--spectrum-corner-radius-100); - --system-action-group-size-xs-horizontal-spacing-regular: var(--spectrum-spacing-75); - --system-action-group-size-s-horizontal-spacing-regular: var(--spectrum-spacing-75); - --system-action-group-size-xs-vertical-spacing-regular: var(--spectrum-spacing-75); - --system-action-group-size-s-vertical-spacing-regular: var(--spectrum-spacing-75); - --system-action-group-horizontal-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-m-horizontal-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-l-horizontal-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-xl-horizontal-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-m-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-l-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-xl-vertical-spacing-regular: var(--spectrum-spacing-100); -} diff --git a/tokens/dist/css/components/spectrum/alertbanner.css b/tokens/dist/css/components/spectrum/alertbanner.css deleted file mode 100644 index 1f9c1d43df1..00000000000 --- a/tokens/dist/css/components/spectrum/alertbanner.css +++ /dev/null @@ -1,31 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-alert-banner-netural-background: var(--spectrum-neutral-subdued-background-color-default); - --system-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); - --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --system-alert-banner-size: auto; - --system-alert-banner-font-size: var(--spectrum-font-size-100); - --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --system-alert-banner-start-edge: var(--spectrum-spacing-300); - --system-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); - --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --system-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); - --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --system-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); - --system-alert-banner-informative-background: var(--spectrum-informative-background-color-default); - --system-alert-banner-negative-background: var(--spectrum-negative-background-color-default); - --system-alert-banner-font-color: var(--spectrum-white); -} diff --git a/tokens/dist/css/components/spectrum/assetcard.css b/tokens/dist/css/components/spectrum/assetcard.css deleted file mode 100644 index 6fd39d8c2c3..00000000000 --- a/tokens/dist/css/components/spectrum/assetcard.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-asset-card-overlay-background-color: rgba(27, 127, 245, 0.1); -} diff --git a/tokens/dist/css/components/spectrum/button.css b/tokens/dist/css/components/spectrum/button.css deleted file mode 100644 index 8db8126d38a..00000000000 --- a/tokens/dist/css/components/spectrum/button.css +++ /dev/null @@ -1,374 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-button-background-color-default: var(--spectrum-gray-75); - --system-button-background-color-hover: var(--spectrum-gray-200); - --system-button-background-color-down: var(--spectrum-gray-300); - --system-button-background-color-focus: var(--spectrum-gray-200); - --system-button-border-color-default: var(--spectrum-gray-400); - --system-button-border-color-hover: var(--spectrum-gray-500); - --system-button-border-color-down: var(--spectrum-gray-600); - --system-button-border-color-focus: var(--spectrum-gray-500); - --system-button-content-color-default: var(--spectrum-neutral-content-color-default); - --system-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-button-content-color-down: var(--spectrum-neutral-content-color-down); - --system-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var(--spectrum-disabled-border-color); - --system-button-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-size-s-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-s-border-radius: var(--spectrum-component-pill-edge-to-text-75); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); - --system-button-size-s-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); - --system-button-size-s-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); - --system-button-size-s-padding-label-to-icon: var(--spectrum-text-to-visual-75); - --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); - --system-button-size-s-bottom-to-text: var(--spectrum-button-bottom-to-text-small); - --system-button-size-s-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); - --system-button-size-s-intended-icon-size: var(--spectrum-workflow-icon-size-75); - --system-button-size-m-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-m-border-radius: var(--spectrum-component-pill-edge-to-text-100); - --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-size-m-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); - --system-button-size-m-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); - --system-button-size-m-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); - --system-button-size-m-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); - --system-button-size-m-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); - --system-button-size-m-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); - --system-button-size-m-intended-icon-size: var(--spectrum-workflow-icon-size-100); - --system-button-size-l-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-l-border-radius: var(--spectrum-component-pill-edge-to-text-200); - --system-button-size-l-height: var(--spectrum-component-height-200); - --system-button-size-l-font-size: var(--spectrum-font-size-200); - --system-button-size-l-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); - --system-button-size-l-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); - --system-button-size-l-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); - --system-button-size-l-padding-label-to-icon: var(--spectrum-text-to-visual-200); - --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); - --system-button-size-l-bottom-to-text: var(--spectrum-button-bottom-to-text-large); - --system-button-size-l-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); - --system-button-size-l-intended-icon-size: var(--spectrum-workflow-icon-size-200); - --system-button-size-xl-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); - --system-button-size-xl-border-radius: var(--spectrum-component-pill-edge-to-text-300); - --system-button-size-xl-height: var(--spectrum-component-height-300); - --system-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-button-size-xl-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); - --system-button-size-xl-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); - --system-button-size-xl-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); - --system-button-size-xl-padding-label-to-icon: var(--spectrum-text-to-visual-300); - --system-button-size-xl-top-to-text: var(--spectrum-button-top-to-text-extra-large); - --system-button-size-xl-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); - --system-button-size-xl-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); - --system-button-size-xl-intended-icon-size: var(--spectrum-workflow-icon-size-300); - --system-button-accent-background-color-default: var(--spectrum-accent-background-color-default); - --system-button-accent-background-color-hover: var(--spectrum-accent-background-color-hover); - --system-button-accent-background-color-down: var(--spectrum-accent-background-color-down); - --system-button-accent-background-color-focus: var(--spectrum-accent-background-color-key-focus); - --system-button-accent-border-color-default: transparent; - --system-button-accent-border-color-hover: transparent; - --system-button-accent-border-color-down: transparent; - --system-button-accent-border-color-focus: transparent; - --system-button-accent-content-color-default: var(--spectrum-white); - --system-button-accent-content-color-hover: var(--spectrum-white); - --system-button-accent-content-color-down: var(--spectrum-white); - --system-button-accent-content-color-focus: var(--spectrum-white); - --system-button-accent-background-color-disabled: var(--spectrum-disabled-background-color); - --system-button-accent-border-color-disabled: transparent; - --system-button-accent-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-accent-outline-background-color-default: transparent; - --system-button-accent-outline-background-color-hover: var(--spectrum-accent-color-200); - --system-button-accent-outline-background-color-down: var(--spectrum-accent-color-300); - --system-button-accent-outline-background-color-focus: var(--spectrum-accent-color-200); - --system-button-accent-outline-border-color-default: var(--spectrum-accent-color-900); - --system-button-accent-outline-border-color-hover: var(--spectrum-accent-color-1000); - --system-button-accent-outline-border-color-down: var(--spectrum-accent-color-1100); - --system-button-accent-outline-border-color-focus: var(--spectrum-accent-color-1000); - --system-button-accent-outline-content-color-default: var(--spectrum-accent-content-color-default); - --system-button-accent-outline-content-color-hover: var(--spectrum-accent-content-color-hover); - --system-button-accent-outline-content-color-down: var(--spectrum-accent-content-color-down); - --system-button-accent-outline-content-color-focus: var(--spectrum-accent-content-color-key-focus); - --system-button-accent-outline-background-color-disabled: transparent; - --system-button-accent-outline-border-color-disabled: var(--spectrum-disabled-border-color); - --system-button-accent-outline-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-negative-background-color-default: var(--spectrum-negative-background-color-default); - --system-button-negative-background-color-hover: var(--spectrum-negative-background-color-hover); - --system-button-negative-background-color-down: var(--spectrum-negative-background-color-down); - --system-button-negative-background-color-focus: var(--spectrum-negative-background-color-key-focus); - --system-button-negative-border-color-default: transparent; - --system-button-negative-border-color-hover: transparent; - --system-button-negative-border-color-down: transparent; - --system-button-negative-border-color-focus: transparent; - --system-button-negative-content-color-default: var(--spectrum-white); - --system-button-negative-content-color-hover: var(--spectrum-white); - --system-button-negative-content-color-down: var(--spectrum-white); - --system-button-negative-content-color-focus: var(--spectrum-white); - --system-button-negative-background-color-disabled: var(--spectrum-disabled-background-color); - --system-button-negative-border-color-disabled: transparent; - --system-button-negative-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-negative-outline-background-color-default: transparent; - --system-button-negative-outline-background-color-hover: var(--spectrum-negative-color-200); - --system-button-negative-outline-background-color-down: var(--spectrum-negative-color-300); - --system-button-negative-outline-background-color-focus: var(--spectrum-negative-color-200); - --system-button-negative-outline-border-color-default: var(--spectrum-negative-color-900); - --system-button-negative-outline-border-color-hover: var(--spectrum-negative-color-1000); - --system-button-negative-outline-border-color-down: var(--spectrum-negative-color-1100); - --system-button-negative-outline-border-color-focus: var(--spectrum-negative-color-1000); - --system-button-negative-outline-content-color-default: var(--spectrum-negative-content-color-default); - --system-button-negative-outline-content-color-hover: var(--spectrum-negative-content-color-hover); - --system-button-negative-outline-content-color-down: var(--spectrum-negative-content-color-down); - --system-button-negative-outline-content-color-focus: var(--spectrum-negative-content-color-key-focus); - --system-button-negative-outline-background-color-disabled: transparent; - --system-button-negative-outline-border-color-disabled: var(--spectrum-disabled-border-color); - --system-button-negative-outline-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-primary-background-color-default: var(--spectrum-neutral-background-color-default); - --system-button-primary-background-color-hover: var(--spectrum-neutral-background-color-hover); - --system-button-primary-background-color-down: var(--spectrum-neutral-background-color-down); - --system-button-primary-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - --system-button-primary-border-color-default: transparent; - --system-button-primary-border-color-hover: transparent; - --system-button-primary-border-color-down: transparent; - --system-button-primary-border-color-focus: transparent; - --system-button-primary-content-color-default: var(--spectrum-white); - --system-button-primary-content-color-hover: var(--spectrum-white); - --system-button-primary-content-color-down: var(--spectrum-white); - --system-button-primary-content-color-focus: var(--spectrum-white); - --system-button-primary-background-color-disabled: var(--spectrum-disabled-background-color); - --system-button-primary-border-color-disabled: transparent; - --system-button-primary-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-primary-outline-background-color-default: transparent; - --system-button-primary-outline-background-color-hover: var(--spectrum-gray-300); - --system-button-primary-outline-background-color-down: var(--spectrum-gray-400); - --system-button-primary-outline-background-color-focus: var(--spectrum-gray-300); - --system-button-primary-outline-border-color-default: var(--spectrum-gray-800); - --system-button-primary-outline-border-color-hover: var(--spectrum-gray-900); - --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); - --system-button-primary-outline-border-color-focus: var(--spectrum-gray-900); - --system-button-primary-outline-content-color-default: var(--spectrum-neutral-content-color-default); - --system-button-primary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-button-primary-outline-content-color-down: var(--spectrum-neutral-content-color-down); - --system-button-primary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-button-primary-outline-background-color-disabled: transparent; - --system-button-primary-outline-border-color-disabled: var(--spectrum-disabled-border-color); - --system-button-primary-outline-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-secondary-background-color-default: var(--spectrum-gray-200); - --system-button-secondary-background-color-hover: var(--spectrum-gray-300); - --system-button-secondary-background-color-down: var(--spectrum-gray-400); - --system-button-secondary-background-color-focus: var(--spectrum-gray-300); - --system-button-secondary-border-color-default: transparent; - --system-button-secondary-border-color-hover: transparent; - --system-button-secondary-border-color-down: transparent; - --system-button-secondary-border-color-focus: transparent; - --system-button-secondary-content-color-default: var(--spectrum-neutral-content-color-default); - --system-button-secondary-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-button-secondary-content-color-down: var(--spectrum-neutral-content-color-down); - --system-button-secondary-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-button-secondary-background-color-disabled: var(--spectrum-disabled-background-color); - --system-button-secondary-border-color-disabled: transparent; - --system-button-secondary-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-secondary-outline-background-color-default: transparent; - --system-button-secondary-outline-background-color-hover: var(--spectrum-gray-300); - --system-button-secondary-outline-background-color-down: var(--spectrum-gray-400); - --system-button-secondary-outline-background-color-focus: var(--spectrum-gray-300); - --system-button-secondary-outline-border-color-default: var(--spectrum-gray-300); - --system-button-secondary-outline-border-color-hover: var(--spectrum-gray-400); - --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500); - --system-button-secondary-outline-border-color-focus: var(--spectrum-gray-400); - --system-button-secondary-outline-content-color-default: var(--spectrum-neutral-content-color-default); - --system-button-secondary-outline-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-button-secondary-outline-content-color-down: var(--spectrum-neutral-content-color-down); - --system-button-secondary-outline-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-button-secondary-outline-background-color-disabled: transparent; - --system-button-secondary-outline-border-color-disabled: var(--spectrum-disabled-border-color); - --system-button-secondary-outline-content-color-disabled: var(--spectrum-disabled-content-color); - --system-button-quiet-background-color-default: transparent; - --system-button-quiet-background-color-hover: var(--spectrum-gray-200); - --system-button-quiet-background-color-down: var(--spectrum-gray-300); - --system-button-quiet-background-color-focus: var(--spectrum-gray-200); - --system-button-quiet-border-color-default: transparent; - --system-button-quiet-border-color-hover: transparent; - --system-button-quiet-border-color-down: transparent; - --system-button-quiet-border-color-focus: transparent; - --system-button-quiet-background-color-disabled: transparent; - --system-button-quiet-border-color-disabled: transparent; - --system-button-selected-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --system-button-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --system-button-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --system-button-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - --system-button-selected-border-color-default: transparent; - --system-button-selected-border-color-hover: transparent; - --system-button-selected-border-color-down: transparent; - --system-button-selected-border-color-focus: transparent; - --system-button-selected-content-color-default: var(--spectrum-white); - --system-button-selected-content-color-hover: var(--spectrum-white); - --system-button-selected-content-color-down: var(--spectrum-white); - --system-button-selected-content-color-focus: var(--spectrum-white); - --system-button-selected-background-color-disabled: var(--spectrum-disabled-background-color); - --system-button-selected-border-color-disabled: transparent; - --system-button-selected-emphasized-background-color-default: var(--spectrum-accent-background-color-default); - --system-button-selected-emphasized-background-color-hover: var(--spectrum-accent-background-color-hover); - --system-button-selected-emphasized-background-color-down: var(--spectrum-accent-background-color-down); - --system-button-selected-emphasized-background-color-focus: var(--spectrum-accent-background-color-key-focus); - --system-button-static-black-quiet-border-color-default: transparent; - --system-button-static-white-quiet-border-color-default: transparent; - --system-button-static-black-quiet-border-color-hover: transparent; - --system-button-static-white-quiet-border-color-hover: transparent; - --system-button-static-black-quiet-border-color-down: transparent; - --system-button-static-white-quiet-border-color-down: transparent; - --system-button-static-black-quiet-border-color-focus: transparent; - --system-button-static-white-quiet-border-color-focus: transparent; - --system-button-static-black-quiet-border-color-disabled: transparent; - --system-button-static-white-quiet-border-color-disabled: transparent; - --system-button-static-white-background-color-default: var(--spectrum-transparent-white-800); - --system-button-static-white-background-color-hover: var(--spectrum-transparent-white-900); - --system-button-static-white-background-color-down: var(--spectrum-transparent-white-900); - --system-button-static-white-background-color-focus: var(--spectrum-transparent-white-900); - --system-button-static-white-border-color-default: transparent; - --system-button-static-white-border-color-hover: transparent; - --system-button-static-white-border-color-down: transparent; - --system-button-static-white-border-color-focus: transparent; - --system-button-static-white-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --system-button-static-white-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --system-button-static-white-border-color-disabled: transparent; - --system-button-static-white-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --system-button-static-white-outline-background-color-default: transparent; - --system-button-static-white-outline-background-color-hover: var(--spectrum-transparent-white-300); - --system-button-static-white-outline-background-color-down: var(--spectrum-transparent-white-400); - --system-button-static-white-outline-background-color-focus: var(--spectrum-transparent-white-300); - --system-button-static-white-outline-border-color-default: var(--spectrum-transparent-white-800); - --system-button-static-white-outline-border-color-hover: var(--spectrum-transparent-white-900); - --system-button-static-white-outline-border-color-down: var(--spectrum-transparent-white-900); - --system-button-static-white-outline-border-color-focus: var(--spectrum-transparent-white-900); - --system-button-static-white-outline-content-color-default: var(--spectrum-white); - --system-button-static-white-outline-content-color-hover: var(--spectrum-white); - --system-button-static-white-outline-content-color-down: var(--spectrum-white); - --system-button-static-white-outline-content-color-focus: var(--spectrum-white); - --system-button-static-white-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --system-button-static-white-outline-background-color-disabled: transparent; - --system-button-static-white-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --system-button-static-white-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --system-button-static-white-selected-background-color-default: var(--spectrum-transparent-white-800); - --system-button-static-white-selected-background-color-hover: var(--spectrum-transparent-white-900); - --system-button-static-white-selected-background-color-down: var(--spectrum-transparent-white-900); - --system-button-static-white-selected-background-color-focus: var(--spectrum-transparent-white-900); - --system-button-static-white-selected-content-color-default: var(--mod-button-static-content-color, var(--spectrum-black)); - --system-button-static-white-selected-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-black)); - --system-button-static-white-selected-content-color-down: var(--mod-button-static-content-color, var(--spectrum-black)); - --system-button-static-white-selected-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-black)); - --system-button-static-white-selected-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --system-button-static-white-selected-border-color-disabled: transparent; - --system-button-static-white-secondary-background-color-default: var(--spectrum-transparent-white-200); - --system-button-static-white-secondary-background-color-hover: var(--spectrum-transparent-white-300); - --system-button-static-white-secondary-background-color-down: var(--spectrum-transparent-white-400); - --system-button-static-white-secondary-background-color-focus: var(--spectrum-transparent-white-300); - --system-button-static-white-secondary-border-color-default: transparent; - --system-button-static-white-secondary-border-color-hover: transparent; - --system-button-static-white-secondary-border-color-down: transparent; - --system-button-static-white-secondary-border-color-focus: transparent; - --system-button-static-white-secondary-content-color-default: var(--spectrum-white); - --system-button-static-white-secondary-content-color-hover: var(--spectrum-white); - --system-button-static-white-secondary-content-color-down: var(--spectrum-white); - --system-button-static-white-secondary-content-color-focus: var(--spectrum-white); - --system-button-static-white-secondary-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --system-button-static-white-secondary-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --system-button-static-white-secondary-border-color-disabled: transparent; - --system-button-static-white-secondary-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --system-button-static-white-secondary-outline-background-color-default: transparent; - --system-button-static-white-secondary-outline-background-color-hover: var(--spectrum-transparent-white-300); - --system-button-static-white-secondary-outline-background-color-down: var(--spectrum-transparent-white-400); - --system-button-static-white-secondary-outline-background-color-focus: var(--spectrum-transparent-white-300); - --system-button-static-white-secondary-outline-border-color-default: var(--spectrum-transparent-white-300); - --system-button-static-white-secondary-outline-border-color-hover: var(--spectrum-transparent-white-400); - --system-button-static-white-secondary-outline-border-color-down: var(--spectrum-transparent-white-500); - --system-button-static-white-secondary-outline-border-color-focus: var(--spectrum-transparent-white-400); - --system-button-static-white-secondary-outline-content-color-default: var(--spectrum-white); - --system-button-static-white-secondary-outline-content-color-hover: var(--spectrum-white); - --system-button-static-white-secondary-outline-content-color-down: var(--spectrum-white); - --system-button-static-white-secondary-outline-content-color-focus: var(--spectrum-white); - --system-button-static-white-secondary-outline-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --system-button-static-white-secondary-outline-background-color-disabled: transparent; - --system-button-static-white-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --system-button-static-white-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --system-button-static-black-background-color-default: var(--spectrum-transparent-black-800); - --system-button-static-black-background-color-hover: var(--spectrum-transparent-black-900); - --system-button-static-black-background-color-down: var(--spectrum-transparent-black-900); - --system-button-static-black-background-color-focus: var(--spectrum-transparent-black-900); - --system-button-static-black-border-color-default: transparent; - --system-button-static-black-border-color-hover: transparent; - --system-button-static-black-border-color-down: transparent; - --system-button-static-black-border-color-focus: transparent; - --system-button-static-black-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - --system-button-static-black-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --system-button-static-black-border-color-disabled: transparent; - --system-button-static-black-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - --system-button-static-black-outline-background-color-default: transparent; - --system-button-static-black-outline-background-color-hover: var(--spectrum-transparent-black-300); - --system-button-static-black-outline-background-color-down: var(--spectrum-transparent-black-400); - --system-button-static-black-outline-background-color-focus: var(--spectrum-transparent-black-300); - --system-button-static-black-outline-border-color-default: var(--spectrum-transparent-black-400); - --system-button-static-black-outline-border-color-hover: var(--spectrum-transparent-black-500); - --system-button-static-black-outline-border-color-down: var(--spectrum-transparent-black-600); - --system-button-static-black-outline-border-color-focus: var(--spectrum-transparent-black-500); - --system-button-static-black-outline-content-color-default: var(--spectrum-black); - --system-button-static-black-outline-content-color-hover: var(--spectrum-black); - --system-button-static-black-outline-content-color-down: var(--spectrum-black); - --system-button-static-black-outline-content-color-focus: var(--spectrum-black); - --system-button-static-black-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - --system-button-static-black-outline-background-color-disabled: transparent; - --system-button-static-black-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --system-button-static-black-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - --system-button-static-black-secondary-background-color-default: var(--spectrum-transparent-black-200); - --system-button-static-black-secondary-background-color-hover: var(--spectrum-transparent-black-300); - --system-button-static-black-secondary-background-color-down: var(--spectrum-transparent-black-400); - --system-button-static-black-secondary-background-color-focus: var(--spectrum-transparent-black-300); - --system-button-static-black-secondary-border-color-default: transparent; - --system-button-static-black-secondary-border-color-hover: transparent; - --system-button-static-black-secondary-border-color-down: transparent; - --system-button-static-black-secondary-border-color-focus: transparent; - --system-button-static-black-secondary-content-color-default: var(--spectrum-black); - --system-button-static-black-secondary-content-color-hover: var(--spectrum-black); - --system-button-static-black-secondary-content-color-down: var(--spectrum-black); - --system-button-static-black-secondary-content-color-focus: var(--spectrum-black); - --system-button-static-black-secondary-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - --system-button-static-black-secondary-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --system-button-static-black-secondary-border-color-disabled: transparent; - --system-button-static-black-secondary-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - --system-button-static-black-secondary-outline-background-color-default: transparent; - --system-button-static-black-secondary-outline-background-color-hover: var(--spectrum-transparent-black-300); - --system-button-static-black-secondary-outline-background-color-down: var(--spectrum-transparent-black-400); - --system-button-static-black-secondary-outline-background-color-focus: var(--spectrum-transparent-black-300); - --system-button-static-black-secondary-outline-border-color-default: var(--spectrum-transparent-black-300); - --system-button-static-black-secondary-outline-border-color-hover: var(--spectrum-transparent-black-400); - --system-button-static-black-secondary-outline-border-color-down: var(--spectrum-transparent-black-500); - --system-button-static-black-secondary-outline-border-color-focus: var(--spectrum-transparent-black-400); - --system-button-static-black-secondary-outline-content-color-default: var(--spectrum-black); - --system-button-static-black-secondary-outline-content-color-hover: var(--spectrum-black); - --system-button-static-black-secondary-outline-content-color-down: var(--spectrum-black); - --system-button-static-black-secondary-outline-content-color-focus: var(--spectrum-black); - --system-button-static-black-secondary-outline-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - --system-button-static-black-secondary-outline-background-color-disabled: transparent; - --system-button-static-black-secondary-outline-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --system-button-static-black-secondary-outline-content-color-disabled: var(--spectrum-disabled-static-black-content-color); -} diff --git a/tokens/dist/css/components/spectrum/checkbox.css b/tokens/dist/css/components/spectrum/checkbox.css deleted file mode 100644 index fb290598194..00000000000 --- a/tokens/dist/css/components/spectrum/checkbox.css +++ /dev/null @@ -1,72 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-checkbox-control-color-default: var(--spectrum-gray-600); - --system-checkbox-control-color-hover: var(--spectrum-gray-700); - --system-checkbox-control-color-down: var(--spectrum-gray-800); - --system-checkbox-control-color-focus: var(--spectrum-gray-700); - --system-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); - --system-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); - --system-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); - --system-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); - --system-checkbox-checkmark-color: var(--spectrum-gray-50); - --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - --system-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); - --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - --system-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default); - --system-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --system-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down); - --system-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); - --system-checkbox-line-height: var(--spectrum-line-height-100); - --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-checkbox-border-width: var(--spectrum-border-width-200); - --system-checkbox-selected-border-width: calc(var(--system-checkbox-control-size) / 2); - --system-checkbox-animation-duration: var(--spectrum-animation-duration-100); - --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); - --system-checkbox-size-s-height: var(--spectrum-component-height-75); - --system-checkbox-size-s-control-size: var(--spectrum-checkbox-control-size-small); - --system-checkbox-size-s-top-to-text: var(--spectrum-component-top-to-text-75); - --system-checkbox-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-checkbox-font-size: var(--spectrum-font-size-100); - --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); - --system-checkbox-height: var(--spectrum-component-height-100); - --system-checkbox-size-m-height: var(--spectrum-component-height-100); - --system-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); - --system-checkbox-size-m-control-size: var(--spectrum-checkbox-control-size-medium); - --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --system-checkbox-size-m-top-to-text: var(--spectrum-component-top-to-text-100); - --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); - --system-checkbox-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); - --system-checkbox-size-l-height: var(--spectrum-component-height-200); - --system-checkbox-size-l-control-size: var(--spectrum-checkbox-control-size-large); - --system-checkbox-size-l-top-to-text: var(--spectrum-component-top-to-text-200); - --system-checkbox-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); - --system-checkbox-size-xl-height: var(--spectrum-component-height-300); - --system-checkbox-size-xl-control-size: var(--spectrum-checkbox-control-size-extra-large); - --system-checkbox-size-xl-top-to-text: var(--spectrum-component-top-to-text-300); - --system-checkbox-size-xl-text-to-control: var(--spectrum-text-to-control-300); -} diff --git a/tokens/dist/css/components/spectrum/clearbutton.css b/tokens/dist/css/components/spectrum/clearbutton.css deleted file mode 100644 index 53d6cc1aeb7..00000000000 --- a/tokens/dist/css/components/spectrum/clearbutton.css +++ /dev/null @@ -1,48 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-clear-button-background-color: transparent; - --system-clear-button-background-color-hover: transparent; - --system-clear-button-background-color-down: transparent; - --system-clear-button-background-color-key-focus: transparent; - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var(--spectrum-neutral-content-color-default); - --system-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: var(--spectrum-clear-button-background-color-quiet, transparent); - --system-clear-button-quiet-background-color-hover: var(--spectrum-clear-button-background-color-hover-quiet, transparent); - --system-clear-button-quiet-background-color-down: var(--spectrum-clear-button-background-color-down-quiet, transparent); - --system-clear-button-quiet-background-color-key-focus: var(--spectrum-clear-button-background-color-key-focus-quiet, transparent); - --system-clear-button-over-background-icon-color: var(--spectrum-clear-button-icon-color-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-down: var(--spectrum-clear-button-icon-color-down-over-background, var(--spectrum-white)); - --system-clear-button-over-background-icon-color-key-focus: var(--spectrum-clear-button-icon-color-key-focus-over-background, var(--spectrum-white)); - --system-clear-button-over-background-background-color: var(--spectrum-clear-button-background-color-over-background, transparent); - --system-clear-button-over-background-background-color-hover: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --system-clear-button-over-background-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400)); - --system-clear-button-over-background-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300)); - --system-clear-button-disabled-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-clear-button-disabled-background-color: var(--mod-clear-button-background-color-disabled, transparent); -} diff --git a/tokens/dist/css/components/spectrum/closebutton.css b/tokens/dist/css/components/spectrum/closebutton.css deleted file mode 100644 index 20bb7b2f1c1..00000000000 --- a/tokens/dist/css/components/spectrum/closebutton.css +++ /dev/null @@ -1,61 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-200); - --system-close-button-background-color-down: var(--spectrum-gray-300); - --system-close-button-background-color-focus: var(--spectrum-gray-200); - --system-close-button-size-300: 24px; - --system-close-button-size-400: 32px; - --system-close-button-size-500: 40px; - --system-close-button-size-600: 48px; - --system-close-button-icon-color-default: var(--spectrum-neutral-content-color-default); - --system-close-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-close-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-close-button-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-close-button-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-close-button-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-close-button-height: var(--spectrum-component-height-100); - --system-close-button-size: var(--system-close-button-size-400); - --system-close-button-border-radius: var(--system-close-button-size-400); - --system-close-button-animation-duration: var(--spectrum-animation-duration-100); - --system-closebutton-size-s-height: var(--spectrum-component-height-75); - --system-closebutton-size-s-size: var(--system-close-button-size-300); - --system-closebutton-size-s-border-radius: var(--system-close-button-size-300); - --system-closebutton-size-m-height: var(--spectrum-component-height-100); - --system-closebutton-size-m-size: var(--system-close-button-size-400); - --system-closebutton-size-m-border-radius: var(--system-close-button-size-400); - --system-closebutton-size-l-height: var(--spectrum-component-height-200); - --system-closebutton-size-l-size: var(--system-close-button-size-500); - --system-closebutton-size-l-border-radius: var(--system-close-button-size-500); - --system-closebutton-size-xl-height: var(--spectrum-component-height-300); - --system-closebutton-size-xl-size: var(--system-close-button-size-600); - --system-closebutton-size-xl-border-radius: var(--system-close-button-size-600); - --system-close-button-static-white-static-background-color-default: transparent; - --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300); - --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400); - --system-close-button-static-white-static-background-color-focus: var(--spectrum-transparent-white-300); - --system-close-button-static-white-icon-color-default: var(--spectrum-white); - --system-close-button-static-white-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); - --system-close-button-static-white-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --system-close-button-static-black-static-background-color-default: transparent; - --system-close-button-static-black-static-background-color-hover: var(--spectrum-transparent-black-300); - --system-close-button-static-black-static-background-color-down: var(--spectrum-transparent-black-400); - --system-close-button-static-black-static-background-color-focus: var(--spectrum-transparent-black-300); - --system-close-button-static-black-icon-color-default: var(--spectrum-black); - --system-close-button-static-black-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); - --system-close-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); -} diff --git a/tokens/dist/css/components/spectrum/combobox.css b/tokens/dist/css/components/spectrum/combobox.css deleted file mode 100644 index 3383e00fc4d..00000000000 --- a/tokens/dist/css/components/spectrum/combobox.css +++ /dev/null @@ -1,133 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-combobox-border-color-default: var(--spectrum-gray-500); - --system-combobox-border-color-hover: var(--spectrum-gray-600); - --system-combobox-border-color-focus: var(--spectrum-gray-500); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --system-combobox-border-color-key-focus: var(--spectrum-gray-600); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--system-combobox-block-size)); - --system-combobox-button-width: var(--system-combobox-block-size); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); - --system-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --system-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); - --system-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); - --system-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); - --system-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --system-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); - --system-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); - --system-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var(--spectrum-field-label-to-component); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); - --system-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); - --system-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); - --system-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); - --system-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); - --system-combobox-textfield-focus-indicator-gap: var(--mod-combobox-focus-indicator-gap, var(--system-combobox-focus-indicator-gap)); - --system-combobox-textfield-focus-indicator-width: var(--mod-combobox-focus-indicator-thickness, var(--system-combobox-focus-indicator-thickness)); - --system-combobox-textfield-focus-indicator-color: var(--mod-combobox-focus-indicator-color, var(--system-combobox-focus-indicator-color)); - --system-combobox-textfield-background-color: var(--mod-combobox-background-color-default); - --system-combobox-textfield-background-color-disabled: var(--mod-combobox-background-color-disabled); - --system-combobox-textfield-font-family: var(--mod-combobox-font-family); - --system-combobox-textfield-font-weight: var(--mod-combobox-font-weight); - --system-combobox-textfield-text-color-default: var(--mod-combobox-font-color-default); - --system-combobox-textfield-text-color-hover: var(--mod-combobox-font-color-hover); - --system-combobox-textfield-text-color-focus: var(--mod-combobox-font-color-focus); - --system-combobox-textfield-text-color-focus-hover: var(--mod-combobox-font-color-focus-hover); - --system-combobox-textfield-text-color-keyboard-focus: var(--mod-combobox-font-color-key-focus); - --system-combobox-textfield-text-color-disabled: var(--mod-combobox-font-color-disabled); - --system-combobox-textfield-border-width: var(--mod-combobox-border-width, var(--system-combobox-border-width)); - --system-combobox-textfield-border-color: var(--mod-combobox-border-color-default, var(--system-combobox-border-color-default)); - --system-combobox-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled); - --system-combobox-textfield-border-color-focus: var(--mod-combobox-border-color-focus, var(--system-combobox-border-color-focus)); - --system-combobox-textfield-border-color-focus-hover: var(--mod-combobox-border-color-focus-hover, var(--system-combobox-border-color-focus-hover)); - --system-combobox-textfield-border-color-hover: var(--mod-combobox-border-color-hover, var(--system-combobox-border-color-hover)); - --system-combobox-textfield-border-color-keyboard-focus: var(--mod-combobox-border-color-key-focus, var(--system-combobox-border-color-key-focus)); - --system-combobox-textfield-border-color-invalid-default: var(--mod-combobox-border-color-invalid-default, var(--system-combobox-border-color-invalid-default)); - --system-combobox-textfield-border-color-invalid-hover: var(--mod-combobox-border-color-invalid-hover, var(--system-combobox-border-color-invalid-hover)); - --system-combobox-textfield-border-color-invalid-focus: var(--mod-combobox-border-color-invalid-focus, var(--system-combobox-border-color-invalid-focus)); - --system-combobox-textfield-border-color-invalid-focus-hover: var(--mod-combobox-border-color-invalid-focus-hover, var(--system-combobox-border-color-invalid-focus-hover)); - --system-combobox-textfield-border-color-invalid-keyboard-focus: var(--mod-combobox-border-color-invalid-key-focus, var(--system-combobox-border-color-invalid-key-focus)); - --system-combobox-textfield-icon-color-invalid: var(--mod-combobox-alert-icon-color); - --system-combobox-picker-button-border-width: var(--mod-combobox-border-width, var(--system-combobox-border-width)); - --system-combobox-picker-button-border-color: var(--mod-combobox-border-color-default, var(--system-combobox-border-color-default)); - --system-combobox-picker-button-background-color: var(--mod-combobox-background-color-default); - --system-combobox-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled); - --system-combobox-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --system-combobox-size-s-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small); - --system-combobox-size-s-spacing-edge-to-menu: var(--spectrum-component-to-menu-small); - --system-combobox-size-s-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); - --system-combobox-size-s-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --system-combobox-size-m-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); - --system-combobox-size-m-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); - --system-combobox-size-m-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); - --system-combobox-size-m-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --system-combobox-size-l-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); - --system-combobox-size-l-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); - --system-combobox-size-l-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); - --system-combobox-size-l-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --system-combobox-size-xl-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); - --system-combobox-size-xl-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); - --system-combobox-quiet-min-inline-size: calc(var(--spectrum-combo-box-quiet-minimum-width-multiplier) * var(--system-combobox-block-size)); - --system-combobox-quiet-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); - --system-combobox-quiet-spacing-label-to: var(--spectrum-field-label-to-component-quiet-medium); - --system-combobox-quiet-button-inline-offset: calc(var(--mod-combobox-block-size, var(--system-combobox-block-size)) / 2 - var(--mod-combobox-icon-size, var(--system-combobox-icon-size)) / 2); - --system-combobox-quiet-picker-button-background-color-quiet: transparent; - --system-combobox-quiet-picker-button-border-color-quiet: transparent; - --system-combobox-quiet-size-s-spacing-label-to: var(--spectrum-field-label-to-component-quiet-small); - --system-combobox-quiet-size-m-spacing-label-to: var(--spectrum-field-label-to-component-quiet-medium); - --system-combobox-quiet-size-l-spacing-label-to: var(--spectrum-field-label-to-component-quiet-large); - --system-combobox-quiet-size-xl-spacing-label-to: var(--spectrum-field-label-to-component-quiet-extra-large); -} diff --git a/tokens/dist/css/components/spectrum/datepicker.css b/tokens/dist/css/components/spectrum/datepicker.css deleted file mode 100644 index dc535987c31..00000000000 --- a/tokens/dist/css/components/spectrum/datepicker.css +++ /dev/null @@ -1,55 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-date-picker-initial-height: var(--spectrum-component-height-100); - --system-date-picker-border-radius: var(--spectrum-corner-radius-100); - --system-date-picker-border-radius-quiet: 0; - --system-date-picker-border-width: var(--spectrum-border-width-100); - --system-date-picker-min-width: var(--spectrum-field-width); - --system-date-picker-icon-size: var(--spectrum-workflow-icon-size-100); - --system-date-picker-pickerbutton-border-color: var(--spectrum-gray-500); - --system-date-picker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default); - --system-date-picker-pickerbutton-width: calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100)); - --system-date-picker-pickerbutton-width-quiet: calc(var(--system-date-picker-pickerbutton-width) - var(--system-date-picker-quiet-button-offset)); - --system-date-picker-quiet-button-offset: var(--spectrum-text-to-visual-100); - --system-date-picker-icon-to-button: var(--spectrum-text-to-visual-100); - --system-date-picker-icon-to-text: var(--spectrum-component-edge-to-text-100); - --system-date-picker-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-date-picker-focus-thickness: var(--spectrum-focus-indicator-thickness); - --system-date-picker-focus-animation: var(--spectrum-animation-duration-100); - --system-date-picker-focus-ring-width: var(--spectrum-border-width-100); - --system-date-picker-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-date-picker-focus-line-gap: var(--spectrum-spacing-75); - --system-date-picker-invalid-quiet-color: var(--spectrum-negative-border-color-default); - --system-date-picker-quiet-border-color-hover: var(--spectrum-gray-500); - --system-date-picker-border-color-disabled: var(--spectrum-disabled-border-color); - --system-date-picker-dash-font-size: var(--spectrum-font-size-100); - --system-date-picker-dash-color: var(--spectrum-neutral-content-color-default); - --system-date-picker-dash-color-disabled: var(--spectrum-disabled-content-color); - --system-date-picker-range-dash-marin-inline-start: calc(var(--system-date-picker-dash-font-size) * -0.5); - --system-date-picker-range-dash-padding-top: 0; - --system-date-picker-input-width-base: calc(var(--system-date-picker-range-input-width-first) + var(--system-date-picker-icon-size)); - --system-date-picker-input-width: calc(var(--system-date-picker-input-width-base) + var(--system-date-picker-initial-height)); - --system-date-picker-input-width-quiet: calc(var(--system-date-picker-range-input-width-quiet-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); - --system-date-picker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2); - --system-date-picker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)); - --system-date-picker-datetime-input-width-first: calc(var(--system-date-picker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)); - --system-date-picker-datetime-input-width: calc(var(--system-date-picker-datetime-input-width-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); - --system-date-picker-datetime-quiet-input-width-first: calc(var(--system-date-picker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)); - --system-date-picker-datetime-quiet-input-width: calc(var(--system-date-picker-datetime-quiet-input-width-first) + var(--system-date-picker-icon-size) + var(--system-date-picker-initial-height)); - --system-date-picker-padding-inline-end: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--system-date-picker-border-width) * 2); - --system-date-picker-padding-inline-end-quiet: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--system-date-picker-quiet-button-offset)); - --system-date-picker-padding-inline-end-invalid: calc(var(--system-date-picker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--system-date-picker-icon-to-button) + var(--system-date-picker-icon-size) - var(--system-date-picker-border-width) * 2); - --system-date-picker-padding-inline-end-invalid-quiet: calc(var(--system-date-picker-pickerbutton-width-quiet) + var(--system-date-picker-icon-size) + var(--system-date-picker-icon-to-text)); -} diff --git a/tokens/dist/css/components/spectrum/infieldbutton.css b/tokens/dist/css/components/spectrum/infieldbutton.css deleted file mode 100644 index c0221e2de9a..00000000000 --- a/tokens/dist/css/components/spectrum/infieldbutton.css +++ /dev/null @@ -1,79 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-infield-button-border-width: var(--spectrum-border-width-100); - --system-infield-button-border-color: inherit; - --system-infield-button-border-radius: var(--spectrum-corner-radius-100); - --system-infield-button-border-radius-reset: 0; - --system-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-border-radius-reset); - --system-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-border-radius-reset); - --system-infield-button-background-color: var(--spectrum-gray-75); - --system-infield-button-background-color-hover: var(--spectrum-gray-200); - --system-infield-button-background-color-down: var(--spectrum-gray-300); - --system-infield-button-background-color-key-focus: var(--spectrum-gray-200); - --system-infield-button-height: var(--spectrum-component-height-100); - --system-infield-button-width: var(--spectrum-component-height-100); - --system-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); - --system-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill); - --system-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill); - --system-infield-button-fill-padding: 0px; - --system-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium); - --system-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); - --system-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium); - --system-infield-button-animation-duration: var(--spectrum-animation-duration-100); - --system-infield-button-icon-color: var(--spectrum-neutral-content-color-default); - --system-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-infield-button-fill-justify-content: center; - --system-infield-button-disabled-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color)); - --system-infield-button-disabled-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); - --system-infield-button-disabled-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --system-infield-button-disabled-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color)); - --system-infield-button-disabled-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --system-infield-button-disabled-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-infield-button-disabled-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-infield-button-disabled-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color)); - --system-infield-button-size-s-height: var(--spectrum-component-height-75); - --system-infield-button-size-s-width: var(--spectrum-component-height-75); - --system-infield-button-size-s-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small); - --system-infield-button-size-s-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); - --system-infield-button-size-s-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small); - --system-infield-button-size-l-height: var(--spectrum-component-height-200); - --system-infield-button-size-l-width: var(--spectrum-component-height-200); - --system-infield-button-size-l-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large); - --system-infield-button-size-l-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); - --system-infield-button-size-l-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large); - --system-infield-button-size-xl-height: var(--spectrum-component-height-300); - --system-infield-button-size-xl-width: var(--spectrum-component-height-300); - --system-infield-button-size-xl-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large); - --system-infield-button-size-xl-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); - --system-infield-button-size-xl-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large); - --system-infield-button-top-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium)); - --system-infield-button-bottom-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium)); - --system-infield-button-top-size-s-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small)); - --system-infield-button-bottom-size-s-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small)); - --system-infield-button-top-size-l-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large)); - --system-infield-button-bottom-size-l-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large)); - --system-infield-button-top-size-xl-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large)); - --system-infield-button-bottom-size-xl-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large)); - --system-infield-button-quiet-background-color: var(--mod-infield-button-background-color-quiet, transparent); - --system-infield-button-quiet-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent); - --system-infield-button-quiet-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent); - --system-infield-button-quiet-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent); - --system-infield-button-quiet-infield-border-color: var(--mod-infield-border-color-quiet, transparent); - --system-infield-button-quiet-border-width: var(--mod-infield-button-border-width-quiet, 0); - --system-infield-button-quiet-disabled-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent); - --system-infield-button-quiet-disabled-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent); -} diff --git a/tokens/dist/css/components/spectrum/picker.css b/tokens/dist/css/components/spectrum/picker.css deleted file mode 100644 index 5e90adcc784..00000000000 --- a/tokens/dist/css/components/spectrum/picker.css +++ /dev/null @@ -1,118 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-picker-background-color-default: var(--spectrum-gray-75); - --system-picker-background-color-default-open: var(--spectrum-gray-200); - --system-picker-background-color-active: var(--spectrum-gray-300); - --system-picker-background-color-hover: var(--spectrum-gray-200); - --system-picker-background-color-hover-open: var(--spectrum-gray-200); - --system-picker-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-border-color-default: var(--spectrum-gray-500); - --system-picker-border-color-default-open: var(--spectrum-gray-500); - --system-picker-border-color-hover: var(--spectrum-gray-600); - --system-picker-border-color-hover-open: var(--spectrum-gray-600); - --system-picker-border-color-active: var(--spectrum-gray-700); - --system-picker-border-color-key-focus: var(--spectrum-gray-600); - --system-picker-border-width: var(--spectrum-border-width-100); - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); - --system-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); - --system-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); - --system-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); - --system-picker-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --system-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); - --system-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --system-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); - --system-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var(--spectrum-neutral-content-color-default); - --system-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus); - --system-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); - --system-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); - --system-picker-font-color-active: var(--spectrum-neutral-content-color-down); - --system-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-picker-icon-color-default: var(--spectrum-neutral-content-color-default); - --system-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus); - --system-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover); - --system-picker-icon-color-active: var(--spectrum-neutral-content-color-down); - --system-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-picker-border-color-error-default: var(--spectrum-negative-border-color-default); - --system-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus); - --system-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover); - --system-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover); - --system-picker-border-color-error-active: var(--spectrum-negative-border-color-down); - --system-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var(--spectrum-disabled-background-color); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-medium); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - --system-picker-size-s-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --system-picker-size-s-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); - --system-picker-size-s-spacing-text-to-icon: var(--spectrum-text-to-visual-75); - --system-picker-size-s-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); - --system-picker-size-s-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-small); - --system-picker-size-s-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); - --system-picker-size-s-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --system-picker-size-s-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-small); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - --system-picker-size-l-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --system-picker-size-l-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); - --system-picker-size-l-spacing-text-to-icon: var(--spectrum-text-to-visual-200); - --system-picker-size-l-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); - --system-picker-size-l-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-large); - --system-picker-size-l-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); - --system-picker-size-l-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --system-picker-size-l-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-large); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var(--spectrum-component-top-to-text-300); - --system-picker-size-xl-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --system-picker-size-xl-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); - --system-picker-size-xl-spacing-text-to-icon: var(--spectrum-text-to-visual-300); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); - --system-picker-size-xl-spacing-label-to-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --system-picker-size-xl-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); - --system-picker-size-xl-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var(--spectrum-component-to-menu-extra-large); -} diff --git a/tokens/dist/css/components/spectrum/pickerbutton.css b/tokens/dist/css/components/spectrum/pickerbutton.css deleted file mode 100644 index 7c471d9169c..00000000000 --- a/tokens/dist/css/components/spectrum/pickerbutton.css +++ /dev/null @@ -1,74 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-picker-button-background-color: var(--spectrum-gray-75); - --system-picker-button-background-color-hover: var(--spectrum-gray-200); - --system-picker-button-background-color-down: var(--spectrum-gray-300); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-button-border-color: inherit; - --system-picker-button-border-radius: var(--spectrum-corner-radius-100); - --system-picker-button-border-radius-rounded-sided: 0; - --system-picker-button-border-radius-sided: 0; - --system-picker-button-border-width: var(--spectrum-border-width-100); - --system-picker-button-height: var(--spectrum-component-height-100); - --system-picker-button-width: var(--spectrum-component-height-100); - --system-picker-button-gap: var(--spectrum-text-to-visual-50); - --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --system-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); - --system-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200); - --system-picker-button-icon-color: var(--spectrum-neutral-content-color-default); - --system-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --system-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --system-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-picker-button-font-color: var(--spectrum-neutral-content-color-default); - --system-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover); - --system-picker-button-font-color-down: var(--spectrum-neutral-content-color-down); - --system-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --system-picker-button-font-style: var(--spectrum-default-font-style); - --system-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-picker-button-font-size: var(--spectrum-font-size-100); - --system-picker-button-background-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-button-background-color-disabled: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color)); - --system-picker-button-background-color-hover-disabled: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); - --system-picker-button-background-color-down-disabled: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --system-picker-button-border-color-disabled: var(--mod-picker-button-border-color-disabled, var(--spectrum-disabled-background-color)); - --system-picker-button-font-color-disabled: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color)); - --system-picker-button-font-color-hover-disabled: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-picker-button-font-color-down-disabled: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-picker-button-icon-color-disabled: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --system-picker-button-icon-color-hover-disabled: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --system-picker-button-icon-color-down-disabled: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --system-picker-button-quiet-background-color: var(--mod-picker-button-background-color-quiet, transparent); - --system-picker-button-quiet-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent); - --system-picker-button-quiet-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent); - --system-picker-button-quiet-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent); - --system-picker-button-quiet-border-color: var(--mod-picker-button-border-color-quiet, transparent); - --system-picker-button-size-s-height: var(--spectrum-component-height-75); - --system-picker-button-size-s-width: var(--spectrum-component-height-75); - --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); - --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-button-size-s-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75); - --system-picker-button-size-l-height: var(--spectrum-component-height-200); - --system-picker-button-size-l-width: var(--spectrum-component-height-200); - --system-picker-button-size-l-label-padding: var(--spectrum-text-to-visual-200); - --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-button-size-l-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200); - --system-picker-button-size-xl-height: var(--spectrum-component-height-300); - --system-picker-button-size-xl-width: var(--spectrum-component-height-300); - --system-picker-button-size-xl-label-padding: var(--spectrum-text-to-visual-300); - --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-button-size-xl-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300); -} diff --git a/tokens/dist/css/components/spectrum/popover.css b/tokens/dist/css/components/spectrum/popover.css deleted file mode 100644 index 370140efa81..00000000000 --- a/tokens/dist/css/components/spectrum/popover.css +++ /dev/null @@ -1,29 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-popover-border-width: var(--spectrum-border-width-100); - --system-popover-animation-distance: var(--spectrum-spacing-100); - --system-popover-background-color: var(--spectrum-background-layer-2-color); - --system-popover-border-color: var(--spectrum-gray-400); - --system-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area); - --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-popover-shadow-color: var(--spectrum-drop-shadow-color); - --system-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-popover-pointer-width: var(--spectrum-popover-tip-width); - --system-popover-pointer-height: var(--spectrum-popover-tip-height); - --system-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / 2); - --system-popover-pointer-edge-spacing: calc(var(--system-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2); -} diff --git a/tokens/dist/css/components/spectrum/radio.css b/tokens/dist/css/components/spectrum/radio.css deleted file mode 100644 index 81b155f4907..00000000000 --- a/tokens/dist/css/components/spectrum/radio.css +++ /dev/null @@ -1,82 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-radio-button-border-color-default: var(--spectrum-gray-600); - --system-radio-button-border-color-hover: var(--spectrum-gray-700); - --system-radio-button-border-color-down: var(--spectrum-gray-800); - --system-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); - --system-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); - --system-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); - --system-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); - --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); - --system-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); - --system-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); - --system-radio-border-width: var(--spectrum-border-width-200); - --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); - --system-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --system-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); - --system-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); - --system-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var(--spectrum-radio-button-control-size-small); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-radio-size-s-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --system-radio-size-s-button-top-to-control: var(--spectrum-radio-button-top-to-control-small); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-size-m-button-control-size: var(--spectrum-radio-button-control-size-medium); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-radio-size-m-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var(--spectrum-radio-button-control-size-large); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var(--spectrum-component-top-to-text-200); - --system-radio-size-l-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --system-radio-size-l-button-top-to-control: var(--spectrum-radio-button-top-to-control-large); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var(--spectrum-radio-button-control-size-extra-large); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-300); - --system-radio-size-xl-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --system-radio-size-xl-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var(--spectrum-accent-color-900); - --system-radio-emphasized-button-checked-border-color-hover: var(--spectrum-accent-color-1000); - --system-radio-emphasized-button-checked-border-color-down: var(--spectrum-accent-color-1100); - --system-radio-emphasized-button-checked-border-color-focus: var(--spectrum-accent-color-1000); -} diff --git a/tokens/dist/css/components/spectrum/rating.css b/tokens/dist/css/components/spectrum/rating.css deleted file mode 100644 index 1f4f12eebf1..00000000000 --- a/tokens/dist/css/components/spectrum/rating.css +++ /dev/null @@ -1,34 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --system-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --system-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --system-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --system-rating-icon-height: var(--spectrum-workflow-icon-size-100); - --system-rating-icon-width: var(--spectrum-workflow-icon-size-100); - --system-rating-border-radius: var(--spectrum-corner-radius-100); - --system-rating-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-rating-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-rating-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); - --system-rating-indicator-border-radius: var(--spectrum-corner-radius-75); - --system-rating-indicator-height: var(--spectrum-border-width-200); - --system-rating-emphasized-icon-color-default: var(--spectrum-accent-content-color-default); - --system-rating-emphasized-icon-color-hover: var(--spectrum-accent-content-color-hover); - --system-rating-emphasized-icon-color-down: var(--spectrum-accent-content-color-down); - --system-rating-emphasized-icon-color-key-focus: var(--spectrum-accent-content-color-key-focus); - --system-rating-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-rating-icon-count: var(--system-rating-icon-count); -} diff --git a/tokens/dist/css/components/spectrum/search.css b/tokens/dist/css/components/spectrum/search.css deleted file mode 100644 index 13c90263d64..00000000000 --- a/tokens/dist/css/components/spectrum/search.css +++ /dev/null @@ -1,69 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-search-border-color-default: var(--spectrum-gray-500); - --system-search-border-color-hover: var(--spectrum-gray-600); - --system-search-border-color-focus: var(--spectrum-gray-800); - --system-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-button-inline-size: var(--system-search-block-size); - --system-search-min-inline-size: calc(var(--spectrum-search-field-minimum-width-multiplier) * var(--system-search-block-size)); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --system-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var(--spectrum-neutral-content-color-default); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); - --system-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --system-search-border-width: var(--spectrum-border-width-100); - --system-search-background-color: var(--spectrum-gray-25); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var(--spectrum-disabled-background-color); - --system-search-border-color-disabled: var(--spectrum-disabled-background-color); - --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-s-edge-to-visual: var(--spectrum-component-edge-to-visual-75); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); - --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-l-edge-to-visual: var(--spectrum-component-edge-to-visual-200); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); - --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-xl-edge-to-visual: var(--spectrum-component-edge-to-visual-300); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-quiet-button-offset: calc(var(--mod-search-block-size, var(--system-search-block-size)) / 2 - var(--mod-workflow-icon-size-100, var(--spectrum-workflow-icon-size-100)) / 2); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var(--spectrum-disabled-border-color); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); -} diff --git a/tokens/dist/css/components/spectrum/slider.css b/tokens/dist/css/components/spectrum/slider.css deleted file mode 100644 index 0e2d975593b..00000000000 --- a/tokens/dist/css/components/spectrum/slider.css +++ /dev/null @@ -1,91 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-slider-track-color: var(--spectrum-gray-300); - --system-slider-track-fill-color: var(--spectrum-gray-700); - --system-slider-ramp-track-color: var(--spectrum-gray-400); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --system-slider-handle-background-color: transparent; - --system-slider-handle-background-color-disabled: transparent; - --system-slider-ramp-handle-background-color: var(--spectrum-gray-100); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-100); - --system-slider-handle-border-color: var(--spectrum-gray-700); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-100); - --system-slider-tick-mark-color: var(--spectrum-gray-300); - --system-slider-handle-border-color-hover: var(--spectrum-gray-800); - --system-slider-handle-border-color-down: var(--spectrum-gray-800); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --system-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - --system-slider-font-size: var(--spectrum-font-size-75); - --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --system-slider-control-height: var(--spectrum-component-height-100); - --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); - --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); - --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-value-inline-size: 18px; - --system-slider-dir-rtl-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - --system-slider-size-s-font-size: var(--spectrum-font-size-75); - --system-slider-size-s-handle-size: var(--spectrum-slider-handle-size-small); - --system-slider-size-s-control-height: var(--spectrum-component-height-75); - --system-slider-size-s-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-size-s-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); - --system-slider-size-s-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-slider-size-s-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); - --system-slider-size-s-value-side-padding-inline: var(--spectrum-spacing-100); - --system-slider-size-l-font-size: var(--spectrum-font-size-100); - --system-slider-size-l-handle-size: var(--spectrum-slider-handle-size-large); - --system-slider-size-l-control-height: var(--spectrum-component-height-200); - --system-slider-size-l-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - --system-slider-size-l-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); - --system-slider-size-l-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-slider-size-l-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); - --system-slider-size-l-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-size-l-value-inline-size: 18px; - --system-slider-size-xl-font-size: var(--spectrum-font-size-200); - --system-slider-size-xl-handle-size: var(--spectrum-slider-handle-size-extra-large); - --system-slider-size-xl-control-height: var(--spectrum-component-height-300); - --system-slider-size-xl-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - --system-slider-size-xl-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); - --system-slider-size-xl-label-top-to-text: var(--spectrum-component-top-to-text-200); - --system-slider-size-xl-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); - --system-slider-size-xl-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-size-xl-value-inline-size: 22px; - --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-slider-min-size: var(--spectrum-spacing-900); - --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); - --system-slider-label-margin-start: var(--spectrum-spacing-300); - --system-slider-handle-border-width: var(--spectrum-border-width-200); - --system-slider-handle-margin-left: calc(var(--system-slider-handle-size) / -2); - --system-slider-controls-margin: calc(var(--system-slider-handle-size) / 2); - --system-slider-track-margin-offset: calc(var(--system-slider-controls-margin) * -1); - --system-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + var(--system-slider-handle-size) / 2); - --system-slider-input-top-size: calc(var(--system-slider-handle-size) / -2 / 4); - --system-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); - --system-slider-tick-mark-width: var(--spectrum-border-width-200); - --system-slider-tick-mark-border-radius: 2px; - --system-slider-tick-handle-background-color: var(--spectrum-gray-75); - --system-slider-track-color-disabled: var(--spectrum-disabled-background-color); - --system-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); - --system-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); - --system-slider-label-text-color: var(--spectrum-neutral-content-color-default); - --system-slider-tick-label-color: var(--spectrum-neutral-content-color-default); - --system-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); - --system-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); - --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); - --system-slider-input-left: calc(var(--system-slider-handle-margin-left) / 4); - --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --system-slider-range-track-reset: 0; -} diff --git a/tokens/dist/css/components/spectrum/stepper.css b/tokens/dist/css/components/spectrum/stepper.css deleted file mode 100644 index fe2031f7bde..00000000000 --- a/tokens/dist/css/components/spectrum/stepper.css +++ /dev/null @@ -1,69 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-stepper-border-width: var(--spectrum-border-width-100); - --system-stepper-buttons-border-style: none; - --system-stepper-buttons-border-width: 0; - --system-stepper-buttons-border-color: var(--spectrum-gray-500); - --system-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --system-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-button-border-radius-reset: 0px; - --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color: var(--spectrum-gray-500); - --system-stepper-border-color-hover: var(--spectrum-gray-600); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); - --system-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); - --system-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); - --system-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); - --system-stepper-button-background-color-focus: var(--spectrum-gray-300); - --system-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-button-width: var(--spectrum-in-field-button-width-stacked-medium); - --system-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-stepper-width: calc(var(--mod-stepper-height, var(--system-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--system-stepper-button-width)) + var(--mod-stepper-border-width, var(--system-stepper-border-width)) * 2); - --system-stepper-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-stepper-button-offset: calc(var(--system-stepper-button-width) / 2); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); - --system-stepper-size-s-button-width: var(--spectrum-in-field-button-width-stacked-small); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-size-l-button-width: var(--spectrum-in-field-button-width-stacked-large); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var(--spectrum-in-field-button-width-stacked-extra-large); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); - --system-stepper-quiet-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--system-stepper-button-width)); - --system-stepper-quiet-textfield-focus-indicator-color: transparent; - --system-stepper-disabled-infield-button-border-color-quiet-disabled: var(--spectrum-disabled-border-color); - --system-stepper-invalid-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-negative-border-color-default)); - --system-stepper-invalid-border-color-hover: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); - --system-stepper-invalid-border-color-focus: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-negative-border-color-focus)); - --system-stepper-invalid-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-negative-border-color-focus-hover)); - --system-stepper-invalid-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-negative-border-color-key-focus)); - --system-stepper-invalid-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--system-stepper-border-color-invalid)); - --system-stepper-invalid-textfield-icon-spacing-inline-start-invalid: 0; - --system-stepper-invalid-focused-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--system-stepper-border-color-focus-invalid)); - --system-stepper-invalid-focus-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--system-stepper-border-color-focus-invalid)); - --system-stepper-invalid-hover-infield-button-border-color: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-negative-border-color-hover)); - --system-stepper-invalid-focused-hover-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--system-stepper-border-color-focus-hover-invalid)); - --system-stepper-invalid-focus-hover-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--system-stepper-border-color-focus-hover-invalid)); - --system-stepper-invalid-keyboard-focused-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--system-stepper-border-color-keyboard-focus-invalid)); - --system-stepper-invalid-focus-visible-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--system-stepper-border-color-keyboard-focus-invalid)); -} diff --git a/tokens/dist/css/components/spectrum/switch.css b/tokens/dist/css/components/spectrum/switch.css deleted file mode 100644 index 2b76596bfc0..00000000000 --- a/tokens/dist/css/components/spectrum/switch.css +++ /dev/null @@ -1,76 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-switch-handle-border-color-default: var(--spectrum-gray-600); - --system-switch-handle-border-color-hover: var(--spectrum-gray-700); - --system-switch-handle-border-color-down: var(--spectrum-gray-800); - --system-switch-handle-border-color-focus: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-default: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); - --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); - --system-switch-label-color-default: var(--spectrum-neutral-content-color-default); - --system-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); - --system-switch-label-color-down: var(--spectrum-neutral-content-color-down); - --system-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); - --system-switch-label-color-disabled: var(--spectrum-disabled-content-color); - --system-switch-background-color: var(--spectrum-gray-200); - --system-switch-background-color-disabled: var(--spectrum-gray-200); - --system-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); - --system-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); - --system-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --system-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); - --system-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - --system-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - --system-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-switch-handle-background-color: var(--spectrum-gray-50); - --system-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); - --system-switch-disabled-label-color-default: var(--spectrum-disabled-content-color); - --system-switch-emphasized-background-color-selected-default: var(--spectrum-accent-color-900); - --system-switch-emphasized-background-color-selected-hover: var(--spectrum-accent-color-1000); - --system-switch-emphasized-background-color-selected-down: var(--spectrum-accent-color-1100); - --system-switch-emphasized-background-color-selected-focus: var(--spectrum-accent-color-1000); - --system-switch-emphasized-handle-border-color-selected-default: var(--spectrum-accent-color-900); - --system-switch-emphasized-handle-border-color-selected-hover: var(--spectrum-accent-color-1000); - --system-switch-emphasized-handle-border-color-selected-down: var(--spectrum-accent-color-1100); - --system-switch-emphasized-handle-border-color-selected-focus: var(--spectrum-accent-color-1000); - --system-switch-size-s-min-height: var(--spectrum-component-height-75); - --system-switch-size-s-control-width: var(--spectrum-switch-control-width-small); - --system-switch-size-s-control-height: var(--spectrum-switch-control-height-small); - --system-switch-size-s-control-label-spacing: var(--spectrum-text-to-control-75); - --system-switch-size-s-spacing-top-to-control: var(--spectrum-switch-top-to-control-small); - --system-switch-size-s-spacing-top-to-label: var(--spectrum-component-top-to-text-75); - --system-switch-size-s-font-size: var(--spectrum-font-size-75); - --system-switch-size-m-min-height: var(--spectrum-component-height-100); - --system-switch-size-m-control-width: var(--spectrum-switch-control-width-medium); - --system-switch-size-m-control-height: var(--spectrum-switch-control-height-medium); - --system-switch-size-m-control-label-spacing: var(--spectrum-text-to-control-100); - --system-switch-size-m-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium); - --system-switch-size-m-spacing-top-to-label: var(--spectrum-component-top-to-text-100); - --system-switch-size-m-font-size: var(--spectrum-font-size-100); - --system-switch-size-l-min-height: var(--spectrum-component-height-200); - --system-switch-size-l-control-width: var(--spectrum-switch-control-width-large); - --system-switch-size-l-control-height: var(--spectrum-switch-control-height-large); - --system-switch-size-l-control-label-spacing: var(--spectrum-text-to-control-200); - --system-switch-size-l-spacing-top-to-control: var(--spectrum-switch-top-to-control-large); - --system-switch-size-l-spacing-top-to-label: var(--spectrum-component-top-to-text-200); - --system-switch-size-l-font-size: var(--spectrum-font-size-200); - --system-switch-size-xl-min-height: var(--spectrum-component-height-300); - --system-switch-size-xl-control-width: var(--spectrum-switch-control-width-extra-large); - --system-switch-size-xl-control-height: var(--spectrum-switch-control-height-extra-large); - --system-switch-size-xl-control-label-spacing: var(--spectrum-text-to-control-300); - --system-switch-size-xl-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large); - --system-switch-size-xl-spacing-top-to-label: var(--spectrum-component-top-to-text-300); - --system-switch-size-xl-font-size: var(--spectrum-font-size-300); -} diff --git a/tokens/dist/css/components/spectrum/tabs.css b/tokens/dist/css/components/spectrum/tabs.css deleted file mode 100644 index e8d883a8c83..00000000000 --- a/tokens/dist/css/components/spectrum/tabs.css +++ /dev/null @@ -1,102 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-tabs-font-weight: var(--spectrum-default-font-weight); - --system-tabs-item-height: var(--spectrum-tab-item-height-medium); - --system-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); - --system-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium); - --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); - --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --system-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); - --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --system-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium); - --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down); - --system-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --system-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --system-tabs-color-disabled: var(--spectrum-gray-500); - --system-tabs-font-family: var(--spectrum-sans-font-family-stack); - --system-tabs-font-style: var(--spectrum-default-font-style); - --system-tabs-font-size: var(--spectrum-font-size-100); - --system-tabs-line-height: var(--spectrum-line-height-100); - --system-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --system-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100); - --system-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium); - --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down); - --system-tabs-list-background-direction: top; - --system-tabs-divider-background-color: var(--spectrum-gray-300); - --system-tabs-divider-size: var(--spectrum-border-width-200); - --system-tabs-divider-border-radius: 1px; - --system-tabs-animation-duration: var(--spectrum-animation-duration-100); - --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); - --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); - --system-tabs-size-s-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small); - --system-tabs-size-s-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small); - --system-tabs-size-s-start-to-edge: var(--spectrum-tab-item-start-to-edge-small); - --system-tabs-size-s-top-to-text: var(--spectrum-tab-item-top-to-text-small); - --system-tabs-size-s-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small); - --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); - --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); - --system-tabs-size-s-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small); - --system-tabs-size-s-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small); - --system-tabs-size-s-font-size: var(--spectrum-font-size-75); - --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); - --system-tabs-size-l-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large); - --system-tabs-size-l-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large); - --system-tabs-size-l-start-to-edge: var(--spectrum-tab-item-start-to-edge-large); - --system-tabs-size-l-top-to-text: var(--spectrum-tab-item-top-to-text-large); - --system-tabs-size-l-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large); - --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-tabs-size-l-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large); - --system-tabs-size-l-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large); - --system-tabs-size-l-font-size: var(--spectrum-font-size-200); - --system-tabs-size-xl-item-height: var(--spectrum-tab-item-height-extra-large); - --system-tabs-size-xl-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large); - --system-tabs-size-xl-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large); - --system-tabs-size-xl-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large); - --system-tabs-size-xl-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large); - --system-tabs-size-xl-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large); - --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-tabs-size-xl-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large); - --system-tabs-size-xl-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large); - --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); - --system-tabs-emphasized-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-accent-content-color-default)); - --system-tabs-emphasized-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-accent-content-color-hover)); - --system-tabs-emphasized-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-accent-content-color-key-focus)); - --system-tabs-emphasized-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-accent-content-color-default)); - --system-tabs-vertical-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); - --system-tabs-vertical-right-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left); - --system-tabs-vertical-dir-rtl-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left); - --system-tabs-vertical-right-dir-rtl-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); - --system-tabs-compact-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium)); - --system-tabs-compact-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); - --system-tabs-compact-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); - --system-tabs-compact-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)); - --system-tabs-compact-size-s-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small)); - --system-tabs-compact-size-s-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); - --system-tabs-compact-size-s-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); - --system-tabs-compact-size-s-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small)); - --system-tabs-compact-size-l-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large)); - --system-tabs-compact-size-l-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); - --system-tabs-compact-size-l-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); - --system-tabs-compact-size-l-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large)); - --system-tabs-compact-size-xl-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large)); - --system-tabs-compact-size-xl-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); - --system-tabs-compact-size-xl-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); - --system-tabs-compact-size-xl-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large)); -} diff --git a/tokens/dist/css/components/spectrum/tag.css b/tokens/dist/css/components/spectrum/tag.css deleted file mode 100644 index 98c32c03bbc..00000000000 --- a/tokens/dist/css/components/spectrum/tag.css +++ /dev/null @@ -1,149 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-tag-border-color: var(--spectrum-gray-700); - --system-tag-border-color-hover: var(--spectrum-gray-800); - --system-tag-border-color-active: var(--spectrum-gray-900); - --system-tag-border-color-focus: var(--spectrum-gray-800); - --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-background-color: var(--spectrum-gray-75); - --system-tag-background-color-hover: var(--spectrum-gray-75); - --system-tag-background-color-active: var(--spectrum-gray-200); - --system-tag-background-color-focus: var(--spectrum-gray-75); - --system-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --system-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); - --system-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --system-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); - --system-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); - --system-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); - --system-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - --system-tag-border-color-disabled: transparent; - --system-tag-background-color-disabled: var(--spectrum-disabled-background-color); - --system-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); - --system-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); - --system-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); - --system-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); - --system-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); - --system-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); - --system-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); - --system-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); - --system-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); - --system-tag-avatar-opacity-disabled: 0.3; - --system-tag-animation-duration: var(--spectrum-animation-duration-100); - --system-tag-border-width: var(--spectrum-border-width-100); - --system-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); - --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-tag-label-line-height: var(--spectrum-line-height-100); - --system-tag-label-font-weight: var(--spectrum-regular-font-weight); - --system-tag-content-color-selected: var(--spectrum-gray-50); - --system-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); - --system-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --system-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); - --system-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - --system-tag-border-color-invalid: var(--spectrum-negative-color-900); - --system-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); - --system-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); - --system-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); - --system-tag-content-color-invalid: var(--spectrum-negative-content-color-default); - --system-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover); - --system-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down); - --system-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus); - --system-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default); - --system-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --system-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down); - --system-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus); - --system-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default); - --system-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover); - --system-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down); - --system-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus); - --system-tag-content-color-invalid-selected: var(--spectrum-white); - --system-tag-border-color-emphasized: var(--spectrum-accent-background-color-default); - --system-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover); - --system-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down); - --system-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); - --system-tag-background-color-emphasized: var(--spectrum-accent-background-color-default); - --system-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover); - --system-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down); - --system-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); - --system-tag-content-color-emphasized: var(--spectrum-white); - --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); - --system-tag-size-s-height: var(--spectrum-component-height-75); - --system-tag-size-s-font-size: var(--spectrum-font-size-75); - --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tag-size-s-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75); - --system-tag-size-s-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small); - --system-tag-size-s-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); - --system-tag-size-s-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75); - --system-tag-size-s-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tag-size-s-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small); - --system-tag-size-s-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small); - --system-tag-size-s-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tag-size-s-label-spacing-block: var(--spectrum-component-top-to-text-75); - --system-tag-size-s-corner-radius: var(--system-tag-size-small-corner-radius); - --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); - --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); - --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); - --system-tag-height: var(--spectrum-component-height-100); - --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); - --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --system-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --system-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); - --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); - --system-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); - --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); - --system-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); - --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); - --system-tag-size-l-height: var(--spectrum-component-height-200); - --system-tag-size-l-font-size: var(--spectrum-font-size-200); - --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tag-size-l-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200); - --system-tag-size-l-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large); - --system-tag-size-l-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200); - --system-tag-size-l-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200); - --system-tag-size-l-icon-spacing-inline-end: var(--spectrum-text-to-visual-200); - --system-tag-size-l-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large); - --system-tag-size-l-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large); - --system-tag-size-l-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200); - --system-tag-size-l-label-spacing-block: var(--spectrum-component-top-to-text-200); - --system-tag-size-l-corner-radius: var(--system-tag-size-large-corner-radius); - --system-tag-size-l-spacing-inline-start: var(--system-tag-size-large-spacing-inline-start); - --system-tag-size-l-label-spacing-inline-end: var(--system-tag-size-large-label-spacing-inline-end); - --system-tag-size-l-clear-button-spacing-inline-end: var(--system-tag-size-large-clear-button-spacing-inline-end); -} diff --git a/tokens/dist/css/components/spectrum/textfield.css b/tokens/dist/css/components/spectrum/textfield.css deleted file mode 100644 index ed69c386c3e..00000000000 --- a/tokens/dist/css/components/spectrum/textfield.css +++ /dev/null @@ -1,153 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-textfield-border-color: var(--spectrum-gray-500); - --system-textfield-border-color-hover: var(--spectrum-gray-600); - --system-textfield-border-color-focus: var(--spectrum-gray-800); - --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-textfield-border-width: var(--spectrum-border-width-100); - --system-textfield-texfield-animation-duration: var(--spectrum-animation-duration-100); - --system-textfield-width: 240px; - --system-textfield-min-width: var(--spectrum-text-field-minimum-width-multiplier); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var(--spectrum-field-edge-to-text-quiet); - --system-textfield-spacing-block-start: var(--spectrum-component-top-to-text-100); - --system-textfield-spacing-block-end: var(--spectrum-component-bottom-to-text-100); - --system-textfield-spacing-block-quiet: var(--spectrum-field-edge-to-border-quiet); - --system-textfield-label-spacing-block: var(--spectrum-field-label-to-component); - --system-textfield-helptext-spacing-block: var(--spectrum-help-text-to-component); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-field-edge-to-alert-icon-quiet); - --system-textfield-icon-spacing-inline-end-quiet-valid: var(--spectrum-field-edge-to-validation-icon-quiet); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-character-count-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-spacing-inline: var(--spectrum-spacing-200); - --system-textfield-character-count-spacing-inline-side: var(--spectrum-side-label-character-count-to-field); - --system-textfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-textfield-background-color: var(--spectrum-gray-50); - --system-textfield-text-color-default: var(--spectrum-neutral-content-color-default); - --system-textfield-text-color-hover: var(--spectrum-neutral-content-color-hover); - --system-textfield-text-color-focus: var(--spectrum-neutral-content-color-focus); - --system-textfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); - --system-textfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus); - --system-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); - --system-textfield-background-color-disabled: var(--spectrum-disabled-background-color); - --system-textfield-border-color-disabled: var(--spectrum-disabled-border-color); - --system-textfield-text-color-disabled: var(--spectrum-disabled-content-color); - --system-textfield-border-color-invalid-default: var(--spectrum-negative-border-color-default); - --system-textfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); - --system-textfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); - --system-textfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); - --system-textfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); - --system-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); - --system-textfield-text-color-invalid: var(--spectrum-neutral-content-color-default); - --system-textfield-text-color-valid: var(--spectrum-neutral-content-color-default); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-textfield-text-area-min-inline-size: var(--spectrum-text-area-minimum-width); - --system-textfield-text-area-min-block-size: var(--spectrum-text-area-minimum-height); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); - --system-textfield-size-s-label-spacing-inline-side-label: var(--spectrum-spacing-100); - --system-textfield-size-s-placeholder-font-size: var(--spectrum-font-size-75); - --system-textfield-size-s-spacing-inline: var(--spectrum-component-edge-to-text-75); - --system-textfield-size-s-icon-size-invalid: var(--spectrum-workflow-icon-size-75); - --system-textfield-size-s-icon-size-valid: var(--spectrum-checkmark-icon-size-75); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); - --system-textfield-size-s-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); - --system-textfield-size-s-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); - --system-textfield-size-s-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); - --system-textfield-size-s-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); - --system-textfield-size-s-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-s-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --system-textfield-size-s-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); - --system-textfield-size-s-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); - --system-textfield-size-s-text-area-min-block-size-quiet: var(--spectrum-component-height-75); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --system-textfield-size-m-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --system-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --system-textfield-size-m-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); - --system-textfield-size-m-spacing-inline: var(--spectrum-component-edge-to-text-100); - --system-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); - --system-textfield-size-m-icon-size-invalid: var(--spectrum-workflow-icon-size-100); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); - --system-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); - --system-textfield-size-m-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); - --system-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); - --system-textfield-size-m-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); - --system-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); - --system-textfield-size-m-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); - --system-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); - --system-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); - --system-textfield-size-m-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --system-textfield-size-m-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --system-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); - --system-textfield-size-m-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); - --system-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); - --system-textfield-size-m-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); - --system-textfield-text-area-min-block-size-quiet: var(--spectrum-component-height-100); - --system-textfield-size-m-text-area-min-block-size-quiet: var(--spectrum-component-height-100); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); - --system-textfield-size-l-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --system-textfield-size-l-placeholder-font-size: var(--spectrum-font-size-200); - --system-textfield-size-l-spacing-inline: var(--spectrum-component-edge-to-text-200); - --system-textfield-size-l-icon-size-invalid: var(--spectrum-workflow-icon-size-200); - --system-textfield-size-l-icon-size-valid: var(--spectrum-checkmark-icon-size-200); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); - --system-textfield-size-l-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); - --system-textfield-size-l-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); - --system-textfield-size-l-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); - --system-textfield-size-l-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); - --system-textfield-size-l-character-count-font-size: var(--spectrum-font-size-100); - --system-textfield-size-l-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); - --system-textfield-size-l-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); - --system-textfield-size-l-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); - --system-textfield-size-l-text-area-min-block-size-quiet: var(--spectrum-component-height-200); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --system-textfield-size-xl-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --system-textfield-size-xl-placeholder-font-size: var(--spectrum-font-size-300); - --system-textfield-size-xl-spacing-inline: var(--spectrum-component-edge-to-text-200); - --system-textfield-size-xl-icon-size-invalid: var(--spectrum-workflow-icon-size-300); - --system-textfield-size-xl-icon-size-valid: var(--spectrum-checkmark-icon-size-300); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); - --system-textfield-size-xl-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); - --system-textfield-size-xl-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); - --system-textfield-size-xl-character-count-font-size: var(--spectrum-font-size-200); - --system-textfield-size-xl-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); - --system-textfield-size-xl-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); - --system-textfield-size-xl-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); - --system-textfield-size-xl-text-area-min-block-size-quiet: var(--spectrum-component-height-300); -} diff --git a/tokens/dist/css/components/spectrum/toast.css b/tokens/dist/css/components/spectrum/toast.css deleted file mode 100644 index 28dbd4ccf1d..00000000000 --- a/tokens/dist/css/components/spectrum/toast.css +++ /dev/null @@ -1,41 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); - --system-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); - --system-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); - --system-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); - --system-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); - --system-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); - --system-toast-text-and-icon-color: var(--spectrum-white); - --system-toast-divider-color: var(--spectrum-transparent-white-300); -} diff --git a/tokens/dist/css/components/spectrum/tooltip.css b/tokens/dist/css/components/spectrum/tooltip.css deleted file mode 100644 index 23c2cc3f1af..00000000000 --- a/tokens/dist/css/components/spectrum/tooltip.css +++ /dev/null @@ -1,44 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--legacy { - --system-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); - --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); - --system-tooltip-margin: 0px; - --system-tooltip-height: var(--spectrum-component-height-75); - --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --system-tooltip-border-radius: var(--spectrum-corner-radius-100); - --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --system-tooltip-font-size: var(--spectrum-font-size-75); - --system-tooltip-line-height: var(--spectrum-line-height-100); - --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-tooltip-font-weight: var(--spectrum-regular-font-weight); - --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - --system-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75); - --system-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75); - --system-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); - --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); - --system-tooltip-background-color-informative: var(--spectrum-informative-background-color-default); - --system-tooltip-background-color-positive: var(--spectrum-positive-background-color-default); - --system-tooltip-background-color-negative: var(--spectrum-negative-background-color-default); - --system-tooltip-content-color: var(--spectrum-white); - --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); - --system-tooltip-tip-height-percentage: 50%; - --system-tooltip-tip-antialiasing-inset: 0.5px; - --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - --system-tooltip-background-color-default: var(--system-tooltip-backgound-color-default-neutral); -} diff --git a/tokens/dist/css/dark-vars.css b/tokens/dist/css/dark-vars.css deleted file mode 100644 index c0d5797cb53..00000000000 --- a/tokens/dist/css/dark-vars.css +++ /dev/null @@ -1,442 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--dark { - --spectrum-overlay-opacity: 0.6; - --spectrum-background-layer-2-color: var(--spectrum-gray-75); - --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-500); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-400); - --spectrum-accent-background-color-default: var(--spectrum-accent-color-700); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-600); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-600); - --spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-600); - --spectrum-informative-background-color-default: var(--spectrum-informative-color-700); - --spectrum-informative-background-color-hover: var(--spectrum-informative-color-600); - --spectrum-informative-background-color-down: var(--spectrum-informative-color-600); - --spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-600); - --spectrum-negative-background-color-default: var(--spectrum-negative-color-700); - --spectrum-negative-background-color-hover: var(--spectrum-negative-color-600); - --spectrum-negative-background-color-down: var(--spectrum-negative-color-600); - --spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-600); - --spectrum-positive-background-color-default: var(--spectrum-positive-color-700); - --spectrum-positive-background-color-hover: var(--spectrum-positive-color-600); - --spectrum-positive-background-color-down: var(--spectrum-positive-color-600); - --spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-600); - --spectrum-notice-background-color-default: var(--spectrum-notice-color-900); - --spectrum-gray-background-color-default: var(--spectrum-gray-500); - --spectrum-red-background-color-default: var(--spectrum-red-700); - --spectrum-orange-background-color-default: var(--spectrum-orange-900); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1100); - --spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-1000); - --spectrum-celery-background-color-default: var(--spectrum-celery-900); - --spectrum-green-background-color-default: var(--spectrum-green-700); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); - --spectrum-blue-background-color-default: var(--spectrum-blue-700); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-700); - --spectrum-purple-background-color-default: var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-700); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-700); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-background-elevated-color: var(--spectrum-gray-75); - --spectrum-background-pasteboard-color: var(--spectrum-gray-25); - --spectrum-brown-visual-color: var(--spectrum-brown-900); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900); - --spectrum-pink-visual-color: var(--spectrum-pink-900); - --spectrum-silver-visual-color: var(--spectrum-silver-900); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-900); - --spectrum-brown-background-color-default: var(--spectrum-brown-700); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-700); - --spectrum-pink-background-color-default: var(--spectrum-pink-700); - --spectrum-silver-background-color-default: var(--spectrum-silver-700); - --spectrum-turquoise-background-color-default: var(--spectrum-turquoise-700); - --spectrum-drop-shadow-color-100: rgba(0, 0, 0, 0.36); - --spectrum-drop-shadow-color-200: rgba(0, 0, 0, 0.48); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-gray-25: rgb(17, 17, 17); - --spectrum-gray-50: rgb(27, 27, 27); - --spectrum-gray-75: rgb(34, 34, 34); - --spectrum-gray-100: rgb(44, 44, 44); - --spectrum-gray-200: rgb(50, 50, 50); - --spectrum-gray-300: rgb(57, 57, 57); - --spectrum-gray-400: rgb(68, 68, 68); - --spectrum-gray-500: rgb(109, 109, 109); - --spectrum-gray-600: rgb(138, 138, 138); - --spectrum-gray-700: rgb(175, 175, 175); - --spectrum-gray-800: rgb(219, 219, 219); - --spectrum-gray-900: rgb(242, 242, 242); - --spectrum-gray-1000: rgb(255, 255, 255); - --spectrum-blue-100: rgb(14, 23, 63); - --spectrum-blue-200: rgb(15, 28, 82); - --spectrum-blue-300: rgb(12, 33, 117); - --spectrum-blue-400: rgb(18, 45, 154); - --spectrum-blue-500: rgb(26, 58, 195); - --spectrum-blue-600: rgb(37, 73, 229); - --spectrum-blue-700: rgb(52, 91, 248); - --spectrum-blue-800: rgb(69, 110, 254); - --spectrum-blue-900: rgb(86, 129, 255); - --spectrum-blue-1000: rgb(105, 149, 254); - --spectrum-blue-1100: rgb(124, 169, 252); - --spectrum-blue-1200: rgb(152, 192, 252); - --spectrum-blue-1300: rgb(181, 213, 253); - --spectrum-blue-1400: rgb(213, 231, 254); - --spectrum-blue-1500: rgb(238, 245, 255); - --spectrum-blue-1600: rgb(255, 255, 255); - --spectrum-red-100: rgb(54, 10, 3); - --spectrum-red-200: rgb(68, 13, 5); - --spectrum-red-300: rgb(87, 17, 7); - --spectrum-red-400: rgb(115, 24, 11); - --spectrum-red-500: rgb(147, 31, 17); - --spectrum-red-600: rgb(177, 38, 23); - --spectrum-red-700: rgb(205, 46, 29); - --spectrum-red-800: rgb(230, 54, 35); - --spectrum-red-900: rgb(252, 67, 46); - --spectrum-red-1000: rgb(255, 103, 86); - --spectrum-red-1100: rgb(255, 134, 120); - --spectrum-red-1200: rgb(255, 167, 157); - --spectrum-red-1300: rgb(255, 196, 189); - --spectrum-red-1400: rgb(255, 222, 219); - --spectrum-red-1500: rgb(255, 242, 240); - --spectrum-red-1600: rgb(255, 255, 255); - --spectrum-orange-100: rgb(49, 16, 0); - --spectrum-orange-200: rgb(61, 21, 0); - --spectrum-orange-300: rgb(80, 27, 0); - --spectrum-orange-400: rgb(106, 36, 0); - --spectrum-orange-500: rgb(135, 47, 0); - --spectrum-orange-600: rgb(162, 59, 0); - --spectrum-orange-700: rgb(185, 73, 0); - --spectrum-orange-800: rgb(205, 86, 0); - --spectrum-orange-900: rgb(224, 100, 0); - --spectrum-orange-1000: rgb(243, 117, 0); - --spectrum-orange-1100: rgb(255, 137, 0); - --spectrum-orange-1200: rgb(255, 173, 45); - --spectrum-orange-1300: rgb(255, 201, 116); - --spectrum-orange-1400: rgb(255, 225, 178); - --spectrum-orange-1500: rgb(255, 243, 225); - --spectrum-orange-1600: rgb(255, 255, 255); - --spectrum-yellow-100: rgb(37, 23, 0); - --spectrum-yellow-200: rgb(47, 29, 0); - --spectrum-yellow-300: rgb(61, 39, 0); - --spectrum-yellow-400: rgb(83, 52, 0); - --spectrum-yellow-500: rgb(107, 67, 0); - --spectrum-yellow-600: rgb(130, 82, 0); - --spectrum-yellow-700: rgb(151, 97, 0); - --spectrum-yellow-800: rgb(169, 110, 0); - --spectrum-yellow-900: rgb(186, 124, 0); - --spectrum-yellow-1000: rgb(203, 141, 0); - --spectrum-yellow-1100: rgb(218, 159, 0); - --spectrum-yellow-1200: rgb(235, 183, 0); - --spectrum-yellow-1300: rgb(249, 206, 0); - --spectrum-yellow-1400: rgb(255, 230, 86); - --spectrum-yellow-1500: rgb(255, 246, 195); - --spectrum-yellow-1600: rgb(255, 255, 255); - --spectrum-chartreuse-100: rgb(23, 28, 0); - --spectrum-chartreuse-200: rgb(30, 36, 0); - --spectrum-chartreuse-300: rgb(39, 47, 0); - --spectrum-chartreuse-400: rgb(53, 63, 0); - --spectrum-chartreuse-500: rgb(68, 82, 0); - --spectrum-chartreuse-600: rgb(83, 100, 0); - --spectrum-chartreuse-700: rgb(97, 116, 0); - --spectrum-chartreuse-800: rgb(109, 131, 0); - --spectrum-chartreuse-900: rgb(122, 147, 0); - --spectrum-chartreuse-1000: rgb(136, 164, 0); - --spectrum-chartreuse-1100: rgb(151, 181, 0); - --spectrum-chartreuse-1200: rgb(169, 203, 0); - --spectrum-chartreuse-1300: rgb(187, 225, 0); - --spectrum-chartreuse-1400: rgb(219, 240, 117); - --spectrum-chartreuse-1500: rgb(242, 249, 206); - --spectrum-chartreuse-1600: rgb(255, 255, 255); - --spectrum-celery-100: rgb(11, 31, 0); - --spectrum-celery-200: rgb(15, 38, 0); - --spectrum-celery-300: rgb(21, 51, 1); - --spectrum-celery-400: rgb(31, 67, 4); - --spectrum-celery-500: rgb(41, 86, 8); - --spectrum-celery-600: rgb(50, 105, 11); - --spectrum-celery-700: rgb(60, 122, 15); - --spectrum-celery-800: rgb(69, 138, 19); - --spectrum-celery-900: rgb(78, 154, 23); - --spectrum-celery-1000: rgb(88, 172, 28); - --spectrum-celery-1100: rgb(100, 190, 35); - --spectrum-celery-1200: rgb(116, 213, 46); - --spectrum-celery-1300: rgb(136, 234, 65); - --spectrum-celery-1400: rgb(170, 251, 112); - --spectrum-celery-1500: rgb(222, 255, 198); - --spectrum-celery-1600: rgb(255, 255, 255); - --spectrum-green-100: rgb(0, 30, 23); - --spectrum-green-200: rgb(0, 38, 29); - --spectrum-green-300: rgb(0, 51, 38); - --spectrum-green-400: rgb(0, 68, 48); - --spectrum-green-500: rgb(2, 87, 58); - --spectrum-green-600: rgb(3, 106, 67); - --spectrum-green-700: rgb(4, 124, 75); - --spectrum-green-800: rgb(6, 140, 82); - --spectrum-green-900: rgb(9, 157, 89); - --spectrum-green-1000: rgb(14, 175, 98); - --spectrum-green-1100: rgb(24, 193, 110); - --spectrum-green-1200: rgb(57, 215, 134); - --spectrum-green-1300: rgb(126, 231, 172); - --spectrum-green-1400: rgb(189, 241, 208); - --spectrum-green-1500: rgb(229, 250, 236); - --spectrum-green-1600: rgb(255, 255, 255); - --spectrum-seafoam-100: rgb(0, 30, 27); - --spectrum-seafoam-200: rgb(0, 39, 35); - --spectrum-seafoam-300: rgb(0, 50, 44); - --spectrum-seafoam-400: rgb(0, 67, 59); - --spectrum-seafoam-500: rgb(2, 86, 75); - --spectrum-seafoam-600: rgb(4, 105, 89); - --spectrum-seafoam-700: rgb(6, 122, 103); - --spectrum-seafoam-800: rgb(8, 138, 116); - --spectrum-seafoam-900: rgb(10, 154, 128); - --spectrum-seafoam-1000: rgb(12, 173, 142); - --spectrum-seafoam-1100: rgb(14, 190, 156); - --spectrum-seafoam-1200: rgb(29, 214, 176); - --spectrum-seafoam-1300: rgb(122, 229, 203); - --spectrum-seafoam-1400: rgb(186, 241, 222); - --spectrum-seafoam-1500: rgb(229, 249, 243); - --spectrum-seafoam-1600: rgb(255, 255, 255); - --spectrum-cyan-100: rgb(0, 29, 39); - --spectrum-cyan-200: rgb(0, 36, 49); - --spectrum-cyan-300: rgb(0, 48, 65); - --spectrum-cyan-400: rgb(0, 64, 88); - --spectrum-cyan-500: rgb(0, 82, 113); - --spectrum-cyan-600: rgb(3, 99, 140); - --spectrum-cyan-700: rgb(8, 115, 168); - --spectrum-cyan-800: rgb(15, 128, 194); - --spectrum-cyan-900: rgb(24, 142, 220); - --spectrum-cyan-1000: rgb(38, 159, 244); - --spectrum-cyan-1100: rgb(63, 177, 255); - --spectrum-cyan-1200: rgb(107, 199, 255); - --spectrum-cyan-1300: rgb(152, 219, 255); - --spectrum-cyan-1400: rgb(195, 236, 252); - --spectrum-cyan-1500: rgb(230, 248, 253); - --spectrum-cyan-1600: rgb(255, 255, 255); - --spectrum-indigo-100: rgb(30, 0, 93); - --spectrum-indigo-200: rgb(35, 0, 110); - --spectrum-indigo-300: rgb(47, 0, 140); - --spectrum-indigo-400: rgb(62, 12, 174); - --spectrum-indigo-500: rgb(79, 30, 209); - --spectrum-indigo-600: rgb(95, 52, 235); - --spectrum-indigo-700: rgb(109, 75, 248); - --spectrum-indigo-800: rgb(119, 97, 252); - --spectrum-indigo-900: rgb(128, 119, 254); - --spectrum-indigo-1000: rgb(139, 141, 254); - --spectrum-indigo-1100: rgb(153, 161, 255); - --spectrum-indigo-1200: rgb(176, 186, 255); - --spectrum-indigo-1300: rgb(199, 208, 255); - --spectrum-indigo-1400: rgb(223, 228, 255); - --spectrum-indigo-1500: rgb(243, 244, 255); - --spectrum-indigo-1600: rgb(255, 255, 255); - --spectrum-purple-100: rgb(41, 0, 79); - --spectrum-purple-200: rgb(50, 0, 96); - --spectrum-purple-300: rgb(64, 0, 122); - --spectrum-purple-400: rgb(83, 0, 159); - --spectrum-purple-500: rgb(107, 6, 195); - --spectrum-purple-600: rgb(130, 34, 215); - --spectrum-purple-700: rgb(148, 62, 224); - --spectrum-purple-800: rgb(161, 84, 229); - --spectrum-purple-900: rgb(173, 105, 233); - --spectrum-purple-1000: rgb(186, 127, 237); - --spectrum-purple-1100: rgb(197, 149, 240); - --spectrum-purple-1200: rgb(212, 176, 244); - --spectrum-purple-1300: rgb(225, 201, 247); - --spectrum-purple-1400: rgb(238, 224, 250); - --spectrum-purple-1500: rgb(248, 243, 253); - --spectrum-purple-1600: rgb(255, 255, 255); - --spectrum-fuchsia-100: rgb(50, 0, 61); - --spectrum-fuchsia-200: rgb(61, 0, 74); - --spectrum-fuchsia-300: rgb(79, 0, 95); - --spectrum-fuchsia-400: rgb(102, 9, 120); - --spectrum-fuchsia-500: rgb(127, 23, 146); - --spectrum-fuchsia-600: rgb(151, 38, 170); - --spectrum-fuchsia-700: rgb(173, 51, 192); - --spectrum-fuchsia-800: rgb(192, 64, 212); - --spectrum-fuchsia-900: rgb(213, 73, 235); - --spectrum-fuchsia-1000: rgb(232, 91, 253); - --spectrum-fuchsia-1100: rgb(240, 122, 255); - --spectrum-fuchsia-1200: rgb(245, 159, 255); - --spectrum-fuchsia-1300: rgb(248, 191, 255); - --spectrum-fuchsia-1400: rgb(251, 219, 255); - --spectrum-fuchsia-1500: rgb(253, 241, 255); - --spectrum-fuchsia-1600: rgb(255, 255, 255); - --spectrum-magenta-100: rgb(59, 0, 22); - --spectrum-magenta-200: rgb(74, 0, 27); - --spectrum-magenta-300: rgb(93, 0, 34); - --spectrum-magenta-400: rgb(123, 0, 45); - --spectrum-magenta-500: rgb(152, 7, 60); - --spectrum-magenta-600: rgb(181, 19, 76); - --spectrum-magenta-700: rgb(207, 31, 92); - --spectrum-magenta-800: rgb(231, 41, 105); - --spectrum-magenta-900: rgb(255, 51, 119); - --spectrum-magenta-1000: rgb(255, 96, 149); - --spectrum-magenta-1100: rgb(255, 128, 171); - --spectrum-magenta-1200: rgb(255, 163, 194); - --spectrum-magenta-1300: rgb(255, 193, 214); - --spectrum-magenta-1400: rgb(255, 220, 232); - --spectrum-magenta-1500: rgb(255, 241, 246); - --spectrum-magenta-1600: rgb(255, 255, 255); - --spectrum-pink-100: rgb(58, 0, 37); - --spectrum-pink-200: rgb(71, 0, 44); - --spectrum-pink-300: rgb(90, 0, 57); - --spectrum-pink-400: rgb(115, 7, 75); - --spectrum-pink-500: rgb(143, 18, 97); - --spectrum-pink-600: rgb(171, 29, 119); - --spectrum-pink-700: rgb(196, 39, 138); - --spectrum-pink-800: rgb(220, 47, 156); - --spectrum-pink-900: rgb(236, 67, 175); - --spectrum-pink-1000: rgb(251, 90, 196); - --spectrum-pink-1100: rgb(255, 122, 210); - --spectrum-pink-1200: rgb(255, 159, 223); - --spectrum-pink-1300: rgb(255, 191, 234); - --spectrum-pink-1400: rgb(255, 219, 243); - --spectrum-pink-1500: rgb(255, 241, 250); - --spectrum-pink-1600: rgb(255, 255, 255); - --spectrum-turquoise-100: rgb(0, 30, 33); - --spectrum-turquoise-200: rgb(0, 37, 41); - --spectrum-turquoise-300: rgb(0, 49, 54); - --spectrum-turquoise-400: rgb(0, 66, 72); - --spectrum-turquoise-500: rgb(3, 84, 92); - --spectrum-turquoise-600: rgb(5, 103, 112); - --spectrum-turquoise-700: rgb(7, 120, 131); - --spectrum-turquoise-800: rgb(9, 135, 147); - --spectrum-turquoise-900: rgb(11, 151, 164); - --spectrum-turquoise-1000: rgb(13, 168, 182); - --spectrum-turquoise-1100: rgb(16, 186, 202); - --spectrum-turquoise-1200: rgb(64, 208, 220); - --spectrum-turquoise-1300: rgb(128, 225, 231); - --spectrum-turquoise-1400: rgb(183, 240, 240); - --spectrum-turquoise-1500: rgb(228, 249, 249); - --spectrum-turquoise-1600: rgb(255, 255, 255); - --spectrum-brown-100: rgb(35, 24, 8); - --spectrum-brown-200: rgb(44, 31, 11); - --spectrum-brown-300: rgb(58, 40, 14); - --spectrum-brown-400: rgb(78, 55, 19); - --spectrum-brown-500: rgb(98, 71, 30); - --spectrum-brown-600: rgb(115, 88, 47); - --spectrum-brown-700: rgb(132, 104, 61); - --spectrum-brown-800: rgb(148, 118, 73); - --spectrum-brown-900: rgb(163, 132, 84); - --spectrum-brown-1000: rgb(181, 147, 98); - --spectrum-brown-1100: rgb(199, 163, 112); - --spectrum-brown-1200: rgb(222, 185, 130); - --spectrum-brown-1300: rgb(232, 207, 169); - --spectrum-brown-1400: rgb(242, 227, 206); - --spectrum-brown-1500: rgb(250, 244, 236); - --spectrum-brown-1600: rgb(255, 255, 255); - --spectrum-silver-100: rgb(26, 26, 26); - --spectrum-silver-200: rgb(33, 33, 33); - --spectrum-silver-300: rgb(44, 44, 44); - --spectrum-silver-400: rgb(59, 59, 59); - --spectrum-silver-500: rgb(76, 76, 76); - --spectrum-silver-600: rgb(92, 92, 92); - --spectrum-silver-700: rgb(108, 108, 108); - --spectrum-silver-800: rgb(123, 123, 123); - --spectrum-silver-900: rgb(137, 137, 137); - --spectrum-silver-1000: rgb(152, 152, 152); - --spectrum-silver-1100: rgb(169, 169, 169); - --spectrum-silver-1200: rgb(190, 190, 190); - --spectrum-silver-1300: rgb(211, 211, 211); - --spectrum-silver-1400: rgb(229, 229, 229); - --spectrum-silver-1500: rgb(244, 244, 244); - --spectrum-silver-1600: rgb(255, 255, 255); - --spectrum-cinnamon-100: rgb(48, 17, 4); - --spectrum-cinnamon-200: rgb(59, 21, 5); - --spectrum-cinnamon-300: rgb(79, 28, 7); - --spectrum-cinnamon-400: rgb(100, 41, 15); - --spectrum-cinnamon-500: rgb(122, 57, 28); - --spectrum-cinnamon-600: rgb(143, 74, 40); - --spectrum-cinnamon-700: rgb(163, 88, 52); - --spectrum-cinnamon-800: rgb(179, 103, 64); - --spectrum-cinnamon-900: rgb(192, 119, 80); - --spectrum-cinnamon-1000: rgb(206, 136, 99); - --spectrum-cinnamon-1100: rgb(220, 154, 118); - --spectrum-cinnamon-1200: rgb(232, 179, 149); - --spectrum-cinnamon-1300: rgb(239, 203, 183); - --spectrum-cinnamon-1400: rgb(246, 225, 214); - --spectrum-cinnamon-1500: rgb(252, 244, 239); - --spectrum-cinnamon-1600: rgb(255, 255, 255); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); - --spectrum-menu-item-background-color-default: rgba(255, 255, 255, 0); - --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200); - --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15); - --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07); - --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); - - --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07); - --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-swatch-border-color: rgba(255, 255, 255, 0.51); -} diff --git a/tokens/dist/css/global-vars.css b/tokens/dist/css/global-vars.css deleted file mode 100644 index 95b9349c257..00000000000 --- a/tokens/dist/css/global-vars.css +++ /dev/null @@ -1,656 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum { - --spectrum-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-static-white-focus-indicator-color: var(--spectrum-white); - --spectrum-static-black-focus-indicator-color: var(--spectrum-black); - --spectrum-overlay-color: var(--spectrum-black); - --spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100); - --spectrum-opacity-disabled: 0.3; - --spectrum-background-base-color: var(--spectrum-gray-25); - --spectrum-background-layer-1-color: var(--spectrum-gray-50); - --spectrum-neutral-background-color-default: var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-default: var(--spectrum-gray-800); - --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-selected: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-accent-content-color-selected: var(--spectrum-accent-content-color-down); - --spectrum-disabled-background-color: var(--spectrum-gray-100); - --spectrum-disabled-static-white-background-color: var(--spectrum-transparent-white-100); - --spectrum-disabled-static-black-background-color: var(--spectrum-transparent-black-100); - --spectrum-background-opacity-default: 0; - --spectrum-background-opacity-hover: 0.1; - --spectrum-background-opacity-down: 0.1; - --spectrum-background-opacity-key-focus: 0.1; - --spectrum-neutral-content-color-default: var(--spectrum-gray-800); - --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-content-color-focus-hover: var(--spectrum-neutral-content-color-down); - --spectrum-neutral-content-color-focus: var(--spectrum-neutral-content-color-down); - --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); - --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-key-focus: var(--spectrum-gray-800); - --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-key-focus: var(--spectrum-accent-color-1000); - --spectrum-negative-content-color-default: var(--spectrum-negative-color-900); - --spectrum-negative-content-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-down: var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-key-focus: var(--spectrum-negative-color-1000); - --spectrum-disabled-content-color: var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-400); - --spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-400); - --spectrum-disabled-border-color: var(--spectrum-gray-300); - --spectrum-disabled-static-white-border-color: var(--spectrum-transparent-white-300); - --spectrum-disabled-static-black-border-color: var(--spectrum-transparent-black-300); - --spectrum-negative-border-color-default: var(--spectrum-negative-color-900); - --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-border-color-focus-hover: var(--spectrum-negative-border-color-down); - --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-key-focus: var(--spectrum-negative-color-1000); - --spectrum-title-color: var(--spectrum-gray-900); - --spectrum-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100); - --spectrum-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200); - --spectrum-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200); - --spectrum-swatch-border-color: var(--spectrum-gray-900); - --spectrum-swatch-border-opacity: 0.51; - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); - --spectrum-swatch-disabled-icon-border-opacity: 0.51; - --spectrum-thumbnail-border-color: var(--spectrum-gray-800); - --spectrum-thumbnail-border-opacity: 0.1; - --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); - --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color: var(--spectrum-gray-900); - --spectrum-color-area-border-opacity: 0.1; - --spectrum-color-slider-border-color: var(--spectrum-gray-900); - --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var(--spectrum-transparent-black-300); - --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); - --spectrum-color-loupe-outer-border: var(--spectrum-white); - --spectrum-card-selection-background-color: var(--spectrum-gray-100); - --spectrum-card-selection-background-color-opacity: 0.95; - --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-background-color-opacity: 0.1; - --spectrum-drop-zone-background-color-opacity-filled: 0.3; - --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); - --spectrum-color-handle-inner-border-color: var(--spectrum-black); - --spectrum-color-handle-inner-border-opacity: 0.42; - --spectrum-color-handle-outer-border-color: var(--spectrum-black); - --spectrum-color-handle-outer-border-opacity: var(--spectrum-color-handle-inner-border-opacity); - --spectrum-color-handle-drop-shadow-color: var(--spectrum-drop-shadow-color); - --spectrum-floating-action-button-drop-shadow-color: var(--spectrum-transparent-black-300); - --spectrum-floating-action-button-shadow-color: var(--spectrum-floating-action-button-drop-shadow-color); - --spectrum-table-row-hover-color: var(--spectrum-gray-900); - --spectrum-table-row-hover-opacity: 0.07; - --spectrum-table-selected-row-background-color: var(--spectrum-informative-background-color-default); - --spectrum-table-selected-row-background-opacity: 0.1; - --spectrum-table-selected-row-background-color-non-emphasized: var(--spectrum-neutral-background-color-selected-default); - --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; - --spectrum-table-row-down-opacity: 0.1; - --spectrum-table-selected-row-background-opacity-hover: 0.15; - --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; - --spectrum-white: rgb(255, 255, 255); - --spectrum-transparent-white-25: rgba(255, 255, 255, 0); - --spectrum-transparent-white-50: rgba(255, 255, 255, 0.04); - --spectrum-transparent-white-75: rgba(255, 255, 255, 0.07); - --spectrum-transparent-white-100: rgba(255, 255, 255, 0.11); - --spectrum-transparent-white-200: rgba(255, 255, 255, 0.14); - --spectrum-transparent-white-300: rgba(255, 255, 255, 0.17); - --spectrum-transparent-white-400: rgba(255, 255, 255, 0.21); - --spectrum-transparent-white-500: rgba(255, 255, 255, 0.39); - --spectrum-transparent-white-600: rgba(255, 255, 255, 0.51); - --spectrum-transparent-white-700: rgba(255, 255, 255, 0.66); - --spectrum-transparent-white-800: rgba(255, 255, 255, 0.85); - --spectrum-transparent-white-900: rgba(255, 255, 255, 0.94); - --spectrum-transparent-white-1000: rgb(255, 255, 255); - --spectrum-black: rgb(0, 0, 0); - --spectrum-transparent-black-25: rgba(0, 0, 0, 0); - --spectrum-transparent-black-50: rgba(0, 0, 0, 0.03); - --spectrum-transparent-black-75: rgba(0, 0, 0, 0.05); - --spectrum-transparent-black-100: rgba(0, 0, 0, 0.09); - --spectrum-transparent-black-200: rgba(0, 0, 0, 0.12); - --spectrum-transparent-black-300: rgba(0, 0, 0, 0.15); - --spectrum-transparent-black-400: rgba(0, 0, 0, 0.22); - --spectrum-transparent-black-500: rgba(0, 0, 0, 0.44); - --spectrum-transparent-black-600: rgba(0, 0, 0, 0.56); - --spectrum-transparent-black-700: rgba(0, 0, 0, 0.69); - --spectrum-transparent-black-800: rgba(0, 0, 0, 0.84); - --spectrum-transparent-black-900: rgba(0, 0, 0, 0.93); - --spectrum-transparent-black-1000: rgb(0, 0, 0); - --spectrum-icon-color-inverse: var(--spectrum-gray-50); - --spectrum-icon-color-primary-default: var(--spectrum-neutral-content-color-default); - --spectrum-asterisk-icon-size-75: 8px; - --spectrum-radio-button-selection-indicator: 4px; - --spectrum-field-label-top-margin-small: 0px; - --spectrum-field-label-to-component: 0px; - --spectrum-help-text-to-component: 0px; - --spectrum-status-light-dot-size-small: 8px; - --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; - --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-button-minimum-width-multiplier: 2.25; - --spectrum-divider-thickness-small: 1px; - --spectrum-divider-thickness-medium: 2px; - --spectrum-divider-thickness-large: 4px; - --spectrum-swatch-rectangle-width-multiplier: 2; - --spectrum-swatch-slash-thickness-extra-small: 2px; - --spectrum-swatch-slash-thickness-small: 3px; - --spectrum-swatch-slash-thickness-medium: 4px; - --spectrum-swatch-slash-thickness-large: 5px; - --spectrum-progress-bar-minimum-width: 48px; - --spectrum-progress-bar-maximum-width: 768px; - --spectrum-meter-minimum-width: 48px; - --spectrum-meter-maximum-width: 768px; - --spectrum-meter-default-width: var(--spectrum-meter-width); - --spectrum-in-line-alert-minimum-width: 240px; - --spectrum-popover-tip-width: 16px; - --spectrum-popover-tip-height: 8px; - --spectrum-menu-item-label-to-description: 1px; - --spectrum-menu-item-section-divider-height: 8px; - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-minimum-width-multiplier: 2; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-picker-end-edge-to-disclousure-icon-quiet: var(--spectrum-picker-end-edge-to-disclosure-icon-quiet); - --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; - --spectrum-text-field-minimum-width-multiplier: 1.5; - --spectrum-combo-box-minimum-width-multiplier: 2.5; - --spectrum-combo-box-quiet-minimum-width-multiplier: 2; - --spectrum-combo-box-visual-to-field-button-quiet: 0px; - --spectrum-alert-dialog-minimum-width: 288px; - --spectrum-alert-dialog-maximum-width: 480px; - --spectrum-contextual-help-minimum-width: 268px; - --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); - --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); - --spectrum-breadcrumbs-end-edge-to-text: 0px; - --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; - --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; - --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; - --spectrum-alert-banner-to-top-workflow-icon: var(--spectrum-alert-banner-top-to-workflow-icon); - --spectrum-alert-banner-to-top-text: var(--spectrum-alert-banner-top-to-text); - --spectrum-alert-banner-to-bottom-text: var(--spectrum-alert-banner-bottom-to-text); - --spectrum-color-area-border-width: var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100); - --spectrum-color-wheel-color-area-margin: 12px; - --spectrum-color-slider-border-width: 1px; - --spectrum-color-slider-border-rounding: 4px; - --spectrum-floating-action-button-drop-shadow-blur: 12px; - --spectrum-floating-action-button-drop-shadow-y: 4px; - --spectrum-illustrated-message-maximum-width: 380px; - --spectrum-search-field-minimum-width-multiplier: 3; - --spectrum-color-loupe-height: 64px; - --spectrum-color-loupe-width: 48px; - --spectrum-color-loupe-bottom-to-color-handle: 12px; - --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); - --spectrum-color-loupe-inner-border-width: 1px; - --spectrum-color-loupe-drop-shadow-y: 2px; - --spectrum-color-loupe-drop-shadow-blur: 8px; - --spectrum-card-minimum-width: 100px; - --spectrum-card-preview-minimum-height: 130px; - --spectrum-card-selection-background-size: 40px; - --spectrum-drop-zone-width: 428px; - --spectrum-drop-zone-content-maximum-width: var(--spectrum-illustrated-message-maximum-width); - --spectrum-drop-zone-border-dash-length: 8px; - --spectrum-drop-zone-border-dash-gap: 4px; - --spectrum-drop-zone-title-size: var(--spectrum-illustrated-message-title-size); - --spectrum-drop-zone-cjk-title-size: var(--spectrum-illustrated-message-cjk-title-size); - --spectrum-drop-zone-body-size: var(--spectrum-illustrated-message-body-size); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; - --spectrum-color-handle-border-width: var(--spectrum-border-width-200); - --spectrum-color-handle-inner-border-width: 1px; - --spectrum-color-handle-outer-border-width: 1px; - --spectrum-color-handle-drop-shadow-x: 0; - --spectrum-color-handle-drop-shadow-y: 0; - --spectrum-color-handle-drop-shadow-blur: 0; - --spectrum-table-row-height-small-compact: var(--spectrum-component-height-75); - --spectrum-table-row-height-medium-compact: var(--spectrum-component-height-100); - --spectrum-table-row-height-large-compact: var(--spectrum-component-height-200); - --spectrum-table-row-height-extra-large-compact: var(--spectrum-component-height-300); - --spectrum-table-row-top-to-text-small-compact: var(--spectrum-component-top-to-text-75); - --spectrum-table-row-top-to-text-medium-compact: var(--spectrum-component-top-to-text-100); - --spectrum-table-row-top-to-text-large-compact: var(--spectrum-component-top-to-text-200); - --spectrum-table-row-top-to-text-extra-large-compact: var(--spectrum-component-top-to-text-300); - --spectrum-table-row-bottom-to-text-small-compact: var(--spectrum-component-bottom-to-text-75); - --spectrum-table-row-bottom-to-text-medium-compact: var(--spectrum-component-bottom-to-text-100); - --spectrum-table-row-bottom-to-text-large-compact: var(--spectrum-component-bottom-to-text-200); - --spectrum-table-row-bottom-to-text-extra-large-compact: var(--spectrum-component-bottom-to-text-300); - --spectrum-table-edge-to-content: 16px; - --spectrum-table-border-divider-width: 1px; - --spectrum-tab-item-height-small: var(--spectrum-component-height-200); - --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); - --spectrum-tab-item-height-large: var(--spectrum-component-height-400); - --spectrum-tab-item-height-extra-large: var(--spectrum-component-height-500); - --spectrum-tab-item-compact-height-small: var(--spectrum-component-height-75); - --spectrum-tab-item-compact-height-medium: var(--spectrum-component-height-100); - --spectrum-tab-item-compact-height-large: var(--spectrum-component-height-200); - --spectrum-tab-item-compact-height-extra-large: var(--spectrum-component-height-300); - --spectrum-tab-item-start-to-edge-quiet: 0px; - --spectrum-in-field-button-width-stacked-small: 20px; - --spectrum-in-field-button-width-stacked-medium: 28px; - --spectrum-in-field-button-width-stacked-large: 36px; - --spectrum-in-field-button-width-stacked-extra-large: 44px; - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; - --spectrum-in-field-button-edge-to-fill: 0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); - --spectrum-corner-radius-75: 2px; - --spectrum-drop-shadow-x: 0px; - --spectrum-android-elevation: 2dp; - --spectrum-spacing-50: 2px; - --spectrum-spacing-75: 4px; - --spectrum-spacing-100: 8px; - --spectrum-spacing-200: 12px; - --spectrum-spacing-300: 16px; - --spectrum-spacing-400: 24px; - --spectrum-spacing-500: 32px; - --spectrum-spacing-600: 40px; - --spectrum-spacing-700: 48px; - --spectrum-spacing-800: 64px; - --spectrum-spacing-900: 80px; - --spectrum-spacing-1000: 96px; - --spectrum-focus-indicator-thickness: 2px; - --spectrum-focus-indicator-gap: 2px; - --spectrum-border-width-100: 1px; - --spectrum-border-width-200: 2px; - --spectrum-border-width-400: 4px; - --spectrum-field-edge-to-text-quiet: 0px; - --spectrum-field-edge-to-visual-quiet: 0px; - --spectrum-field-edge-to-border-quiet: 0px; - --spectrum-field-edge-to-alert-icon-quiet: 0px; - --spectrum-field-edge-to-validation-icon-quiet: 0px; - --spectrum-text-underline-thickness: 1px; - --spectrum-text-underline-gap: 1px; - --spectrum-accent-color-100: var(--spectrum-blue-100); - --spectrum-accent-color-200: var(--spectrum-blue-200); - --spectrum-accent-color-300: var(--spectrum-blue-300); - --spectrum-accent-color-400: var(--spectrum-blue-400); - --spectrum-accent-color-500: var(--spectrum-blue-500); - --spectrum-accent-color-600: var(--spectrum-blue-600); - --spectrum-accent-color-700: var(--spectrum-blue-700); - --spectrum-accent-color-800: var(--spectrum-blue-800); - --spectrum-accent-color-900: var(--spectrum-blue-900); - --spectrum-accent-color-1000: var(--spectrum-blue-1000); - --spectrum-accent-color-1100: var(--spectrum-blue-1100); - --spectrum-accent-color-1200: var(--spectrum-blue-1200); - --spectrum-accent-color-1300: var(--spectrum-blue-1300); - --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-accent-color-1500: var(--spectrum-blue-1500); - --spectrum-accent-color-1600: var(--spectrum-blue-1600); - --spectrum-informative-color-100: var(--spectrum-blue-100); - --spectrum-informative-color-200: var(--spectrum-blue-200); - --spectrum-informative-color-300: var(--spectrum-blue-300); - --spectrum-informative-color-400: var(--spectrum-blue-400); - --spectrum-informative-color-500: var(--spectrum-blue-500); - --spectrum-informative-color-600: var(--spectrum-blue-600); - --spectrum-informative-color-700: var(--spectrum-blue-700); - --spectrum-informative-color-800: var(--spectrum-blue-800); - --spectrum-informative-color-900: var(--spectrum-blue-900); - --spectrum-informative-color-1000: var(--spectrum-blue-1000); - --spectrum-informative-color-1100: var(--spectrum-blue-1100); - --spectrum-informative-color-1200: var(--spectrum-blue-1200); - --spectrum-informative-color-1300: var(--spectrum-blue-1300); - --spectrum-informative-color-1400: var(--spectrum-blue-1400); - --spectrum-informative-color-1500: var(--spectrum-blue-1500); - --spectrum-informative-color-1600: var(--spectrum-blue-1600); - --spectrum-negative-color-100: var(--spectrum-red-100); - --spectrum-negative-color-200: var(--spectrum-red-200); - --spectrum-negative-color-300: var(--spectrum-red-300); - --spectrum-negative-color-400: var(--spectrum-red-400); - --spectrum-negative-color-500: var(--spectrum-red-500); - --spectrum-negative-color-600: var(--spectrum-red-600); - --spectrum-negative-color-700: var(--spectrum-red-700); - --spectrum-negative-color-800: var(--spectrum-red-800); - --spectrum-negative-color-900: var(--spectrum-red-900); - --spectrum-negative-color-1000: var(--spectrum-red-1000); - --spectrum-negative-color-1100: var(--spectrum-red-1100); - --spectrum-negative-color-1200: var(--spectrum-red-1200); - --spectrum-negative-color-1300: var(--spectrum-red-1300); - --spectrum-negative-color-1400: var(--spectrum-red-1400); - --spectrum-negative-color-1500: var(--spectrum-red-1500); - --spectrum-negative-color-1600: var(--spectrum-red-1600); - --spectrum-notice-color-100: var(--spectrum-orange-100); - --spectrum-notice-color-200: var(--spectrum-orange-200); - --spectrum-notice-color-300: var(--spectrum-orange-300); - --spectrum-notice-color-400: var(--spectrum-orange-400); - --spectrum-notice-color-500: var(--spectrum-orange-500); - --spectrum-notice-color-600: var(--spectrum-orange-600); - --spectrum-notice-color-700: var(--spectrum-orange-700); - --spectrum-notice-color-800: var(--spectrum-orange-800); - --spectrum-notice-color-900: var(--spectrum-orange-900); - --spectrum-notice-color-1000: var(--spectrum-orange-1000); - --spectrum-notice-color-1100: var(--spectrum-orange-1100); - --spectrum-notice-color-1200: var(--spectrum-orange-1200); - --spectrum-notice-color-1300: var(--spectrum-orange-1300); - --spectrum-notice-color-1400: var(--spectrum-orange-1400); - --spectrum-notice-color-1500: var(--spectrum-orange-1500); - --spectrum-notice-color-1600: var(--spectrum-orange-1600); - --spectrum-positive-color-100: var(--spectrum-green-100); - --spectrum-positive-color-200: var(--spectrum-green-200); - --spectrum-positive-color-300: var(--spectrum-green-300); - --spectrum-positive-color-400: var(--spectrum-green-400); - --spectrum-positive-color-500: var(--spectrum-green-500); - --spectrum-positive-color-600: var(--spectrum-green-600); - --spectrum-positive-color-700: var(--spectrum-green-700); - --spectrum-positive-color-800: var(--spectrum-green-800); - --spectrum-positive-color-900: var(--spectrum-green-900); - --spectrum-positive-color-1000: var(--spectrum-green-1000); - --spectrum-positive-color-1100: var(--spectrum-green-1100); - --spectrum-positive-color-1200: var(--spectrum-green-1200); - --spectrum-positive-color-1300: var(--spectrum-green-1300); - --spectrum-positive-color-1400: var(--spectrum-green-1400); - --spectrum-positive-color-1500: var(--spectrum-green-1500); - --spectrum-positive-color-1600: var(--spectrum-green-1600); - --spectrum-negative-subdued-background-color-default: var(--spectrum-negative-color-200); - --spectrum-negative-subdued-background-color-hover: var(--spectrum-negative-color-300); - --spectrum-negative-subdued-background-color-down: var(--spectrum-negative-color-300); - --spectrum-negative-subdued-background-color-key-focus: var(--spectrum-negative-color-300); - --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-sans-serif-font-family: Adobe Clean; - --spectrum-serif-font-family: Adobe Clean Serif; - --spectrum-cjk-font-family: Adobe Clean Han; - --spectrum-light-font-weight: 300; - --spectrum-regular-font-weight: 400; - --spectrum-medium-font-weight: 500; - --spectrum-bold-font-weight: 700; - --spectrum-extra-bold-font-weight: 800; - --spectrum-black-font-weight: 900; - --spectrum-italic-font-style: italic; - --spectrum-default-font-style: normal; - --spectrum-line-height-100: 1.3; - --spectrum-line-height-200: 1.5; - --spectrum-cjk-line-height-100: 1.5; - --spectrum-cjk-line-height-200: 1.7; - --spectrum-cjk-letter-spacing: 0.05em; - --spectrum-heading-sans-serif-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-heading-sans-serif-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-heading-sans-serif-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-serif-light-font-weight: var(--spectrum-regular-font-weight); - --spectrum-heading-serif-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-serif-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-serif-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-light-strong-font-style: var(--spectrum-default-font-style); - --spectrum-heading-serif-light-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-light-strong-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-light-strong-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-cjk-light-strong-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-heading-serif-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-heavy-strong-font-style: var(--spectrum-default-font-style); - --spectrum-heading-serif-heavy-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-serif-heavy-strong-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-heavy-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-strong-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-emphasized-font-weight: var(--spectrum-light-font-weight); - --spectrum-heading-sans-serif-light-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-heading-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-heading-serif-light-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-heading-cjk-light-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-heading-cjk-light-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-heading-cjk-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-heavy-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-heading-serif-heavy-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-serif-heavy-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-heading-cjk-heavy-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-heading-serif-light-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-heading-cjk-light-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-cjk-light-strong-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-strong-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-heading-serif-strong-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-heading-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-serif-heavy-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); - --spectrum-heading-size-xl: var(--spectrum-font-size-900); - --spectrum-heading-size-l: var(--spectrum-font-size-700); - --spectrum-heading-size-m: var(--spectrum-font-size-500); - --spectrum-heading-size-s: var(--spectrum-font-size-300); - --spectrum-heading-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); - --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); - --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); - --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-line-height: var(--spectrum-line-height-100); - --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; - --spectrum-heading-margin-bottom-multiplier: 0.25; - --spectrum-heading-color: var(--spectrum-gray-900); - --spectrum-body-sans-serif-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-sans-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-body-serif-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-serif-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-body-cjk-emphasized-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-body-cjk-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-body-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-body-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-body-size-xxxl: var(--spectrum-font-size-600); - --spectrum-body-size-xxl: var(--spectrum-font-size-500); - --spectrum-body-size-xl: var(--spectrum-font-size-400); - --spectrum-body-size-l: var(--spectrum-font-size-300); - --spectrum-body-size-m: var(--spectrum-font-size-200); - --spectrum-body-size-s: var(--spectrum-font-size-100); - --spectrum-body-size-xs: var(--spectrum-font-size-75); - --spectrum-body-line-height: var(--spectrum-line-height-200); - --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-body-margin-multiplier: 0.75; - --spectrum-body-color: var(--spectrum-gray-800); - --spectrum-detail-sans-serif-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-font-weight: var(--spectrum-regular-font-weight); - --spectrum-detail-sans-serif-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-light-font-weight: var(--spectrum-regular-font-weight); - --spectrum-detail-serif-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-font-weight: var(--spectrum-regular-font-weight); - --spectrum-detail-sans-serif-light-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-light-strong-font-weight: var(--spectrum-regular-font-weight); - --spectrum-detail-serif-light-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-light-strong-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-light-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-detail-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-detail-cjk-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-detail-cjk-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-detail-sans-serif-light-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-detail-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-detail-serif-light-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-detail-cjk-light-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-detail-cjk-light-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-detail-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-detail-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-detail-serif-light-strong-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-detail-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-detail-cjk-light-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-light-strong-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-detail-size-xl: var(--spectrum-font-size-200); - --spectrum-detail-size-l: var(--spectrum-font-size-100); - --spectrum-detail-size-m: var(--spectrum-font-size-75); - --spectrum-detail-size-s: var(--spectrum-font-size-50); - --spectrum-detail-line-height: var(--spectrum-line-height-100); - --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; - --spectrum-detail-margin-bottom-multiplier: 0.25; - --spectrum-detail-letter-spacing: 0.06em; - --spectrum-detail-sans-serif-text-transform: uppercase; - --spectrum-detail-serif-text-transform: uppercase; - --spectrum-detail-color: var(--spectrum-gray-900); - --spectrum-code-font-family: Source Code Pro; - --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); - --spectrum-code-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-code-cjk-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-cjk-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-strong-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-code-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style); - --spectrum-code-size-xl: var(--spectrum-font-size-400); - --spectrum-code-size-l: var(--spectrum-font-size-300); - --spectrum-code-size-m: var(--spectrum-font-size-200); - --spectrum-code-size-s: var(--spectrum-font-size-100); - --spectrum-code-size-xs: var(--spectrum-font-size-75); - --spectrum-code-line-height: var(--spectrum-line-height-200); - --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-code-color: var(--spectrum-gray-800); - --system: spectrum; - - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - - --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; - - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color: rgb(15, 121, 125); - --spectrum-docs-static-black-background-color: rgb(181, 209, 211); -} diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css deleted file mode 100644 index 9fa2f6b02bf..00000000000 --- a/tokens/dist/css/large-vars.css +++ /dev/null @@ -1,656 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--large { - --spectrum-workflow-icon-size-50: 18px; - --spectrum-workflow-icon-size-75: 20px; - --spectrum-workflow-icon-size-100: 22px; - --spectrum-workflow-icon-size-200: 24px; - --spectrum-workflow-icon-size-300: 28px; - --spectrum-arrow-icon-size-75: 12px; - --spectrum-arrow-icon-size-100: 14px; - --spectrum-arrow-icon-size-200: 16px; - --spectrum-arrow-icon-size-300: 16px; - --spectrum-arrow-icon-size-400: 18px; - --spectrum-arrow-icon-size-500: 22px; - --spectrum-arrow-icon-size-600: 24px; - --spectrum-asterisk-icon-size-100: 10px; - --spectrum-asterisk-icon-size-200: 12px; - --spectrum-asterisk-icon-size-300: 12px; - --spectrum-checkmark-icon-size-50: 12px; - --spectrum-checkmark-icon-size-75: 12px; - --spectrum-checkmark-icon-size-100: 14px; - --spectrum-checkmark-icon-size-200: 14px; - --spectrum-checkmark-icon-size-300: 16px; - --spectrum-checkmark-icon-size-400: 18px; - --spectrum-checkmark-icon-size-500: 20px; - --spectrum-checkmark-icon-size-600: 24px; - --spectrum-chevron-icon-size-50: 8px; - --spectrum-chevron-icon-size-75: 12px; - --spectrum-chevron-icon-size-100: 14px; - --spectrum-chevron-icon-size-200: 14px; - --spectrum-chevron-icon-size-300: 16px; - --spectrum-chevron-icon-size-400: 18px; - --spectrum-chevron-icon-size-500: 20px; - --spectrum-chevron-icon-size-600: 24px; - --spectrum-corner-triangle-icon-size-75: 6px; - --spectrum-corner-triangle-icon-size-100: 7px; - --spectrum-corner-triangle-icon-size-200: 8px; - --spectrum-corner-triangle-icon-size-300: 8px; - --spectrum-cross-icon-size-75: 10px; - --spectrum-cross-icon-size-100: 10px; - --spectrum-cross-icon-size-200: 12px; - --spectrum-cross-icon-size-300: 14px; - --spectrum-cross-icon-size-400: 16px; - --spectrum-cross-icon-size-500: 16px; - --spectrum-cross-icon-size-600: 18px; - --spectrum-dash-icon-size-50: 10px; - --spectrum-dash-icon-size-75: 10px; - --spectrum-dash-icon-size-100: 12px; - --spectrum-dash-icon-size-200: 14px; - --spectrum-dash-icon-size-300: 16px; - --spectrum-dash-icon-size-400: 18px; - --spectrum-dash-icon-size-500: 20px; - --spectrum-dash-icon-size-600: 22px; - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 16px; - --spectrum-switch-control-height-medium: 18px; - --spectrum-switch-control-height-large: 20px; - --spectrum-switch-control-height-extra-large: 22px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; - --spectrum-field-label-text-to-asterisk-small: 5px; - --spectrum-field-label-text-to-asterisk-medium: 5px; - --spectrum-field-label-text-to-asterisk-large: 6px; - --spectrum-field-label-text-to-asterisk-extra-large: 6px; - --spectrum-field-label-top-to-asterisk-small: 11px; - --spectrum-field-label-top-to-asterisk-medium: 15px; - --spectrum-field-label-top-to-asterisk-large: 19px; - --spectrum-field-label-top-to-asterisk-extra-large: 24px; - --spectrum-field-label-top-margin-medium: 5px; - --spectrum-field-label-top-margin-large: 6px; - --spectrum-field-label-top-margin-extra-large: 6px; - --spectrum-field-label-to-component-quiet-small: -10px; - --spectrum-field-label-to-component-quiet-medium: -10px; - --spectrum-field-label-to-component-quiet-large: -15px; - --spectrum-field-label-to-component-quiet-extra-large: -19px; - --spectrum-help-text-top-to-workflow-icon-small: 5px; - --spectrum-help-text-top-to-workflow-icon-medium: 4px; - --spectrum-help-text-top-to-workflow-icon-large: 8px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; - --spectrum-status-light-dot-size-medium: 10px; - --spectrum-status-light-dot-size-large: 12px; - --spectrum-status-light-dot-size-extra-large: 12px; - --spectrum-status-light-top-to-dot-small: 11px; - --spectrum-status-light-top-to-dot-medium: 15px; - --spectrum-status-light-top-to-dot-large: 19px; - --spectrum-status-light-top-to-dot-extra-large: 24px; - --spectrum-action-button-edge-to-hold-icon-medium: 5px; - --spectrum-action-button-edge-to-hold-icon-large: 6px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; - --spectrum-tooltip-tip-width: 10px; - --spectrum-tooltip-tip-height: 5px; - --spectrum-tooltip-maximum-width: 200px; - --spectrum-progress-circle-size-small: 20px; - --spectrum-progress-circle-size-medium: 40px; - --spectrum-progress-circle-size-large: 80px; - --spectrum-progress-circle-thickness-small: 3px; - --spectrum-progress-circle-thickness-medium: 4px; - --spectrum-progress-circle-thickness-large: 5px; - --spectrum-toast-height: 56px; - --spectrum-toast-maximum-width: 420px; - --spectrum-toast-top-to-workflow-icon: 17px; - --spectrum-toast-top-to-text: 16px; - --spectrum-toast-bottom-to-text: 19px; - --spectrum-action-bar-height: 56px; - --spectrum-action-bar-top-to-item-counter: 16px; - --spectrum-swatch-size-extra-small: 20px; - --spectrum-swatch-size-small: 30px; - --spectrum-swatch-size-medium: 40px; - --spectrum-swatch-size-large: 50px; - --spectrum-progress-bar-thickness-small: 5px; - --spectrum-progress-bar-thickness-medium: 8px; - --spectrum-progress-bar-thickness-large: 10px; - --spectrum-progress-bar-thickness-extra-large: 13px; - --spectrum-meter-width: 240px; - --spectrum-meter-thickness-small: 5px; - --spectrum-meter-thickness-large: 8px; - --spectrum-tag-top-to-avatar-small: 5px; - --spectrum-tag-top-to-avatar-medium: 7px; - --spectrum-tag-top-to-avatar-large: 11px; - --spectrum-tag-top-to-cross-icon-small: 10px; - --spectrum-tag-top-to-cross-icon-medium: 15px; - --spectrum-tag-top-to-cross-icon-large: 19px; - --spectrum-popover-top-to-content-area: 5px; - --spectrum-menu-item-edge-to-content-not-selected-small: 24px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; - --spectrum-menu-item-edge-to-content-not-selected-large: 47px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; - --spectrum-menu-item-top-to-disclosure-icon-small: 9px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; - --spectrum-menu-item-top-to-disclosure-icon-large: 17px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; - --spectrum-menu-item-top-to-selected-icon-small: 9px; - --spectrum-menu-item-top-to-selected-icon-medium: 13px; - --spectrum-menu-item-top-to-selected-icon-large: 17px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-slider-control-to-field-label-small: 6px; - --spectrum-slider-control-to-field-label-medium: 10px; - --spectrum-slider-control-to-field-label-large: 14px; - --spectrum-slider-control-to-field-label-extra-large: 17px; - --spectrum-picker-visual-to-disclosure-icon-small: 9px; - --spectrum-picker-visual-to-disclosure-icon-medium: 10px; - --spectrum-picker-visual-to-disclosure-icon-large: 11px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; - --spectrum-text-area-minimum-width: 140px; - --spectrum-text-area-minimum-height: 70px; - --spectrum-combo-box-visual-to-field-button-small: 9px; - --spectrum-combo-box-visual-to-field-button-medium: 10px; - --spectrum-combo-box-visual-to-field-button-large: 11px; - --spectrum-combo-box-visual-to-field-button-extra-large: 13px; - --spectrum-thumbnail-size-50: 20px; - --spectrum-thumbnail-size-75: 22px; - --spectrum-thumbnail-size-100: 26px; - --spectrum-thumbnail-size-200: 28px; - --spectrum-thumbnail-size-300: 32px; - --spectrum-thumbnail-size-400: 36px; - --spectrum-thumbnail-size-500: 40px; - --spectrum-thumbnail-size-600: 46px; - --spectrum-thumbnail-size-700: 50px; - --spectrum-thumbnail-size-800: 55px; - --spectrum-thumbnail-size-900: 62px; - --spectrum-thumbnail-size-1000: 70px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size: 10px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); - --spectrum-breadcrumbs-height-multiline: 84px; - --spectrum-breadcrumbs-top-to-text: 17px; - --spectrum-breadcrumbs-top-to-text-compact: 16px; - --spectrum-breadcrumbs-top-to-text-multiline: 15px; - --spectrum-breadcrumbs-bottom-to-text: 19px; - --spectrum-breadcrumbs-bottom-to-text-compact: 19px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; - --spectrum-breadcrumbs-start-edge-to-text: 9px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; - --spectrum-breadcrumbs-top-to-separator-icon: 25px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; - --spectrum-breadcrumbs-top-to-truncated-menu: 10px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; - --spectrum-avatar-size-50: 20px; - --spectrum-avatar-size-75: 22px; - --spectrum-avatar-size-100: 26px; - --spectrum-avatar-size-200: 28px; - --spectrum-avatar-size-300: 32px; - --spectrum-avatar-size-400: 36px; - --spectrum-avatar-size-500: 40px; - --spectrum-avatar-size-600: 46px; - --spectrum-avatar-size-700: 50px; - --spectrum-alert-banner-minimum-height: 64px; - --spectrum-alert-banner-width: 680px; - --spectrum-alert-banner-top-to-workflow-icon: 21px; - --spectrum-alert-banner-top-to-text: 21px; - --spectrum-alert-banner-bottom-to-text: 22px; - --spectrum-rating-indicator-width: 22px; - --spectrum-rating-indicator-to-icon: 5px; - --spectrum-color-area-width: 240px; - --spectrum-color-area-minimum-width: 80px; - --spectrum-color-area-height: 240px; - --spectrum-color-area-minimum-height: 80px; - --spectrum-color-wheel-width: 240px; - --spectrum-color-wheel-minimum-width: 219px; - --spectrum-color-slider-length: 240px; - --spectrum-color-slider-minimum-length: 100px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); - --spectrum-illustrated-message-cjk-title-size: var(--spectrum-heading-cjk-size-s); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-width: 216px; - --spectrum-coach-mark-minimum-width: 216px; - --spectrum-coach-mark-maximum-width: 248px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; - --spectrum-coach-mark-media-height: 162px; - --spectrum-coach-mark-media-minimum-height: 121px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); - --spectrum-accordion-top-to-text-regular-small: 7px; - --spectrum-accordion-small-top-to-text-spacious: 12px; - --spectrum-accordion-top-to-text-regular-medium: 9px; - --spectrum-accordion-top-to-text-spacious-medium: 14px; - --spectrum-accordion-top-to-text-compact-large: 7px; - --spectrum-accordion-top-to-text-regular-large: 12px; - --spectrum-accordion-top-to-text-spacious-large: 14px; - --spectrum-accordion-top-to-text-compact-extra-large: 7px; - --spectrum-accordion-top-to-text-regular-extra-large: 12px; - --spectrum-accordion-top-to-text-spacious-extra-large: 14px; - --spectrum-accordion-bottom-to-text-compact-small: 4px; - --spectrum-accordion-bottom-to-text-regular-small: 9px; - --spectrum-accordion-bottom-to-text-spacious-small: 14px; - --spectrum-accordion-bottom-to-text-compact-medium: 8px; - --spectrum-accordion-bottom-to-text-regular-medium: 13px; - --spectrum-accordion-bottom-to-text-spacious-medium: 18px; - --spectrum-accordion-bottom-to-text-compact-large: 9px; - --spectrum-accordion-bottom-to-text-regular-large: 14px; - --spectrum-accordion-bottom-to-text-spacious-large: 19px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; - --spectrum-accordion-minimum-width: 250px; - --spectrum-accordion-content-area-top-to-content: 10px; - --spectrum-accordion-content-area-bottom-to-content: 20px; - --spectrum-color-handle-size: 20px; - --spectrum-color-handle-size-key-focus: 40px; - --spectrum-table-column-header-row-top-to-text-small: 10px; - --spectrum-table-column-header-row-top-to-text-medium: 9px; - --spectrum-table-column-header-row-top-to-text-large: 13px; - --spectrum-table-column-header-row-top-to-text-extra-large: 16px; - --spectrum-table-column-header-row-bottom-to-text-small: 11px; - --spectrum-table-column-header-row-bottom-to-text-medium: 10px; - --spectrum-table-column-header-row-bottom-to-text-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; - --spectrum-table-row-height-small-regular: 40px; - --spectrum-table-row-height-medium-regular: 50px; - --spectrum-table-row-height-large-regular: 60px; - --spectrum-table-row-height-extra-large-regular: 70px; - --spectrum-table-row-height-small-spacious: 50px; - --spectrum-table-row-height-medium-spacious: 60px; - --spectrum-table-row-height-large-spacious: 70px; - --spectrum-table-row-height-extra-large-spacious: 80px; - --spectrum-table-row-top-to-text-small-regular: 10px; - --spectrum-table-row-top-to-text-medium-regular: 14px; - --spectrum-table-row-top-to-text-large-regular: 18px; - --spectrum-table-row-top-to-text-extra-large-regular: 21px; - --spectrum-table-row-bottom-to-text-small-regular: 11px; - --spectrum-table-row-bottom-to-text-medium-regular: 15px; - --spectrum-table-row-bottom-to-text-large-regular: 18px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; - --spectrum-table-row-top-to-text-small-spacious: 15px; - --spectrum-table-row-top-to-text-medium-spacious: 18px; - --spectrum-table-row-top-to-text-large-spacious: 23px; - --spectrum-table-row-top-to-text-extra-large-spacious: 26px; - --spectrum-table-row-bottom-to-text-small-spacious: 16px; - --spectrum-table-row-bottom-to-text-medium-spacious: 18px; - --spectrum-table-row-bottom-to-text-large-spacious: 23px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; - --spectrum-table-checkbox-to-text: 30px; - --spectrum-table-header-row-checkbox-to-top-small: 14px; - --spectrum-table-header-row-checkbox-to-top-medium: 13px; - --spectrum-table-header-row-checkbox-to-top-large: 17px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; - --spectrum-table-row-checkbox-to-top-small-compact: 9px; - --spectrum-table-row-checkbox-to-top-small-regular: 14px; - --spectrum-table-row-checkbox-to-top-small-spacious: 19px; - --spectrum-table-row-checkbox-to-top-medium-compact: 13px; - --spectrum-table-row-checkbox-to-top-medium-regular: 18px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; - --spectrum-table-row-checkbox-to-top-large-compact: 17px; - --spectrum-table-row-checkbox-to-top-large-regular: 22px; - --spectrum-table-row-checkbox-to-top-large-spacious: 27px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; - --spectrum-table-section-header-row-height-small: 30px; - --spectrum-table-section-header-row-height-medium: 40px; - --spectrum-table-section-header-row-height-large: 50px; - --spectrum-table-section-header-row-height-extra-large: 60px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; - --spectrum-tab-item-to-tab-item-horizontal-small: 27px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; - --spectrum-tab-item-to-tab-item-horizontal-large: 33px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; - --spectrum-tab-item-to-tab-item-vertical-small: 5px; - --spectrum-tab-item-to-tab-item-vertical-medium: 5px; - --spectrum-tab-item-to-tab-item-vertical-large: 6px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; - --spectrum-tab-item-start-to-edge-small: 13px; - --spectrum-tab-item-start-to-edge-medium: 15px; - --spectrum-tab-item-start-to-edge-large: 17px; - --spectrum-tab-item-start-to-edge-extra-large: 19px; - --spectrum-tab-item-top-to-text-small: 14px; - --spectrum-tab-item-bottom-to-text-small: 15px; - --spectrum-tab-item-top-to-text-medium: 18px; - --spectrum-tab-item-bottom-to-text-medium: 19px; - --spectrum-tab-item-top-to-text-large: 22px; - --spectrum-tab-item-bottom-to-text-large: 22px; - --spectrum-tab-item-top-to-text-extra-large: 25px; - --spectrum-tab-item-bottom-to-text-extra-large: 25px; - --spectrum-tab-item-top-to-text-compact-small: 5px; - --spectrum-tab-item-bottom-to-text-compact-small: 6px; - --spectrum-tab-item-top-to-text-compact-medium: 9px; - --spectrum-tab-item-bottom-to-text-compact-medium: 10px; - --spectrum-tab-item-top-to-text-compact-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-large: 14px; - --spectrum-tab-item-top-to-text-compact-extra-large: 15px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-small: 15px; - --spectrum-tab-item-top-to-workflow-icon-medium: 19px; - --spectrum-tab-item-top-to-workflow-icon-large: 23px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; - --spectrum-tab-item-focus-indicator-gap-small: 9px; - --spectrum-tab-item-focus-indicator-gap-medium: 10px; - --spectrum-tab-item-focus-indicator-gap-large: 11px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; - --spectrum-side-navigation-width: 240px; - --spectrum-side-navigation-minimum-width: 200px; - --spectrum-side-navigation-maximum-width: 300px; - --spectrum-side-navigation-second-level-edge-to-text: 30px; - --spectrum-side-navigation-third-level-edge-to-text: 45px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; - --spectrum-side-navigation-item-to-item: 5px; - --spectrum-side-navigation-item-to-header: 30px; - --spectrum-side-navigation-header-to-item: 10px; - --spectrum-side-navigation-bottom-to-text: 10px; - --spectrum-tray-top-to-content-area: 5px; - --spectrum-accordion-top-to-text-spacious-small: 12px; - --spectrum-corner-radius-100: 5px; - --spectrum-corner-radius-200: 10px; - --spectrum-drop-shadow-y: 2px; - --spectrum-drop-shadow-blur: 6px; - --spectrum-text-to-visual-50: 8px; - --spectrum-text-to-visual-75: 9px; - --spectrum-text-to-visual-100: 10px; - --spectrum-text-to-visual-200: 11px; - --spectrum-text-to-visual-300: 13px; - --spectrum-text-to-control-75: 11px; - --spectrum-text-to-control-100: 13px; - --spectrum-text-to-control-200: 14px; - --spectrum-text-to-control-300: 16px; - --spectrum-component-height-50: 26px; - --spectrum-component-height-75: 30px; - --spectrum-component-height-100: 40px; - --spectrum-component-height-200: 50px; - --spectrum-component-height-300: 60px; - --spectrum-component-height-400: 70px; - --spectrum-component-height-500: 80px; - --spectrum-component-pill-edge-to-visual-75: 13px; - --spectrum-component-pill-edge-to-visual-100: 17px; - --spectrum-component-pill-edge-to-visual-200: 22px; - --spectrum-component-pill-edge-to-visual-300: 27px; - --spectrum-component-pill-edge-to-visual-only-75: 5px; - --spectrum-component-pill-edge-to-visual-only-100: 9px; - --spectrum-component-pill-edge-to-visual-only-200: 13px; - --spectrum-component-pill-edge-to-visual-only-300: 16px; - --spectrum-component-pill-edge-to-text-75: 15px; - --spectrum-component-pill-edge-to-text-100: 20px; - --spectrum-component-pill-edge-to-text-200: 25px; - --spectrum-component-pill-edge-to-text-300: 30px; - --spectrum-component-edge-to-visual-50: 7px; - --spectrum-component-edge-to-visual-75: 9px; - --spectrum-component-edge-to-visual-100: 12px; - --spectrum-component-edge-to-visual-200: 16px; - --spectrum-component-edge-to-visual-300: 19px; - --spectrum-component-edge-to-visual-only-50: 4px; - --spectrum-component-edge-to-visual-only-75: 5px; - --spectrum-component-edge-to-visual-only-100: 9px; - --spectrum-component-edge-to-visual-only-200: 13px; - --spectrum-component-edge-to-visual-only-300: 16px; - --spectrum-component-edge-to-text-50: 10px; - --spectrum-component-edge-to-text-75: 11px; - --spectrum-component-edge-to-text-100: 15px; - --spectrum-component-edge-to-text-200: 19px; - --spectrum-component-edge-to-text-300: 22px; - --spectrum-component-top-to-workflow-icon-50: 4px; - --spectrum-component-top-to-workflow-icon-75: 5px; - --spectrum-component-top-to-workflow-icon-100: 9px; - --spectrum-component-top-to-workflow-icon-200: 13px; - --spectrum-component-top-to-workflow-icon-300: 16px; - --spectrum-component-top-to-text-50: 4px; - --spectrum-component-top-to-text-75: 5px; - --spectrum-component-top-to-text-100: 8px; - --spectrum-component-top-to-text-200: 12px; - --spectrum-component-top-to-text-300: 15px; - --spectrum-component-bottom-to-text-50: 6px; - --spectrum-component-bottom-to-text-75: 6px; - --spectrum-component-bottom-to-text-100: 11px; - --spectrum-component-bottom-to-text-200: 14px; - --spectrum-component-bottom-to-text-300: 18px; - --spectrum-component-to-menu-small: 7px; - --spectrum-component-to-menu-medium: 8px; - --spectrum-component-to-menu-large: 9px; - --spectrum-component-to-menu-extra-large: 10px; - --spectrum-field-edge-to-disclosure-icon-75: 9px; - --spectrum-field-edge-to-disclosure-icon-100: 13px; - --spectrum-field-edge-to-disclosure-icon-200: 17px; - --spectrum-field-edge-to-disclosure-icon-300: 22px; - --spectrum-field-end-edge-to-disclosure-icon-75: 9px; - --spectrum-field-end-edge-to-disclosure-icon-100: 13px; - --spectrum-field-end-edge-to-disclosure-icon-200: 17px; - --spectrum-field-end-edge-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-disclosure-icon-75: 9px; - --spectrum-field-top-to-disclosure-icon-100: 13px; - --spectrum-field-top-to-disclosure-icon-200: 17px; - --spectrum-field-top-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-alert-icon-small: 5px; - --spectrum-field-top-to-alert-icon-medium: 9px; - --spectrum-field-top-to-alert-icon-large: 13px; - --spectrum-field-top-to-alert-icon-extra-large: 16px; - --spectrum-field-top-to-validation-icon-small: 9px; - --spectrum-field-top-to-validation-icon-medium: 13px; - --spectrum-field-top-to-validation-icon-large: 17px; - --spectrum-field-top-to-validation-icon-extra-large: 22px; - --spectrum-field-top-to-progress-circle-small: 7px; - --spectrum-field-top-to-progress-circle-medium: 12px; - --spectrum-field-top-to-progress-circle-large: 17px; - --spectrum-field-top-to-progress-circle-extra-large: 22px; - --spectrum-field-edge-to-alert-icon-small: 11px; - --spectrum-field-edge-to-alert-icon-medium: 15px; - --spectrum-field-edge-to-alert-icon-large: 19px; - --spectrum-field-edge-to-alert-icon-extra-large: 22px; - --spectrum-field-edge-to-validation-icon-small: 11px; - --spectrum-field-edge-to-validation-icon-medium: 15px; - --spectrum-field-edge-to-validation-icon-large: 19px; - --spectrum-field-edge-to-validation-icon-extra-large: 22px; - --spectrum-field-text-to-alert-icon-small: 10px; - --spectrum-field-text-to-alert-icon-medium: 15px; - --spectrum-field-text-to-alert-icon-large: 19px; - --spectrum-field-text-to-alert-icon-extra-large: 22px; - --spectrum-field-text-to-validation-icon-small: 10px; - --spectrum-field-text-to-validation-icon-medium: 15px; - --spectrum-field-text-to-validation-icon-large: 19px; - --spectrum-field-text-to-validation-icon-extra-large: 22px; - --spectrum-field-width: 240px; - --spectrum-character-count-to-field-quiet-small: -4px; - --spectrum-character-count-to-field-quiet-medium: -4px; - --spectrum-character-count-to-field-quiet-large: -4px; - --spectrum-character-count-to-field-quiet-extra-large: -5px; - --spectrum-side-label-character-count-to-field: 15px; - --spectrum-side-label-character-count-top-margin-small: 5px; - --spectrum-side-label-character-count-top-margin-medium: 10px; - --spectrum-side-label-character-count-top-margin-large: 14px; - --spectrum-side-label-character-count-top-margin-extra-large: 18px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; - --spectrum-navigational-indicator-top-to-back-icon-small: 7px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; - --spectrum-navigational-indicator-top-to-back-icon-large: 16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; - --spectrum-color-control-track-width: 30px; - --spectrum-font-size-50: 13px; - --spectrum-font-size-75: 15px; - --spectrum-font-size-100: 17px; - --spectrum-font-size-200: 19px; - --spectrum-font-size-300: 22px; - --spectrum-font-size-400: 24px; - --spectrum-font-size-500: 27px; - --spectrum-font-size-600: 31px; - --spectrum-font-size-700: 34px; - --spectrum-font-size-800: 39px; - --spectrum-font-size-900: 44px; - --spectrum-font-size-1000: 49px; - --spectrum-font-size-1100: 55px; - --spectrum-font-size-1200: 62px; - --spectrum-font-size-1300: 70px; - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; - --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-well-padding: 20px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-border-radius: 5px; - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance: 5px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; -} diff --git a/tokens/dist/css/light-vars.css b/tokens/dist/css/light-vars.css deleted file mode 100644 index 6701a77fb38..00000000000 --- a/tokens/dist/css/light-vars.css +++ /dev/null @@ -1,442 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--light { - --spectrum-overlay-opacity: 0.4; - --spectrum-background-layer-2-color: var(--spectrum-gray-25); - --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-700); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-800); - --spectrum-accent-background-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-1000); - --spectrum-informative-background-color-default: var(--spectrum-informative-color-900); - --spectrum-informative-background-color-hover: var(--spectrum-informative-color-1000); - --spectrum-informative-background-color-down: var(--spectrum-informative-color-1000); - --spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-1000); - --spectrum-negative-background-color-default: var(--spectrum-negative-color-900); - --spectrum-negative-background-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-background-color-down: var(--spectrum-negative-color-1000); - --spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-1000); - --spectrum-positive-background-color-default: var(--spectrum-positive-color-900); - --spectrum-positive-background-color-hover: var(--spectrum-positive-color-1000); - --spectrum-positive-background-color-down: var(--spectrum-positive-color-1000); - --spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-1000); - --spectrum-notice-background-color-default: var(--spectrum-notice-color-600); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-900); - --spectrum-orange-background-color-default: var(--spectrum-orange-600); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); - --spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-500); - --spectrum-celery-background-color-default: var(--spectrum-celery-600); - --spectrum-green-background-color-default: var(--spectrum-green-900); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); - --spectrum-blue-background-color-default: var(--spectrum-blue-900); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); - --spectrum-purple-background-color-default: var(--spectrum-purple-900); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); - --spectrum-neutral-visual-color: var(--spectrum-gray-500); - --spectrum-accent-visual-color: var(--spectrum-accent-color-800); - --spectrum-informative-visual-color: var(--spectrum-informative-color-800); - --spectrum-negative-visual-color: var(--spectrum-negative-color-800); - --spectrum-notice-visual-color: var(--spectrum-notice-color-700); - --spectrum-positive-visual-color: var(--spectrum-positive-color-700); - --spectrum-gray-visual-color: var(--spectrum-gray-500); - --spectrum-red-visual-color: var(--spectrum-red-800); - --spectrum-orange-visual-color: var(--spectrum-orange-700); - --spectrum-yellow-visual-color: var(--spectrum-yellow-600); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); - --spectrum-celery-visual-color: var(--spectrum-celery-700); - --spectrum-green-visual-color: var(--spectrum-green-700); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); - --spectrum-cyan-visual-color: var(--spectrum-cyan-600); - --spectrum-blue-visual-color: var(--spectrum-blue-800); - --spectrum-indigo-visual-color: var(--spectrum-indigo-800); - --spectrum-purple-visual-color: var(--spectrum-purple-800); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); - --spectrum-magenta-visual-color: var(--spectrum-magenta-800); - --spectrum-background-elevated-color: var(--spectrum-gray-25); - --spectrum-background-pasteboard-color: var(--spectrum-gray-100); - --spectrum-brown-visual-color: var(--spectrum-brown-800); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800); - --spectrum-pink-visual-color: var(--spectrum-pink-800); - --spectrum-silver-visual-color: var(--spectrum-silver-800); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-800); - --spectrum-brown-background-color-default: var(--spectrum-brown-900); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900); - --spectrum-pink-background-color-default: var(--spectrum-pink-900); - --spectrum-silver-background-color-default: var(--spectrum-silver-900); - --spectrum-turquoise-background-color-default: var(--spectrum-turquoise-900); - --spectrum-drop-shadow-color-100: rgba(0, 0, 0, 0.12); - --spectrum-drop-shadow-color-200: rgba(0, 0, 0, 0.16); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); - --spectrum-gray-25: rgb(255, 255, 255); - --spectrum-gray-50: rgb(248, 248, 248); - --spectrum-gray-75: rgb(243, 243, 243); - --spectrum-gray-100: rgb(233, 233, 233); - --spectrum-gray-200: rgb(225, 225, 225); - --spectrum-gray-300: rgb(218, 218, 218); - --spectrum-gray-400: rgb(198, 198, 198); - --spectrum-gray-500: rgb(143, 143, 143); - --spectrum-gray-600: rgb(113, 113, 113); - --spectrum-gray-700: rgb(80, 80, 80); - --spectrum-gray-800: rgb(41, 41, 41); - --spectrum-gray-900: rgb(19, 19, 19); - --spectrum-gray-1000: rgb(0, 0, 0); - --spectrum-blue-100: rgb(245, 249, 255); - --spectrum-blue-200: rgb(229, 240, 254); - --spectrum-blue-300: rgb(203, 226, 254); - --spectrum-blue-400: rgb(172, 207, 253); - --spectrum-blue-500: rgb(142, 185, 252); - --spectrum-blue-600: rgb(114, 158, 253); - --spectrum-blue-700: rgb(93, 137, 255); - --spectrum-blue-800: rgb(75, 117, 255); - --spectrum-blue-900: rgb(59, 99, 251); - --spectrum-blue-1000: rgb(39, 77, 234); - --spectrum-blue-1100: rgb(29, 62, 207); - --spectrum-blue-1200: rgb(21, 50, 173); - --spectrum-blue-1300: rgb(16, 40, 140); - --spectrum-blue-1400: rgb(12, 31, 105); - --spectrum-blue-1500: rgb(14, 24, 67); - --spectrum-blue-1600: rgb(7, 11, 30); - --spectrum-red-100: rgb(255, 246, 245); - --spectrum-red-200: rgb(255, 235, 232); - --spectrum-red-300: rgb(255, 214, 209); - --spectrum-red-400: rgb(255, 188, 180); - --spectrum-red-500: rgb(255, 157, 145); - --spectrum-red-600: rgb(255, 118, 101); - --spectrum-red-700: rgb(255, 81, 61); - --spectrum-red-800: rgb(240, 56, 35); - --spectrum-red-900: rgb(215, 50, 32); - --spectrum-red-1000: rgb(183, 40, 24); - --spectrum-red-1100: rgb(156, 33, 19); - --spectrum-red-1200: rgb(129, 27, 14); - --spectrum-red-1300: rgb(104, 21, 10); - --spectrum-red-1400: rgb(80, 16, 6); - --spectrum-red-1500: rgb(59, 11, 4); - --spectrum-red-1600: rgb(29, 5, 2); - --spectrum-orange-100: rgb(255, 246, 231); - --spectrum-orange-200: rgb(255, 236, 207); - --spectrum-orange-300: rgb(255, 218, 158); - --spectrum-orange-400: rgb(255, 193, 94); - --spectrum-orange-500: rgb(255, 162, 19); - --spectrum-orange-600: rgb(252, 125, 0); - --spectrum-orange-700: rgb(232, 106, 0); - --spectrum-orange-800: rgb(212, 91, 0); - --spectrum-orange-900: rgb(194, 78, 0); - --spectrum-orange-1000: rgb(167, 62, 0); - --spectrum-orange-1100: rgb(144, 51, 0); - --spectrum-orange-1200: rgb(118, 41, 0); - --spectrum-orange-1300: rgb(95, 32, 0); - --spectrum-orange-1400: rgb(73, 24, 0); - --spectrum-orange-1500: rgb(52, 18, 0); - --spectrum-orange-1600: rgb(25, 8, 0); - --spectrum-yellow-100: rgb(255, 248, 204); - --spectrum-yellow-200: rgb(255, 241, 151); - --spectrum-yellow-300: rgb(255, 222, 44); - --spectrum-yellow-400: rgb(245, 199, 0); - --spectrum-yellow-500: rgb(230, 175, 0); - --spectrum-yellow-600: rgb(210, 149, 0); - --spectrum-yellow-700: rgb(193, 131, 0); - --spectrum-yellow-800: rgb(175, 116, 0); - --spectrum-yellow-900: rgb(158, 102, 0); - --spectrum-yellow-1000: rgb(134, 85, 0); - --spectrum-yellow-1100: rgb(114, 72, 0); - --spectrum-yellow-1200: rgb(93, 59, 0); - --spectrum-yellow-1300: rgb(75, 47, 0); - --spectrum-yellow-1400: rgb(56, 35, 0); - --spectrum-yellow-1500: rgb(40, 25, 0); - --spectrum-yellow-1600: rgb(18, 11, 0); - --spectrum-chartreuse-100: rgb(246, 251, 222); - --spectrum-chartreuse-200: rgb(234, 246, 173); - --spectrum-chartreuse-300: rgb(208, 236, 70); - --spectrum-chartreuse-400: rgb(182, 219, 0); - --spectrum-chartreuse-500: rgb(163, 196, 0); - --spectrum-chartreuse-600: rgb(143, 172, 0); - --spectrum-chartreuse-700: rgb(128, 153, 0); - --spectrum-chartreuse-800: rgb(114, 137, 0); - --spectrum-chartreuse-900: rgb(102, 122, 0); - --spectrum-chartreuse-1000: rgb(86, 103, 0); - --spectrum-chartreuse-1100: rgb(73, 87, 0); - --spectrum-chartreuse-1200: rgb(60, 71, 0); - --spectrum-chartreuse-1300: rgb(47, 57, 0); - --spectrum-chartreuse-1400: rgb(35, 43, 0); - --spectrum-chartreuse-1500: rgb(25, 30, 0); - --spectrum-chartreuse-1600: rgb(11, 14, 0); - --spectrum-celery-100: rgb(235, 255, 220); - --spectrum-celery-200: rgb(197, 255, 156); - --spectrum-celery-300: rgb(157, 247, 92); - --spectrum-celery-400: rgb(129, 228, 58); - --spectrum-celery-500: rgb(110, 206, 42); - --spectrum-celery-600: rgb(93, 180, 31); - --spectrum-celery-700: rgb(82, 161, 25); - --spectrum-celery-800: rgb(72, 144, 20); - --spectrum-celery-900: rgb(64, 129, 17); - --spectrum-celery-1000: rgb(52, 109, 12); - --spectrum-celery-1100: rgb(44, 92, 9); - --spectrum-celery-1200: rgb(35, 75, 6); - --spectrum-celery-1300: rgb(27, 60, 3); - --spectrum-celery-1400: rgb(19, 46, 0); - --spectrum-celery-1500: rgb(12, 33, 0); - --spectrum-celery-1600: rgb(4, 15, 0); - --spectrum-green-100: rgb(237, 252, 241); - --spectrum-green-200: rgb(215, 247, 225); - --spectrum-green-300: rgb(173, 238, 197); - --spectrum-green-400: rgb(107, 227, 162); - --spectrum-green-500: rgb(43, 209, 125); - --spectrum-green-600: rgb(18, 184, 103); - --spectrum-green-700: rgb(11, 164, 93); - --spectrum-green-800: rgb(7, 147, 85); - --spectrum-green-900: rgb(5, 131, 78); - --spectrum-green-1000: rgb(3, 110, 69); - --spectrum-green-1100: rgb(2, 93, 60); - --spectrum-green-1200: rgb(1, 76, 52); - --spectrum-green-1300: rgb(0, 61, 44); - --spectrum-green-1400: rgb(0, 46, 34); - --spectrum-green-1500: rgb(0, 33, 25); - --spectrum-green-1600: rgb(0, 15, 12); - --spectrum-seafoam-100: rgb(235, 251, 246); - --spectrum-seafoam-200: rgb(211, 246, 234); - --spectrum-seafoam-300: rgb(169, 237, 216); - --spectrum-seafoam-400: rgb(92, 225, 194); - --spectrum-seafoam-500: rgb(16, 207, 169); - --spectrum-seafoam-600: rgb(13, 181, 149); - --spectrum-seafoam-700: rgb(11, 162, 134); - --spectrum-seafoam-800: rgb(9, 144, 120); - --spectrum-seafoam-900: rgb(7, 129, 109); - --spectrum-seafoam-1000: rgb(5, 108, 92); - --spectrum-seafoam-1100: rgb(3, 92, 80); - --spectrum-seafoam-1200: rgb(1, 75, 67); - --spectrum-seafoam-1300: rgb(0, 60, 54); - --spectrum-seafoam-1400: rgb(0, 46, 40); - --spectrum-seafoam-1500: rgb(0, 33, 29); - --spectrum-seafoam-1600: rgb(0, 15, 14); - --spectrum-cyan-100: rgb(238, 250, 254); - --spectrum-cyan-200: rgb(217, 244, 253); - --spectrum-cyan-300: rgb(183, 231, 252); - --spectrum-cyan-400: rgb(138, 213, 255); - --spectrum-cyan-500: rgb(92, 192, 255); - --spectrum-cyan-600: rgb(48, 167, 254); - --spectrum-cyan-700: rgb(29, 149, 231); - --spectrum-cyan-800: rgb(18, 134, 205); - --spectrum-cyan-900: rgb(11, 120, 179); - --spectrum-cyan-1000: rgb(4, 102, 145); - --spectrum-cyan-1100: rgb(0, 87, 121); - --spectrum-cyan-1200: rgb(0, 71, 98); - --spectrum-cyan-1300: rgb(0, 57, 78); - --spectrum-cyan-1400: rgb(0, 43, 59); - --spectrum-cyan-1500: rgb(0, 31, 43); - --spectrum-cyan-1600: rgb(0, 14, 20); - --spectrum-indigo-100: rgb(247, 248, 255); - --spectrum-indigo-200: rgb(235, 238, 255); - --spectrum-indigo-300: rgb(216, 222, 255); - --spectrum-indigo-400: rgb(192, 201, 255); - --spectrum-indigo-500: rgb(167, 178, 255); - --spectrum-indigo-600: rgb(145, 151, 254); - --spectrum-indigo-700: rgb(132, 128, 254); - --spectrum-indigo-800: rgb(122, 106, 253); - --spectrum-indigo-900: rgb(113, 85, 250); - --spectrum-indigo-1000: rgb(99, 56, 238); - --spectrum-indigo-1100: rgb(84, 36, 219); - --spectrum-indigo-1200: rgb(69, 19, 191); - --spectrum-indigo-1300: rgb(55, 6, 160); - --spectrum-indigo-1400: rgb(42, 0, 129); - --spectrum-indigo-1500: rgb(31, 0, 98); - --spectrum-indigo-1600: rgb(17, 0, 54); - --spectrum-purple-100: rgb(251, 247, 254); - --spectrum-purple-200: rgb(244, 235, 252); - --spectrum-purple-300: rgb(235, 218, 249); - --spectrum-purple-400: rgb(221, 193, 246); - --spectrum-purple-500: rgb(208, 167, 243); - --spectrum-purple-600: rgb(191, 138, 238); - --spectrum-purple-700: rgb(178, 114, 235); - --spectrum-purple-800: rgb(166, 92, 231); - --spectrum-purple-900: rgb(154, 71, 226); - --spectrum-purple-1000: rgb(134, 40, 217); - --spectrum-purple-1100: rgb(115, 13, 204); - --spectrum-purple-1200: rgb(93, 0, 177); - --spectrum-purple-1300: rgb(75, 0, 144); - --spectrum-purple-1400: rgb(59, 0, 111); - --spectrum-purple-1500: rgb(44, 0, 84); - --spectrum-purple-1600: rgb(23, 0, 45); - --spectrum-fuchsia-100: rgb(254, 246, 255); - --spectrum-fuchsia-200: rgb(253, 233, 255); - --spectrum-fuchsia-300: rgb(250, 211, 255); - --spectrum-fuchsia-400: rgb(247, 181, 255); - --spectrum-fuchsia-500: rgb(243, 147, 255); - --spectrum-fuchsia-600: rgb(236, 105, 255); - --spectrum-fuchsia-700: rgb(223, 77, 245); - --spectrum-fuchsia-800: rgb(200, 68, 220); - --spectrum-fuchsia-900: rgb(181, 57, 200); - --spectrum-fuchsia-1000: rgb(156, 40, 175); - --spectrum-fuchsia-1100: rgb(135, 27, 154); - --spectrum-fuchsia-1200: rgb(113, 15, 131); - --spectrum-fuchsia-1300: rgb(92, 4, 109); - --spectrum-fuchsia-1400: rgb(72, 0, 88); - --spectrum-fuchsia-1500: rgb(54, 0, 66); - --spectrum-fuchsia-1600: rgb(29, 0, 35); - --spectrum-magenta-100: rgb(255, 245, 248); - --spectrum-magenta-200: rgb(255, 232, 240); - --spectrum-magenta-300: rgb(255, 213, 227); - --spectrum-magenta-400: rgb(255, 185, 208); - --spectrum-magenta-500: rgb(255, 152, 187); - --spectrum-magenta-600: rgb(255, 112, 159); - --spectrum-magenta-700: rgb(255, 72, 133); - --spectrum-magenta-800: rgb(240, 45, 110); - --spectrum-magenta-900: rgb(217, 35, 97); - --spectrum-magenta-1000: rgb(186, 22, 80); - --spectrum-magenta-1100: rgb(163, 5, 62); - --spectrum-magenta-1200: rgb(136, 0, 51); - --spectrum-magenta-1300: rgb(111, 0, 40); - --spectrum-magenta-1400: rgb(86, 0, 30); - --spectrum-magenta-1500: rgb(64, 0, 22); - --spectrum-magenta-1600: rgb(35, 0, 12); - --spectrum-pink-100: rgb(255, 246, 252); - --spectrum-pink-200: rgb(255, 232, 247); - --spectrum-pink-300: rgb(255, 211, 240); - --spectrum-pink-400: rgb(255, 181, 230); - --spectrum-pink-500: rgb(255, 148, 219); - --spectrum-pink-600: rgb(255, 103, 204); - --spectrum-pink-700: rgb(242, 76, 184); - --spectrum-pink-800: rgb(228, 52, 163); - --spectrum-pink-900: rgb(206, 42, 146); - --spectrum-pink-1000: rgb(176, 31, 123); - --spectrum-pink-1100: rgb(152, 22, 104); - --spectrum-pink-1200: rgb(128, 12, 85); - --spectrum-pink-1300: rgb(105, 3, 68); - --spectrum-pink-1400: rgb(83, 0, 53); - --spectrum-pink-1500: rgb(62, 0, 39); - --spectrum-pink-1600: rgb(33, 0, 21); - --spectrum-turquoise-100: rgb(238, 251, 251); - --spectrum-turquoise-200: rgb(209, 245, 245); - --spectrum-turquoise-300: rgb(169, 236, 237); - --spectrum-turquoise-400: rgb(111, 221, 228); - --spectrum-turquoise-500: rgb(39, 202, 216); - --spectrum-turquoise-600: rgb(15, 177, 192); - --spectrum-turquoise-700: rgb(12, 158, 171); - --spectrum-turquoise-800: rgb(10, 141, 153); - --spectrum-turquoise-900: rgb(8, 126, 137); - --spectrum-turquoise-1000: rgb(5, 107, 116); - --spectrum-turquoise-1100: rgb(3, 90, 98); - --spectrum-turquoise-1200: rgb(1, 74, 81); - --spectrum-turquoise-1300: rgb(0, 59, 65); - --spectrum-turquoise-1400: rgb(0, 44, 49); - --spectrum-turquoise-1500: rgb(0, 32, 35); - --spectrum-turquoise-1600: rgb(0, 15, 17); - --spectrum-brown-100: rgb(252, 247, 242); - --spectrum-brown-200: rgb(247, 238, 225); - --spectrum-brown-300: rgb(239, 221, 195); - --spectrum-brown-400: rgb(229, 200, 157); - --spectrum-brown-500: rgb(214, 177, 123); - --spectrum-brown-600: rgb(190, 155, 104); - --spectrum-brown-700: rgb(171, 138, 90); - --spectrum-brown-800: rgb(154, 123, 77); - --spectrum-brown-900: rgb(139, 109, 66); - --spectrum-brown-1000: rgb(119, 91, 50); - --spectrum-brown-1100: rgb(103, 76, 35); - --spectrum-brown-1200: rgb(88, 61, 21); - --spectrum-brown-1300: rgb(70, 49, 17); - --spectrum-brown-1400: rgb(52, 37, 13); - --spectrum-brown-1500: rgb(38, 26, 9); - --spectrum-brown-1600: rgb(16, 12, 4); - --spectrum-silver-100: rgb(247, 247, 247); - --spectrum-silver-200: rgb(239, 239, 239); - --spectrum-silver-300: rgb(223, 223, 223); - --spectrum-silver-400: rgb(204, 204, 204); - --spectrum-silver-500: rgb(183, 183, 183); - --spectrum-silver-600: rgb(160, 160, 160); - --spectrum-silver-700: rgb(143, 143, 143); - --spectrum-silver-800: rgb(128, 128, 128); - --spectrum-silver-900: rgb(114, 114, 114); - --spectrum-silver-1000: rgb(96, 96, 96); - --spectrum-silver-1100: rgb(81, 81, 81); - --spectrum-silver-1200: rgb(66, 66, 66); - --spectrum-silver-1300: rgb(52, 52, 52); - --spectrum-silver-1400: rgb(39, 39, 39); - --spectrum-silver-1500: rgb(28, 28, 28); - --spectrum-silver-1600: rgb(12, 12, 12); - --spectrum-cinnamon-100: rgb(253, 247, 243); - --spectrum-cinnamon-200: rgb(249, 236, 229); - --spectrum-cinnamon-300: rgb(244, 218, 203); - --spectrum-cinnamon-400: rgb(237, 196, 172); - --spectrum-cinnamon-500: rgb(229, 170, 136); - --spectrum-cinnamon-600: rgb(212, 145, 108); - --spectrum-cinnamon-700: rgb(198, 126, 88); - --spectrum-cinnamon-800: rgb(184, 109, 70); - --spectrum-cinnamon-900: rgb(170, 94, 56); - --spectrum-cinnamon-1000: rgb(147, 77, 43); - --spectrum-cinnamon-1100: rgb(128, 62, 32); - --spectrum-cinnamon-1200: rgb(110, 48, 21); - --spectrum-cinnamon-1300: rgb(92, 35, 11); - --spectrum-cinnamon-1400: rgb(72, 25, 6); - --spectrum-cinnamon-1500: rgb(52, 18, 4); - --spectrum-cinnamon-1600: rgb(24, 8, 2); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); - --spectrum-menu-item-background-color-default: rgba(0, 0, 0, 0); - --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-black-200); - --spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-800); - - --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); - --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06); - --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25); - - --spectrum-well-border-color: var(--spectrum-black-rgb); - - --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); - - --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06); - --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - - --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-swatch-border-color: rgba(0, 0, 0, 0.51); -} diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css deleted file mode 100644 index caee1e7cf67..00000000000 --- a/tokens/dist/css/medium-vars.css +++ /dev/null @@ -1,655 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--medium { - --spectrum-workflow-icon-size-50: 14px; - --spectrum-workflow-icon-size-75: 16px; - --spectrum-workflow-icon-size-100: 18px; - --spectrum-workflow-icon-size-200: 20px; - --spectrum-workflow-icon-size-300: 22px; - --spectrum-arrow-icon-size-75: 10px; - --spectrum-arrow-icon-size-100: 10px; - --spectrum-arrow-icon-size-200: 12px; - --spectrum-arrow-icon-size-300: 14px; - --spectrum-arrow-icon-size-400: 16px; - --spectrum-arrow-icon-size-500: 18px; - --spectrum-arrow-icon-size-600: 20px; - --spectrum-asterisk-icon-size-100: 8px; - --spectrum-asterisk-icon-size-200: 10px; - --spectrum-asterisk-icon-size-300: 10px; - --spectrum-checkmark-icon-size-50: 10px; - --spectrum-checkmark-icon-size-75: 10px; - --spectrum-checkmark-icon-size-100: 10px; - --spectrum-checkmark-icon-size-200: 12px; - --spectrum-checkmark-icon-size-300: 14px; - --spectrum-checkmark-icon-size-400: 16px; - --spectrum-checkmark-icon-size-500: 16px; - --spectrum-checkmark-icon-size-600: 18px; - --spectrum-chevron-icon-size-50: 6px; - --spectrum-chevron-icon-size-75: 10px; - --spectrum-chevron-icon-size-100: 10px; - --spectrum-chevron-icon-size-200: 12px; - --spectrum-chevron-icon-size-300: 14px; - --spectrum-chevron-icon-size-400: 16px; - --spectrum-chevron-icon-size-500: 16px; - --spectrum-chevron-icon-size-600: 18px; - --spectrum-corner-triangle-icon-size-75: 5px; - --spectrum-corner-triangle-icon-size-100: 5px; - --spectrum-corner-triangle-icon-size-200: 6px; - --spectrum-corner-triangle-icon-size-300: 7px; - --spectrum-cross-icon-size-75: 8px; - --spectrum-cross-icon-size-100: 8px; - --spectrum-cross-icon-size-200: 10px; - --spectrum-cross-icon-size-300: 12px; - --spectrum-cross-icon-size-400: 12px; - --spectrum-cross-icon-size-500: 14px; - --spectrum-cross-icon-size-600: 16px; - --spectrum-dash-icon-size-50: 8px; - --spectrum-dash-icon-size-75: 8px; - --spectrum-dash-icon-size-100: 10px; - --spectrum-dash-icon-size-200: 12px; - --spectrum-dash-icon-size-300: 12px; - --spectrum-dash-icon-size-400: 14px; - --spectrum-dash-icon-size-500: 16px; - --spectrum-dash-icon-size-600: 18px; - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 23px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 29px; - --spectrum-switch-control-width-extra-large: 33px; - --spectrum-switch-control-height-small: 12px; - --spectrum-switch-control-height-medium: 14px; - --spectrum-switch-control-height-large: 16px; - --spectrum-switch-control-height-extra-large: 18px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; - --spectrum-field-label-text-to-asterisk-small: 4px; - --spectrum-field-label-text-to-asterisk-medium: 4px; - --spectrum-field-label-text-to-asterisk-large: 5px; - --spectrum-field-label-text-to-asterisk-extra-large: 5px; - --spectrum-field-label-top-to-asterisk-small: 8px; - --spectrum-field-label-top-to-asterisk-medium: 12px; - --spectrum-field-label-top-to-asterisk-large: 15px; - --spectrum-field-label-top-to-asterisk-extra-large: 19px; - --spectrum-field-label-top-margin-medium: 4px; - --spectrum-field-label-top-margin-large: 5px; - --spectrum-field-label-top-margin-extra-large: 5px; - --spectrum-field-label-to-component-quiet-small: -8px; - --spectrum-field-label-to-component-quiet-medium: -8px; - --spectrum-field-label-to-component-quiet-large: -12px; - --spectrum-field-label-to-component-quiet-extra-large: -15px; - --spectrum-help-text-top-to-workflow-icon-small: 4px; - --spectrum-help-text-top-to-workflow-icon-medium: 3px; - --spectrum-help-text-top-to-workflow-icon-large: 6px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; - --spectrum-status-light-dot-size-medium: 8px; - --spectrum-status-light-dot-size-large: 10px; - --spectrum-status-light-dot-size-extra-large: 10px; - --spectrum-status-light-top-to-dot-small: 8px; - --spectrum-status-light-top-to-dot-medium: 12px; - --spectrum-status-light-top-to-dot-large: 15px; - --spectrum-status-light-top-to-dot-extra-large: 19px; - --spectrum-action-button-edge-to-hold-icon-medium: 4px; - --spectrum-action-button-edge-to-hold-icon-large: 5px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; - --spectrum-tooltip-tip-width: 8px; - --spectrum-tooltip-tip-height: 4px; - --spectrum-tooltip-maximum-width: 160px; - --spectrum-progress-circle-size-small: 16px; - --spectrum-progress-circle-size-medium: 32px; - --spectrum-progress-circle-size-large: 64px; - --spectrum-progress-circle-thickness-small: 2px; - --spectrum-progress-circle-thickness-medium: 3px; - --spectrum-progress-circle-thickness-large: 4px; - --spectrum-toast-height: 48px; - --spectrum-toast-maximum-width: 336px; - --spectrum-toast-top-to-workflow-icon: 15px; - --spectrum-toast-top-to-text: 14px; - --spectrum-toast-bottom-to-text: 17px; - --spectrum-action-bar-height: 48px; - --spectrum-action-bar-top-to-item-counter: 14px; - --spectrum-swatch-size-extra-small: 16px; - --spectrum-swatch-size-small: 24px; - --spectrum-swatch-size-medium: 32px; - --spectrum-swatch-size-large: 40px; - --spectrum-progress-bar-thickness-small: 4px; - --spectrum-progress-bar-thickness-medium: 6px; - --spectrum-progress-bar-thickness-large: 8px; - --spectrum-progress-bar-thickness-extra-large: 10px; - --spectrum-meter-width: 192px; - --spectrum-meter-thickness-small: 4px; - --spectrum-meter-thickness-large: 6px; - --spectrum-tag-top-to-avatar-small: 4px; - --spectrum-tag-top-to-avatar-medium: 6px; - --spectrum-tag-top-to-avatar-large: 9px; - --spectrum-tag-top-to-cross-icon-small: 8px; - --spectrum-tag-top-to-cross-icon-medium: 12px; - --spectrum-tag-top-to-cross-icon-large: 15px; - --spectrum-popover-top-to-content-area: 4px; - --spectrum-menu-item-edge-to-content-not-selected-small: 28px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; - --spectrum-menu-item-edge-to-content-not-selected-large: 38px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; - --spectrum-menu-item-top-to-disclosure-icon-small: 7px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; - --spectrum-menu-item-top-to-disclosure-icon-large: 14px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; - --spectrum-menu-item-top-to-selected-icon-small: 7px; - --spectrum-menu-item-top-to-selected-icon-medium: 11px; - --spectrum-menu-item-top-to-selected-icon-large: 14px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-slider-control-to-field-label-small: 5px; - --spectrum-slider-control-to-field-label-medium: 8px; - --spectrum-slider-control-to-field-label-large: 11px; - --spectrum-slider-control-to-field-label-extra-large: 14px; - --spectrum-picker-visual-to-disclosure-icon-small: 7px; - --spectrum-picker-visual-to-disclosure-icon-medium: 8px; - --spectrum-picker-visual-to-disclosure-icon-large: 9px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; - --spectrum-text-area-minimum-width: 112px; - --spectrum-text-area-minimum-height: 56px; - --spectrum-combo-box-visual-to-field-button-small: 7px; - --spectrum-combo-box-visual-to-field-button-medium: 8px; - --spectrum-combo-box-visual-to-field-button-large: 9px; - --spectrum-combo-box-visual-to-field-button-extra-large: 10px; - --spectrum-thumbnail-size-50: 16px; - --spectrum-thumbnail-size-75: 18px; - --spectrum-thumbnail-size-100: 20px; - --spectrum-thumbnail-size-200: 22px; - --spectrum-thumbnail-size-300: 26px; - --spectrum-thumbnail-size-400: 28px; - --spectrum-thumbnail-size-500: 32px; - --spectrum-thumbnail-size-600: 36px; - --spectrum-thumbnail-size-700: 40px; - --spectrum-thumbnail-size-800: 44px; - --spectrum-thumbnail-size-900: 50px; - --spectrum-thumbnail-size-1000: 56px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size: 8px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); - --spectrum-breadcrumbs-height-multiline: 72px; - --spectrum-breadcrumbs-top-to-text: 13px; - --spectrum-breadcrumbs-top-to-text-compact: 11px; - --spectrum-breadcrumbs-top-to-text-multiline: 12px; - --spectrum-breadcrumbs-bottom-to-text: 15px; - --spectrum-breadcrumbs-bottom-to-text-compact: 12px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; - --spectrum-breadcrumbs-start-edge-to-text: 8px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; - --spectrum-breadcrumbs-top-to-separator-icon: 19px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; - --spectrum-breadcrumbs-top-to-truncated-menu: 8px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; - --spectrum-avatar-size-50: 16px; - --spectrum-avatar-size-75: 18px; - --spectrum-avatar-size-100: 20px; - --spectrum-avatar-size-200: 22px; - --spectrum-avatar-size-300: 26px; - --spectrum-avatar-size-400: 28px; - --spectrum-avatar-size-500: 32px; - --spectrum-avatar-size-600: 36px; - --spectrum-avatar-size-700: 40px; - --spectrum-alert-banner-minimum-height: 48px; - --spectrum-alert-banner-width: 832px; - --spectrum-alert-banner-top-to-workflow-icon: 15px; - --spectrum-alert-banner-top-to-text: 14px; - --spectrum-alert-banner-bottom-to-text: 17px; - --spectrum-rating-indicator-width: 18px; - --spectrum-rating-indicator-to-icon: 4px; - --spectrum-color-area-width: 192px; - --spectrum-color-area-minimum-width: 64px; - --spectrum-color-area-height: 192px; - --spectrum-color-area-minimum-height: 64px; - --spectrum-color-wheel-width: 192px; - --spectrum-color-wheel-minimum-width: 175px; - --spectrum-color-slider-length: 192px; - --spectrum-color-slider-minimum-length: 80px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); - --spectrum-illustrated-message-cjk-title-size: var(--spectrum-heading-cjk-size-m); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-width: 296px; - --spectrum-coach-mark-minimum-width: 296px; - --spectrum-coach-mark-maximum-width: 380px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; - --spectrum-coach-mark-media-height: 222px; - --spectrum-coach-mark-media-minimum-height: 166px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); - --spectrum-accordion-top-to-text-regular-small: 5px; - --spectrum-accordion-small-top-to-text-spacious: 9px; - --spectrum-accordion-top-to-text-regular-medium: 8px; - --spectrum-accordion-top-to-text-spacious-medium: 12px; - --spectrum-accordion-top-to-text-compact-large: 4px; - --spectrum-accordion-top-to-text-regular-large: 9px; - --spectrum-accordion-top-to-text-spacious-large: 12px; - --spectrum-accordion-top-to-text-compact-extra-large: 5px; - --spectrum-accordion-top-to-text-regular-extra-large: 9px; - --spectrum-accordion-top-to-text-spacious-extra-large: 13px; - --spectrum-accordion-bottom-to-text-compact-small: 2px; - --spectrum-accordion-bottom-to-text-regular-small: 7px; - --spectrum-accordion-bottom-to-text-spacious-small: 11px; - --spectrum-accordion-bottom-to-text-compact-medium: 5px; - --spectrum-accordion-bottom-to-text-regular-medium: 9px; - --spectrum-accordion-bottom-to-text-spacious-medium: 13px; - --spectrum-accordion-bottom-to-text-compact-large: 8px; - --spectrum-accordion-bottom-to-text-regular-large: 11px; - --spectrum-accordion-bottom-to-text-spacious-large: 16px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; - --spectrum-accordion-minimum-width: 200px; - --spectrum-accordion-content-area-top-to-content: 8px; - --spectrum-accordion-content-area-bottom-to-content: 16px; - --spectrum-color-handle-size: 16px; - --spectrum-color-handle-size-key-focus: 32px; - --spectrum-table-column-header-row-top-to-text-small: 8px; - --spectrum-table-column-header-row-top-to-text-medium: 7px; - --spectrum-table-column-header-row-top-to-text-large: 10px; - --spectrum-table-column-header-row-top-to-text-extra-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-small: 9px; - --spectrum-table-column-header-row-bottom-to-text-medium: 8px; - --spectrum-table-column-header-row-bottom-to-text-large: 10px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; - --spectrum-table-row-height-small-regular: 32px; - --spectrum-table-row-height-medium-regular: 40px; - --spectrum-table-row-height-large-regular: 48px; - --spectrum-table-row-height-extra-large-regular: 56px; - --spectrum-table-row-height-small-spacious: 40px; - --spectrum-table-row-height-medium-spacious: 48px; - --spectrum-table-row-height-large-spacious: 56px; - --spectrum-table-row-height-extra-large-spacious: 64px; - --spectrum-table-row-top-to-text-small-regular: 8px; - --spectrum-table-row-top-to-text-medium-regular: 11px; - --spectrum-table-row-top-to-text-large-regular: 14px; - --spectrum-table-row-top-to-text-extra-large-regular: 17px; - --spectrum-table-row-bottom-to-text-small-regular: 9px; - --spectrum-table-row-bottom-to-text-medium-regular: 12px; - --spectrum-table-row-bottom-to-text-large-regular: 14px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; - --spectrum-table-row-top-to-text-small-spacious: 12px; - --spectrum-table-row-top-to-text-medium-spacious: 15px; - --spectrum-table-row-top-to-text-large-spacious: 18px; - --spectrum-table-row-top-to-text-extra-large-spacious: 21px; - --spectrum-table-row-bottom-to-text-small-spacious: 13px; - --spectrum-table-row-bottom-to-text-medium-spacious: 16px; - --spectrum-table-row-bottom-to-text-large-spacious: 18px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; - --spectrum-table-checkbox-to-text: 24px; - --spectrum-table-header-row-checkbox-to-top-small: 10px; - --spectrum-table-header-row-checkbox-to-top-medium: 9px; - --spectrum-table-header-row-checkbox-to-top-large: 12px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; - --spectrum-table-row-checkbox-to-top-small-compact: 6px; - --spectrum-table-row-checkbox-to-top-small-regular: 10px; - --spectrum-table-row-checkbox-to-top-small-spacious: 14px; - --spectrum-table-row-checkbox-to-top-medium-compact: 9px; - --spectrum-table-row-checkbox-to-top-medium-regular: 13px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; - --spectrum-table-row-checkbox-to-top-large-compact: 12px; - --spectrum-table-row-checkbox-to-top-large-regular: 16px; - --spectrum-table-row-checkbox-to-top-large-spacious: 20px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; - --spectrum-table-section-header-row-height-small: 24px; - --spectrum-table-section-header-row-height-medium: 32px; - --spectrum-table-section-header-row-height-large: 40px; - --spectrum-table-section-header-row-height-extra-large: 48px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; - --spectrum-tab-item-to-tab-item-horizontal-small: 21px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; - --spectrum-tab-item-to-tab-item-horizontal-large: 27px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; - --spectrum-tab-item-to-tab-item-vertical-small: 4px; - --spectrum-tab-item-to-tab-item-vertical-medium: 4px; - --spectrum-tab-item-to-tab-item-vertical-large: 5px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; - --spectrum-tab-item-start-to-edge-small: 12px; - --spectrum-tab-item-start-to-edge-medium: 12px; - --spectrum-tab-item-start-to-edge-large: 13px; - --spectrum-tab-item-start-to-edge-extra-large: 13px; - --spectrum-tab-item-top-to-text-small: 11px; - --spectrum-tab-item-bottom-to-text-small: 12px; - --spectrum-tab-item-top-to-text-medium: 14px; - --spectrum-tab-item-bottom-to-text-medium: 14px; - --spectrum-tab-item-top-to-text-large: 16px; - --spectrum-tab-item-bottom-to-text-large: 18px; - --spectrum-tab-item-top-to-text-extra-large: 19px; - --spectrum-tab-item-bottom-to-text-extra-large: 20px; - --spectrum-tab-item-top-to-text-compact-small: 4px; - --spectrum-tab-item-bottom-to-text-compact-small: 5px; - --spectrum-tab-item-top-to-text-compact-medium: 6px; - --spectrum-tab-item-bottom-to-text-compact-medium: 8px; - --spectrum-tab-item-top-to-text-compact-large: 10px; - --spectrum-tab-item-bottom-to-text-compact-large: 12px; - --spectrum-tab-item-top-to-text-compact-extra-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-small: 13px; - --spectrum-tab-item-top-to-workflow-icon-medium: 15px; - --spectrum-tab-item-top-to-workflow-icon-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; - --spectrum-tab-item-focus-indicator-gap-small: 7px; - --spectrum-tab-item-focus-indicator-gap-medium: 8px; - --spectrum-tab-item-focus-indicator-gap-large: 9px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; - --spectrum-side-navigation-width: 192px; - --spectrum-side-navigation-minimum-width: 160px; - --spectrum-side-navigation-maximum-width: 240px; - --spectrum-side-navigation-second-level-edge-to-text: 24px; - --spectrum-side-navigation-third-level-edge-to-text: 36px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; - --spectrum-side-navigation-item-to-item: 4px; - --spectrum-side-navigation-item-to-header: 24px; - --spectrum-side-navigation-header-to-item: 8px; - --spectrum-side-navigation-bottom-to-text: 8px; - --spectrum-tray-top-to-content-area: 4px; - --spectrum-accordion-top-to-text-spacious-small: 9px; - --spectrum-corner-radius-100: 4px; - --spectrum-corner-radius-200: 8px; - --spectrum-drop-shadow-y: 1px; - --spectrum-drop-shadow-blur: 4px; - --spectrum-text-to-visual-50: 6px; - --spectrum-text-to-visual-75: 7px; - --spectrum-text-to-visual-100: 8px; - --spectrum-text-to-visual-200: 9px; - --spectrum-text-to-visual-300: 10px; - --spectrum-text-to-control-75: 9px; - --spectrum-text-to-control-100: 10px; - --spectrum-text-to-control-200: 11px; - --spectrum-text-to-control-300: 13px; - --spectrum-component-height-50: 20px; - --spectrum-component-height-75: 24px; - --spectrum-component-height-100: 32px; - --spectrum-component-height-200: 40px; - --spectrum-component-height-300: 48px; - --spectrum-component-height-400: 56px; - --spectrum-component-height-500: 64px; - --spectrum-component-pill-edge-to-visual-75: 10px; - --spectrum-component-pill-edge-to-visual-100: 14px; - --spectrum-component-pill-edge-to-visual-200: 18px; - --spectrum-component-pill-edge-to-visual-300: 21px; - --spectrum-component-pill-edge-to-visual-only-75: 4px; - --spectrum-component-pill-edge-to-visual-only-100: 7px; - --spectrum-component-pill-edge-to-visual-only-200: 10px; - --spectrum-component-pill-edge-to-visual-only-300: 13px; - --spectrum-component-pill-edge-to-text-75: 12px; - --spectrum-component-pill-edge-to-text-100: 16px; - --spectrum-component-pill-edge-to-text-200: 20px; - --spectrum-component-pill-edge-to-text-300: 24px; - --spectrum-component-edge-to-visual-50: 6px; - --spectrum-component-edge-to-visual-75: 7px; - --spectrum-component-edge-to-visual-100: 10px; - --spectrum-component-edge-to-visual-200: 13px; - --spectrum-component-edge-to-visual-300: 15px; - --spectrum-component-edge-to-visual-only-50: 3px; - --spectrum-component-edge-to-visual-only-75: 4px; - --spectrum-component-edge-to-visual-only-100: 7px; - --spectrum-component-edge-to-visual-only-200: 10px; - --spectrum-component-edge-to-visual-only-300: 13px; - --spectrum-component-edge-to-text-50: 8px; - --spectrum-component-edge-to-text-75: 9px; - --spectrum-component-edge-to-text-100: 12px; - --spectrum-component-edge-to-text-200: 15px; - --spectrum-component-edge-to-text-300: 18px; - --spectrum-component-top-to-workflow-icon-50: 3px; - --spectrum-component-top-to-workflow-icon-75: 4px; - --spectrum-component-top-to-workflow-icon-100: 7px; - --spectrum-component-top-to-workflow-icon-200: 10px; - --spectrum-component-top-to-workflow-icon-300: 13px; - --spectrum-component-top-to-text-50: 3px; - --spectrum-component-top-to-text-75: 4px; - --spectrum-component-top-to-text-100: 6px; - --spectrum-component-top-to-text-200: 9px; - --spectrum-component-top-to-text-300: 12px; - --spectrum-component-bottom-to-text-50: 3px; - --spectrum-component-bottom-to-text-75: 5px; - --spectrum-component-bottom-to-text-100: 9px; - --spectrum-component-bottom-to-text-200: 11px; - --spectrum-component-bottom-to-text-300: 14px; - --spectrum-component-to-menu-small: 6px; - --spectrum-component-to-menu-medium: 6px; - --spectrum-component-to-menu-large: 7px; - --spectrum-component-to-menu-extra-large: 8px; - --spectrum-field-edge-to-disclosure-icon-75: 7px; - --spectrum-field-edge-to-disclosure-icon-100: 11px; - --spectrum-field-edge-to-disclosure-icon-200: 14px; - --spectrum-field-edge-to-disclosure-icon-300: 17px; - --spectrum-field-end-edge-to-disclosure-icon-75: 7px; - --spectrum-field-end-edge-to-disclosure-icon-100: 11px; - --spectrum-field-end-edge-to-disclosure-icon-200: 14px; - --spectrum-field-end-edge-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-disclosure-icon-75: 7px; - --spectrum-field-top-to-disclosure-icon-100: 11px; - --spectrum-field-top-to-disclosure-icon-200: 14px; - --spectrum-field-top-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-alert-icon-small: 4px; - --spectrum-field-top-to-alert-icon-medium: 7px; - --spectrum-field-top-to-alert-icon-large: 10px; - --spectrum-field-top-to-alert-icon-extra-large: 13px; - --spectrum-field-top-to-validation-icon-small: 7px; - --spectrum-field-top-to-validation-icon-medium: 11px; - --spectrum-field-top-to-validation-icon-large: 14px; - --spectrum-field-top-to-validation-icon-extra-large: 17px; - --spectrum-field-top-to-progress-circle-small: 4px; - --spectrum-field-top-to-progress-circle-medium: 8px; - --spectrum-field-top-to-progress-circle-large: 12px; - --spectrum-field-top-to-progress-circle-extra-large: 16px; - --spectrum-field-edge-to-alert-icon-small: 9px; - --spectrum-field-edge-to-alert-icon-medium: 12px; - --spectrum-field-edge-to-alert-icon-large: 15px; - --spectrum-field-edge-to-alert-icon-extra-large: 18px; - --spectrum-field-edge-to-validation-icon-small: 9px; - --spectrum-field-edge-to-validation-icon-medium: 12px; - --spectrum-field-edge-to-validation-icon-large: 15px; - --spectrum-field-edge-to-validation-icon-extra-large: 18px; - --spectrum-field-text-to-alert-icon-small: 8px; - --spectrum-field-text-to-alert-icon-medium: 12px; - --spectrum-field-text-to-alert-icon-large: 15px; - --spectrum-field-text-to-alert-icon-extra-large: 18px; - --spectrum-field-text-to-validation-icon-small: 8px; - --spectrum-field-text-to-validation-icon-medium: 12px; - --spectrum-field-text-to-validation-icon-large: 15px; - --spectrum-field-text-to-validation-icon-extra-large: 18px; - --spectrum-field-width: 192px; - --spectrum-character-count-to-field-quiet-small: -3px; - --spectrum-character-count-to-field-quiet-medium: -3px; - --spectrum-character-count-to-field-quiet-large: -3px; - --spectrum-character-count-to-field-quiet-extra-large: -4px; - --spectrum-side-label-character-count-to-field: 12px; - --spectrum-side-label-character-count-top-margin-small: 4px; - --spectrum-side-label-character-count-top-margin-medium: 8px; - --spectrum-side-label-character-count-top-margin-large: 11px; - --spectrum-side-label-character-count-top-margin-extra-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; - --spectrum-navigational-indicator-top-to-back-icon-small: 6px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; - --spectrum-navigational-indicator-top-to-back-icon-large: 12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; - --spectrum-color-control-track-width: 24px; - --spectrum-font-size-50: 11px; - --spectrum-font-size-75: 12px; - --spectrum-font-size-100: 14px; - --spectrum-font-size-200: 16px; - --spectrum-font-size-300: 18px; - --spectrum-font-size-400: 20px; - --spectrum-font-size-500: 22px; - --spectrum-font-size-600: 25px; - --spectrum-font-size-700: 28px; - --spectrum-font-size-800: 32px; - --spectrum-font-size-900: 36px; - --spectrum-font-size-1000: 40px; - --spectrum-font-size-1100: 45px; - --spectrum-font-size-1200: 50px; - --spectrum-font-size-1300: 60px; - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; - --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-border-radius: var(--spectrum-spacing-75); - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; - - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; - - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; -} diff --git a/tokens/dist/index.css b/tokens/dist/index.css deleted file mode 100644 index f03cb954339..00000000000 --- a/tokens/dist/index.css +++ /dev/null @@ -1,2803 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -.spectrum--dark{ - --spectrum-overlay-opacity:0.6; - --spectrum-background-layer-2-color:var(--spectrum-gray-75); - --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-500); - --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-400); - --spectrum-accent-background-color-default:var(--spectrum-accent-color-700); - --spectrum-accent-background-color-hover:var(--spectrum-accent-color-600); - --spectrum-accent-background-color-down:var(--spectrum-accent-color-600); - --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-600); - --spectrum-informative-background-color-default:var(--spectrum-informative-color-700); - --spectrum-informative-background-color-hover:var(--spectrum-informative-color-600); - --spectrum-informative-background-color-down:var(--spectrum-informative-color-600); - --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-600); - --spectrum-negative-background-color-default:var(--spectrum-negative-color-700); - --spectrum-negative-background-color-hover:var(--spectrum-negative-color-600); - --spectrum-negative-background-color-down:var(--spectrum-negative-color-600); - --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-600); - --spectrum-positive-background-color-default:var(--spectrum-positive-color-700); - --spectrum-positive-background-color-hover:var(--spectrum-positive-color-600); - --spectrum-positive-background-color-down:var(--spectrum-positive-color-600); - --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-600); - --spectrum-notice-background-color-default:var(--spectrum-notice-color-900); - --spectrum-gray-background-color-default:var(--spectrum-gray-500); - --spectrum-red-background-color-default:var(--spectrum-red-700); - --spectrum-orange-background-color-default:var(--spectrum-orange-900); - --spectrum-yellow-background-color-default:var(--spectrum-yellow-1100); - --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-1000); - --spectrum-celery-background-color-default:var(--spectrum-celery-900); - --spectrum-green-background-color-default:var(--spectrum-green-700); - --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); - --spectrum-blue-background-color-default:var(--spectrum-blue-700); - --spectrum-indigo-background-color-default:var(--spectrum-indigo-700); - --spectrum-purple-background-color-default:var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default:var(--spectrum-magenta-700); - --spectrum-neutral-visual-color:var(--spectrum-gray-600); - --spectrum-accent-visual-color:var(--spectrum-accent-color-900); - --spectrum-informative-visual-color:var(--spectrum-informative-color-900); - --spectrum-negative-visual-color:var(--spectrum-negative-color-700); - --spectrum-notice-visual-color:var(--spectrum-notice-color-900); - --spectrum-positive-visual-color:var(--spectrum-positive-color-800); - --spectrum-gray-visual-color:var(--spectrum-gray-600); - --spectrum-red-visual-color:var(--spectrum-red-700); - --spectrum-orange-visual-color:var(--spectrum-orange-900); - --spectrum-yellow-visual-color:var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color:var(--spectrum-celery-800); - --spectrum-green-visual-color:var(--spectrum-green-800); - --spectrum-seafoam-visual-color:var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color:var(--spectrum-cyan-900); - --spectrum-blue-visual-color:var(--spectrum-blue-900); - --spectrum-indigo-visual-color:var(--spectrum-indigo-900); - --spectrum-purple-visual-color:var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color:var(--spectrum-magenta-900); - --spectrum-background-elevated-color:var(--spectrum-gray-75); - --spectrum-background-pasteboard-color:var(--spectrum-gray-25); - --spectrum-brown-visual-color:var(--spectrum-brown-900); - --spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-900); - --spectrum-pink-visual-color:var(--spectrum-pink-900); - --spectrum-silver-visual-color:var(--spectrum-silver-900); - --spectrum-turquoise-visual-color:var(--spectrum-turquoise-900); - --spectrum-brown-background-color-default:var(--spectrum-brown-700); - --spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-700); - --spectrum-pink-background-color-default:var(--spectrum-pink-700); - --spectrum-silver-background-color-default:var(--spectrum-silver-700); - --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-700); - --spectrum-drop-shadow-color-100:rgba(0, 0, 0, 0.36); - --spectrum-drop-shadow-color-200:rgba(0, 0, 0, 0.48); - --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); - --spectrum-gray-25:rgb(17, 17, 17); - --spectrum-gray-50:rgb(27, 27, 27); - --spectrum-gray-75:rgb(34, 34, 34); - --spectrum-gray-100:rgb(44, 44, 44); - --spectrum-gray-200:rgb(50, 50, 50); - --spectrum-gray-300:rgb(57, 57, 57); - --spectrum-gray-400:rgb(68, 68, 68); - --spectrum-gray-500:rgb(109, 109, 109); - --spectrum-gray-600:rgb(138, 138, 138); - --spectrum-gray-700:rgb(175, 175, 175); - --spectrum-gray-800:rgb(219, 219, 219); - --spectrum-gray-900:rgb(242, 242, 242); - --spectrum-gray-1000:rgb(255, 255, 255); - --spectrum-blue-100:rgb(14, 23, 63); - --spectrum-blue-200:rgb(15, 28, 82); - --spectrum-blue-300:rgb(12, 33, 117); - --spectrum-blue-400:rgb(18, 45, 154); - --spectrum-blue-500:rgb(26, 58, 195); - --spectrum-blue-600:rgb(37, 73, 229); - --spectrum-blue-700:rgb(52, 91, 248); - --spectrum-blue-800:rgb(69, 110, 254); - --spectrum-blue-900:rgb(86, 129, 255); - --spectrum-blue-1000:rgb(105, 149, 254); - --spectrum-blue-1100:rgb(124, 169, 252); - --spectrum-blue-1200:rgb(152, 192, 252); - --spectrum-blue-1300:rgb(181, 213, 253); - --spectrum-blue-1400:rgb(213, 231, 254); - --spectrum-blue-1500:rgb(238, 245, 255); - --spectrum-blue-1600:rgb(255, 255, 255); - --spectrum-red-100:rgb(54, 10, 3); - --spectrum-red-200:rgb(68, 13, 5); - --spectrum-red-300:rgb(87, 17, 7); - --spectrum-red-400:rgb(115, 24, 11); - --spectrum-red-500:rgb(147, 31, 17); - --spectrum-red-600:rgb(177, 38, 23); - --spectrum-red-700:rgb(205, 46, 29); - --spectrum-red-800:rgb(230, 54, 35); - --spectrum-red-900:rgb(252, 67, 46); - --spectrum-red-1000:rgb(255, 103, 86); - --spectrum-red-1100:rgb(255, 134, 120); - --spectrum-red-1200:rgb(255, 167, 157); - --spectrum-red-1300:rgb(255, 196, 189); - --spectrum-red-1400:rgb(255, 222, 219); - --spectrum-red-1500:rgb(255, 242, 240); - --spectrum-red-1600:rgb(255, 255, 255); - --spectrum-orange-100:rgb(49, 16, 0); - --spectrum-orange-200:rgb(61, 21, 0); - --spectrum-orange-300:rgb(80, 27, 0); - --spectrum-orange-400:rgb(106, 36, 0); - --spectrum-orange-500:rgb(135, 47, 0); - --spectrum-orange-600:rgb(162, 59, 0); - --spectrum-orange-700:rgb(185, 73, 0); - --spectrum-orange-800:rgb(205, 86, 0); - --spectrum-orange-900:rgb(224, 100, 0); - --spectrum-orange-1000:rgb(243, 117, 0); - --spectrum-orange-1100:rgb(255, 137, 0); - --spectrum-orange-1200:rgb(255, 173, 45); - --spectrum-orange-1300:rgb(255, 201, 116); - --spectrum-orange-1400:rgb(255, 225, 178); - --spectrum-orange-1500:rgb(255, 243, 225); - --spectrum-orange-1600:rgb(255, 255, 255); - --spectrum-yellow-100:rgb(37, 23, 0); - --spectrum-yellow-200:rgb(47, 29, 0); - --spectrum-yellow-300:rgb(61, 39, 0); - --spectrum-yellow-400:rgb(83, 52, 0); - --spectrum-yellow-500:rgb(107, 67, 0); - --spectrum-yellow-600:rgb(130, 82, 0); - --spectrum-yellow-700:rgb(151, 97, 0); - --spectrum-yellow-800:rgb(169, 110, 0); - --spectrum-yellow-900:rgb(186, 124, 0); - --spectrum-yellow-1000:rgb(203, 141, 0); - --spectrum-yellow-1100:rgb(218, 159, 0); - --spectrum-yellow-1200:rgb(235, 183, 0); - --spectrum-yellow-1300:rgb(249, 206, 0); - --spectrum-yellow-1400:rgb(255, 230, 86); - --spectrum-yellow-1500:rgb(255, 246, 195); - --spectrum-yellow-1600:rgb(255, 255, 255); - --spectrum-chartreuse-100:rgb(23, 28, 0); - --spectrum-chartreuse-200:rgb(30, 36, 0); - --spectrum-chartreuse-300:rgb(39, 47, 0); - --spectrum-chartreuse-400:rgb(53, 63, 0); - --spectrum-chartreuse-500:rgb(68, 82, 0); - --spectrum-chartreuse-600:rgb(83, 100, 0); - --spectrum-chartreuse-700:rgb(97, 116, 0); - --spectrum-chartreuse-800:rgb(109, 131, 0); - --spectrum-chartreuse-900:rgb(122, 147, 0); - --spectrum-chartreuse-1000:rgb(136, 164, 0); - --spectrum-chartreuse-1100:rgb(151, 181, 0); - --spectrum-chartreuse-1200:rgb(169, 203, 0); - --spectrum-chartreuse-1300:rgb(187, 225, 0); - --spectrum-chartreuse-1400:rgb(219, 240, 117); - --spectrum-chartreuse-1500:rgb(242, 249, 206); - --spectrum-chartreuse-1600:rgb(255, 255, 255); - --spectrum-celery-100:rgb(11, 31, 0); - --spectrum-celery-200:rgb(15, 38, 0); - --spectrum-celery-300:rgb(21, 51, 1); - --spectrum-celery-400:rgb(31, 67, 4); - --spectrum-celery-500:rgb(41, 86, 8); - --spectrum-celery-600:rgb(50, 105, 11); - --spectrum-celery-700:rgb(60, 122, 15); - --spectrum-celery-800:rgb(69, 138, 19); - --spectrum-celery-900:rgb(78, 154, 23); - --spectrum-celery-1000:rgb(88, 172, 28); - --spectrum-celery-1100:rgb(100, 190, 35); - --spectrum-celery-1200:rgb(116, 213, 46); - --spectrum-celery-1300:rgb(136, 234, 65); - --spectrum-celery-1400:rgb(170, 251, 112); - --spectrum-celery-1500:rgb(222, 255, 198); - --spectrum-celery-1600:rgb(255, 255, 255); - --spectrum-green-100:rgb(0, 30, 23); - --spectrum-green-200:rgb(0, 38, 29); - --spectrum-green-300:rgb(0, 51, 38); - --spectrum-green-400:rgb(0, 68, 48); - --spectrum-green-500:rgb(2, 87, 58); - --spectrum-green-600:rgb(3, 106, 67); - --spectrum-green-700:rgb(4, 124, 75); - --spectrum-green-800:rgb(6, 140, 82); - --spectrum-green-900:rgb(9, 157, 89); - --spectrum-green-1000:rgb(14, 175, 98); - --spectrum-green-1100:rgb(24, 193, 110); - --spectrum-green-1200:rgb(57, 215, 134); - --spectrum-green-1300:rgb(126, 231, 172); - --spectrum-green-1400:rgb(189, 241, 208); - --spectrum-green-1500:rgb(229, 250, 236); - --spectrum-green-1600:rgb(255, 255, 255); - --spectrum-seafoam-100:rgb(0, 30, 27); - --spectrum-seafoam-200:rgb(0, 39, 35); - --spectrum-seafoam-300:rgb(0, 50, 44); - --spectrum-seafoam-400:rgb(0, 67, 59); - --spectrum-seafoam-500:rgb(2, 86, 75); - --spectrum-seafoam-600:rgb(4, 105, 89); - --spectrum-seafoam-700:rgb(6, 122, 103); - --spectrum-seafoam-800:rgb(8, 138, 116); - --spectrum-seafoam-900:rgb(10, 154, 128); - --spectrum-seafoam-1000:rgb(12, 173, 142); - --spectrum-seafoam-1100:rgb(14, 190, 156); - --spectrum-seafoam-1200:rgb(29, 214, 176); - --spectrum-seafoam-1300:rgb(122, 229, 203); - --spectrum-seafoam-1400:rgb(186, 241, 222); - --spectrum-seafoam-1500:rgb(229, 249, 243); - --spectrum-seafoam-1600:rgb(255, 255, 255); - --spectrum-cyan-100:rgb(0, 29, 39); - --spectrum-cyan-200:rgb(0, 36, 49); - --spectrum-cyan-300:rgb(0, 48, 65); - --spectrum-cyan-400:rgb(0, 64, 88); - --spectrum-cyan-500:rgb(0, 82, 113); - --spectrum-cyan-600:rgb(3, 99, 140); - --spectrum-cyan-700:rgb(8, 115, 168); - --spectrum-cyan-800:rgb(15, 128, 194); - --spectrum-cyan-900:rgb(24, 142, 220); - --spectrum-cyan-1000:rgb(38, 159, 244); - --spectrum-cyan-1100:rgb(63, 177, 255); - --spectrum-cyan-1200:rgb(107, 199, 255); - --spectrum-cyan-1300:rgb(152, 219, 255); - --spectrum-cyan-1400:rgb(195, 236, 252); - --spectrum-cyan-1500:rgb(230, 248, 253); - --spectrum-cyan-1600:rgb(255, 255, 255); - --spectrum-indigo-100:rgb(30, 0, 93); - --spectrum-indigo-200:rgb(35, 0, 110); - --spectrum-indigo-300:rgb(47, 0, 140); - --spectrum-indigo-400:rgb(62, 12, 174); - --spectrum-indigo-500:rgb(79, 30, 209); - --spectrum-indigo-600:rgb(95, 52, 235); - --spectrum-indigo-700:rgb(109, 75, 248); - --spectrum-indigo-800:rgb(119, 97, 252); - --spectrum-indigo-900:rgb(128, 119, 254); - --spectrum-indigo-1000:rgb(139, 141, 254); - --spectrum-indigo-1100:rgb(153, 161, 255); - --spectrum-indigo-1200:rgb(176, 186, 255); - --spectrum-indigo-1300:rgb(199, 208, 255); - --spectrum-indigo-1400:rgb(223, 228, 255); - --spectrum-indigo-1500:rgb(243, 244, 255); - --spectrum-indigo-1600:rgb(255, 255, 255); - --spectrum-purple-100:rgb(41, 0, 79); - --spectrum-purple-200:rgb(50, 0, 96); - --spectrum-purple-300:rgb(64, 0, 122); - --spectrum-purple-400:rgb(83, 0, 159); - --spectrum-purple-500:rgb(107, 6, 195); - --spectrum-purple-600:rgb(130, 34, 215); - --spectrum-purple-700:rgb(148, 62, 224); - --spectrum-purple-800:rgb(161, 84, 229); - --spectrum-purple-900:rgb(173, 105, 233); - --spectrum-purple-1000:rgb(186, 127, 237); - --spectrum-purple-1100:rgb(197, 149, 240); - --spectrum-purple-1200:rgb(212, 176, 244); - --spectrum-purple-1300:rgb(225, 201, 247); - --spectrum-purple-1400:rgb(238, 224, 250); - --spectrum-purple-1500:rgb(248, 243, 253); - --spectrum-purple-1600:rgb(255, 255, 255); - --spectrum-fuchsia-100:rgb(50, 0, 61); - --spectrum-fuchsia-200:rgb(61, 0, 74); - --spectrum-fuchsia-300:rgb(79, 0, 95); - --spectrum-fuchsia-400:rgb(102, 9, 120); - --spectrum-fuchsia-500:rgb(127, 23, 146); - --spectrum-fuchsia-600:rgb(151, 38, 170); - --spectrum-fuchsia-700:rgb(173, 51, 192); - --spectrum-fuchsia-800:rgb(192, 64, 212); - --spectrum-fuchsia-900:rgb(213, 73, 235); - --spectrum-fuchsia-1000:rgb(232, 91, 253); - --spectrum-fuchsia-1100:rgb(240, 122, 255); - --spectrum-fuchsia-1200:rgb(245, 159, 255); - --spectrum-fuchsia-1300:rgb(248, 191, 255); - --spectrum-fuchsia-1400:rgb(251, 219, 255); - --spectrum-fuchsia-1500:rgb(253, 241, 255); - --spectrum-fuchsia-1600:rgb(255, 255, 255); - --spectrum-magenta-100:rgb(59, 0, 22); - --spectrum-magenta-200:rgb(74, 0, 27); - --spectrum-magenta-300:rgb(93, 0, 34); - --spectrum-magenta-400:rgb(123, 0, 45); - --spectrum-magenta-500:rgb(152, 7, 60); - --spectrum-magenta-600:rgb(181, 19, 76); - --spectrum-magenta-700:rgb(207, 31, 92); - --spectrum-magenta-800:rgb(231, 41, 105); - --spectrum-magenta-900:rgb(255, 51, 119); - --spectrum-magenta-1000:rgb(255, 96, 149); - --spectrum-magenta-1100:rgb(255, 128, 171); - --spectrum-magenta-1200:rgb(255, 163, 194); - --spectrum-magenta-1300:rgb(255, 193, 214); - --spectrum-magenta-1400:rgb(255, 220, 232); - --spectrum-magenta-1500:rgb(255, 241, 246); - --spectrum-magenta-1600:rgb(255, 255, 255); - --spectrum-pink-100:rgb(58, 0, 37); - --spectrum-pink-200:rgb(71, 0, 44); - --spectrum-pink-300:rgb(90, 0, 57); - --spectrum-pink-400:rgb(115, 7, 75); - --spectrum-pink-500:rgb(143, 18, 97); - --spectrum-pink-600:rgb(171, 29, 119); - --spectrum-pink-700:rgb(196, 39, 138); - --spectrum-pink-800:rgb(220, 47, 156); - --spectrum-pink-900:rgb(236, 67, 175); - --spectrum-pink-1000:rgb(251, 90, 196); - --spectrum-pink-1100:rgb(255, 122, 210); - --spectrum-pink-1200:rgb(255, 159, 223); - --spectrum-pink-1300:rgb(255, 191, 234); - --spectrum-pink-1400:rgb(255, 219, 243); - --spectrum-pink-1500:rgb(255, 241, 250); - --spectrum-pink-1600:rgb(255, 255, 255); - --spectrum-turquoise-100:rgb(0, 30, 33); - --spectrum-turquoise-200:rgb(0, 37, 41); - --spectrum-turquoise-300:rgb(0, 49, 54); - --spectrum-turquoise-400:rgb(0, 66, 72); - --spectrum-turquoise-500:rgb(3, 84, 92); - --spectrum-turquoise-600:rgb(5, 103, 112); - --spectrum-turquoise-700:rgb(7, 120, 131); - --spectrum-turquoise-800:rgb(9, 135, 147); - --spectrum-turquoise-900:rgb(11, 151, 164); - --spectrum-turquoise-1000:rgb(13, 168, 182); - --spectrum-turquoise-1100:rgb(16, 186, 202); - --spectrum-turquoise-1200:rgb(64, 208, 220); - --spectrum-turquoise-1300:rgb(128, 225, 231); - --spectrum-turquoise-1400:rgb(183, 240, 240); - --spectrum-turquoise-1500:rgb(228, 249, 249); - --spectrum-turquoise-1600:rgb(255, 255, 255); - --spectrum-brown-100:rgb(35, 24, 8); - --spectrum-brown-200:rgb(44, 31, 11); - --spectrum-brown-300:rgb(58, 40, 14); - --spectrum-brown-400:rgb(78, 55, 19); - --spectrum-brown-500:rgb(98, 71, 30); - --spectrum-brown-600:rgb(115, 88, 47); - --spectrum-brown-700:rgb(132, 104, 61); - --spectrum-brown-800:rgb(148, 118, 73); - --spectrum-brown-900:rgb(163, 132, 84); - --spectrum-brown-1000:rgb(181, 147, 98); - --spectrum-brown-1100:rgb(199, 163, 112); - --spectrum-brown-1200:rgb(222, 185, 130); - --spectrum-brown-1300:rgb(232, 207, 169); - --spectrum-brown-1400:rgb(242, 227, 206); - --spectrum-brown-1500:rgb(250, 244, 236); - --spectrum-brown-1600:rgb(255, 255, 255); - --spectrum-silver-100:rgb(26, 26, 26); - --spectrum-silver-200:rgb(33, 33, 33); - --spectrum-silver-300:rgb(44, 44, 44); - --spectrum-silver-400:rgb(59, 59, 59); - --spectrum-silver-500:rgb(76, 76, 76); - --spectrum-silver-600:rgb(92, 92, 92); - --spectrum-silver-700:rgb(108, 108, 108); - --spectrum-silver-800:rgb(123, 123, 123); - --spectrum-silver-900:rgb(137, 137, 137); - --spectrum-silver-1000:rgb(152, 152, 152); - --spectrum-silver-1100:rgb(169, 169, 169); - --spectrum-silver-1200:rgb(190, 190, 190); - --spectrum-silver-1300:rgb(211, 211, 211); - --spectrum-silver-1400:rgb(229, 229, 229); - --spectrum-silver-1500:rgb(244, 244, 244); - --spectrum-silver-1600:rgb(255, 255, 255); - --spectrum-cinnamon-100:rgb(48, 17, 4); - --spectrum-cinnamon-200:rgb(59, 21, 5); - --spectrum-cinnamon-300:rgb(79, 28, 7); - --spectrum-cinnamon-400:rgb(100, 41, 15); - --spectrum-cinnamon-500:rgb(122, 57, 28); - --spectrum-cinnamon-600:rgb(143, 74, 40); - --spectrum-cinnamon-700:rgb(163, 88, 52); - --spectrum-cinnamon-800:rgb(179, 103, 64); - --spectrum-cinnamon-900:rgb(192, 119, 80); - --spectrum-cinnamon-1000:rgb(206, 136, 99); - --spectrum-cinnamon-1100:rgb(220, 154, 118); - --spectrum-cinnamon-1200:rgb(232, 179, 149); - --spectrum-cinnamon-1300:rgb(239, 203, 183); - --spectrum-cinnamon-1400:rgb(246, 225, 214); - --spectrum-cinnamon-1500:rgb(252, 244, 239); - --spectrum-cinnamon-1600:rgb(255, 255, 255); - --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000); - --spectrum-menu-item-background-color-default:rgba(255, 255, 255, 0); - --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200); - --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200); - --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); - --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color:var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); - --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.07); - --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-white-200); - --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.07); - --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary:var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-25); - - --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700); - - --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.07); - --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); - - --spectrum-logic-button-and-background-color:var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color:var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000); - --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800); - --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); - --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); - - --spectrum-swatch-border-color:rgba(255, 255, 255, 0.51); -} - -.spectrum{ - --spectrum-focus-indicator-color:var(--spectrum-blue-800); - --spectrum-static-white-focus-indicator-color:var(--spectrum-white); - --spectrum-static-black-focus-indicator-color:var(--spectrum-black); - --spectrum-overlay-color:var(--spectrum-black); - --spectrum-drop-shadow-color:var(--spectrum-drop-shadow-color-100); - --spectrum-opacity-disabled:0.3; - --spectrum-background-base-color:var(--spectrum-gray-25); - --spectrum-background-layer-1-color:var(--spectrum-gray-50); - --spectrum-neutral-background-color-default:var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); - --spectrum-neutral-background-color-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); - --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-selected:var(--spectrum-neutral-subdued-content-color-down); - --spectrum-accent-content-color-selected:var(--spectrum-accent-content-color-down); - --spectrum-disabled-background-color:var(--spectrum-gray-100); - --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100); - --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100); - --spectrum-background-opacity-default:0; - --spectrum-background-opacity-hover:0.1; - --spectrum-background-opacity-down:0.1; - --spectrum-background-opacity-key-focus:0.1; - --spectrum-neutral-content-color-default:var(--spectrum-gray-800); - --spectrum-neutral-content-color-hover:var(--spectrum-gray-900); - --spectrum-neutral-content-color-down:var(--spectrum-gray-900); - --spectrum-neutral-content-color-focus-hover:var(--spectrum-neutral-content-color-down); - --spectrum-neutral-content-color-focus:var(--spectrum-neutral-content-color-down); - --spectrum-neutral-content-color-key-focus:var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-default:var(--spectrum-gray-700); - --spectrum-neutral-subdued-content-color-hover:var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-key-focus:var(--spectrum-gray-800); - --spectrum-accent-content-color-default:var(--spectrum-accent-color-900); - --spectrum-accent-content-color-hover:var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down:var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-key-focus:var(--spectrum-accent-color-1000); - --spectrum-negative-content-color-default:var(--spectrum-negative-color-900); - --spectrum-negative-content-color-hover:var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-down:var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-key-focus:var(--spectrum-negative-color-1000); - --spectrum-disabled-content-color:var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-400); - --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-400); - --spectrum-disabled-border-color:var(--spectrum-gray-300); - --spectrum-disabled-static-white-border-color:var(--spectrum-transparent-white-300); - --spectrum-disabled-static-black-border-color:var(--spectrum-transparent-black-300); - --spectrum-negative-border-color-default:var(--spectrum-negative-color-900); - --spectrum-negative-border-color-hover:var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-down:var(--spectrum-negative-color-1100); - --spectrum-negative-border-color-focus-hover:var(--spectrum-negative-border-color-down); - --spectrum-negative-border-color-focus:var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-key-focus:var(--spectrum-negative-color-1000); - --spectrum-title-color:var(--spectrum-gray-900); - --spectrum-drop-shadow-emphasized-default-color:var(--spectrum-drop-shadow-color-100); - --spectrum-drop-shadow-emphasized-hover-color:var(--spectrum-drop-shadow-color-200); - --spectrum-drop-shadow-elevated-color:var(--spectrum-drop-shadow-color-200); - --spectrum-swatch-border-color:var(--spectrum-gray-900); - --spectrum-swatch-border-opacity:0.51; - --spectrum-swatch-disabled-icon-border-color:var(--spectrum-black); - --spectrum-swatch-disabled-icon-border-opacity:0.51; - --spectrum-thumbnail-border-color:var(--spectrum-gray-800); - --spectrum-thumbnail-border-opacity:0.1; - --spectrum-thumbnail-opacity-disabled:var(--spectrum-opacity-disabled); - --spectrum-opacity-checkerboard-square-light:var(--spectrum-white); - --spectrum-avatar-opacity-disabled:var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color:var(--spectrum-gray-900); - --spectrum-color-area-border-opacity:0.1; - --spectrum-color-slider-border-color:var(--spectrum-gray-900); - --spectrum-color-slider-border-opacity:0.1; - --spectrum-color-loupe-drop-shadow-color:var(--spectrum-transparent-black-300); - --spectrum-color-loupe-inner-border:var(--spectrum-transparent-black-200); - --spectrum-color-loupe-outer-border:var(--spectrum-white); - --spectrum-card-selection-background-color:var(--spectrum-gray-100); - --spectrum-card-selection-background-color-opacity:0.95; - --spectrum-drop-zone-background-color:var(--spectrum-accent-visual-color); - --spectrum-drop-zone-background-color-opacity:0.1; - --spectrum-drop-zone-background-color-opacity-filled:0.3; - --spectrum-coach-mark-pagination-color:var(--spectrum-gray-600); - --spectrum-color-handle-inner-border-color:var(--spectrum-black); - --spectrum-color-handle-inner-border-opacity:0.42; - --spectrum-color-handle-outer-border-color:var(--spectrum-black); - --spectrum-color-handle-outer-border-opacity:var(--spectrum-color-handle-inner-border-opacity); - --spectrum-color-handle-drop-shadow-color:var(--spectrum-drop-shadow-color); - --spectrum-floating-action-button-drop-shadow-color:var(--spectrum-transparent-black-300); - --spectrum-floating-action-button-shadow-color:var(--spectrum-floating-action-button-drop-shadow-color); - --spectrum-table-row-hover-color:var(--spectrum-gray-900); - --spectrum-table-row-hover-opacity:0.07; - --spectrum-table-selected-row-background-color:var(--spectrum-informative-background-color-default); - --spectrum-table-selected-row-background-opacity:0.1; - --spectrum-table-selected-row-background-color-non-emphasized:var(--spectrum-neutral-background-color-selected-default); - --spectrum-table-selected-row-background-opacity-non-emphasized:0.1; - --spectrum-table-row-down-opacity:0.1; - --spectrum-table-selected-row-background-opacity-hover:0.15; - --spectrum-table-selected-row-background-opacity-non-emphasized-hover:0.15; - --spectrum-white:rgb(255, 255, 255); - --spectrum-transparent-white-25:rgba(255, 255, 255, 0); - --spectrum-transparent-white-50:rgba(255, 255, 255, 0.04); - --spectrum-transparent-white-75:rgba(255, 255, 255, 0.07); - --spectrum-transparent-white-100:rgba(255, 255, 255, 0.11); - --spectrum-transparent-white-200:rgba(255, 255, 255, 0.14); - --spectrum-transparent-white-300:rgba(255, 255, 255, 0.17); - --spectrum-transparent-white-400:rgba(255, 255, 255, 0.21); - --spectrum-transparent-white-500:rgba(255, 255, 255, 0.39); - --spectrum-transparent-white-600:rgba(255, 255, 255, 0.51); - --spectrum-transparent-white-700:rgba(255, 255, 255, 0.66); - --spectrum-transparent-white-800:rgba(255, 255, 255, 0.85); - --spectrum-transparent-white-900:rgba(255, 255, 255, 0.94); - --spectrum-transparent-white-1000:rgb(255, 255, 255); - --spectrum-black:rgb(0, 0, 0); - --spectrum-transparent-black-25:rgba(0, 0, 0, 0); - --spectrum-transparent-black-50:rgba(0, 0, 0, 0.03); - --spectrum-transparent-black-75:rgba(0, 0, 0, 0.05); - --spectrum-transparent-black-100:rgba(0, 0, 0, 0.09); - --spectrum-transparent-black-200:rgba(0, 0, 0, 0.12); - --spectrum-transparent-black-300:rgba(0, 0, 0, 0.15); - --spectrum-transparent-black-400:rgba(0, 0, 0, 0.22); - --spectrum-transparent-black-500:rgba(0, 0, 0, 0.44); - --spectrum-transparent-black-600:rgba(0, 0, 0, 0.56); - --spectrum-transparent-black-700:rgba(0, 0, 0, 0.69); - --spectrum-transparent-black-800:rgba(0, 0, 0, 0.84); - --spectrum-transparent-black-900:rgba(0, 0, 0, 0.93); - --spectrum-transparent-black-1000:rgb(0, 0, 0); - --spectrum-icon-color-inverse:var(--spectrum-gray-50); - --spectrum-icon-color-primary-default:var(--spectrum-neutral-content-color-default); - --spectrum-asterisk-icon-size-75:8px; - --spectrum-radio-button-selection-indicator:4px; - --spectrum-field-label-top-margin-small:0px; - --spectrum-field-label-to-component:0px; - --spectrum-help-text-to-component:0px; - --spectrum-status-light-dot-size-small:8px; - --spectrum-action-button-edge-to-hold-icon-extra-small:3px; - --spectrum-action-button-edge-to-hold-icon-small:3px; - --spectrum-button-minimum-width-multiplier:2.25; - --spectrum-divider-thickness-small:1px; - --spectrum-divider-thickness-medium:2px; - --spectrum-divider-thickness-large:4px; - --spectrum-swatch-rectangle-width-multiplier:2; - --spectrum-swatch-slash-thickness-extra-small:2px; - --spectrum-swatch-slash-thickness-small:3px; - --spectrum-swatch-slash-thickness-medium:4px; - --spectrum-swatch-slash-thickness-large:5px; - --spectrum-progress-bar-minimum-width:48px; - --spectrum-progress-bar-maximum-width:768px; - --spectrum-meter-minimum-width:48px; - --spectrum-meter-maximum-width:768px; - --spectrum-meter-default-width:var(--spectrum-meter-width); - --spectrum-in-line-alert-minimum-width:240px; - --spectrum-popover-tip-width:16px; - --spectrum-popover-tip-height:8px; - --spectrum-menu-item-label-to-description:1px; - --spectrum-menu-item-section-divider-height:8px; - --spectrum-slider-track-thickness:2px; - --spectrum-slider-handle-gap:4px; - --spectrum-picker-minimum-width-multiplier:2; - --spectrum-picker-border-width:var(--spectrum-border-width-100); - --spectrum-picker-end-edge-to-disclousure-icon-quiet:var(--spectrum-picker-end-edge-to-disclosure-icon-quiet); - --spectrum-picker-end-edge-to-disclosure-icon-quiet:0px; - --spectrum-text-field-minimum-width-multiplier:1.5; - --spectrum-combo-box-minimum-width-multiplier:2.5; - --spectrum-combo-box-quiet-minimum-width-multiplier:2; - --spectrum-combo-box-visual-to-field-button-quiet:0px; - --spectrum-alert-dialog-minimum-width:288px; - --spectrum-alert-dialog-maximum-width:480px; - --spectrum-contextual-help-minimum-width:268px; - --spectrum-breadcrumbs-height:var(--spectrum-component-height-300); - --spectrum-breadcrumbs-height-compact:var(--spectrum-component-height-200); - --spectrum-breadcrumbs-end-edge-to-text:0px; - --spectrum-breadcrumbs-truncated-menu-to-separator-icon:0px; - --spectrum-breadcrumbs-start-edge-to-truncated-menu:0px; - --spectrum-breadcrumbs-truncated-menu-to-bottom-text:0px; - --spectrum-alert-banner-to-top-workflow-icon:var(--spectrum-alert-banner-top-to-workflow-icon); - --spectrum-alert-banner-to-top-text:var(--spectrum-alert-banner-top-to-text); - --spectrum-alert-banner-to-bottom-text:var(--spectrum-alert-banner-bottom-to-text); - --spectrum-color-area-border-width:var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding:var(--spectrum-corner-radius-100); - --spectrum-color-wheel-color-area-margin:12px; - --spectrum-color-slider-border-width:1px; - --spectrum-color-slider-border-rounding:4px; - --spectrum-floating-action-button-drop-shadow-blur:12px; - --spectrum-floating-action-button-drop-shadow-y:4px; - --spectrum-illustrated-message-maximum-width:380px; - --spectrum-search-field-minimum-width-multiplier:3; - --spectrum-color-loupe-height:64px; - --spectrum-color-loupe-width:48px; - --spectrum-color-loupe-bottom-to-color-handle:12px; - --spectrum-color-loupe-outer-border-width:var(--spectrum-border-width-200); - --spectrum-color-loupe-inner-border-width:1px; - --spectrum-color-loupe-drop-shadow-y:2px; - --spectrum-color-loupe-drop-shadow-blur:8px; - --spectrum-card-minimum-width:100px; - --spectrum-card-preview-minimum-height:130px; - --spectrum-card-selection-background-size:40px; - --spectrum-drop-zone-width:428px; - --spectrum-drop-zone-content-maximum-width:var(--spectrum-illustrated-message-maximum-width); - --spectrum-drop-zone-border-dash-length:8px; - --spectrum-drop-zone-border-dash-gap:4px; - --spectrum-drop-zone-title-size:var(--spectrum-illustrated-message-title-size); - --spectrum-drop-zone-cjk-title-size:var(--spectrum-illustrated-message-cjk-title-size); - --spectrum-drop-zone-body-size:var(--spectrum-illustrated-message-body-size); - --spectrum-accordion-top-to-text-compact-small:2px; - --spectrum-accordion-top-to-text-compact-medium:4px; - --spectrum-accordion-disclosure-indicator-to-text:0px; - --spectrum-accordion-edge-to-disclosure-indicator:0px; - --spectrum-accordion-edge-to-text:0px; - --spectrum-accordion-focus-indicator-gap:0px; - --spectrum-color-handle-border-width:var(--spectrum-border-width-200); - --spectrum-color-handle-inner-border-width:1px; - --spectrum-color-handle-outer-border-width:1px; - --spectrum-color-handle-drop-shadow-x:0; - --spectrum-color-handle-drop-shadow-y:0; - --spectrum-color-handle-drop-shadow-blur:0; - --spectrum-table-row-height-small-compact:var(--spectrum-component-height-75); - --spectrum-table-row-height-medium-compact:var(--spectrum-component-height-100); - --spectrum-table-row-height-large-compact:var(--spectrum-component-height-200); - --spectrum-table-row-height-extra-large-compact:var(--spectrum-component-height-300); - --spectrum-table-row-top-to-text-small-compact:var(--spectrum-component-top-to-text-75); - --spectrum-table-row-top-to-text-medium-compact:var(--spectrum-component-top-to-text-100); - --spectrum-table-row-top-to-text-large-compact:var(--spectrum-component-top-to-text-200); - --spectrum-table-row-top-to-text-extra-large-compact:var(--spectrum-component-top-to-text-300); - --spectrum-table-row-bottom-to-text-small-compact:var(--spectrum-component-bottom-to-text-75); - --spectrum-table-row-bottom-to-text-medium-compact:var(--spectrum-component-bottom-to-text-100); - --spectrum-table-row-bottom-to-text-large-compact:var(--spectrum-component-bottom-to-text-200); - --spectrum-table-row-bottom-to-text-extra-large-compact:var(--spectrum-component-bottom-to-text-300); - --spectrum-table-edge-to-content:16px; - --spectrum-table-border-divider-width:1px; - --spectrum-tab-item-height-small:var(--spectrum-component-height-200); - --spectrum-tab-item-height-medium:var(--spectrum-component-height-300); - --spectrum-tab-item-height-large:var(--spectrum-component-height-400); - --spectrum-tab-item-height-extra-large:var(--spectrum-component-height-500); - --spectrum-tab-item-compact-height-small:var(--spectrum-component-height-75); - --spectrum-tab-item-compact-height-medium:var(--spectrum-component-height-100); - --spectrum-tab-item-compact-height-large:var(--spectrum-component-height-200); - --spectrum-tab-item-compact-height-extra-large:var(--spectrum-component-height-300); - --spectrum-tab-item-start-to-edge-quiet:0px; - --spectrum-in-field-button-width-stacked-small:20px; - --spectrum-in-field-button-width-stacked-medium:28px; - --spectrum-in-field-button-width-stacked-large:36px; - --spectrum-in-field-button-width-stacked-extra-large:44px; - --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; - --spectrum-in-field-button-edge-to-fill:0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small:7px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium:9px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large:13px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large:16px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small:3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); - --spectrum-corner-radius-75:2px; - --spectrum-drop-shadow-x:0px; - --spectrum-android-elevation:2dp; - --spectrum-spacing-50:2px; - --spectrum-spacing-75:4px; - --spectrum-spacing-100:8px; - --spectrum-spacing-200:12px; - --spectrum-spacing-300:16px; - --spectrum-spacing-400:24px; - --spectrum-spacing-500:32px; - --spectrum-spacing-600:40px; - --spectrum-spacing-700:48px; - --spectrum-spacing-800:64px; - --spectrum-spacing-900:80px; - --spectrum-spacing-1000:96px; - --spectrum-focus-indicator-thickness:2px; - --spectrum-focus-indicator-gap:2px; - --spectrum-border-width-100:1px; - --spectrum-border-width-200:2px; - --spectrum-border-width-400:4px; - --spectrum-field-edge-to-text-quiet:0px; - --spectrum-field-edge-to-visual-quiet:0px; - --spectrum-field-edge-to-border-quiet:0px; - --spectrum-field-edge-to-alert-icon-quiet:0px; - --spectrum-field-edge-to-validation-icon-quiet:0px; - --spectrum-text-underline-thickness:1px; - --spectrum-text-underline-gap:1px; - --spectrum-accent-color-100:var(--spectrum-blue-100); - --spectrum-accent-color-200:var(--spectrum-blue-200); - --spectrum-accent-color-300:var(--spectrum-blue-300); - --spectrum-accent-color-400:var(--spectrum-blue-400); - --spectrum-accent-color-500:var(--spectrum-blue-500); - --spectrum-accent-color-600:var(--spectrum-blue-600); - --spectrum-accent-color-700:var(--spectrum-blue-700); - --spectrum-accent-color-800:var(--spectrum-blue-800); - --spectrum-accent-color-900:var(--spectrum-blue-900); - --spectrum-accent-color-1000:var(--spectrum-blue-1000); - --spectrum-accent-color-1100:var(--spectrum-blue-1100); - --spectrum-accent-color-1200:var(--spectrum-blue-1200); - --spectrum-accent-color-1300:var(--spectrum-blue-1300); - --spectrum-accent-color-1400:var(--spectrum-blue-1400); - --spectrum-accent-color-1500:var(--spectrum-blue-1500); - --spectrum-accent-color-1600:var(--spectrum-blue-1600); - --spectrum-informative-color-100:var(--spectrum-blue-100); - --spectrum-informative-color-200:var(--spectrum-blue-200); - --spectrum-informative-color-300:var(--spectrum-blue-300); - --spectrum-informative-color-400:var(--spectrum-blue-400); - --spectrum-informative-color-500:var(--spectrum-blue-500); - --spectrum-informative-color-600:var(--spectrum-blue-600); - --spectrum-informative-color-700:var(--spectrum-blue-700); - --spectrum-informative-color-800:var(--spectrum-blue-800); - --spectrum-informative-color-900:var(--spectrum-blue-900); - --spectrum-informative-color-1000:var(--spectrum-blue-1000); - --spectrum-informative-color-1100:var(--spectrum-blue-1100); - --spectrum-informative-color-1200:var(--spectrum-blue-1200); - --spectrum-informative-color-1300:var(--spectrum-blue-1300); - --spectrum-informative-color-1400:var(--spectrum-blue-1400); - --spectrum-informative-color-1500:var(--spectrum-blue-1500); - --spectrum-informative-color-1600:var(--spectrum-blue-1600); - --spectrum-negative-color-100:var(--spectrum-red-100); - --spectrum-negative-color-200:var(--spectrum-red-200); - --spectrum-negative-color-300:var(--spectrum-red-300); - --spectrum-negative-color-400:var(--spectrum-red-400); - --spectrum-negative-color-500:var(--spectrum-red-500); - --spectrum-negative-color-600:var(--spectrum-red-600); - --spectrum-negative-color-700:var(--spectrum-red-700); - --spectrum-negative-color-800:var(--spectrum-red-800); - --spectrum-negative-color-900:var(--spectrum-red-900); - --spectrum-negative-color-1000:var(--spectrum-red-1000); - --spectrum-negative-color-1100:var(--spectrum-red-1100); - --spectrum-negative-color-1200:var(--spectrum-red-1200); - --spectrum-negative-color-1300:var(--spectrum-red-1300); - --spectrum-negative-color-1400:var(--spectrum-red-1400); - --spectrum-negative-color-1500:var(--spectrum-red-1500); - --spectrum-negative-color-1600:var(--spectrum-red-1600); - --spectrum-notice-color-100:var(--spectrum-orange-100); - --spectrum-notice-color-200:var(--spectrum-orange-200); - --spectrum-notice-color-300:var(--spectrum-orange-300); - --spectrum-notice-color-400:var(--spectrum-orange-400); - --spectrum-notice-color-500:var(--spectrum-orange-500); - --spectrum-notice-color-600:var(--spectrum-orange-600); - --spectrum-notice-color-700:var(--spectrum-orange-700); - --spectrum-notice-color-800:var(--spectrum-orange-800); - --spectrum-notice-color-900:var(--spectrum-orange-900); - --spectrum-notice-color-1000:var(--spectrum-orange-1000); - --spectrum-notice-color-1100:var(--spectrum-orange-1100); - --spectrum-notice-color-1200:var(--spectrum-orange-1200); - --spectrum-notice-color-1300:var(--spectrum-orange-1300); - --spectrum-notice-color-1400:var(--spectrum-orange-1400); - --spectrum-notice-color-1500:var(--spectrum-orange-1500); - --spectrum-notice-color-1600:var(--spectrum-orange-1600); - --spectrum-positive-color-100:var(--spectrum-green-100); - --spectrum-positive-color-200:var(--spectrum-green-200); - --spectrum-positive-color-300:var(--spectrum-green-300); - --spectrum-positive-color-400:var(--spectrum-green-400); - --spectrum-positive-color-500:var(--spectrum-green-500); - --spectrum-positive-color-600:var(--spectrum-green-600); - --spectrum-positive-color-700:var(--spectrum-green-700); - --spectrum-positive-color-800:var(--spectrum-green-800); - --spectrum-positive-color-900:var(--spectrum-green-900); - --spectrum-positive-color-1000:var(--spectrum-green-1000); - --spectrum-positive-color-1100:var(--spectrum-green-1100); - --spectrum-positive-color-1200:var(--spectrum-green-1200); - --spectrum-positive-color-1300:var(--spectrum-green-1300); - --spectrum-positive-color-1400:var(--spectrum-green-1400); - --spectrum-positive-color-1500:var(--spectrum-green-1500); - --spectrum-positive-color-1600:var(--spectrum-green-1600); - --spectrum-negative-subdued-background-color-default:var(--spectrum-negative-color-200); - --spectrum-negative-subdued-background-color-hover:var(--spectrum-negative-color-300); - --spectrum-negative-subdued-background-color-down:var(--spectrum-negative-color-300); - --spectrum-negative-subdued-background-color-key-focus:var(--spectrum-negative-color-300); - --spectrum-default-font-family:var(--spectrum-sans-serif-font-family); - --spectrum-sans-serif-font-family:Adobe Clean; - --spectrum-serif-font-family:Adobe Clean Serif; - --spectrum-cjk-font-family:Adobe Clean Han; - --spectrum-light-font-weight:300; - --spectrum-regular-font-weight:400; - --spectrum-medium-font-weight:500; - --spectrum-bold-font-weight:700; - --spectrum-extra-bold-font-weight:800; - --spectrum-black-font-weight:900; - --spectrum-italic-font-style:italic; - --spectrum-default-font-style:normal; - --spectrum-line-height-100:1.3; - --spectrum-line-height-200:1.5; - --spectrum-cjk-line-height-100:1.5; - --spectrum-cjk-line-height-200:1.7; - --spectrum-cjk-letter-spacing:0.05em; - --spectrum-heading-sans-serif-font-family:var(--spectrum-sans-serif-font-family); - --spectrum-heading-serif-font-family:var(--spectrum-serif-font-family); - --spectrum-heading-cjk-font-family:var(--spectrum-cjk-font-family); - --spectrum-heading-sans-serif-light-font-weight:var(--spectrum-light-font-weight); - --spectrum-heading-sans-serif-light-font-style:var(--spectrum-default-font-style); - --spectrum-heading-serif-light-font-weight:var(--spectrum-regular-font-weight); - --spectrum-heading-serif-light-font-style:var(--spectrum-default-font-style); - --spectrum-heading-cjk-light-font-weight:var(--spectrum-light-font-weight); - --spectrum-heading-cjk-light-font-style:var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-font-style:var(--spectrum-default-font-style); - --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-style:var(--spectrum-default-font-style); - --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); - --spectrum-heading-cjk-font-style:var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-heavy-font-style:var(--spectrum-default-font-style); - --spectrum-heading-serif-heavy-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-heavy-font-style:var(--spectrum-default-font-style); - --spectrum-heading-cjk-heavy-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-font-style:var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); - --spectrum-heading-serif-light-strong-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-serif-light-strong-font-style:var(--spectrum-default-font-style); - --spectrum-heading-cjk-light-strong-font-weight:var(--spectrum-extra-bold-font-weight); - --spectrum-heading-cjk-light-strong-font-style:var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-strong-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-strong-font-style:var(--spectrum-default-font-style); - --spectrum-heading-serif-strong-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-strong-font-style:var(--spectrum-default-font-style); - --spectrum-heading-cjk-strong-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-cjk-strong-font-style:var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-strong-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-heavy-strong-font-style:var(--spectrum-default-font-style); - --spectrum-heading-serif-heavy-strong-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-heavy-strong-font-style:var(--spectrum-default-font-style); - --spectrum-heading-cjk-heavy-strong-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-strong-font-style:var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-emphasized-font-weight:var(--spectrum-light-font-weight); - --spectrum-heading-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-heading-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); - --spectrum-heading-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-heading-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); - --spectrum-heading-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-serif-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-heading-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-cjk-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-heavy-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-heading-serif-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-heavy-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-heading-cjk-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-heading-serif-light-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-heading-cjk-light-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); - --spectrum-heading-cjk-light-strong-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-heading-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-heading-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-heading-serif-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-heavy-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-heading-cjk-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-strong-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-heading-size-xxxl:var(--spectrum-font-size-1300); - --spectrum-heading-size-xxl:var(--spectrum-font-size-1100); - --spectrum-heading-size-xl:var(--spectrum-font-size-900); - --spectrum-heading-size-l:var(--spectrum-font-size-700); - --spectrum-heading-size-m:var(--spectrum-font-size-500); - --spectrum-heading-size-s:var(--spectrum-font-size-300); - --spectrum-heading-size-xs:var(--spectrum-font-size-200); - --spectrum-heading-size-xxs:var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl:var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl:var(--spectrum-font-size-900); - --spectrum-heading-cjk-size-xl:var(--spectrum-font-size-800); - --spectrum-heading-cjk-size-l:var(--spectrum-font-size-600); - --spectrum-heading-cjk-size-m:var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s:var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs:var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs:var(--spectrum-font-size-100); - --spectrum-heading-line-height:var(--spectrum-line-height-100); - --spectrum-heading-cjk-line-height:var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier:0.88888889; - --spectrum-heading-margin-bottom-multiplier:0.25; - --spectrum-heading-color:var(--spectrum-gray-900); - --spectrum-body-sans-serif-font-family:var(--spectrum-sans-serif-font-family); - --spectrum-body-serif-font-family:var(--spectrum-serif-font-family); - --spectrum-body-cjk-font-family:var(--spectrum-cjk-font-family); - --spectrum-body-sans-serif-font-weight:var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-font-style:var(--spectrum-default-font-style); - --spectrum-body-serif-font-weight:var(--spectrum-regular-font-weight); - --spectrum-body-serif-font-style:var(--spectrum-default-font-style); - --spectrum-body-cjk-font-weight:var(--spectrum-regular-font-weight); - --spectrum-body-cjk-font-style:var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-font-weight:var(--spectrum-bold-font-weight); - --spectrum-body-sans-serif-strong-font-style:var(--spectrum-default-font-style); - --spectrum-body-serif-strong-font-weight:var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-font-style:var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight:var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-font-style:var(--spectrum-default-font-style); - --spectrum-body-sans-serif-emphasized-font-weight:var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-body-serif-emphasized-font-weight:var(--spectrum-regular-font-weight); - --spectrum-body-serif-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-body-cjk-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); - --spectrum-body-cjk-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-body-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-body-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-body-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-body-size-xxxl:var(--spectrum-font-size-600); - --spectrum-body-size-xxl:var(--spectrum-font-size-500); - --spectrum-body-size-xl:var(--spectrum-font-size-400); - --spectrum-body-size-l:var(--spectrum-font-size-300); - --spectrum-body-size-m:var(--spectrum-font-size-200); - --spectrum-body-size-s:var(--spectrum-font-size-100); - --spectrum-body-size-xs:var(--spectrum-font-size-75); - --spectrum-body-line-height:var(--spectrum-line-height-200); - --spectrum-body-cjk-line-height:var(--spectrum-cjk-line-height-200); - --spectrum-body-margin-multiplier:0.75; - --spectrum-body-color:var(--spectrum-gray-800); - --spectrum-detail-sans-serif-font-family:var(--spectrum-sans-serif-font-family); - --spectrum-detail-serif-font-family:var(--spectrum-serif-font-family); - --spectrum-detail-cjk-font-family:var(--spectrum-cjk-font-family); - --spectrum-detail-sans-serif-font-weight:var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-font-style:var(--spectrum-default-font-style); - --spectrum-detail-serif-font-weight:var(--spectrum-bold-font-weight); - --spectrum-detail-serif-font-style:var(--spectrum-default-font-style); - --spectrum-detail-cjk-font-weight:var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-font-style:var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-font-weight:var(--spectrum-regular-font-weight); - --spectrum-detail-sans-serif-light-font-style:var(--spectrum-default-font-style); - --spectrum-detail-serif-light-font-weight:var(--spectrum-regular-font-weight); - --spectrum-detail-serif-light-font-style:var(--spectrum-default-font-style); - --spectrum-detail-cjk-light-font-weight:var(--spectrum-light-font-weight); - --spectrum-detail-cjk-light-font-style:var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-font-weight:var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-strong-font-style:var(--spectrum-default-font-style); - --spectrum-detail-serif-strong-font-weight:var(--spectrum-bold-font-weight); - --spectrum-detail-serif-strong-font-style:var(--spectrum-default-font-style); - --spectrum-detail-cjk-strong-font-weight:var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-font-style:var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-font-weight:var(--spectrum-regular-font-weight); - --spectrum-detail-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); - --spectrum-detail-serif-light-strong-font-weight:var(--spectrum-regular-font-weight); - --spectrum-detail-serif-light-strong-font-style:var(--spectrum-default-font-style); - --spectrum-detail-cjk-light-strong-font-weight:var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-light-strong-font-style:var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-detail-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-detail-serif-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-detail-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-detail-cjk-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); - --spectrum-detail-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-detail-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); - --spectrum-detail-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-detail-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); - --spectrum-detail-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-detail-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-detail-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-detail-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); - --spectrum-detail-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-detail-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); - --spectrum-detail-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-detail-cjk-light-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-light-strong-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-detail-size-xl:var(--spectrum-font-size-200); - --spectrum-detail-size-l:var(--spectrum-font-size-100); - --spectrum-detail-size-m:var(--spectrum-font-size-75); - --spectrum-detail-size-s:var(--spectrum-font-size-50); - --spectrum-detail-line-height:var(--spectrum-line-height-100); - --spectrum-detail-cjk-line-height:var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier:0.88888889; - --spectrum-detail-margin-bottom-multiplier:0.25; - --spectrum-detail-letter-spacing:0.06em; - --spectrum-detail-sans-serif-text-transform:uppercase; - --spectrum-detail-serif-text-transform:uppercase; - --spectrum-detail-color:var(--spectrum-gray-900); - --spectrum-code-font-family:Source Code Pro; - --spectrum-code-cjk-font-family:var(--spectrum-code-font-family); - --spectrum-code-font-weight:var(--spectrum-regular-font-weight); - --spectrum-code-font-style:var(--spectrum-default-font-style); - --spectrum-code-cjk-font-weight:var(--spectrum-regular-font-weight); - --spectrum-code-cjk-font-style:var(--spectrum-default-font-style); - --spectrum-code-strong-font-weight:var(--spectrum-bold-font-weight); - --spectrum-code-strong-font-style:var(--spectrum-default-font-style); - --spectrum-code-cjk-strong-font-weight:var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-font-style:var(--spectrum-default-font-style); - --spectrum-code-emphasized-font-weight:var(--spectrum-regular-font-weight); - --spectrum-code-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-code-cjk-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-code-cjk-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-code-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-code-strong-emphasized-font-style:var(--spectrum-italic-font-style); - --spectrum-code-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); - --spectrum-code-size-xl:var(--spectrum-font-size-400); - --spectrum-code-size-l:var(--spectrum-font-size-300); - --spectrum-code-size-m:var(--spectrum-font-size-200); - --spectrum-code-size-s:var(--spectrum-font-size-100); - --spectrum-code-size-xs:var(--spectrum-font-size-75); - --spectrum-code-line-height:var(--spectrum-line-height-200); - --spectrum-code-cjk-line-height:var(--spectrum-cjk-line-height-200); - --spectrum-code-color:var(--spectrum-gray-800); - --system:spectrum; - - --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0:0ms; - --spectrum-animation-duration-100:130ms; - --spectrum-animation-duration-200:160ms; - --spectrum-animation-duration-300:190ms; - --spectrum-animation-duration-400:220ms; - --spectrum-animation-duration-500:250ms; - --spectrum-animation-duration-600:300ms; - --spectrum-animation-duration-700:350ms; - --spectrum-animation-duration-800:400ms; - --spectrum-animation-duration-900:450ms; - --spectrum-animation-duration-1000:500ms; - --spectrum-animation-duration-2000:1000ms; - --spectrum-animation-duration-4000:2000ms; - --spectrum-animation-duration-6000:3000ms; - --spectrum-animation-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in:cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1); - - --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; - --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; - --spectrum-serif-font:var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack:"Source Code Pro", Monaco, monospace; - - --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font:var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color:rgb(15, 121, 125); - --spectrum-docs-static-black-background-color:rgb(181, 209, 211); -} - -.spectrum--large{ - --spectrum-workflow-icon-size-50:18px; - --spectrum-workflow-icon-size-75:20px; - --spectrum-workflow-icon-size-100:22px; - --spectrum-workflow-icon-size-200:24px; - --spectrum-workflow-icon-size-300:28px; - --spectrum-arrow-icon-size-75:12px; - --spectrum-arrow-icon-size-100:14px; - --spectrum-arrow-icon-size-200:16px; - --spectrum-arrow-icon-size-300:16px; - --spectrum-arrow-icon-size-400:18px; - --spectrum-arrow-icon-size-500:22px; - --spectrum-arrow-icon-size-600:24px; - --spectrum-asterisk-icon-size-100:10px; - --spectrum-asterisk-icon-size-200:12px; - --spectrum-asterisk-icon-size-300:12px; - --spectrum-checkmark-icon-size-50:12px; - --spectrum-checkmark-icon-size-75:12px; - --spectrum-checkmark-icon-size-100:14px; - --spectrum-checkmark-icon-size-200:14px; - --spectrum-checkmark-icon-size-300:16px; - --spectrum-checkmark-icon-size-400:18px; - --spectrum-checkmark-icon-size-500:20px; - --spectrum-checkmark-icon-size-600:24px; - --spectrum-chevron-icon-size-50:8px; - --spectrum-chevron-icon-size-75:12px; - --spectrum-chevron-icon-size-100:14px; - --spectrum-chevron-icon-size-200:14px; - --spectrum-chevron-icon-size-300:16px; - --spectrum-chevron-icon-size-400:18px; - --spectrum-chevron-icon-size-500:20px; - --spectrum-chevron-icon-size-600:24px; - --spectrum-corner-triangle-icon-size-75:6px; - --spectrum-corner-triangle-icon-size-100:7px; - --spectrum-corner-triangle-icon-size-200:8px; - --spectrum-corner-triangle-icon-size-300:8px; - --spectrum-cross-icon-size-75:10px; - --spectrum-cross-icon-size-100:10px; - --spectrum-cross-icon-size-200:12px; - --spectrum-cross-icon-size-300:14px; - --spectrum-cross-icon-size-400:16px; - --spectrum-cross-icon-size-500:16px; - --spectrum-cross-icon-size-600:18px; - --spectrum-dash-icon-size-50:10px; - --spectrum-dash-icon-size-75:10px; - --spectrum-dash-icon-size-100:12px; - --spectrum-dash-icon-size-200:14px; - --spectrum-dash-icon-size-300:16px; - --spectrum-dash-icon-size-400:18px; - --spectrum-dash-icon-size-500:20px; - --spectrum-dash-icon-size-600:22px; - --spectrum-checkbox-control-size-small:16px; - --spectrum-checkbox-control-size-medium:18px; - --spectrum-checkbox-control-size-large:20px; - --spectrum-checkbox-control-size-extra-large:22px; - --spectrum-checkbox-top-to-control-small:7px; - --spectrum-checkbox-top-to-control-medium:11px; - --spectrum-checkbox-top-to-control-large:15px; - --spectrum-checkbox-top-to-control-extra-large:19px; - --spectrum-switch-control-width-small:32px; - --spectrum-switch-control-width-medium:36px; - --spectrum-switch-control-width-large:41px; - --spectrum-switch-control-width-extra-large:46px; - --spectrum-switch-control-height-small:16px; - --spectrum-switch-control-height-medium:18px; - --spectrum-switch-control-height-large:20px; - --spectrum-switch-control-height-extra-large:22px; - --spectrum-switch-top-to-control-small:7px; - --spectrum-switch-top-to-control-medium:11px; - --spectrum-switch-top-to-control-large:15px; - --spectrum-switch-top-to-control-extra-large:19px; - --spectrum-radio-button-control-size-small:16px; - --spectrum-radio-button-control-size-medium:18px; - --spectrum-radio-button-control-size-large:20px; - --spectrum-radio-button-control-size-extra-large:22px; - --spectrum-radio-button-top-to-control-small:7px; - --spectrum-radio-button-top-to-control-medium:11px; - --spectrum-radio-button-top-to-control-large:15px; - --spectrum-radio-button-top-to-control-extra-large:19px; - --spectrum-field-label-text-to-asterisk-small:5px; - --spectrum-field-label-text-to-asterisk-medium:5px; - --spectrum-field-label-text-to-asterisk-large:6px; - --spectrum-field-label-text-to-asterisk-extra-large:6px; - --spectrum-field-label-top-to-asterisk-small:11px; - --spectrum-field-label-top-to-asterisk-medium:15px; - --spectrum-field-label-top-to-asterisk-large:19px; - --spectrum-field-label-top-to-asterisk-extra-large:24px; - --spectrum-field-label-top-margin-medium:5px; - --spectrum-field-label-top-margin-large:6px; - --spectrum-field-label-top-margin-extra-large:6px; - --spectrum-field-label-to-component-quiet-small:-10px; - --spectrum-field-label-to-component-quiet-medium:-10px; - --spectrum-field-label-to-component-quiet-large:-15px; - --spectrum-field-label-to-component-quiet-extra-large:-19px; - --spectrum-help-text-top-to-workflow-icon-small:5px; - --spectrum-help-text-top-to-workflow-icon-medium:4px; - --spectrum-help-text-top-to-workflow-icon-large:8px; - --spectrum-help-text-top-to-workflow-icon-extra-large:11px; - --spectrum-status-light-dot-size-medium:10px; - --spectrum-status-light-dot-size-large:12px; - --spectrum-status-light-dot-size-extra-large:12px; - --spectrum-status-light-top-to-dot-small:11px; - --spectrum-status-light-top-to-dot-medium:15px; - --spectrum-status-light-top-to-dot-large:19px; - --spectrum-status-light-top-to-dot-extra-large:24px; - --spectrum-action-button-edge-to-hold-icon-medium:5px; - --spectrum-action-button-edge-to-hold-icon-large:6px; - --spectrum-action-button-edge-to-hold-icon-extra-large:7px; - --spectrum-tooltip-tip-width:10px; - --spectrum-tooltip-tip-height:5px; - --spectrum-tooltip-maximum-width:200px; - --spectrum-progress-circle-size-small:20px; - --spectrum-progress-circle-size-medium:40px; - --spectrum-progress-circle-size-large:80px; - --spectrum-progress-circle-thickness-small:3px; - --spectrum-progress-circle-thickness-medium:4px; - --spectrum-progress-circle-thickness-large:5px; - --spectrum-toast-height:56px; - --spectrum-toast-maximum-width:420px; - --spectrum-toast-top-to-workflow-icon:17px; - --spectrum-toast-top-to-text:16px; - --spectrum-toast-bottom-to-text:19px; - --spectrum-action-bar-height:56px; - --spectrum-action-bar-top-to-item-counter:16px; - --spectrum-swatch-size-extra-small:20px; - --spectrum-swatch-size-small:30px; - --spectrum-swatch-size-medium:40px; - --spectrum-swatch-size-large:50px; - --spectrum-progress-bar-thickness-small:5px; - --spectrum-progress-bar-thickness-medium:8px; - --spectrum-progress-bar-thickness-large:10px; - --spectrum-progress-bar-thickness-extra-large:13px; - --spectrum-meter-width:240px; - --spectrum-meter-thickness-small:5px; - --spectrum-meter-thickness-large:8px; - --spectrum-tag-top-to-avatar-small:5px; - --spectrum-tag-top-to-avatar-medium:7px; - --spectrum-tag-top-to-avatar-large:11px; - --spectrum-tag-top-to-cross-icon-small:10px; - --spectrum-tag-top-to-cross-icon-medium:15px; - --spectrum-tag-top-to-cross-icon-large:19px; - --spectrum-popover-top-to-content-area:5px; - --spectrum-menu-item-edge-to-content-not-selected-small:24px; - --spectrum-menu-item-edge-to-content-not-selected-medium:42px; - --spectrum-menu-item-edge-to-content-not-selected-large:47px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large:54px; - --spectrum-menu-item-top-to-disclosure-icon-small:9px; - --spectrum-menu-item-top-to-disclosure-icon-medium:13px; - --spectrum-menu-item-top-to-disclosure-icon-large:17px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large:22px; - --spectrum-menu-item-top-to-selected-icon-small:9px; - --spectrum-menu-item-top-to-selected-icon-medium:13px; - --spectrum-menu-item-top-to-selected-icon-large:17px; - --spectrum-menu-item-top-to-selected-icon-extra-large:22px; - --spectrum-slider-control-height-small:18px; - --spectrum-slider-control-height-medium:20px; - --spectrum-slider-control-height-large:22px; - --spectrum-slider-control-height-extra-large:26px; - --spectrum-slider-handle-size-small:18px; - --spectrum-slider-handle-size-medium:20px; - --spectrum-slider-handle-size-large:22px; - --spectrum-slider-handle-size-extra-large:26px; - --spectrum-slider-handle-border-width-down-small:7px; - --spectrum-slider-handle-border-width-down-medium:8px; - --spectrum-slider-handle-border-width-down-large:9px; - --spectrum-slider-handle-border-width-down-extra-large:11px; - --spectrum-slider-bottom-to-handle-small:6px; - --spectrum-slider-bottom-to-handle-medium:10px; - --spectrum-slider-bottom-to-handle-large:14px; - --spectrum-slider-bottom-to-handle-extra-large:17px; - --spectrum-slider-control-to-field-label-small:6px; - --spectrum-slider-control-to-field-label-medium:10px; - --spectrum-slider-control-to-field-label-large:14px; - --spectrum-slider-control-to-field-label-extra-large:17px; - --spectrum-picker-visual-to-disclosure-icon-small:9px; - --spectrum-picker-visual-to-disclosure-icon-medium:10px; - --spectrum-picker-visual-to-disclosure-icon-large:11px; - --spectrum-picker-visual-to-disclosure-icon-extra-large:13px; - --spectrum-text-area-minimum-width:140px; - --spectrum-text-area-minimum-height:70px; - --spectrum-combo-box-visual-to-field-button-small:9px; - --spectrum-combo-box-visual-to-field-button-medium:10px; - --spectrum-combo-box-visual-to-field-button-large:11px; - --spectrum-combo-box-visual-to-field-button-extra-large:13px; - --spectrum-thumbnail-size-50:20px; - --spectrum-thumbnail-size-75:22px; - --spectrum-thumbnail-size-100:26px; - --spectrum-thumbnail-size-200:28px; - --spectrum-thumbnail-size-300:32px; - --spectrum-thumbnail-size-400:36px; - --spectrum-thumbnail-size-500:40px; - --spectrum-thumbnail-size-600:46px; - --spectrum-thumbnail-size-700:50px; - --spectrum-thumbnail-size-800:55px; - --spectrum-thumbnail-size-900:62px; - --spectrum-thumbnail-size-1000:70px; - --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs); - --spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size:10px; - --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size:var(--spectrum-body-size-xs); - --spectrum-breadcrumbs-height-multiline:84px; - --spectrum-breadcrumbs-top-to-text:17px; - --spectrum-breadcrumbs-top-to-text-compact:16px; - --spectrum-breadcrumbs-top-to-text-multiline:15px; - --spectrum-breadcrumbs-bottom-to-text:19px; - --spectrum-breadcrumbs-bottom-to-text-compact:19px; - --spectrum-breadcrumbs-bottom-to-text-multiline:10px; - --spectrum-breadcrumbs-start-edge-to-text:9px; - --spectrum-breadcrumbs-top-text-to-bottom-text:11px; - --spectrum-breadcrumbs-top-to-separator-icon:25px; - --spectrum-breadcrumbs-top-to-separator-icon-compact:23px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline:20px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:15px; - --spectrum-breadcrumbs-top-to-truncated-menu:10px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact:5px; - --spectrum-avatar-size-50:20px; - --spectrum-avatar-size-75:22px; - --spectrum-avatar-size-100:26px; - --spectrum-avatar-size-200:28px; - --spectrum-avatar-size-300:32px; - --spectrum-avatar-size-400:36px; - --spectrum-avatar-size-500:40px; - --spectrum-avatar-size-600:46px; - --spectrum-avatar-size-700:50px; - --spectrum-alert-banner-minimum-height:64px; - --spectrum-alert-banner-width:680px; - --spectrum-alert-banner-top-to-workflow-icon:21px; - --spectrum-alert-banner-top-to-text:21px; - --spectrum-alert-banner-bottom-to-text:22px; - --spectrum-rating-indicator-width:22px; - --spectrum-rating-indicator-to-icon:5px; - --spectrum-color-area-width:240px; - --spectrum-color-area-minimum-width:80px; - --spectrum-color-area-height:240px; - --spectrum-color-area-minimum-height:80px; - --spectrum-color-wheel-width:240px; - --spectrum-color-wheel-minimum-width:219px; - --spectrum-color-slider-length:240px; - --spectrum-color-slider-minimum-length:100px; - --spectrum-illustrated-message-title-size:var(--spectrum-heading-size-s); - --spectrum-illustrated-message-cjk-title-size:var(--spectrum-heading-cjk-size-s); - --spectrum-illustrated-message-body-size:var(--spectrum-body-size-xs); - --spectrum-coach-mark-width:216px; - --spectrum-coach-mark-minimum-width:216px; - --spectrum-coach-mark-maximum-width:248px; - --spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-300); - --spectrum-coach-mark-pagination-text-to-bottom-edge:22px; - --spectrum-coach-mark-media-height:162px; - --spectrum-coach-mark-media-minimum-height:121px; - --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size:var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs); - --spectrum-accordion-top-to-text-regular-small:7px; - --spectrum-accordion-small-top-to-text-spacious:12px; - --spectrum-accordion-top-to-text-regular-medium:9px; - --spectrum-accordion-top-to-text-spacious-medium:14px; - --spectrum-accordion-top-to-text-compact-large:7px; - --spectrum-accordion-top-to-text-regular-large:12px; - --spectrum-accordion-top-to-text-spacious-large:14px; - --spectrum-accordion-top-to-text-compact-extra-large:7px; - --spectrum-accordion-top-to-text-regular-extra-large:12px; - --spectrum-accordion-top-to-text-spacious-extra-large:14px; - --spectrum-accordion-bottom-to-text-compact-small:4px; - --spectrum-accordion-bottom-to-text-regular-small:9px; - --spectrum-accordion-bottom-to-text-spacious-small:14px; - --spectrum-accordion-bottom-to-text-compact-medium:8px; - --spectrum-accordion-bottom-to-text-regular-medium:13px; - --spectrum-accordion-bottom-to-text-spacious-medium:18px; - --spectrum-accordion-bottom-to-text-compact-large:9px; - --spectrum-accordion-bottom-to-text-regular-large:14px; - --spectrum-accordion-bottom-to-text-spacious-large:19px; - --spectrum-accordion-bottom-to-text-compact-extra-large:10px; - --spectrum-accordion-bottom-to-text-regular-extra-large:15px; - --spectrum-accordion-bottom-to-text-spacious-extra-large:21px; - --spectrum-accordion-minimum-width:250px; - --spectrum-accordion-content-area-top-to-content:10px; - --spectrum-accordion-content-area-bottom-to-content:20px; - --spectrum-color-handle-size:20px; - --spectrum-color-handle-size-key-focus:40px; - --spectrum-table-column-header-row-top-to-text-small:10px; - --spectrum-table-column-header-row-top-to-text-medium:9px; - --spectrum-table-column-header-row-top-to-text-large:13px; - --spectrum-table-column-header-row-top-to-text-extra-large:16px; - --spectrum-table-column-header-row-bottom-to-text-small:11px; - --spectrum-table-column-header-row-bottom-to-text-medium:10px; - --spectrum-table-column-header-row-bottom-to-text-large:13px; - --spectrum-table-column-header-row-bottom-to-text-extra-large:17px; - --spectrum-table-row-height-small-regular:40px; - --spectrum-table-row-height-medium-regular:50px; - --spectrum-table-row-height-large-regular:60px; - --spectrum-table-row-height-extra-large-regular:70px; - --spectrum-table-row-height-small-spacious:50px; - --spectrum-table-row-height-medium-spacious:60px; - --spectrum-table-row-height-large-spacious:70px; - --spectrum-table-row-height-extra-large-spacious:80px; - --spectrum-table-row-top-to-text-small-regular:10px; - --spectrum-table-row-top-to-text-medium-regular:14px; - --spectrum-table-row-top-to-text-large-regular:18px; - --spectrum-table-row-top-to-text-extra-large-regular:21px; - --spectrum-table-row-bottom-to-text-small-regular:11px; - --spectrum-table-row-bottom-to-text-medium-regular:15px; - --spectrum-table-row-bottom-to-text-large-regular:18px; - --spectrum-table-row-bottom-to-text-extra-large-regular:22px; - --spectrum-table-row-top-to-text-small-spacious:15px; - --spectrum-table-row-top-to-text-medium-spacious:18px; - --spectrum-table-row-top-to-text-large-spacious:23px; - --spectrum-table-row-top-to-text-extra-large-spacious:26px; - --spectrum-table-row-bottom-to-text-small-spacious:16px; - --spectrum-table-row-bottom-to-text-medium-spacious:18px; - --spectrum-table-row-bottom-to-text-large-spacious:23px; - --spectrum-table-row-bottom-to-text-extra-large-spacious:27px; - --spectrum-table-checkbox-to-text:30px; - --spectrum-table-header-row-checkbox-to-top-small:14px; - --spectrum-table-header-row-checkbox-to-top-medium:13px; - --spectrum-table-header-row-checkbox-to-top-large:17px; - --spectrum-table-header-row-checkbox-to-top-extra-large:21px; - --spectrum-table-row-checkbox-to-top-small-compact:9px; - --spectrum-table-row-checkbox-to-top-small-regular:14px; - --spectrum-table-row-checkbox-to-top-small-spacious:19px; - --spectrum-table-row-checkbox-to-top-medium-compact:13px; - --spectrum-table-row-checkbox-to-top-medium-regular:18px; - --spectrum-table-row-checkbox-to-top-medium-spacious:23px; - --spectrum-table-row-checkbox-to-top-large-compact:17px; - --spectrum-table-row-checkbox-to-top-large-regular:22px; - --spectrum-table-row-checkbox-to-top-large-spacious:27px; - --spectrum-table-row-checkbox-to-top-extra-large-compact:21px; - --spectrum-table-row-checkbox-to-top-extra-large-regular:26px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious:31px; - --spectrum-table-section-header-row-height-small:30px; - --spectrum-table-section-header-row-height-medium:40px; - --spectrum-table-section-header-row-height-large:50px; - --spectrum-table-section-header-row-height-extra-large:60px; - --spectrum-table-thumbnail-to-top-minimum-small-compact:5px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact:6px; - --spectrum-table-thumbnail-to-top-minimum-large-compact:9px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact:10px; - --spectrum-table-thumbnail-to-top-minimum-small-regular:6px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular:9px; - --spectrum-table-thumbnail-to-top-minimum-large-regular:10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular:10px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious:9px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious:10px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious:10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:12px; - --spectrum-tab-item-to-tab-item-horizontal-small:27px; - --spectrum-tab-item-to-tab-item-horizontal-medium:30px; - --spectrum-tab-item-to-tab-item-horizontal-large:33px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large:36px; - --spectrum-tab-item-to-tab-item-vertical-small:5px; - --spectrum-tab-item-to-tab-item-vertical-medium:5px; - --spectrum-tab-item-to-tab-item-vertical-large:6px; - --spectrum-tab-item-to-tab-item-vertical-extra-large:6px; - --spectrum-tab-item-start-to-edge-small:13px; - --spectrum-tab-item-start-to-edge-medium:15px; - --spectrum-tab-item-start-to-edge-large:17px; - --spectrum-tab-item-start-to-edge-extra-large:19px; - --spectrum-tab-item-top-to-text-small:14px; - --spectrum-tab-item-bottom-to-text-small:15px; - --spectrum-tab-item-top-to-text-medium:18px; - --spectrum-tab-item-bottom-to-text-medium:19px; - --spectrum-tab-item-top-to-text-large:22px; - --spectrum-tab-item-bottom-to-text-large:22px; - --spectrum-tab-item-top-to-text-extra-large:25px; - --spectrum-tab-item-bottom-to-text-extra-large:25px; - --spectrum-tab-item-top-to-text-compact-small:5px; - --spectrum-tab-item-bottom-to-text-compact-small:6px; - --spectrum-tab-item-top-to-text-compact-medium:9px; - --spectrum-tab-item-bottom-to-text-compact-medium:10px; - --spectrum-tab-item-top-to-text-compact-large:12px; - --spectrum-tab-item-bottom-to-text-compact-large:14px; - --spectrum-tab-item-top-to-text-compact-extra-large:15px; - --spectrum-tab-item-bottom-to-text-compact-extra-large:17px; - --spectrum-tab-item-top-to-workflow-icon-small:15px; - --spectrum-tab-item-top-to-workflow-icon-medium:19px; - --spectrum-tab-item-top-to-workflow-icon-large:23px; - --spectrum-tab-item-top-to-workflow-icon-extra-large:26px; - --spectrum-tab-item-top-to-workflow-icon-compact-small:5px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium:9px; - --spectrum-tab-item-top-to-workflow-icon-compact-large:13px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large:16px; - --spectrum-tab-item-focus-indicator-gap-small:9px; - --spectrum-tab-item-focus-indicator-gap-medium:10px; - --spectrum-tab-item-focus-indicator-gap-large:11px; - --spectrum-tab-item-focus-indicator-gap-extra-large:12px; - --spectrum-side-navigation-width:240px; - --spectrum-side-navigation-minimum-width:200px; - --spectrum-side-navigation-maximum-width:300px; - --spectrum-side-navigation-second-level-edge-to-text:30px; - --spectrum-side-navigation-third-level-edge-to-text:45px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text:62px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text:77px; - --spectrum-side-navigation-item-to-item:5px; - --spectrum-side-navigation-item-to-header:30px; - --spectrum-side-navigation-header-to-item:10px; - --spectrum-side-navigation-bottom-to-text:10px; - --spectrum-tray-top-to-content-area:5px; - --spectrum-accordion-top-to-text-spacious-small:12px; - --spectrum-corner-radius-100:5px; - --spectrum-corner-radius-200:10px; - --spectrum-drop-shadow-y:2px; - --spectrum-drop-shadow-blur:6px; - --spectrum-text-to-visual-50:8px; - --spectrum-text-to-visual-75:9px; - --spectrum-text-to-visual-100:10px; - --spectrum-text-to-visual-200:11px; - --spectrum-text-to-visual-300:13px; - --spectrum-text-to-control-75:11px; - --spectrum-text-to-control-100:13px; - --spectrum-text-to-control-200:14px; - --spectrum-text-to-control-300:16px; - --spectrum-component-height-50:26px; - --spectrum-component-height-75:30px; - --spectrum-component-height-100:40px; - --spectrum-component-height-200:50px; - --spectrum-component-height-300:60px; - --spectrum-component-height-400:70px; - --spectrum-component-height-500:80px; - --spectrum-component-pill-edge-to-visual-75:13px; - --spectrum-component-pill-edge-to-visual-100:17px; - --spectrum-component-pill-edge-to-visual-200:22px; - --spectrum-component-pill-edge-to-visual-300:27px; - --spectrum-component-pill-edge-to-visual-only-75:5px; - --spectrum-component-pill-edge-to-visual-only-100:9px; - --spectrum-component-pill-edge-to-visual-only-200:13px; - --spectrum-component-pill-edge-to-visual-only-300:16px; - --spectrum-component-pill-edge-to-text-75:15px; - --spectrum-component-pill-edge-to-text-100:20px; - --spectrum-component-pill-edge-to-text-200:25px; - --spectrum-component-pill-edge-to-text-300:30px; - --spectrum-component-edge-to-visual-50:7px; - --spectrum-component-edge-to-visual-75:9px; - --spectrum-component-edge-to-visual-100:12px; - --spectrum-component-edge-to-visual-200:16px; - --spectrum-component-edge-to-visual-300:19px; - --spectrum-component-edge-to-visual-only-50:4px; - --spectrum-component-edge-to-visual-only-75:5px; - --spectrum-component-edge-to-visual-only-100:9px; - --spectrum-component-edge-to-visual-only-200:13px; - --spectrum-component-edge-to-visual-only-300:16px; - --spectrum-component-edge-to-text-50:10px; - --spectrum-component-edge-to-text-75:11px; - --spectrum-component-edge-to-text-100:15px; - --spectrum-component-edge-to-text-200:19px; - --spectrum-component-edge-to-text-300:22px; - --spectrum-component-top-to-workflow-icon-50:4px; - --spectrum-component-top-to-workflow-icon-75:5px; - --spectrum-component-top-to-workflow-icon-100:9px; - --spectrum-component-top-to-workflow-icon-200:13px; - --spectrum-component-top-to-workflow-icon-300:16px; - --spectrum-component-top-to-text-50:4px; - --spectrum-component-top-to-text-75:5px; - --spectrum-component-top-to-text-100:8px; - --spectrum-component-top-to-text-200:12px; - --spectrum-component-top-to-text-300:15px; - --spectrum-component-bottom-to-text-50:6px; - --spectrum-component-bottom-to-text-75:6px; - --spectrum-component-bottom-to-text-100:11px; - --spectrum-component-bottom-to-text-200:14px; - --spectrum-component-bottom-to-text-300:18px; - --spectrum-component-to-menu-small:7px; - --spectrum-component-to-menu-medium:8px; - --spectrum-component-to-menu-large:9px; - --spectrum-component-to-menu-extra-large:10px; - --spectrum-field-edge-to-disclosure-icon-75:9px; - --spectrum-field-edge-to-disclosure-icon-100:13px; - --spectrum-field-edge-to-disclosure-icon-200:17px; - --spectrum-field-edge-to-disclosure-icon-300:22px; - --spectrum-field-end-edge-to-disclosure-icon-75:9px; - --spectrum-field-end-edge-to-disclosure-icon-100:13px; - --spectrum-field-end-edge-to-disclosure-icon-200:17px; - --spectrum-field-end-edge-to-disclosure-icon-300:22px; - --spectrum-field-top-to-disclosure-icon-75:9px; - --spectrum-field-top-to-disclosure-icon-100:13px; - --spectrum-field-top-to-disclosure-icon-200:17px; - --spectrum-field-top-to-disclosure-icon-300:22px; - --spectrum-field-top-to-alert-icon-small:5px; - --spectrum-field-top-to-alert-icon-medium:9px; - --spectrum-field-top-to-alert-icon-large:13px; - --spectrum-field-top-to-alert-icon-extra-large:16px; - --spectrum-field-top-to-validation-icon-small:9px; - --spectrum-field-top-to-validation-icon-medium:13px; - --spectrum-field-top-to-validation-icon-large:17px; - --spectrum-field-top-to-validation-icon-extra-large:22px; - --spectrum-field-top-to-progress-circle-small:7px; - --spectrum-field-top-to-progress-circle-medium:12px; - --spectrum-field-top-to-progress-circle-large:17px; - --spectrum-field-top-to-progress-circle-extra-large:22px; - --spectrum-field-edge-to-alert-icon-small:11px; - --spectrum-field-edge-to-alert-icon-medium:15px; - --spectrum-field-edge-to-alert-icon-large:19px; - --spectrum-field-edge-to-alert-icon-extra-large:22px; - --spectrum-field-edge-to-validation-icon-small:11px; - --spectrum-field-edge-to-validation-icon-medium:15px; - --spectrum-field-edge-to-validation-icon-large:19px; - --spectrum-field-edge-to-validation-icon-extra-large:22px; - --spectrum-field-text-to-alert-icon-small:10px; - --spectrum-field-text-to-alert-icon-medium:15px; - --spectrum-field-text-to-alert-icon-large:19px; - --spectrum-field-text-to-alert-icon-extra-large:22px; - --spectrum-field-text-to-validation-icon-small:10px; - --spectrum-field-text-to-validation-icon-medium:15px; - --spectrum-field-text-to-validation-icon-large:19px; - --spectrum-field-text-to-validation-icon-extra-large:22px; - --spectrum-field-width:240px; - --spectrum-character-count-to-field-quiet-small:-4px; - --spectrum-character-count-to-field-quiet-medium:-4px; - --spectrum-character-count-to-field-quiet-large:-4px; - --spectrum-character-count-to-field-quiet-extra-large:-5px; - --spectrum-side-label-character-count-to-field:15px; - --spectrum-side-label-character-count-top-margin-small:5px; - --spectrum-side-label-character-count-top-margin-medium:10px; - --spectrum-side-label-character-count-top-margin-large:14px; - --spectrum-side-label-character-count-top-margin-extra-large:18px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small:9px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px; - --spectrum-navigational-indicator-top-to-back-icon-small:7px; - --spectrum-navigational-indicator-top-to-back-icon-medium:12px; - --spectrum-navigational-indicator-top-to-back-icon-large:16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large:19px; - --spectrum-color-control-track-width:30px; - --spectrum-font-size-50:13px; - --spectrum-font-size-75:15px; - --spectrum-font-size-100:17px; - --spectrum-font-size-200:19px; - --spectrum-font-size-300:22px; - --spectrum-font-size-400:24px; - --spectrum-font-size-500:27px; - --spectrum-font-size-600:31px; - --spectrum-font-size-700:34px; - --spectrum-font-size-800:39px; - --spectrum-font-size-900:44px; - --spectrum-font-size-1000:49px; - --spectrum-font-size-1100:55px; - --spectrum-font-size-1200:62px; - --spectrum-font-size-1300:70px; - --spectrum-slider-tick-mark-height:13px; - --spectrum-slider-ramp-track-height:20px; - - --spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; - --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; - --spectrum-colorwheel-colorarea-container-size:182px; - - --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px; - - --spectrum-menu-item-checkmark-height-small:12px; - --spectrum-menu-item-checkmark-height-medium:14px; - --spectrum-menu-item-checkmark-height-large:16px; - --spectrum-menu-item-checkmark-height-extra-large:16px; - - --spectrum-menu-item-checkmark-width-small:12px; - --spectrum-menu-item-checkmark-width-medium:14px; - --spectrum-menu-item-checkmark-width-large:16px; - --spectrum-menu-item-checkmark-width-extra-large:16px; - - --spectrum-rating-icon-spacing:var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small:6px; - --spectrum-button-bottom-to-text-small:5px; - --spectrum-button-top-to-text-medium:9px; - --spectrum-button-bottom-to-text-medium:10px; - --spectrum-button-top-to-text-large:12px; - --spectrum-button-bottom-to-text-large:13px; - --spectrum-button-top-to-text-extra-large:16px; - --spectrum-button-bottom-to-text-extra-large:17px; - - --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200); - - --spectrum-alert-dialog-padding:var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap:8px; - --spectrum-coach-indicator-ring-diameter:20px; - --spectrum-coach-indicator-quiet-ring-diameter:10px; - - --spectrum-coachmark-buttongroup-display:none; - --spectrum-coachmark-buttongroup-mobile-display:flex; - --spectrum-coachmark-menu-display:none; - --spectrum-coachmark-menu-mobile-display:inline-flex; - - --spectrum-well-padding:20px; - --spectrum-well-margin-top:5px; - --spectrum-well-min-width:300px; - --spectrum-well-border-radius:5px; - --spectrum-workflow-icon-size-xxl:40px; - --spectrum-workflow-icon-size-xxs:15px; - - --spectrum-treeview-item-indentation-medium:20px; - --spectrum-treeview-item-indentation-small:15px; - --spectrum-treeview-item-indentation-large:25px; - --spectrum-treeview-item-indentation-extra-large:30px; - --spectrum-treeview-indicator-inset-block-start:6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px; - - --spectrum-dialog-confirm-entry-animation-distance:25px; - --spectrum-dialog-confirm-hero-height:160px; - --spectrum-dialog-confirm-border-radius:5px; - --spectrum-dialog-confirm-title-text-size:19px; - --spectrum-dialog-confirm-description-text-size:15px; - --spectrum-dialog-confirm-padding-grid:24px; - - --spectrum-datepicker-initial-width:160px; - --spectrum-datepicker-generic-padding:15px; - --spectrum-datepicker-dash-line-height:30px; - --spectrum-datepicker-width-quiet-first:90px; - --spectrum-datepicker-width-quiet-second:20px; - --spectrum-datepicker-datetime-width-first:45px; - --spectrum-datepicker-invalid-icon-to-button:10px; - --spectrum-datepicker-invalid-icon-to-button-quiet:9px; - --spectrum-datepicker-input-datetime-width:30px; - - --spectrum-pagination-textfield-width:60px; - --spectrum-pagination-item-inline-spacing:6px; - - --spectrum-dial-border-radius:20px; - --spectrum-dial-handle-position:10px; - --spectrum-dial-handle-block-margin:20px; - --spectrum-dial-handle-inline-margin:20px; - --spectrum-dial-controls-margin:10px; - --spectrum-dial-label-gap-y:6px; - --spectrum-dial-label-container-top-to-text:5px; - - --spectrum-assetcard-focus-ring-border-radius:9px; - --spectrum-assetcard-selectionindicator-margin:15px; - --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs); - --spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance:5px; - - --spectrum-ui-icon-medium-display:none; - --spectrum-ui-icon-large-display:block; -} - -.spectrum--light{ - --spectrum-overlay-opacity:0.4; - --spectrum-background-layer-2-color:var(--spectrum-gray-25); - --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-700); - --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-800); - --spectrum-accent-background-color-default:var(--spectrum-accent-color-900); - --spectrum-accent-background-color-hover:var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down:var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-1000); - --spectrum-informative-background-color-default:var(--spectrum-informative-color-900); - --spectrum-informative-background-color-hover:var(--spectrum-informative-color-1000); - --spectrum-informative-background-color-down:var(--spectrum-informative-color-1000); - --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-1000); - --spectrum-negative-background-color-default:var(--spectrum-negative-color-900); - --spectrum-negative-background-color-hover:var(--spectrum-negative-color-1000); - --spectrum-negative-background-color-down:var(--spectrum-negative-color-1000); - --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-1000); - --spectrum-positive-background-color-default:var(--spectrum-positive-color-900); - --spectrum-positive-background-color-hover:var(--spectrum-positive-color-1000); - --spectrum-positive-background-color-down:var(--spectrum-positive-color-1000); - --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000); - --spectrum-notice-background-color-default:var(--spectrum-notice-color-600); - --spectrum-gray-background-color-default:var(--spectrum-gray-700); - --spectrum-red-background-color-default:var(--spectrum-red-900); - --spectrum-orange-background-color-default:var(--spectrum-orange-600); - --spectrum-yellow-background-color-default:var(--spectrum-yellow-400); - --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-500); - --spectrum-celery-background-color-default:var(--spectrum-celery-600); - --spectrum-green-background-color-default:var(--spectrum-green-900); - --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-900); - --spectrum-cyan-background-color-default:var(--spectrum-cyan-900); - --spectrum-blue-background-color-default:var(--spectrum-blue-900); - --spectrum-indigo-background-color-default:var(--spectrum-indigo-900); - --spectrum-purple-background-color-default:var(--spectrum-purple-900); - --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-900); - --spectrum-magenta-background-color-default:var(--spectrum-magenta-900); - --spectrum-neutral-visual-color:var(--spectrum-gray-500); - --spectrum-accent-visual-color:var(--spectrum-accent-color-800); - --spectrum-informative-visual-color:var(--spectrum-informative-color-800); - --spectrum-negative-visual-color:var(--spectrum-negative-color-800); - --spectrum-notice-visual-color:var(--spectrum-notice-color-700); - --spectrum-positive-visual-color:var(--spectrum-positive-color-700); - --spectrum-gray-visual-color:var(--spectrum-gray-500); - --spectrum-red-visual-color:var(--spectrum-red-800); - --spectrum-orange-visual-color:var(--spectrum-orange-700); - --spectrum-yellow-visual-color:var(--spectrum-yellow-600); - --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-600); - --spectrum-celery-visual-color:var(--spectrum-celery-700); - --spectrum-green-visual-color:var(--spectrum-green-700); - --spectrum-seafoam-visual-color:var(--spectrum-seafoam-700); - --spectrum-cyan-visual-color:var(--spectrum-cyan-600); - --spectrum-blue-visual-color:var(--spectrum-blue-800); - --spectrum-indigo-visual-color:var(--spectrum-indigo-800); - --spectrum-purple-visual-color:var(--spectrum-purple-800); - --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-800); - --spectrum-magenta-visual-color:var(--spectrum-magenta-800); - --spectrum-background-elevated-color:var(--spectrum-gray-25); - --spectrum-background-pasteboard-color:var(--spectrum-gray-100); - --spectrum-brown-visual-color:var(--spectrum-brown-800); - --spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-800); - --spectrum-pink-visual-color:var(--spectrum-pink-800); - --spectrum-silver-visual-color:var(--spectrum-silver-800); - --spectrum-turquoise-visual-color:var(--spectrum-turquoise-800); - --spectrum-brown-background-color-default:var(--spectrum-brown-900); - --spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-900); - --spectrum-pink-background-color-default:var(--spectrum-pink-900); - --spectrum-silver-background-color-default:var(--spectrum-silver-900); - --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-900); - --spectrum-drop-shadow-color-100:rgba(0, 0, 0, 0.12); - --spectrum-drop-shadow-color-200:rgba(0, 0, 0, 0.16); - --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200); - --spectrum-gray-25:rgb(255, 255, 255); - --spectrum-gray-50:rgb(248, 248, 248); - --spectrum-gray-75:rgb(243, 243, 243); - --spectrum-gray-100:rgb(233, 233, 233); - --spectrum-gray-200:rgb(225, 225, 225); - --spectrum-gray-300:rgb(218, 218, 218); - --spectrum-gray-400:rgb(198, 198, 198); - --spectrum-gray-500:rgb(143, 143, 143); - --spectrum-gray-600:rgb(113, 113, 113); - --spectrum-gray-700:rgb(80, 80, 80); - --spectrum-gray-800:rgb(41, 41, 41); - --spectrum-gray-900:rgb(19, 19, 19); - --spectrum-gray-1000:rgb(0, 0, 0); - --spectrum-blue-100:rgb(245, 249, 255); - --spectrum-blue-200:rgb(229, 240, 254); - --spectrum-blue-300:rgb(203, 226, 254); - --spectrum-blue-400:rgb(172, 207, 253); - --spectrum-blue-500:rgb(142, 185, 252); - --spectrum-blue-600:rgb(114, 158, 253); - --spectrum-blue-700:rgb(93, 137, 255); - --spectrum-blue-800:rgb(75, 117, 255); - --spectrum-blue-900:rgb(59, 99, 251); - --spectrum-blue-1000:rgb(39, 77, 234); - --spectrum-blue-1100:rgb(29, 62, 207); - --spectrum-blue-1200:rgb(21, 50, 173); - --spectrum-blue-1300:rgb(16, 40, 140); - --spectrum-blue-1400:rgb(12, 31, 105); - --spectrum-blue-1500:rgb(14, 24, 67); - --spectrum-blue-1600:rgb(7, 11, 30); - --spectrum-red-100:rgb(255, 246, 245); - --spectrum-red-200:rgb(255, 235, 232); - --spectrum-red-300:rgb(255, 214, 209); - --spectrum-red-400:rgb(255, 188, 180); - --spectrum-red-500:rgb(255, 157, 145); - --spectrum-red-600:rgb(255, 118, 101); - --spectrum-red-700:rgb(255, 81, 61); - --spectrum-red-800:rgb(240, 56, 35); - --spectrum-red-900:rgb(215, 50, 32); - --spectrum-red-1000:rgb(183, 40, 24); - --spectrum-red-1100:rgb(156, 33, 19); - --spectrum-red-1200:rgb(129, 27, 14); - --spectrum-red-1300:rgb(104, 21, 10); - --spectrum-red-1400:rgb(80, 16, 6); - --spectrum-red-1500:rgb(59, 11, 4); - --spectrum-red-1600:rgb(29, 5, 2); - --spectrum-orange-100:rgb(255, 246, 231); - --spectrum-orange-200:rgb(255, 236, 207); - --spectrum-orange-300:rgb(255, 218, 158); - --spectrum-orange-400:rgb(255, 193, 94); - --spectrum-orange-500:rgb(255, 162, 19); - --spectrum-orange-600:rgb(252, 125, 0); - --spectrum-orange-700:rgb(232, 106, 0); - --spectrum-orange-800:rgb(212, 91, 0); - --spectrum-orange-900:rgb(194, 78, 0); - --spectrum-orange-1000:rgb(167, 62, 0); - --spectrum-orange-1100:rgb(144, 51, 0); - --spectrum-orange-1200:rgb(118, 41, 0); - --spectrum-orange-1300:rgb(95, 32, 0); - --spectrum-orange-1400:rgb(73, 24, 0); - --spectrum-orange-1500:rgb(52, 18, 0); - --spectrum-orange-1600:rgb(25, 8, 0); - --spectrum-yellow-100:rgb(255, 248, 204); - --spectrum-yellow-200:rgb(255, 241, 151); - --spectrum-yellow-300:rgb(255, 222, 44); - --spectrum-yellow-400:rgb(245, 199, 0); - --spectrum-yellow-500:rgb(230, 175, 0); - --spectrum-yellow-600:rgb(210, 149, 0); - --spectrum-yellow-700:rgb(193, 131, 0); - --spectrum-yellow-800:rgb(175, 116, 0); - --spectrum-yellow-900:rgb(158, 102, 0); - --spectrum-yellow-1000:rgb(134, 85, 0); - --spectrum-yellow-1100:rgb(114, 72, 0); - --spectrum-yellow-1200:rgb(93, 59, 0); - --spectrum-yellow-1300:rgb(75, 47, 0); - --spectrum-yellow-1400:rgb(56, 35, 0); - --spectrum-yellow-1500:rgb(40, 25, 0); - --spectrum-yellow-1600:rgb(18, 11, 0); - --spectrum-chartreuse-100:rgb(246, 251, 222); - --spectrum-chartreuse-200:rgb(234, 246, 173); - --spectrum-chartreuse-300:rgb(208, 236, 70); - --spectrum-chartreuse-400:rgb(182, 219, 0); - --spectrum-chartreuse-500:rgb(163, 196, 0); - --spectrum-chartreuse-600:rgb(143, 172, 0); - --spectrum-chartreuse-700:rgb(128, 153, 0); - --spectrum-chartreuse-800:rgb(114, 137, 0); - --spectrum-chartreuse-900:rgb(102, 122, 0); - --spectrum-chartreuse-1000:rgb(86, 103, 0); - --spectrum-chartreuse-1100:rgb(73, 87, 0); - --spectrum-chartreuse-1200:rgb(60, 71, 0); - --spectrum-chartreuse-1300:rgb(47, 57, 0); - --spectrum-chartreuse-1400:rgb(35, 43, 0); - --spectrum-chartreuse-1500:rgb(25, 30, 0); - --spectrum-chartreuse-1600:rgb(11, 14, 0); - --spectrum-celery-100:rgb(235, 255, 220); - --spectrum-celery-200:rgb(197, 255, 156); - --spectrum-celery-300:rgb(157, 247, 92); - --spectrum-celery-400:rgb(129, 228, 58); - --spectrum-celery-500:rgb(110, 206, 42); - --spectrum-celery-600:rgb(93, 180, 31); - --spectrum-celery-700:rgb(82, 161, 25); - --spectrum-celery-800:rgb(72, 144, 20); - --spectrum-celery-900:rgb(64, 129, 17); - --spectrum-celery-1000:rgb(52, 109, 12); - --spectrum-celery-1100:rgb(44, 92, 9); - --spectrum-celery-1200:rgb(35, 75, 6); - --spectrum-celery-1300:rgb(27, 60, 3); - --spectrum-celery-1400:rgb(19, 46, 0); - --spectrum-celery-1500:rgb(12, 33, 0); - --spectrum-celery-1600:rgb(4, 15, 0); - --spectrum-green-100:rgb(237, 252, 241); - --spectrum-green-200:rgb(215, 247, 225); - --spectrum-green-300:rgb(173, 238, 197); - --spectrum-green-400:rgb(107, 227, 162); - --spectrum-green-500:rgb(43, 209, 125); - --spectrum-green-600:rgb(18, 184, 103); - --spectrum-green-700:rgb(11, 164, 93); - --spectrum-green-800:rgb(7, 147, 85); - --spectrum-green-900:rgb(5, 131, 78); - --spectrum-green-1000:rgb(3, 110, 69); - --spectrum-green-1100:rgb(2, 93, 60); - --spectrum-green-1200:rgb(1, 76, 52); - --spectrum-green-1300:rgb(0, 61, 44); - --spectrum-green-1400:rgb(0, 46, 34); - --spectrum-green-1500:rgb(0, 33, 25); - --spectrum-green-1600:rgb(0, 15, 12); - --spectrum-seafoam-100:rgb(235, 251, 246); - --spectrum-seafoam-200:rgb(211, 246, 234); - --spectrum-seafoam-300:rgb(169, 237, 216); - --spectrum-seafoam-400:rgb(92, 225, 194); - --spectrum-seafoam-500:rgb(16, 207, 169); - --spectrum-seafoam-600:rgb(13, 181, 149); - --spectrum-seafoam-700:rgb(11, 162, 134); - --spectrum-seafoam-800:rgb(9, 144, 120); - --spectrum-seafoam-900:rgb(7, 129, 109); - --spectrum-seafoam-1000:rgb(5, 108, 92); - --spectrum-seafoam-1100:rgb(3, 92, 80); - --spectrum-seafoam-1200:rgb(1, 75, 67); - --spectrum-seafoam-1300:rgb(0, 60, 54); - --spectrum-seafoam-1400:rgb(0, 46, 40); - --spectrum-seafoam-1500:rgb(0, 33, 29); - --spectrum-seafoam-1600:rgb(0, 15, 14); - --spectrum-cyan-100:rgb(238, 250, 254); - --spectrum-cyan-200:rgb(217, 244, 253); - --spectrum-cyan-300:rgb(183, 231, 252); - --spectrum-cyan-400:rgb(138, 213, 255); - --spectrum-cyan-500:rgb(92, 192, 255); - --spectrum-cyan-600:rgb(48, 167, 254); - --spectrum-cyan-700:rgb(29, 149, 231); - --spectrum-cyan-800:rgb(18, 134, 205); - --spectrum-cyan-900:rgb(11, 120, 179); - --spectrum-cyan-1000:rgb(4, 102, 145); - --spectrum-cyan-1100:rgb(0, 87, 121); - --spectrum-cyan-1200:rgb(0, 71, 98); - --spectrum-cyan-1300:rgb(0, 57, 78); - --spectrum-cyan-1400:rgb(0, 43, 59); - --spectrum-cyan-1500:rgb(0, 31, 43); - --spectrum-cyan-1600:rgb(0, 14, 20); - --spectrum-indigo-100:rgb(247, 248, 255); - --spectrum-indigo-200:rgb(235, 238, 255); - --spectrum-indigo-300:rgb(216, 222, 255); - --spectrum-indigo-400:rgb(192, 201, 255); - --spectrum-indigo-500:rgb(167, 178, 255); - --spectrum-indigo-600:rgb(145, 151, 254); - --spectrum-indigo-700:rgb(132, 128, 254); - --spectrum-indigo-800:rgb(122, 106, 253); - --spectrum-indigo-900:rgb(113, 85, 250); - --spectrum-indigo-1000:rgb(99, 56, 238); - --spectrum-indigo-1100:rgb(84, 36, 219); - --spectrum-indigo-1200:rgb(69, 19, 191); - --spectrum-indigo-1300:rgb(55, 6, 160); - --spectrum-indigo-1400:rgb(42, 0, 129); - --spectrum-indigo-1500:rgb(31, 0, 98); - --spectrum-indigo-1600:rgb(17, 0, 54); - --spectrum-purple-100:rgb(251, 247, 254); - --spectrum-purple-200:rgb(244, 235, 252); - --spectrum-purple-300:rgb(235, 218, 249); - --spectrum-purple-400:rgb(221, 193, 246); - --spectrum-purple-500:rgb(208, 167, 243); - --spectrum-purple-600:rgb(191, 138, 238); - --spectrum-purple-700:rgb(178, 114, 235); - --spectrum-purple-800:rgb(166, 92, 231); - --spectrum-purple-900:rgb(154, 71, 226); - --spectrum-purple-1000:rgb(134, 40, 217); - --spectrum-purple-1100:rgb(115, 13, 204); - --spectrum-purple-1200:rgb(93, 0, 177); - --spectrum-purple-1300:rgb(75, 0, 144); - --spectrum-purple-1400:rgb(59, 0, 111); - --spectrum-purple-1500:rgb(44, 0, 84); - --spectrum-purple-1600:rgb(23, 0, 45); - --spectrum-fuchsia-100:rgb(254, 246, 255); - --spectrum-fuchsia-200:rgb(253, 233, 255); - --spectrum-fuchsia-300:rgb(250, 211, 255); - --spectrum-fuchsia-400:rgb(247, 181, 255); - --spectrum-fuchsia-500:rgb(243, 147, 255); - --spectrum-fuchsia-600:rgb(236, 105, 255); - --spectrum-fuchsia-700:rgb(223, 77, 245); - --spectrum-fuchsia-800:rgb(200, 68, 220); - --spectrum-fuchsia-900:rgb(181, 57, 200); - --spectrum-fuchsia-1000:rgb(156, 40, 175); - --spectrum-fuchsia-1100:rgb(135, 27, 154); - --spectrum-fuchsia-1200:rgb(113, 15, 131); - --spectrum-fuchsia-1300:rgb(92, 4, 109); - --spectrum-fuchsia-1400:rgb(72, 0, 88); - --spectrum-fuchsia-1500:rgb(54, 0, 66); - --spectrum-fuchsia-1600:rgb(29, 0, 35); - --spectrum-magenta-100:rgb(255, 245, 248); - --spectrum-magenta-200:rgb(255, 232, 240); - --spectrum-magenta-300:rgb(255, 213, 227); - --spectrum-magenta-400:rgb(255, 185, 208); - --spectrum-magenta-500:rgb(255, 152, 187); - --spectrum-magenta-600:rgb(255, 112, 159); - --spectrum-magenta-700:rgb(255, 72, 133); - --spectrum-magenta-800:rgb(240, 45, 110); - --spectrum-magenta-900:rgb(217, 35, 97); - --spectrum-magenta-1000:rgb(186, 22, 80); - --spectrum-magenta-1100:rgb(163, 5, 62); - --spectrum-magenta-1200:rgb(136, 0, 51); - --spectrum-magenta-1300:rgb(111, 0, 40); - --spectrum-magenta-1400:rgb(86, 0, 30); - --spectrum-magenta-1500:rgb(64, 0, 22); - --spectrum-magenta-1600:rgb(35, 0, 12); - --spectrum-pink-100:rgb(255, 246, 252); - --spectrum-pink-200:rgb(255, 232, 247); - --spectrum-pink-300:rgb(255, 211, 240); - --spectrum-pink-400:rgb(255, 181, 230); - --spectrum-pink-500:rgb(255, 148, 219); - --spectrum-pink-600:rgb(255, 103, 204); - --spectrum-pink-700:rgb(242, 76, 184); - --spectrum-pink-800:rgb(228, 52, 163); - --spectrum-pink-900:rgb(206, 42, 146); - --spectrum-pink-1000:rgb(176, 31, 123); - --spectrum-pink-1100:rgb(152, 22, 104); - --spectrum-pink-1200:rgb(128, 12, 85); - --spectrum-pink-1300:rgb(105, 3, 68); - --spectrum-pink-1400:rgb(83, 0, 53); - --spectrum-pink-1500:rgb(62, 0, 39); - --spectrum-pink-1600:rgb(33, 0, 21); - --spectrum-turquoise-100:rgb(238, 251, 251); - --spectrum-turquoise-200:rgb(209, 245, 245); - --spectrum-turquoise-300:rgb(169, 236, 237); - --spectrum-turquoise-400:rgb(111, 221, 228); - --spectrum-turquoise-500:rgb(39, 202, 216); - --spectrum-turquoise-600:rgb(15, 177, 192); - --spectrum-turquoise-700:rgb(12, 158, 171); - --spectrum-turquoise-800:rgb(10, 141, 153); - --spectrum-turquoise-900:rgb(8, 126, 137); - --spectrum-turquoise-1000:rgb(5, 107, 116); - --spectrum-turquoise-1100:rgb(3, 90, 98); - --spectrum-turquoise-1200:rgb(1, 74, 81); - --spectrum-turquoise-1300:rgb(0, 59, 65); - --spectrum-turquoise-1400:rgb(0, 44, 49); - --spectrum-turquoise-1500:rgb(0, 32, 35); - --spectrum-turquoise-1600:rgb(0, 15, 17); - --spectrum-brown-100:rgb(252, 247, 242); - --spectrum-brown-200:rgb(247, 238, 225); - --spectrum-brown-300:rgb(239, 221, 195); - --spectrum-brown-400:rgb(229, 200, 157); - --spectrum-brown-500:rgb(214, 177, 123); - --spectrum-brown-600:rgb(190, 155, 104); - --spectrum-brown-700:rgb(171, 138, 90); - --spectrum-brown-800:rgb(154, 123, 77); - --spectrum-brown-900:rgb(139, 109, 66); - --spectrum-brown-1000:rgb(119, 91, 50); - --spectrum-brown-1100:rgb(103, 76, 35); - --spectrum-brown-1200:rgb(88, 61, 21); - --spectrum-brown-1300:rgb(70, 49, 17); - --spectrum-brown-1400:rgb(52, 37, 13); - --spectrum-brown-1500:rgb(38, 26, 9); - --spectrum-brown-1600:rgb(16, 12, 4); - --spectrum-silver-100:rgb(247, 247, 247); - --spectrum-silver-200:rgb(239, 239, 239); - --spectrum-silver-300:rgb(223, 223, 223); - --spectrum-silver-400:rgb(204, 204, 204); - --spectrum-silver-500:rgb(183, 183, 183); - --spectrum-silver-600:rgb(160, 160, 160); - --spectrum-silver-700:rgb(143, 143, 143); - --spectrum-silver-800:rgb(128, 128, 128); - --spectrum-silver-900:rgb(114, 114, 114); - --spectrum-silver-1000:rgb(96, 96, 96); - --spectrum-silver-1100:rgb(81, 81, 81); - --spectrum-silver-1200:rgb(66, 66, 66); - --spectrum-silver-1300:rgb(52, 52, 52); - --spectrum-silver-1400:rgb(39, 39, 39); - --spectrum-silver-1500:rgb(28, 28, 28); - --spectrum-silver-1600:rgb(12, 12, 12); - --spectrum-cinnamon-100:rgb(253, 247, 243); - --spectrum-cinnamon-200:rgb(249, 236, 229); - --spectrum-cinnamon-300:rgb(244, 218, 203); - --spectrum-cinnamon-400:rgb(237, 196, 172); - --spectrum-cinnamon-500:rgb(229, 170, 136); - --spectrum-cinnamon-600:rgb(212, 145, 108); - --spectrum-cinnamon-700:rgb(198, 126, 88); - --spectrum-cinnamon-800:rgb(184, 109, 70); - --spectrum-cinnamon-900:rgb(170, 94, 56); - --spectrum-cinnamon-1000:rgb(147, 77, 43); - --spectrum-cinnamon-1100:rgb(128, 62, 32); - --spectrum-cinnamon-1200:rgb(110, 48, 21); - --spectrum-cinnamon-1300:rgb(92, 35, 11); - --spectrum-cinnamon-1400:rgb(72, 25, 6); - --spectrum-cinnamon-1500:rgb(52, 18, 4); - --spectrum-cinnamon-1600:rgb(24, 8, 2); - --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-900); - --spectrum-icon-color-green-primary-default:var(--spectrum-green-900); - --spectrum-icon-color-red-primary-default:var(--spectrum-red-900); - --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-400); - --spectrum-menu-item-background-color-default:rgba(0, 0, 0, 0); - --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-black-200); - --spectrum-menu-item-background-color-down:var(--spectrum-transparent-black-200); - --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-black-200); - --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color:var(--spectrum-blue-800); - - --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); - --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-black-rgb), 0.06); - --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-black-200); - --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06); - --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800); - - --spectrum-badge-label-icon-color-primary:var(--spectrum-white); - - --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-25); - - --spectrum-well-border-color:var(--spectrum-black-rgb); - - --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-800); - - --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.06); - --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); - - --spectrum-logic-button-and-background-color:var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color:var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1100); - --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1100); - - --spectrum-logic-button-or-background-color:var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color:var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-1100); - --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-1100); - - --spectrum-assetcard-border-color-selected:var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-900); - --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-800); - - --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); - --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800); - - --spectrum-swatch-border-color:rgba(0, 0, 0, 0.51); -} - -.spectrum--medium{ - --spectrum-workflow-icon-size-50:14px; - --spectrum-workflow-icon-size-75:16px; - --spectrum-workflow-icon-size-100:18px; - --spectrum-workflow-icon-size-200:20px; - --spectrum-workflow-icon-size-300:22px; - --spectrum-arrow-icon-size-75:10px; - --spectrum-arrow-icon-size-100:10px; - --spectrum-arrow-icon-size-200:12px; - --spectrum-arrow-icon-size-300:14px; - --spectrum-arrow-icon-size-400:16px; - --spectrum-arrow-icon-size-500:18px; - --spectrum-arrow-icon-size-600:20px; - --spectrum-asterisk-icon-size-100:8px; - --spectrum-asterisk-icon-size-200:10px; - --spectrum-asterisk-icon-size-300:10px; - --spectrum-checkmark-icon-size-50:10px; - --spectrum-checkmark-icon-size-75:10px; - --spectrum-checkmark-icon-size-100:10px; - --spectrum-checkmark-icon-size-200:12px; - --spectrum-checkmark-icon-size-300:14px; - --spectrum-checkmark-icon-size-400:16px; - --spectrum-checkmark-icon-size-500:16px; - --spectrum-checkmark-icon-size-600:18px; - --spectrum-chevron-icon-size-50:6px; - --spectrum-chevron-icon-size-75:10px; - --spectrum-chevron-icon-size-100:10px; - --spectrum-chevron-icon-size-200:12px; - --spectrum-chevron-icon-size-300:14px; - --spectrum-chevron-icon-size-400:16px; - --spectrum-chevron-icon-size-500:16px; - --spectrum-chevron-icon-size-600:18px; - --spectrum-corner-triangle-icon-size-75:5px; - --spectrum-corner-triangle-icon-size-100:5px; - --spectrum-corner-triangle-icon-size-200:6px; - --spectrum-corner-triangle-icon-size-300:7px; - --spectrum-cross-icon-size-75:8px; - --spectrum-cross-icon-size-100:8px; - --spectrum-cross-icon-size-200:10px; - --spectrum-cross-icon-size-300:12px; - --spectrum-cross-icon-size-400:12px; - --spectrum-cross-icon-size-500:14px; - --spectrum-cross-icon-size-600:16px; - --spectrum-dash-icon-size-50:8px; - --spectrum-dash-icon-size-75:8px; - --spectrum-dash-icon-size-100:10px; - --spectrum-dash-icon-size-200:12px; - --spectrum-dash-icon-size-300:12px; - --spectrum-dash-icon-size-400:14px; - --spectrum-dash-icon-size-500:16px; - --spectrum-dash-icon-size-600:18px; - --spectrum-checkbox-control-size-small:12px; - --spectrum-checkbox-control-size-medium:14px; - --spectrum-checkbox-control-size-large:16px; - --spectrum-checkbox-control-size-extra-large:18px; - --spectrum-checkbox-top-to-control-small:6px; - --spectrum-checkbox-top-to-control-medium:9px; - --spectrum-checkbox-top-to-control-large:12px; - --spectrum-checkbox-top-to-control-extra-large:15px; - --spectrum-switch-control-width-small:23px; - --spectrum-switch-control-width-medium:26px; - --spectrum-switch-control-width-large:29px; - --spectrum-switch-control-width-extra-large:33px; - --spectrum-switch-control-height-small:12px; - --spectrum-switch-control-height-medium:14px; - --spectrum-switch-control-height-large:16px; - --spectrum-switch-control-height-extra-large:18px; - --spectrum-switch-top-to-control-small:6px; - --spectrum-switch-top-to-control-medium:9px; - --spectrum-switch-top-to-control-large:12px; - --spectrum-switch-top-to-control-extra-large:15px; - --spectrum-radio-button-control-size-small:12px; - --spectrum-radio-button-control-size-medium:14px; - --spectrum-radio-button-control-size-large:16px; - --spectrum-radio-button-control-size-extra-large:18px; - --spectrum-radio-button-top-to-control-small:6px; - --spectrum-radio-button-top-to-control-medium:9px; - --spectrum-radio-button-top-to-control-large:12px; - --spectrum-radio-button-top-to-control-extra-large:15px; - --spectrum-field-label-text-to-asterisk-small:4px; - --spectrum-field-label-text-to-asterisk-medium:4px; - --spectrum-field-label-text-to-asterisk-large:5px; - --spectrum-field-label-text-to-asterisk-extra-large:5px; - --spectrum-field-label-top-to-asterisk-small:8px; - --spectrum-field-label-top-to-asterisk-medium:12px; - --spectrum-field-label-top-to-asterisk-large:15px; - --spectrum-field-label-top-to-asterisk-extra-large:19px; - --spectrum-field-label-top-margin-medium:4px; - --spectrum-field-label-top-margin-large:5px; - --spectrum-field-label-top-margin-extra-large:5px; - --spectrum-field-label-to-component-quiet-small:-8px; - --spectrum-field-label-to-component-quiet-medium:-8px; - --spectrum-field-label-to-component-quiet-large:-12px; - --spectrum-field-label-to-component-quiet-extra-large:-15px; - --spectrum-help-text-top-to-workflow-icon-small:4px; - --spectrum-help-text-top-to-workflow-icon-medium:3px; - --spectrum-help-text-top-to-workflow-icon-large:6px; - --spectrum-help-text-top-to-workflow-icon-extra-large:9px; - --spectrum-status-light-dot-size-medium:8px; - --spectrum-status-light-dot-size-large:10px; - --spectrum-status-light-dot-size-extra-large:10px; - --spectrum-status-light-top-to-dot-small:8px; - --spectrum-status-light-top-to-dot-medium:12px; - --spectrum-status-light-top-to-dot-large:15px; - --spectrum-status-light-top-to-dot-extra-large:19px; - --spectrum-action-button-edge-to-hold-icon-medium:4px; - --spectrum-action-button-edge-to-hold-icon-large:5px; - --spectrum-action-button-edge-to-hold-icon-extra-large:6px; - --spectrum-tooltip-tip-width:8px; - --spectrum-tooltip-tip-height:4px; - --spectrum-tooltip-maximum-width:160px; - --spectrum-progress-circle-size-small:16px; - --spectrum-progress-circle-size-medium:32px; - --spectrum-progress-circle-size-large:64px; - --spectrum-progress-circle-thickness-small:2px; - --spectrum-progress-circle-thickness-medium:3px; - --spectrum-progress-circle-thickness-large:4px; - --spectrum-toast-height:48px; - --spectrum-toast-maximum-width:336px; - --spectrum-toast-top-to-workflow-icon:15px; - --spectrum-toast-top-to-text:14px; - --spectrum-toast-bottom-to-text:17px; - --spectrum-action-bar-height:48px; - --spectrum-action-bar-top-to-item-counter:14px; - --spectrum-swatch-size-extra-small:16px; - --spectrum-swatch-size-small:24px; - --spectrum-swatch-size-medium:32px; - --spectrum-swatch-size-large:40px; - --spectrum-progress-bar-thickness-small:4px; - --spectrum-progress-bar-thickness-medium:6px; - --spectrum-progress-bar-thickness-large:8px; - --spectrum-progress-bar-thickness-extra-large:10px; - --spectrum-meter-width:192px; - --spectrum-meter-thickness-small:4px; - --spectrum-meter-thickness-large:6px; - --spectrum-tag-top-to-avatar-small:4px; - --spectrum-tag-top-to-avatar-medium:6px; - --spectrum-tag-top-to-avatar-large:9px; - --spectrum-tag-top-to-cross-icon-small:8px; - --spectrum-tag-top-to-cross-icon-medium:12px; - --spectrum-tag-top-to-cross-icon-large:15px; - --spectrum-popover-top-to-content-area:4px; - --spectrum-menu-item-edge-to-content-not-selected-small:28px; - --spectrum-menu-item-edge-to-content-not-selected-medium:32px; - --spectrum-menu-item-edge-to-content-not-selected-large:38px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large:45px; - --spectrum-menu-item-top-to-disclosure-icon-small:7px; - --spectrum-menu-item-top-to-disclosure-icon-medium:11px; - --spectrum-menu-item-top-to-disclosure-icon-large:14px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large:17px; - --spectrum-menu-item-top-to-selected-icon-small:7px; - --spectrum-menu-item-top-to-selected-icon-medium:11px; - --spectrum-menu-item-top-to-selected-icon-large:14px; - --spectrum-menu-item-top-to-selected-icon-extra-large:17px; - --spectrum-slider-control-height-small:14px; - --spectrum-slider-control-height-medium:16px; - --spectrum-slider-control-height-large:18px; - --spectrum-slider-control-height-extra-large:20px; - --spectrum-slider-handle-size-small:14px; - --spectrum-slider-handle-size-medium:16px; - --spectrum-slider-handle-size-large:18px; - --spectrum-slider-handle-size-extra-large:20px; - --spectrum-slider-handle-border-width-down-small:5px; - --spectrum-slider-handle-border-width-down-medium:6px; - --spectrum-slider-handle-border-width-down-large:7px; - --spectrum-slider-handle-border-width-down-extra-large:8px; - --spectrum-slider-bottom-to-handle-small:5px; - --spectrum-slider-bottom-to-handle-medium:8px; - --spectrum-slider-bottom-to-handle-large:11px; - --spectrum-slider-bottom-to-handle-extra-large:14px; - --spectrum-slider-control-to-field-label-small:5px; - --spectrum-slider-control-to-field-label-medium:8px; - --spectrum-slider-control-to-field-label-large:11px; - --spectrum-slider-control-to-field-label-extra-large:14px; - --spectrum-picker-visual-to-disclosure-icon-small:7px; - --spectrum-picker-visual-to-disclosure-icon-medium:8px; - --spectrum-picker-visual-to-disclosure-icon-large:9px; - --spectrum-picker-visual-to-disclosure-icon-extra-large:10px; - --spectrum-text-area-minimum-width:112px; - --spectrum-text-area-minimum-height:56px; - --spectrum-combo-box-visual-to-field-button-small:7px; - --spectrum-combo-box-visual-to-field-button-medium:8px; - --spectrum-combo-box-visual-to-field-button-large:9px; - --spectrum-combo-box-visual-to-field-button-extra-large:10px; - --spectrum-thumbnail-size-50:16px; - --spectrum-thumbnail-size-75:18px; - --spectrum-thumbnail-size-100:20px; - --spectrum-thumbnail-size-200:22px; - --spectrum-thumbnail-size-300:26px; - --spectrum-thumbnail-size-400:28px; - --spectrum-thumbnail-size-500:32px; - --spectrum-thumbnail-size-600:36px; - --spectrum-thumbnail-size-700:40px; - --spectrum-thumbnail-size-800:44px; - --spectrum-thumbnail-size-900:50px; - --spectrum-thumbnail-size-1000:56px; - --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-s); - --spectrum-alert-dialog-description-size:var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size:8px; - --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size:var(--spectrum-body-size-s); - --spectrum-breadcrumbs-height-multiline:72px; - --spectrum-breadcrumbs-top-to-text:13px; - --spectrum-breadcrumbs-top-to-text-compact:11px; - --spectrum-breadcrumbs-top-to-text-multiline:12px; - --spectrum-breadcrumbs-bottom-to-text:15px; - --spectrum-breadcrumbs-bottom-to-text-compact:12px; - --spectrum-breadcrumbs-bottom-to-text-multiline:9px; - --spectrum-breadcrumbs-start-edge-to-text:8px; - --spectrum-breadcrumbs-top-text-to-bottom-text:9px; - --spectrum-breadcrumbs-top-to-separator-icon:19px; - --spectrum-breadcrumbs-top-to-separator-icon-compact:15px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline:15px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:11px; - --spectrum-breadcrumbs-top-to-truncated-menu:8px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact:4px; - --spectrum-avatar-size-50:16px; - --spectrum-avatar-size-75:18px; - --spectrum-avatar-size-100:20px; - --spectrum-avatar-size-200:22px; - --spectrum-avatar-size-300:26px; - --spectrum-avatar-size-400:28px; - --spectrum-avatar-size-500:32px; - --spectrum-avatar-size-600:36px; - --spectrum-avatar-size-700:40px; - --spectrum-alert-banner-minimum-height:48px; - --spectrum-alert-banner-width:832px; - --spectrum-alert-banner-top-to-workflow-icon:15px; - --spectrum-alert-banner-top-to-text:14px; - --spectrum-alert-banner-bottom-to-text:17px; - --spectrum-rating-indicator-width:18px; - --spectrum-rating-indicator-to-icon:4px; - --spectrum-color-area-width:192px; - --spectrum-color-area-minimum-width:64px; - --spectrum-color-area-height:192px; - --spectrum-color-area-minimum-height:64px; - --spectrum-color-wheel-width:192px; - --spectrum-color-wheel-minimum-width:175px; - --spectrum-color-slider-length:192px; - --spectrum-color-slider-minimum-length:80px; - --spectrum-illustrated-message-title-size:var(--spectrum-heading-size-m); - --spectrum-illustrated-message-cjk-title-size:var(--spectrum-heading-cjk-size-m); - --spectrum-illustrated-message-body-size:var(--spectrum-body-size-s); - --spectrum-coach-mark-width:296px; - --spectrum-coach-mark-minimum-width:296px; - --spectrum-coach-mark-maximum-width:380px; - --spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-400); - --spectrum-coach-mark-pagination-text-to-bottom-edge:33px; - --spectrum-coach-mark-media-height:222px; - --spectrum-coach-mark-media-minimum-height:166px; - --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size:var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-s); - --spectrum-accordion-top-to-text-regular-small:5px; - --spectrum-accordion-small-top-to-text-spacious:9px; - --spectrum-accordion-top-to-text-regular-medium:8px; - --spectrum-accordion-top-to-text-spacious-medium:12px; - --spectrum-accordion-top-to-text-compact-large:4px; - --spectrum-accordion-top-to-text-regular-large:9px; - --spectrum-accordion-top-to-text-spacious-large:12px; - --spectrum-accordion-top-to-text-compact-extra-large:5px; - --spectrum-accordion-top-to-text-regular-extra-large:9px; - --spectrum-accordion-top-to-text-spacious-extra-large:13px; - --spectrum-accordion-bottom-to-text-compact-small:2px; - --spectrum-accordion-bottom-to-text-regular-small:7px; - --spectrum-accordion-bottom-to-text-spacious-small:11px; - --spectrum-accordion-bottom-to-text-compact-medium:5px; - --spectrum-accordion-bottom-to-text-regular-medium:9px; - --spectrum-accordion-bottom-to-text-spacious-medium:13px; - --spectrum-accordion-bottom-to-text-compact-large:8px; - --spectrum-accordion-bottom-to-text-regular-large:11px; - --spectrum-accordion-bottom-to-text-spacious-large:16px; - --spectrum-accordion-bottom-to-text-compact-extra-large:8px; - --spectrum-accordion-bottom-to-text-regular-extra-large:12px; - --spectrum-accordion-bottom-to-text-spacious-extra-large:16px; - --spectrum-accordion-minimum-width:200px; - --spectrum-accordion-content-area-top-to-content:8px; - --spectrum-accordion-content-area-bottom-to-content:16px; - --spectrum-color-handle-size:16px; - --spectrum-color-handle-size-key-focus:32px; - --spectrum-table-column-header-row-top-to-text-small:8px; - --spectrum-table-column-header-row-top-to-text-medium:7px; - --spectrum-table-column-header-row-top-to-text-large:10px; - --spectrum-table-column-header-row-top-to-text-extra-large:13px; - --spectrum-table-column-header-row-bottom-to-text-small:9px; - --spectrum-table-column-header-row-bottom-to-text-medium:8px; - --spectrum-table-column-header-row-bottom-to-text-large:10px; - --spectrum-table-column-header-row-bottom-to-text-extra-large:13px; - --spectrum-table-row-height-small-regular:32px; - --spectrum-table-row-height-medium-regular:40px; - --spectrum-table-row-height-large-regular:48px; - --spectrum-table-row-height-extra-large-regular:56px; - --spectrum-table-row-height-small-spacious:40px; - --spectrum-table-row-height-medium-spacious:48px; - --spectrum-table-row-height-large-spacious:56px; - --spectrum-table-row-height-extra-large-spacious:64px; - --spectrum-table-row-top-to-text-small-regular:8px; - --spectrum-table-row-top-to-text-medium-regular:11px; - --spectrum-table-row-top-to-text-large-regular:14px; - --spectrum-table-row-top-to-text-extra-large-regular:17px; - --spectrum-table-row-bottom-to-text-small-regular:9px; - --spectrum-table-row-bottom-to-text-medium-regular:12px; - --spectrum-table-row-bottom-to-text-large-regular:14px; - --spectrum-table-row-bottom-to-text-extra-large-regular:17px; - --spectrum-table-row-top-to-text-small-spacious:12px; - --spectrum-table-row-top-to-text-medium-spacious:15px; - --spectrum-table-row-top-to-text-large-spacious:18px; - --spectrum-table-row-top-to-text-extra-large-spacious:21px; - --spectrum-table-row-bottom-to-text-small-spacious:13px; - --spectrum-table-row-bottom-to-text-medium-spacious:16px; - --spectrum-table-row-bottom-to-text-large-spacious:18px; - --spectrum-table-row-bottom-to-text-extra-large-spacious:21px; - --spectrum-table-checkbox-to-text:24px; - --spectrum-table-header-row-checkbox-to-top-small:10px; - --spectrum-table-header-row-checkbox-to-top-medium:9px; - --spectrum-table-header-row-checkbox-to-top-large:12px; - --spectrum-table-header-row-checkbox-to-top-extra-large:15px; - --spectrum-table-row-checkbox-to-top-small-compact:6px; - --spectrum-table-row-checkbox-to-top-small-regular:10px; - --spectrum-table-row-checkbox-to-top-small-spacious:14px; - --spectrum-table-row-checkbox-to-top-medium-compact:9px; - --spectrum-table-row-checkbox-to-top-medium-regular:13px; - --spectrum-table-row-checkbox-to-top-medium-spacious:17px; - --spectrum-table-row-checkbox-to-top-large-compact:12px; - --spectrum-table-row-checkbox-to-top-large-regular:16px; - --spectrum-table-row-checkbox-to-top-large-spacious:20px; - --spectrum-table-row-checkbox-to-top-extra-large-compact:15px; - --spectrum-table-row-checkbox-to-top-extra-large-regular:19px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious:23px; - --spectrum-table-section-header-row-height-small:24px; - --spectrum-table-section-header-row-height-medium:32px; - --spectrum-table-section-header-row-height-large:40px; - --spectrum-table-section-header-row-height-extra-large:48px; - --spectrum-table-thumbnail-to-top-minimum-small-compact:4px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact:5px; - --spectrum-table-thumbnail-to-top-minimum-large-compact:7px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact:8px; - --spectrum-table-thumbnail-to-top-minimum-small-regular:5px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular:7px; - --spectrum-table-thumbnail-to-top-minimum-large-regular:8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular:8px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious:7px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious:8px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious:8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:10px; - --spectrum-tab-item-to-tab-item-horizontal-small:21px; - --spectrum-tab-item-to-tab-item-horizontal-medium:24px; - --spectrum-tab-item-to-tab-item-horizontal-large:27px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large:30px; - --spectrum-tab-item-to-tab-item-vertical-small:4px; - --spectrum-tab-item-to-tab-item-vertical-medium:4px; - --spectrum-tab-item-to-tab-item-vertical-large:5px; - --spectrum-tab-item-to-tab-item-vertical-extra-large:5px; - --spectrum-tab-item-start-to-edge-small:12px; - --spectrum-tab-item-start-to-edge-medium:12px; - --spectrum-tab-item-start-to-edge-large:13px; - --spectrum-tab-item-start-to-edge-extra-large:13px; - --spectrum-tab-item-top-to-text-small:11px; - --spectrum-tab-item-bottom-to-text-small:12px; - --spectrum-tab-item-top-to-text-medium:14px; - --spectrum-tab-item-bottom-to-text-medium:14px; - --spectrum-tab-item-top-to-text-large:16px; - --spectrum-tab-item-bottom-to-text-large:18px; - --spectrum-tab-item-top-to-text-extra-large:19px; - --spectrum-tab-item-bottom-to-text-extra-large:20px; - --spectrum-tab-item-top-to-text-compact-small:4px; - --spectrum-tab-item-bottom-to-text-compact-small:5px; - --spectrum-tab-item-top-to-text-compact-medium:6px; - --spectrum-tab-item-bottom-to-text-compact-medium:8px; - --spectrum-tab-item-top-to-text-compact-large:10px; - --spectrum-tab-item-bottom-to-text-compact-large:12px; - --spectrum-tab-item-top-to-text-compact-extra-large:12px; - --spectrum-tab-item-bottom-to-text-compact-extra-large:13px; - --spectrum-tab-item-top-to-workflow-icon-small:13px; - --spectrum-tab-item-top-to-workflow-icon-medium:15px; - --spectrum-tab-item-top-to-workflow-icon-large:17px; - --spectrum-tab-item-top-to-workflow-icon-extra-large:19px; - --spectrum-tab-item-top-to-workflow-icon-compact-small:3px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium:7px; - --spectrum-tab-item-top-to-workflow-icon-compact-large:9px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large:11px; - --spectrum-tab-item-focus-indicator-gap-small:7px; - --spectrum-tab-item-focus-indicator-gap-medium:8px; - --spectrum-tab-item-focus-indicator-gap-large:9px; - --spectrum-tab-item-focus-indicator-gap-extra-large:10px; - --spectrum-side-navigation-width:192px; - --spectrum-side-navigation-minimum-width:160px; - --spectrum-side-navigation-maximum-width:240px; - --spectrum-side-navigation-second-level-edge-to-text:24px; - --spectrum-side-navigation-third-level-edge-to-text:36px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text:50px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text:62px; - --spectrum-side-navigation-item-to-item:4px; - --spectrum-side-navigation-item-to-header:24px; - --spectrum-side-navigation-header-to-item:8px; - --spectrum-side-navigation-bottom-to-text:8px; - --spectrum-tray-top-to-content-area:4px; - --spectrum-accordion-top-to-text-spacious-small:9px; - --spectrum-corner-radius-100:4px; - --spectrum-corner-radius-200:8px; - --spectrum-drop-shadow-y:1px; - --spectrum-drop-shadow-blur:4px; - --spectrum-text-to-visual-50:6px; - --spectrum-text-to-visual-75:7px; - --spectrum-text-to-visual-100:8px; - --spectrum-text-to-visual-200:9px; - --spectrum-text-to-visual-300:10px; - --spectrum-text-to-control-75:9px; - --spectrum-text-to-control-100:10px; - --spectrum-text-to-control-200:11px; - --spectrum-text-to-control-300:13px; - --spectrum-component-height-50:20px; - --spectrum-component-height-75:24px; - --spectrum-component-height-100:32px; - --spectrum-component-height-200:40px; - --spectrum-component-height-300:48px; - --spectrum-component-height-400:56px; - --spectrum-component-height-500:64px; - --spectrum-component-pill-edge-to-visual-75:10px; - --spectrum-component-pill-edge-to-visual-100:14px; - --spectrum-component-pill-edge-to-visual-200:18px; - --spectrum-component-pill-edge-to-visual-300:21px; - --spectrum-component-pill-edge-to-visual-only-75:4px; - --spectrum-component-pill-edge-to-visual-only-100:7px; - --spectrum-component-pill-edge-to-visual-only-200:10px; - --spectrum-component-pill-edge-to-visual-only-300:13px; - --spectrum-component-pill-edge-to-text-75:12px; - --spectrum-component-pill-edge-to-text-100:16px; - --spectrum-component-pill-edge-to-text-200:20px; - --spectrum-component-pill-edge-to-text-300:24px; - --spectrum-component-edge-to-visual-50:6px; - --spectrum-component-edge-to-visual-75:7px; - --spectrum-component-edge-to-visual-100:10px; - --spectrum-component-edge-to-visual-200:13px; - --spectrum-component-edge-to-visual-300:15px; - --spectrum-component-edge-to-visual-only-50:3px; - --spectrum-component-edge-to-visual-only-75:4px; - --spectrum-component-edge-to-visual-only-100:7px; - --spectrum-component-edge-to-visual-only-200:10px; - --spectrum-component-edge-to-visual-only-300:13px; - --spectrum-component-edge-to-text-50:8px; - --spectrum-component-edge-to-text-75:9px; - --spectrum-component-edge-to-text-100:12px; - --spectrum-component-edge-to-text-200:15px; - --spectrum-component-edge-to-text-300:18px; - --spectrum-component-top-to-workflow-icon-50:3px; - --spectrum-component-top-to-workflow-icon-75:4px; - --spectrum-component-top-to-workflow-icon-100:7px; - --spectrum-component-top-to-workflow-icon-200:10px; - --spectrum-component-top-to-workflow-icon-300:13px; - --spectrum-component-top-to-text-50:3px; - --spectrum-component-top-to-text-75:4px; - --spectrum-component-top-to-text-100:6px; - --spectrum-component-top-to-text-200:9px; - --spectrum-component-top-to-text-300:12px; - --spectrum-component-bottom-to-text-50:3px; - --spectrum-component-bottom-to-text-75:5px; - --spectrum-component-bottom-to-text-100:9px; - --spectrum-component-bottom-to-text-200:11px; - --spectrum-component-bottom-to-text-300:14px; - --spectrum-component-to-menu-small:6px; - --spectrum-component-to-menu-medium:6px; - --spectrum-component-to-menu-large:7px; - --spectrum-component-to-menu-extra-large:8px; - --spectrum-field-edge-to-disclosure-icon-75:7px; - --spectrum-field-edge-to-disclosure-icon-100:11px; - --spectrum-field-edge-to-disclosure-icon-200:14px; - --spectrum-field-edge-to-disclosure-icon-300:17px; - --spectrum-field-end-edge-to-disclosure-icon-75:7px; - --spectrum-field-end-edge-to-disclosure-icon-100:11px; - --spectrum-field-end-edge-to-disclosure-icon-200:14px; - --spectrum-field-end-edge-to-disclosure-icon-300:17px; - --spectrum-field-top-to-disclosure-icon-75:7px; - --spectrum-field-top-to-disclosure-icon-100:11px; - --spectrum-field-top-to-disclosure-icon-200:14px; - --spectrum-field-top-to-disclosure-icon-300:17px; - --spectrum-field-top-to-alert-icon-small:4px; - --spectrum-field-top-to-alert-icon-medium:7px; - --spectrum-field-top-to-alert-icon-large:10px; - --spectrum-field-top-to-alert-icon-extra-large:13px; - --spectrum-field-top-to-validation-icon-small:7px; - --spectrum-field-top-to-validation-icon-medium:11px; - --spectrum-field-top-to-validation-icon-large:14px; - --spectrum-field-top-to-validation-icon-extra-large:17px; - --spectrum-field-top-to-progress-circle-small:4px; - --spectrum-field-top-to-progress-circle-medium:8px; - --spectrum-field-top-to-progress-circle-large:12px; - --spectrum-field-top-to-progress-circle-extra-large:16px; - --spectrum-field-edge-to-alert-icon-small:9px; - --spectrum-field-edge-to-alert-icon-medium:12px; - --spectrum-field-edge-to-alert-icon-large:15px; - --spectrum-field-edge-to-alert-icon-extra-large:18px; - --spectrum-field-edge-to-validation-icon-small:9px; - --spectrum-field-edge-to-validation-icon-medium:12px; - --spectrum-field-edge-to-validation-icon-large:15px; - --spectrum-field-edge-to-validation-icon-extra-large:18px; - --spectrum-field-text-to-alert-icon-small:8px; - --spectrum-field-text-to-alert-icon-medium:12px; - --spectrum-field-text-to-alert-icon-large:15px; - --spectrum-field-text-to-alert-icon-extra-large:18px; - --spectrum-field-text-to-validation-icon-small:8px; - --spectrum-field-text-to-validation-icon-medium:12px; - --spectrum-field-text-to-validation-icon-large:15px; - --spectrum-field-text-to-validation-icon-extra-large:18px; - --spectrum-field-width:192px; - --spectrum-character-count-to-field-quiet-small:-3px; - --spectrum-character-count-to-field-quiet-medium:-3px; - --spectrum-character-count-to-field-quiet-large:-3px; - --spectrum-character-count-to-field-quiet-extra-large:-4px; - --spectrum-side-label-character-count-to-field:12px; - --spectrum-side-label-character-count-top-margin-small:4px; - --spectrum-side-label-character-count-top-margin-medium:8px; - --spectrum-side-label-character-count-top-margin-large:11px; - --spectrum-side-label-character-count-top-margin-extra-large:14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small:7px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:11px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large:14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:17px; - --spectrum-navigational-indicator-top-to-back-icon-small:6px; - --spectrum-navigational-indicator-top-to-back-icon-medium:9px; - --spectrum-navigational-indicator-top-to-back-icon-large:12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large:15px; - --spectrum-color-control-track-width:24px; - --spectrum-font-size-50:11px; - --spectrum-font-size-75:12px; - --spectrum-font-size-100:14px; - --spectrum-font-size-200:16px; - --spectrum-font-size-300:18px; - --spectrum-font-size-400:20px; - --spectrum-font-size-500:22px; - --spectrum-font-size-600:25px; - --spectrum-font-size-700:28px; - --spectrum-font-size-800:32px; - --spectrum-font-size-900:36px; - --spectrum-font-size-1000:40px; - --spectrum-font-size-1100:45px; - --spectrum-font-size-1200:50px; - --spectrum-font-size-1300:60px; - --spectrum-slider-tick-mark-height:10px; - --spectrum-slider-ramp-track-height:16px; - - --spectrum-colorwheel-path:"M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; - --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; - --spectrum-colorwheel-colorarea-container-size:144px; - - --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:45px; - - --spectrum-menu-item-checkmark-height-small:10px; - --spectrum-menu-item-checkmark-height-medium:10px; - --spectrum-menu-item-checkmark-height-large:12px; - --spectrum-menu-item-checkmark-height-extra-large:14px; - - --spectrum-menu-item-checkmark-width-small:10px; - --spectrum-menu-item-checkmark-width-medium:10px; - --spectrum-menu-item-checkmark-width-large:12px; - --spectrum-menu-item-checkmark-width-extra-large:14px; - - --spectrum-rating-icon-spacing:var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small:5px; - --spectrum-button-bottom-to-text-small:4px; - --spectrum-button-top-to-text-medium:7px; - --spectrum-button-bottom-to-text-medium:8px; - --spectrum-button-top-to-text-large:10px; - --spectrum-button-bottom-to-text-large:10px; - --spectrum-button-top-to-text-extra-large:13px; - --spectrum-button-bottom-to-text-extra-large:13px; - - --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-100); - - --spectrum-alert-dialog-padding:var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap:6px; - --spectrum-coach-indicator-ring-diameter:var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter:var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display:flex; - --spectrum-coachmark-buttongroup-mobile-display:none; - --spectrum-coachmark-menu-display:inline-flex; - --spectrum-coachmark-menu-mobile-display:none; - --spectrum-well-padding:var(--spectrum-spacing-300); - --spectrum-well-margin-top:var(--spectrum-spacing-75); - --spectrum-well-min-width:240px; - --spectrum-well-border-radius:var(--spectrum-spacing-75); - --spectrum-workflow-icon-size-xxl:32px; - --spectrum-workflow-icon-size-xxs:12px; - - --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large:20px; - --spectrum-treeview-item-indentation-extra-large:var(--spectrum-spacing-400); - --spectrum-treeview-indicator-inset-block-start:5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:0px; - - --spectrum-dialog-confirm-entry-animation-distance:20px; - --spectrum-dialog-confirm-hero-height:128px; - --spectrum-dialog-confirm-border-radius:4px; - --spectrum-dialog-confirm-title-text-size:18px; - --spectrum-dialog-confirm-description-text-size:14px; - --spectrum-dialog-confirm-padding-grid:40px; - - --spectrum-datepicker-initial-width:128px; - --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height:24px; - --spectrum-datepicker-width-quiet-first:72px; - --spectrum-datepicker-width-quiet-second:16px; - --spectrum-datepicker-datetime-width-first:36px; - --spectrum-datepicker-invalid-icon-to-button:8px; - --spectrum-datepicker-invalid-icon-to-button-quiet:7px; - --spectrum-datepicker-input-datetime-width:var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width:var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing:5px; - - --spectrum-dial-border-radius:16px; - --spectrum-dial-handle-position:8px; - --spectrum-dial-handle-block-margin:16px; - --spectrum-dial-handle-inline-margin:16px; - --spectrum-dial-controls-margin:8px; - --spectrum-dial-label-gap-y:5px; - --spectrum-dial-label-container-top-to-text:4px; - - --spectrum-assetcard-focus-ring-border-radius:8px; - --spectrum-assetcard-selectionindicator-margin:12px; - --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs); - --spectrum-assetcard-content-font-size:var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75); - - --spectrum-ui-icon-medium-display:block; - --spectrum-ui-icon-large-display:none; -} diff --git a/tokens/package.json b/tokens/package.json index 096e8a553b9..d8b92d7449b 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -38,11 +38,11 @@ "devDependencies": { "@adobe/spectrum-tokens": "0.0.0-s2-foundations-colors-20240503210338", "@nxkit/style-dictionary": "^5.0.0", + "@spectrum-tools/postcss-rgb-mapping": "workspace:^", "cssnano": "^7.0.4", "cssnano-preset-advanced": "^7.0.4", "postcss": "^8.4.40", "postcss-cli": "^11.0.0", - "postcss-rgb-mapping": "workspace:^", "postcss-sorting": "^8.0.2", "prettier": "^3.3.2", "style-dictionary": "^3.9.2", diff --git a/tokens/postcss.config.js b/tokens/postcss.config.js index cc40a192e5f..78c4e0d719c 100644 --- a/tokens/postcss.config.js +++ b/tokens/postcss.config.js @@ -12,14 +12,15 @@ */ module.exports = ({ - resolveImports = false, + resolveImports = true, ...options }) => require("../postcss.config.js")({ ...options, resolveImports, env: "production", + map: false, additionalPlugins: { - "postcss-rgb-mapping": {}, + "@spectrum-tools/postcss-rgb-mapping": {}, "postcss-sorting": { order: ["custom-properties", "declarations", "at-rules", "rules"], "properties-order": "alphabetical", diff --git a/yarn.lock b/yarn.lock index d6854cdcb5f..37d901d499d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5596,11 +5596,11 @@ __metadata: dependencies: "@adobe/spectrum-tokens": "npm:0.0.0-s2-foundations-colors-20240503210338" "@nxkit/style-dictionary": "npm:^5.0.0" + "@spectrum-tools/postcss-rgb-mapping": "workspace:^" cssnano: "npm:^7.0.4" cssnano-preset-advanced: "npm:^7.0.4" postcss: "npm:^8.4.40" postcss-cli: "npm:^11.0.0" - postcss-rgb-mapping: "workspace:^" postcss-sorting: "npm:^8.0.2" prettier: "npm:^3.3.2" style-dictionary: "npm:^3.9.2" @@ -5745,6 +5745,45 @@ __metadata: languageName: unknown linkType: soft +"@spectrum-tools/postcss-add-theming-layer@workspace:^, @spectrum-tools/postcss-add-theming-layer@workspace:plugins/postcss-add-theming-layer": + version: 0.0.0-use.local + resolution: "@spectrum-tools/postcss-add-theming-layer@workspace:plugins/postcss-add-theming-layer" + dependencies: + ava: "npm:^6.1.3" + c8: "npm:^10.1.2" + postcss: "npm:^8.4.40" + postcss-selector-parser: "npm:^6.1.1" + postcss-values-parser: "npm:^6.0.2" + peerDependencies: + postcss: ">=8" + languageName: unknown + linkType: soft + +"@spectrum-tools/postcss-property-rollup@workspace:^, @spectrum-tools/postcss-property-rollup@workspace:plugins/postcss-property-rollup": + version: 0.0.0-use.local + resolution: "@spectrum-tools/postcss-property-rollup@workspace:plugins/postcss-property-rollup" + dependencies: + ava: "npm:^6.1.3" + c8: "npm:^10.1.2" + postcss: "npm:^8.4.40" + peerDependencies: + postcss: ">=8" + languageName: unknown + linkType: soft + +"@spectrum-tools/postcss-rgb-mapping@workspace:^, @spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping": + version: 0.0.0-use.local + resolution: "@spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping" + dependencies: + ava: "npm:^6.1.3" + c8: "npm:^10.1.2" + postcss: "npm:^8.4.40" + postcss-values-parser: "npm:^6.0.2" + peerDependencies: + postcss: ">=8" + languageName: unknown + linkType: soft + "@spectrum-tools/stylelint-no-missing-var@workspace:plugins/stylelint-no-missing-var": version: 0.0.0-use.local resolution: "@spectrum-tools/stylelint-no-missing-var@workspace:plugins/stylelint-no-missing-var" @@ -16101,20 +16140,6 @@ __metadata: languageName: node linkType: hard -"postcss-add-theming-layer@workspace:^, postcss-add-theming-layer@workspace:plugins/postcss-add-theming-layer": - version: 0.0.0-use.local - resolution: "postcss-add-theming-layer@workspace:plugins/postcss-add-theming-layer" - dependencies: - ava: "npm:^6.1.3" - c8: "npm:^10.1.2" - postcss: "npm:^8.4.39" - postcss-selector-parser: "npm:^6.1.1" - postcss-values-parser: "npm:^6.0.2" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - "postcss-attribute-case-insensitive@npm:^6.0.3": version: 6.0.3 resolution: "postcss-attribute-case-insensitive@npm:6.0.3" @@ -16828,18 +16853,6 @@ __metadata: languageName: node linkType: hard -"postcss-property-rollup@workspace:plugins/postcss-property-rollup": - version: 0.0.0-use.local - resolution: "postcss-property-rollup@workspace:plugins/postcss-property-rollup" - dependencies: - ava: "npm:^6.1.3" - c8: "npm:^10.1.2" - postcss: "npm:^8.4.39" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - "postcss-pseudo-class-any-link@npm:^9.0.2": version: 9.0.2 resolution: "postcss-pseudo-class-any-link@npm:9.0.2" @@ -16922,19 +16935,6 @@ __metadata: languageName: node linkType: hard -"postcss-rgb-mapping@workspace:^, postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping": - version: 0.0.0-use.local - resolution: "postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping" - dependencies: - ava: "npm:^6.1.3" - c8: "npm:^10.1.2" - postcss: "npm:^8.4.40" - postcss-values-parser: "npm:^6.0.2" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - "postcss-safe-parser@npm:^7.0.0": version: 7.0.0 resolution: "postcss-safe-parser@npm:7.0.0" @@ -18719,6 +18719,9 @@ __metadata: "@commitlint/config-conventional": "npm:^19.2.2" "@nx/devkit": "npm:^19.5.3" "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^14.3.1" + "@spectrum-tools/postcss-add-theming-layer": "workspace:^" + "@spectrum-tools/postcss-property-rollup": "workspace:^" + "@spectrum-tools/postcss-rgb-mapping": "workspace:^" at-rule-packer: "npm:^0.4.2" autoprefixer: "npm:^10.4.19" colors: "npm:^1.4.0" @@ -18743,7 +18746,6 @@ __metadata: open: "npm:^10.1.0" pajv: "npm:^1.2.0" postcss: "npm:^8.4.40" - postcss-add-theming-layer: "workspace:^" postcss-extend: "npm:^1.0.5" postcss-hover-media-feature: "npm:^1.0.2" postcss-import: "npm:^16.1.0" @@ -18752,7 +18754,6 @@ __metadata: postcss-preset-env: "npm:^9.5.13" postcss-pseudo-classes: "npm:^0.4.0" postcss-reporter: "npm:^7.1.0" - postcss-rgb-mapping: "workspace:^" postcss-selector-replace: "npm:^1.0.2" postcss-sorting: "npm:^8.0.2" postcss-values-parser: "npm:^6.0.2"