From ef65f39f5b0edc53f12ce7e288b51f1067a01d99 Mon Sep 17 00:00:00 2001 From: Piyush Vashisht Date: Mon, 10 Mar 2025 19:59:18 +0530 Subject: [PATCH 1/2] chore(picker): updated border-color for open not hover state of picker (#3607) Updated border-color for is-open state from `--spectrum-gray-900` to `--spectrum-gray-800`. --- .changeset/pre.json | 101 + .github/QUICK-START.md | 53 +- .github/actions/file-diff/package.json | 2 +- .github/workflows/development.yml | 6 +- .github/workflows/lint.yml | 2 +- .github/workflows/production.yml | 2 +- .github/workflows/release.yml | 2 +- .github/workflows/vrt.yml | 1 + .storybook/assets/base.css | 9 +- .storybook/assets/index.css | 7 + .storybook/blocks/utilities.js | 4 +- .storybook/decorators/context.js | 51 +- .storybook/guides/develop.mdx | 30 +- .storybook/main.js | 5 + .storybook/manager.js | 6 +- .storybook/modes/index.js | 10 - .storybook/package.json | 9 +- .storybook/preview.js | 4 +- .storybook/types/global.js | 17 - .vscode/settings.json | 18 +- components/accordion/dist/metadata.json | 9 +- components/accordion/index.css | 6 +- components/accordion/stories/template.js | 3 - components/accordion/themes/express.css | 16 - components/accordion/themes/spectrum-two.css | 20 - components/accordion/themes/spectrum.css | 24 - components/actionbar/dist/metadata.json | 4 - components/actionbar/index.css | 6 +- components/actionbar/stories/template.js | 5 +- components/actionbar/themes/express.css | 16 - components/actionbar/themes/spectrum-two.css | 20 - components/actionbar/themes/spectrum.css | 23 - components/actionbutton/dist/metadata.json | 77 +- components/actionbutton/index.css | 130 +- components/actionbutton/stories/template.js | 3 - components/actionbutton/themes/express.css | 71 - .../actionbutton/themes/spectrum-two.css | 112 - components/actionbutton/themes/spectrum.css | 93 - components/actiongroup/dist/metadata.json | 8 - components/actiongroup/index.css | 18 +- components/actiongroup/stories/template.js | 3 - components/actiongroup/themes/express.css | 26 - .../actiongroup/themes/spectrum-two.css | 22 - components/actiongroup/themes/spectrum.css | 16 - components/alertbanner/dist/metadata.json | 1 - components/alertbanner/index.css | 4 +- components/alertbanner/stories/template.js | 3 - components/alertbanner/themes/express.css | 22 - .../alertbanner/themes/spectrum-two.css | 18 - components/alertbanner/themes/spectrum.css | 22 - components/alertdialog/dist/metadata.json | 1 - components/asset/dist/metadata.json | 10 +- components/asset/index.css | 10 +- components/asset/stories/template.js | 3 - components/asset/themes/express.css | 16 - components/asset/themes/spectrum-two.css | 20 - components/asset/themes/spectrum.css | 24 - components/assetcard/dist/metadata.json | 6 - components/assetcard/index.css | 7 +- components/assetcard/stories/template.js | 3 - components/assetcard/themes/express.css | 22 - components/assetcard/themes/spectrum-two.css | 21 - components/assetcard/themes/spectrum.css | 25 - components/assetlist/dist/metadata.json | 7 +- components/assetlist/index.css | 5 +- components/assetlist/stories/template.js | 7 +- components/assetlist/themes/express.css | 16 - components/assetlist/themes/spectrum-two.css | 19 - components/assetlist/themes/spectrum.css | 23 - components/avatar/dist/metadata.json | 1 - components/badge/dist/metadata.json | 1 - components/badge/index.css | 10 +- components/breadcrumb/dist/metadata.json | 4 +- components/button/dist/metadata.json | 107 - components/button/index.css | 158 +- components/button/stories/template.js | 3 - components/button/themes/express.css | 37 - components/button/themes/spectrum-two.css | 173 - components/button/themes/spectrum.css | 148 - components/buttongroup/dist/metadata.json | 1 - components/calendar/dist/metadata.json | 4 +- components/calendar/index.css | 4 +- components/calendar/stories/template.js | 3 - components/calendar/themes/express.css | 16 - components/calendar/themes/spectrum-two.css | 18 - components/calendar/themes/spectrum.css | 22 - components/card/dist/metadata.json | 7 - components/card/index.css | 8 +- components/card/stories/template.js | 3 - components/card/themes/express.css | 16 - components/card/themes/spectrum-two.css | 22 - components/card/themes/spectrum.css | 26 - components/checkbox/dist/metadata.json | 8 - components/checkbox/index.css | 13 +- components/checkbox/stories/template.js | 3 - components/checkbox/themes/express.css | 25 - components/checkbox/themes/spectrum-two.css | 24 - components/checkbox/themes/spectrum.css | 24 - components/clearbutton/dist/metadata.json | 9 - components/clearbutton/index.css | 11 +- components/clearbutton/stories/template.js | 3 - components/clearbutton/themes/express.css | 25 - .../clearbutton/themes/spectrum-two.css | 27 - components/clearbutton/themes/spectrum.css | 26 - components/closebutton/dist/metadata.json | 17 +- components/closebutton/index.css | 16 +- components/closebutton/stories/template.js | 3 - components/closebutton/themes/express.css | 25 - .../closebutton/themes/spectrum-two.css | 33 - components/closebutton/themes/spectrum.css | 36 - components/coachindicator/dist/metadata.json | 6 +- components/coachmark/dist/metadata.json | 1 - components/colorarea/dist/metadata.json | 4 +- components/colorhandle/dist/metadata.json | 1 - components/colorloupe/dist/metadata.json | 4 +- components/colorslider/dist/metadata.json | 4 +- components/colorwheel/dist/metadata.json | 4 +- components/colorwheel/index.css | 4 +- components/colorwheel/stories/template.js | 3 - components/colorwheel/themes/express.css | 16 - components/colorwheel/themes/spectrum-two.css | 18 - components/colorwheel/themes/spectrum.css | 22 - components/combobox/dist/metadata.json | 13 +- components/combobox/index.css | 13 +- components/combobox/stories/template.js | 3 - components/combobox/themes/express.css | 28 - components/combobox/themes/spectrum-two.css | 27 - components/combobox/themes/spectrum.css | 29 - components/commons/basebutton.css | 36 +- components/contextualhelp/dist/metadata.json | 1 - components/datepicker/dist/metadata.json | 1 - components/datepicker/index.css | 4 +- components/datepicker/stories/template.js | 3 - components/datepicker/themes/express.css | 22 - components/datepicker/themes/spectrum-two.css | 18 - components/datepicker/themes/spectrum.css | 16 - components/dial/dist/metadata.json | 4 - components/dial/index.css | 5 +- components/dial/stories/template.js | 3 - components/dial/themes/express.css | 16 - components/dial/themes/spectrum-two.css | 19 - components/dial/themes/spectrum.css | 23 - components/dialog/dist/metadata.json | 1 - components/divider/dist/metadata.json | 5 - components/divider/index.css | 11 +- components/divider/stories/template.js | 3 - components/divider/themes/express.css | 16 - components/divider/themes/spectrum-two.css | 25 - components/divider/themes/spectrum.css | 29 - components/dropindicator/dist/metadata.json | 1 - components/dropzone/dist/metadata.json | 1 - components/dropzone/index.css | 4 +- components/dropzone/stories/template.js | 3 - components/dropzone/themes/express.css | 16 - components/dropzone/themes/spectrum-two.css | 18 - components/dropzone/themes/spectrum.css | 22 - components/fieldgroup/dist/metadata.json | 1 - components/fieldlabel/dist/metadata.json | 1 - .../floatingactionbutton/dist/metadata.json | 1 - components/form/dist/metadata.json | 1 - components/helptext/dist/metadata.json | 1 - components/icon/dist/metadata.json | 1 - .../illustratedmessage/dist/metadata.json | 1 - components/infieldbutton/dist/metadata.json | 13 - components/infieldbutton/index.css | 29 +- components/infieldbutton/stories/template.js | 3 - components/infieldbutton/themes/express.css | 34 - .../infieldbutton/themes/spectrum-two.css | 35 - components/infieldbutton/themes/spectrum.css | 29 - components/inlinealert/dist/metadata.json | 1 - components/link/dist/metadata.json | 1 - components/logicbutton/dist/metadata.json | 15 +- components/logicbutton/index.css | 13 +- components/logicbutton/stories/template.js | 3 - components/logicbutton/themes/express.css | 16 - .../logicbutton/themes/spectrum-two.css | 26 - components/logicbutton/themes/spectrum.css | 30 - components/menu/dist/metadata.json | 14 +- components/menu/index.css | 14 +- components/menu/stories/template.js | 3 - components/menu/themes/express.css | 16 - components/menu/themes/spectrum-two.css | 28 - components/menu/themes/spectrum.css | 32 - components/meter/dist/metadata.json | 1 - components/miller/dist/metadata.json | 1 - components/modal/dist/metadata.json | 1 - components/modal/index.css | 27 +- components/modal/stories/template.js | 3 - components/modal/themes/express.css | 16 - components/modal/themes/spectrum-two.css | 18 - components/modal/themes/spectrum.css | 22 - .../opacitycheckerboard/dist/metadata.json | 1 - components/page/dist/metadata.json | 17 +- components/page/index.css | 7 +- components/page/stories/template.js | 3 - components/page/themes/express.css | 16 - components/page/themes/spectrum-two.css | 19 - components/page/themes/spectrum.css | 23 - components/pagination/dist/metadata.json | 4 +- components/picker/dist/metadata.json | 21 +- components/picker/index.css | 18 +- components/picker/stories/template.js | 3 - components/picker/themes/express.css | 36 - components/picker/themes/spectrum-two.css | 33 - components/picker/themes/spectrum.css | 33 - components/pickerbutton/dist/metadata.json | 12 - components/pickerbutton/index.css | 16 +- components/pickerbutton/stories/template.js | 3 - components/pickerbutton/themes/express.css | 33 - .../pickerbutton/themes/spectrum-two.css | 30 - components/pickerbutton/themes/spectrum.css | 33 - components/popover/dist/metadata.json | 15 +- components/popover/index.css | 3 +- components/popover/stories/template.js | 3 - components/popover/themes/express.css | 22 - components/popover/themes/spectrum-two.css | 18 - components/popover/themes/spectrum.css | 16 - components/progressbar/dist/metadata.json | 10 +- components/progressbar/index.css | 20 +- components/progressbar/stories/template.js | 3 - components/progressbar/themes/express.css | 16 - .../progressbar/themes/spectrum-two.css | 19 - components/progressbar/themes/spectrum.css | 23 - components/progresscircle/animation.css | 510 - components/progresscircle/dist/metadata.json | 67 +- components/progresscircle/index.css | 8 +- components/progresscircle/stories/template.js | 5 +- components/progresscircle/themes/express.css | 16 - .../progresscircle/themes/spectrum-two.css | 22 - components/progresscircle/themes/spectrum.css | 26 - components/radio/dist/metadata.json | 11 +- components/radio/index.css | 43 +- components/radio/stories/template.js | 3 - components/radio/themes/express.css | 26 - components/radio/themes/spectrum-two.css | 24 - components/radio/themes/spectrum.css | 22 - components/rating/dist/metadata.json | 7 - components/rating/index.css | 9 +- components/rating/stories/template.js | 3 - components/rating/themes/express.css | 25 - components/rating/themes/spectrum-two.css | 23 - components/rating/themes/spectrum.css | 22 - components/search/dist/metadata.json | 26 - components/search/index.css | 26 +- components/search/stories/template.js | 3 - components/search/themes/express.css | 47 - components/search/themes/spectrum-two.css | 52 - components/search/themes/spectrum.css | 25 - components/sidenav/dist/metadata.json | 9 - components/sidenav/index.css | 11 +- components/sidenav/stories/template.js | 3 - components/sidenav/themes/express.css | 16 - components/sidenav/themes/spectrum-two.css | 25 - components/sidenav/themes/spectrum.css | 29 - components/slider/dist/metadata.json | 31 +- components/slider/index.css | 30 +- components/slider/stories/template.js | 3 - components/slider/themes/express.css | 39 - components/slider/themes/spectrum-two.css | 54 - components/slider/themes/spectrum.css | 45 - components/splitview/dist/metadata.json | 5 - components/splitview/index.css | 6 +- components/splitview/stories/template.js | 3 - components/splitview/themes/express.css | 16 - components/splitview/themes/spectrum-two.css | 20 - components/splitview/themes/spectrum.css | 24 - components/statuslight/dist/metadata.json | 1 - components/steplist/dist/metadata.json | 9 +- components/steplist/index.css | 5 +- components/steplist/stories/template.js | 3 - components/steplist/themes/express.css | 16 - components/steplist/themes/spectrum-two.css | 19 - components/steplist/themes/spectrum.css | 23 - components/stepper/dist/metadata.json | 26 - components/stepper/index.css | 41 +- components/stepper/stories/template.js | 3 - components/stepper/themes/express.css | 53 - components/stepper/themes/spectrum-two.css | 49 - components/stepper/themes/spectrum.css | 25 - components/swatch/dist/metadata.json | 5 - components/swatch/index.css | 9 +- components/swatch/stories/template.js | 3 - components/swatch/themes/express.css | 16 - components/swatch/themes/spectrum-two.css | 21 - components/swatch/themes/spectrum.css | 24 - components/swatchgroup/dist/metadata.json | 1 - components/switch/dist/metadata.json | 16 +- components/switch/index.css | 16 +- components/switch/stories/template.js | 3 - components/switch/themes/express.css | 30 - components/switch/themes/spectrum-two.css | 30 - components/switch/themes/spectrum.css | 24 - components/table/dist/metadata.json | 15 +- components/table/index.css | 14 +- components/table/stories/template.js | 3 - components/table/themes/express.css | 16 - components/table/themes/spectrum-two.css | 30 - components/table/themes/spectrum.css | 34 - components/tabs/dist/metadata.json | 8 +- components/tabs/index.css | 5 +- components/tabs/stories/template.js | 3 - components/tabs/themes/express.css | 22 - components/tabs/themes/spectrum-two.css | 19 - components/tabs/themes/spectrum.css | 23 - components/tag/dist/metadata.json | 33 - components/tag/index.css | 42 +- components/tag/stories/template.js | 3 - components/tag/themes/express.css | 64 - components/tag/themes/spectrum-two.css | 56 - components/tag/themes/spectrum.css | 27 - components/taggroup/dist/metadata.json | 1 - components/textfield/dist/metadata.json | 19 - components/textfield/index.css | 26 +- components/textfield/stories/template.js | 3 - components/textfield/themes/express.css | 28 - components/textfield/themes/spectrum-two.css | 46 - components/textfield/themes/spectrum.css | 45 - components/thumbnail/dist/metadata.json | 2 - components/thumbnail/index.css | 14 +- components/thumbnail/stories/template.js | 3 - components/thumbnail/themes/express.css | 16 - components/thumbnail/themes/spectrum-two.css | 18 - components/thumbnail/themes/spectrum.css | 22 - components/toast/dist/metadata.json | 7 +- components/toast/index.css | 5 +- components/toast/stories/template.js | 3 - components/toast/themes/express.css | 22 - components/toast/themes/spectrum-two.css | 19 - components/toast/themes/spectrum.css | 22 - components/tooltip/dist/metadata.json | 55 +- components/tooltip/index.css | 3 +- components/tooltip/stories/template.js | 3 - components/tooltip/themes/express.css | 22 - components/tooltip/themes/spectrum-two.css | 18 - components/tooltip/themes/spectrum.css | 16 - components/tray/dist/metadata.json | 1 - components/treeview/dist/metadata.json | 7 +- components/treeview/index.css | 5 +- components/treeview/stories/template.js | 3 - components/treeview/themes/express.css | 16 - components/treeview/themes/spectrum-two.css | 19 - components/treeview/themes/spectrum.css | 23 - components/typography/dist/metadata.json | 1 - components/underlay/dist/metadata.json | 1 - components/well/dist/metadata.json | 1 - components/well/index.css | 3 +- components/well/stories/template.js | 3 - components/well/themes/express.css | 16 - components/well/themes/spectrum-two.css | 18 - components/well/themes/spectrum.css | 22 - package.json | 29 +- plugins/postcss-add-theming-layer/README.md | 115 - .../expected/basic.css | 41 - .../fixtures/basic.css | 49 - plugins/postcss-add-theming-layer/index.js | 201 - .../postcss-add-theming-layer/package.json | 44 - .../postcss-add-theming-layer/project.json | 16 - plugins/postcss-add-theming-layer/test.js | 43 - .../postcss-add-theming-layer/utilities.js | 244 - plugins/postcss-property-rollup/README.md | 74 - .../expected/basic.css | 4 - .../fixtures/basic.css | 9 - plugins/postcss-property-rollup/index.js | 98 - plugins/postcss-property-rollup/package.json | 40 - plugins/postcss-property-rollup/project.json | 16 - plugins/postcss-property-rollup/test.js | 50 - plugins/postcss-rgb-mapping/index.js | 2 +- .../index.js | 9 - plugins/stylelint-theme-alignment/README.md | 78 - plugins/stylelint-theme-alignment/index.js | 158 - .../stylelint-theme-alignment/package.json | 44 - .../stylelint-theme-alignment/project.json | 13 - postcss.config.js | 19 - schemas/metadata.schema.json | 113 +- stylelint.config.js | 19 +- tasks/component-builder.js | 132 +- tasks/component-reporter.js | 11 +- tokens/README.md | 2 +- tokens/custom/global-vars.css | 12 +- tokens/custom/large-vars.css | 9 +- tokens/custom/medium-vars.css | 9 +- tokens/dist/json/tokens.json | 10987 ++++++++++------ tokens/package.json | 2 +- tokens/postcss.config.js | 15 + tokens/project.json | 3 +- tokens/tasks/token-rollup.js | 73 +- tools/generator/package.json | 2 +- tools/generator/templates/index.css.hbs | 14 +- tools/generator/templates/package.json.hbs | 31 +- .../templates/stories/template.js.hbs | 2 - ui-icons/CHANGELOG.md | 2 +- ui-icons/index.js | 176 +- yarn.lock | 980 +- 393 files changed, 8991 insertions(+), 11895 deletions(-) create mode 100644 .changeset/pre.json delete mode 100644 components/accordion/themes/express.css delete mode 100644 components/accordion/themes/spectrum-two.css delete mode 100644 components/accordion/themes/spectrum.css delete mode 100644 components/actionbar/themes/express.css delete mode 100644 components/actionbar/themes/spectrum-two.css delete mode 100644 components/actionbar/themes/spectrum.css delete mode 100644 components/actionbutton/themes/express.css delete mode 100644 components/actionbutton/themes/spectrum-two.css delete mode 100644 components/actionbutton/themes/spectrum.css delete mode 100644 components/actiongroup/themes/express.css delete mode 100644 components/actiongroup/themes/spectrum-two.css delete mode 100644 components/actiongroup/themes/spectrum.css delete mode 100644 components/alertbanner/themes/express.css delete mode 100644 components/alertbanner/themes/spectrum-two.css delete mode 100644 components/alertbanner/themes/spectrum.css delete mode 100644 components/asset/themes/express.css delete mode 100644 components/asset/themes/spectrum-two.css delete mode 100644 components/asset/themes/spectrum.css delete mode 100644 components/assetcard/themes/express.css delete mode 100644 components/assetcard/themes/spectrum-two.css delete mode 100644 components/assetcard/themes/spectrum.css delete mode 100644 components/assetlist/themes/express.css delete mode 100644 components/assetlist/themes/spectrum-two.css delete mode 100644 components/assetlist/themes/spectrum.css delete mode 100644 components/button/themes/express.css delete mode 100644 components/button/themes/spectrum-two.css delete mode 100644 components/button/themes/spectrum.css delete mode 100644 components/calendar/themes/express.css delete mode 100644 components/calendar/themes/spectrum-two.css delete mode 100644 components/calendar/themes/spectrum.css delete mode 100644 components/card/themes/express.css delete mode 100644 components/card/themes/spectrum-two.css delete mode 100644 components/card/themes/spectrum.css delete mode 100644 components/checkbox/themes/express.css delete mode 100644 components/checkbox/themes/spectrum-two.css delete mode 100644 components/checkbox/themes/spectrum.css delete mode 100644 components/clearbutton/themes/express.css delete mode 100644 components/clearbutton/themes/spectrum-two.css delete mode 100644 components/clearbutton/themes/spectrum.css delete mode 100644 components/closebutton/themes/express.css delete mode 100644 components/closebutton/themes/spectrum-two.css delete mode 100644 components/closebutton/themes/spectrum.css delete mode 100644 components/colorwheel/themes/express.css delete mode 100644 components/colorwheel/themes/spectrum-two.css delete mode 100644 components/colorwheel/themes/spectrum.css delete mode 100644 components/combobox/themes/express.css delete mode 100644 components/combobox/themes/spectrum-two.css delete mode 100644 components/combobox/themes/spectrum.css delete mode 100644 components/datepicker/themes/express.css delete mode 100644 components/datepicker/themes/spectrum-two.css delete mode 100644 components/datepicker/themes/spectrum.css delete mode 100644 components/dial/themes/express.css delete mode 100644 components/dial/themes/spectrum-two.css delete mode 100644 components/dial/themes/spectrum.css delete mode 100644 components/divider/themes/express.css delete mode 100644 components/divider/themes/spectrum-two.css delete mode 100644 components/divider/themes/spectrum.css delete mode 100644 components/dropzone/themes/express.css delete mode 100644 components/dropzone/themes/spectrum-two.css delete mode 100644 components/dropzone/themes/spectrum.css delete mode 100644 components/infieldbutton/themes/express.css delete mode 100644 components/infieldbutton/themes/spectrum-two.css delete mode 100644 components/infieldbutton/themes/spectrum.css delete mode 100644 components/logicbutton/themes/express.css delete mode 100644 components/logicbutton/themes/spectrum-two.css delete mode 100644 components/logicbutton/themes/spectrum.css delete mode 100644 components/menu/themes/express.css delete mode 100644 components/menu/themes/spectrum-two.css delete mode 100644 components/menu/themes/spectrum.css delete mode 100644 components/modal/themes/express.css delete mode 100644 components/modal/themes/spectrum-two.css delete mode 100644 components/modal/themes/spectrum.css delete mode 100644 components/page/themes/express.css delete mode 100644 components/page/themes/spectrum-two.css delete mode 100644 components/page/themes/spectrum.css delete mode 100644 components/picker/themes/express.css delete mode 100644 components/picker/themes/spectrum-two.css delete mode 100644 components/picker/themes/spectrum.css delete mode 100644 components/pickerbutton/themes/express.css delete mode 100644 components/pickerbutton/themes/spectrum-two.css delete mode 100644 components/pickerbutton/themes/spectrum.css delete mode 100644 components/popover/themes/express.css delete mode 100644 components/popover/themes/spectrum-two.css delete mode 100644 components/popover/themes/spectrum.css delete mode 100644 components/progressbar/themes/express.css delete mode 100644 components/progressbar/themes/spectrum-two.css delete mode 100644 components/progressbar/themes/spectrum.css delete mode 100644 components/progresscircle/animation.css delete mode 100644 components/progresscircle/themes/express.css delete mode 100644 components/progresscircle/themes/spectrum-two.css delete mode 100644 components/progresscircle/themes/spectrum.css delete mode 100644 components/radio/themes/express.css delete mode 100644 components/radio/themes/spectrum-two.css delete mode 100644 components/radio/themes/spectrum.css delete mode 100644 components/rating/themes/express.css delete mode 100644 components/rating/themes/spectrum-two.css delete mode 100644 components/rating/themes/spectrum.css delete mode 100644 components/search/themes/express.css delete mode 100644 components/search/themes/spectrum-two.css delete mode 100644 components/search/themes/spectrum.css delete mode 100644 components/sidenav/themes/express.css delete mode 100644 components/sidenav/themes/spectrum-two.css delete mode 100644 components/sidenav/themes/spectrum.css delete mode 100644 components/slider/themes/express.css delete mode 100644 components/slider/themes/spectrum-two.css delete mode 100644 components/slider/themes/spectrum.css delete mode 100644 components/splitview/themes/express.css delete mode 100644 components/splitview/themes/spectrum-two.css delete mode 100644 components/splitview/themes/spectrum.css delete mode 100644 components/steplist/themes/express.css delete mode 100644 components/steplist/themes/spectrum-two.css delete mode 100644 components/steplist/themes/spectrum.css delete mode 100644 components/stepper/themes/express.css delete mode 100644 components/stepper/themes/spectrum-two.css delete mode 100644 components/stepper/themes/spectrum.css delete mode 100644 components/swatch/themes/express.css delete mode 100644 components/swatch/themes/spectrum-two.css delete mode 100644 components/swatch/themes/spectrum.css delete mode 100644 components/switch/themes/express.css delete mode 100644 components/switch/themes/spectrum-two.css delete mode 100644 components/switch/themes/spectrum.css delete mode 100644 components/table/themes/express.css delete mode 100644 components/table/themes/spectrum-two.css delete mode 100644 components/table/themes/spectrum.css delete mode 100644 components/tabs/themes/express.css delete mode 100644 components/tabs/themes/spectrum-two.css delete mode 100644 components/tabs/themes/spectrum.css delete mode 100644 components/tag/themes/express.css delete mode 100644 components/tag/themes/spectrum-two.css delete mode 100644 components/tag/themes/spectrum.css delete mode 100644 components/textfield/themes/express.css delete mode 100644 components/textfield/themes/spectrum-two.css delete mode 100644 components/textfield/themes/spectrum.css delete mode 100644 components/thumbnail/themes/express.css delete mode 100644 components/thumbnail/themes/spectrum-two.css delete mode 100644 components/thumbnail/themes/spectrum.css delete mode 100644 components/toast/themes/express.css delete mode 100644 components/toast/themes/spectrum-two.css delete mode 100644 components/toast/themes/spectrum.css delete mode 100644 components/tooltip/themes/express.css delete mode 100644 components/tooltip/themes/spectrum-two.css delete mode 100644 components/tooltip/themes/spectrum.css delete mode 100644 components/treeview/themes/express.css delete mode 100644 components/treeview/themes/spectrum-two.css delete mode 100644 components/treeview/themes/spectrum.css delete mode 100644 components/well/themes/express.css delete mode 100644 components/well/themes/spectrum-two.css delete mode 100644 components/well/themes/spectrum.css delete mode 100644 plugins/postcss-add-theming-layer/README.md delete mode 100644 plugins/postcss-add-theming-layer/expected/basic.css delete mode 100644 plugins/postcss-add-theming-layer/fixtures/basic.css delete mode 100644 plugins/postcss-add-theming-layer/index.js delete mode 100644 plugins/postcss-add-theming-layer/package.json delete mode 100644 plugins/postcss-add-theming-layer/project.json delete mode 100644 plugins/postcss-add-theming-layer/test.js delete mode 100644 plugins/postcss-add-theming-layer/utilities.js delete mode 100644 plugins/postcss-property-rollup/README.md delete mode 100644 plugins/postcss-property-rollup/expected/basic.css delete mode 100644 plugins/postcss-property-rollup/fixtures/basic.css delete mode 100644 plugins/postcss-property-rollup/index.js delete mode 100644 plugins/postcss-property-rollup/package.json delete mode 100644 plugins/postcss-property-rollup/project.json delete mode 100644 plugins/postcss-property-rollup/test.js delete mode 100644 plugins/stylelint-theme-alignment/README.md delete mode 100644 plugins/stylelint-theme-alignment/index.js delete mode 100644 plugins/stylelint-theme-alignment/package.json delete mode 100644 plugins/stylelint-theme-alignment/project.json diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000000..dfb6b4dd82 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,101 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@spectrum-tools/gh-action-file-diff": "2.2.0", + "@spectrum-css/preview": "12.0.3", + "@spectrum-css/accordion": "7.1.0", + "@spectrum-css/actionbar": "10.1.1", + "@spectrum-css/actionbutton": "7.1.1", + "@spectrum-css/actiongroup": "6.1.0", + "@spectrum-css/actionmenu": "7.1.1", + "@spectrum-css/alertbanner": "3.1.0", + "@spectrum-css/alertdialog": "4.1.0", + "@spectrum-css/asset": "7.1.0", + "@spectrum-css/assetcard": "5.1.0", + "@spectrum-css/assetlist": "8.1.0", + "@spectrum-css/avatar": "9.1.0", + "@spectrum-css/badge": "6.1.0", + "@spectrum-css/breadcrumb": "11.1.0", + "@spectrum-css/button": "14.1.1", + "@spectrum-css/buttongroup": "9.1.0", + "@spectrum-css/calendar": "7.1.0", + "@spectrum-css/card": "11.1.0", + "@spectrum-css/checkbox": "10.1.0", + "@spectrum-css/clearbutton": "7.1.0", + "@spectrum-css/closebutton": "6.1.0", + "@spectrum-css/coachindicator": "4.1.0", + "@spectrum-css/coachmark": "9.1.1", + "@spectrum-css/colorarea": "7.1.0", + "@spectrum-css/colorhandle": "10.1.0", + "@spectrum-css/colorloupe": "7.1.0", + "@spectrum-css/colorslider": "8.1.0", + "@spectrum-css/colorwheel": "6.1.0", + "@spectrum-css/combobox": "4.1.1", + "@spectrum-css/commons": "11.0.0", + "@spectrum-css/contextualhelp": "5.1.2", + "@spectrum-css/datepicker": "4.1.1", + "@spectrum-css/dial": "5.1.0", + "@spectrum-css/dialog": "12.1.0", + "@spectrum-css/divider": "5.1.0", + "@spectrum-css/dropindicator": "7.1.0", + "@spectrum-css/dropzone": "8.1.0", + "@spectrum-css/fieldgroup": "7.1.0", + "@spectrum-css/fieldlabel": "10.1.0", + "@spectrum-css/floatingactionbutton": "4.1.0", + "@spectrum-css/form": "1.1.0", + "@spectrum-css/helptext": "7.1.0", + "@spectrum-css/icon": "9.1.0", + "@spectrum-css/illustratedmessage": "9.1.0", + "@spectrum-css/infieldbutton": "6.1.1", + "@spectrum-css/inlinealert": "10.1.0", + "@spectrum-css/link": "7.1.0", + "@spectrum-css/logicbutton": "6.1.0", + "@spectrum-css/menu": "9.1.0", + "@spectrum-css/meter": "1.1.0", + "@spectrum-css/miller": "8.1.0", + "@spectrum-css/modal": "7.1.0", + "@spectrum-css/opacitycheckerboard": "4.1.0", + "@spectrum-css/page": "9.1.0", + "@spectrum-css/pagination": "10.1.0", + "@spectrum-css/picker": "9.1.2", + "@spectrum-css/pickerbutton": "6.1.1", + "@spectrum-css/popover": "8.2.0", + "@spectrum-css/progressbar": "6.1.0", + "@spectrum-css/progresscircle": "5.1.0", + "@spectrum-css/radio": "10.1.0", + "@spectrum-css/rating": "6.1.0", + "@spectrum-css/search": "8.1.0", + "@spectrum-css/sidenav": "7.1.0", + "@spectrum-css/slider": "6.1.0", + "@spectrum-css/splitview": "7.1.0", + "@spectrum-css/statuslight": "9.1.0", + "@spectrum-css/steplist": "7.1.0", + "@spectrum-css/stepper": "7.1.1", + "@spectrum-css/swatch": "8.1.1", + "@spectrum-css/swatchgroup": "5.1.0", + "@spectrum-css/switch": "6.1.0", + "@spectrum-css/table": "8.1.0", + "@spectrum-css/tabs": "6.1.1", + "@spectrum-css/tag": "10.1.0", + "@spectrum-css/taggroup": "7.1.0", + "@spectrum-css/textfield": "8.1.0", + "@spectrum-css/thumbnail": "8.1.0", + "@spectrum-css/toast": "11.1.0", + "@spectrum-css/tooltip": "7.1.0", + "@spectrum-css/tray": "5.1.0", + "@spectrum-css/treeview": "12.1.0", + "@spectrum-css/typography": "8.1.0", + "@spectrum-css/underlay": "6.1.0", + "@spectrum-css/well": "7.1.0", + "@spectrum-tools/postcss-rgb-mapping": "1.0.0", + "@spectrum-tools/stylelint-no-missing-var": "2.0.1", + "@spectrum-tools/stylelint-no-unknown-custom-properties": "2.0.2", + "@spectrum-tools/stylelint-no-unused-custom-properties": "2.0.4", + "@spectrum-css/tokens": "16.0.1", + "@spectrum-css/bundle": "1.0.0", + "@spectrum-css/generator": "4.1.0", + "@spectrum-css/ui-icons": "1.1.2" + }, + "changesets": [] +} diff --git a/.github/QUICK-START.md b/.github/QUICK-START.md index 963eb0580f..4b97fcab7e 100644 --- a/.github/QUICK-START.md +++ b/.github/QUICK-START.md @@ -3,6 +3,7 @@ This guide will show you how to quickly install Spectrum CSS and use it to display the Button component. ## Install using Node/yarn + Install the components you want along with their dependencies. Here's an example: ```shell @@ -12,26 +13,34 @@ yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @s Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s `` tag based on the [visual language](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [scale](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), and [theme](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops) you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme: ```html - + ``` -Use the `index.css` files in your project to include component and global styles ([Spectrum and Express contexts](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `` tag: +Use the `index.css` files in your project to include component and global styles ([background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `` tag: ```html - - + + - - + + ``` Inside the `` tag, add the markup for your component (Spectrum button in our example). The example also includes the CSS class names `spectrum-Button--fill` and `spectrum-Button--accent`, to use the accent variant: ```html - ``` @@ -39,18 +48,26 @@ To put it all together, your final html file will look like this: ```html - - - - - - - - + + + + + + + ``` ## Include files from a CDN + Another way to include Spectrum CSS components in your project is to use a CDN to link to the components you want, plus their dependencies, in the `` tag of your HTML. If you choose to use a CDN, please note that Spectrum CSS doesn't manage a CDN, cannot confirm the availability or up-time of external CDNs, and doesn't recommend using a CDN for Spectrum CSS in a production environment. diff --git a/.github/actions/file-diff/package.json b/.github/actions/file-diff/package.json index 1d4cdd838a..6e7a617f72 100644 --- a/.github/actions/file-diff/package.json +++ b/.github/actions/file-diff/package.json @@ -22,7 +22,7 @@ "package.json" ], "dependencies": { - "@actions/artifact": "^2.2.1", + "@actions/artifact": "^2.3.1", "@actions/core": "^1.11.1", "@actions/github": "^6.0.0", "@actions/glob": "^0.5.0", diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml index 59831db735..460c3bf9f1 100644 --- a/.github/workflows/development.yml +++ b/.github/workflows/development.yml @@ -13,7 +13,7 @@ on: pull_request: branches: - main - - spectrum-two + - spectrum-2 # Allow us to run tests for PRs updating github actions - chore-*ci* - chore-*github-actions* @@ -106,8 +106,6 @@ jobs: files_yaml: | styles: - components/*/index.css - - components/*/themes/spectrum.css - - components/*/themes/express.css eslint: - components/*/stories/*.js mdlint: @@ -201,7 +199,7 @@ jobs: if: ${{ contains(github.event.pull_request.labels.*.name, 'run_vrt') || ((github.event.pull_request.draft != true || contains(github.event.pull_request.labels.*.name, 'run_ci')) && github.event.pull_request.mergeable == true) }} uses: ./.github/workflows/vrt.yml with: - skip: ${{ github.base_ref == 'spectrum-two' || contains(github.event.pull_request.labels.*.name, 'skip_vrt') }} + skip: ${{ contains(github.event.pull_request.labels.*.name, 'skip_vrt') }} secrets: inherit # ------------------------------------------------------------- diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index fe2f10c617..b165fd5518 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -102,7 +102,7 @@ jobs: filter_mode: diff_context level: error reporter: github-pr-review - # stylelint_input: "components/*/index.css components/*/themes/*.css" + # stylelint_input: "components/*/index.css" stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}" stylelint_config: "${{ github.workspace }}/stylelint.config.js" diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml index 3b2be175eb..ebf5baf243 100644 --- a/.github/workflows/production.yml +++ b/.github/workflows/production.yml @@ -9,7 +9,7 @@ name: Build and verify production on: push: - branches: [main, spectrum-two] + branches: [main, spectrum-2] permissions: contents: read diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 44b8ff6a45..b71dd2f4e1 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -4,7 +4,7 @@ on: push: branches: - main - - spectrum-two + - spectrum-2 concurrency: ${{ github.workflow }}-${{ github.ref }} diff --git a/.github/workflows/vrt.yml b/.github/workflows/vrt.yml index a8944aeecd..aaa9677774 100644 --- a/.github/workflows/vrt.yml +++ b/.github/workflows/vrt.yml @@ -4,6 +4,7 @@ on: push: branches: - main + - spectrum-2 - "!changeset-release/**" - "!dependabot/**" workflow_dispatch: diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css index 98841f0995..7cee796ded 100644 --- a/.storybook/assets/base.css +++ b/.storybook/assets/base.css @@ -41,9 +41,12 @@ body { -webkit-tap-highlight-color: rgb(0, 0, 0, 0%); } -.spectrum.spectrum--legacy { - color: var(--spectrum-neutral-content-color-default); - background-color: var(--spectrum-background-layer-1-color); +.spectrum .spectrum-examples-static-black { + background: var(--spectrum-examples-gradient-static-black); +} + +.spectrum .spectrum-examples-static-white { + background: var(--spectrum-examples-gradient-static-white); } .spectrum .spectrum-examples-static-black { diff --git a/.storybook/assets/index.css b/.storybook/assets/index.css index 95b4d83897..b18c09d34c 100644 --- a/.storybook/assets/index.css +++ b/.storybook/assets/index.css @@ -119,4 +119,11 @@ select:focus, border-color: rgb(2, 101, 220) !important; box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important; } + +nav.sidebar-container, +div.sb-bar { + color: var(--spectrum-neutral-content-color-default) !important; + background-color: var(--spectrum-background-layer-2-color) !important; +} + /* stylelint-enable selector-class-pattern */ diff --git a/.storybook/blocks/utilities.js b/.storybook/blocks/utilities.js index b5ba302ccd..71e96d64dd 100644 --- a/.storybook/blocks/utilities.js +++ b/.storybook/blocks/utilities.js @@ -1,4 +1,3 @@ -import legacy from "@spectrum-css/tokens-legacy/dist/json/tokens.json"; import spectrum from "@spectrum-css/tokens/dist/json/tokens.json"; import { useTheme } from "@storybook/theming"; @@ -70,9 +69,8 @@ function fetchTheme({ color, scale, context } = {}) { // Create a platform context based on the scale (platform used in the token data) const platform = scale === "medium" ? "desktop" : "mobile"; - const tokens = context === "spectrum" ? spectrum : legacy; - return { color, scale, context, platform, tokens }; + return { color, scale, context, platform, tokens: spectrum }; } /** diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index 0ad4bb758a..03706e1572 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -1,8 +1,7 @@ import { makeDecorator, useEffect } from "@storybook/preview-api"; import { fetchContainers, toggleStyles } from "./helpers.js"; -import legacyTokens from "@spectrum-css/tokens-legacy/dist/index.css?inline"; -import tokens from "@spectrum-css/tokens/dist/css/index.css?inline"; +import tokens from "@spectrum-css/tokens/dist/index.css?inline"; /** * @type import('@storybook/csf').DecoratorFunction @@ -19,7 +18,6 @@ export const withContextWrapper = makeDecorator({ } = {}, globals: { color = "light", - context = "spectrum", scale = "medium", } = {}, parameters: { @@ -31,35 +29,26 @@ export const withContextWrapper = makeDecorator({ const staticColorSettings = { "black": { - background: "var(--spectrum-docs-static-black-background-color)", + background: "var(--spectrum-examples-gradient-static-black)", color: "light" }, "white": { - background: "var(--spectrum-docs-static-white-background-color)", + background: "var(--spectrum-examples-gradient-static-white)", color: "dark" }, }; - const original = { - color, - context, - scale, - }; + const original = { color, scale }; useEffect(() => { const isDocs = viewMode === "docs"; const isTesting = showTestingGrid; - const isRaw = Boolean(context === "raw"); - const isModern = Boolean(context === "spectrum"); - const isExpress = Boolean(context === "express"); - - if (!isRaw) { - // add the default classes to the body to ensure labels, headings, and borders are styled correctly - document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium"); - } // Start by attaching the appropriate tokens to the container - toggleStyles(document.body, "tokens", isModern ? tokens : legacyTokens, !isRaw, context); + toggleStyles(document.body, "tokens", tokens, true); + + // add the default classes to the body to ensure labels, headings, and borders are styled correctly + document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium"); for (const container of fetchContainers(id, isDocs, isTesting)) { // Check if the container is a testing wrapper to prevent applying colors around the testing grid @@ -69,7 +58,6 @@ export const withContextWrapper = makeDecorator({ // Reset the context to the original values color = original.color; - context = original.context; scale = original.scale; let staticKey = staticColor; @@ -84,20 +72,7 @@ export const withContextWrapper = makeDecorator({ if (!staticKey) hasStaticElement = false; // Every container gets the spectrum class - container.classList.toggle("spectrum", !isRaw); - - // S1 and S1 Express get the legacy class - container.classList.toggle("spectrum--legacy", !isModern && !isRaw); - - // Express only gets the express class - container.classList.toggle("spectrum--express", isExpress && !isRaw); - - // Darkest is deprecated in Spectrum 2 - if (isModern && color === "darkest") { - /* eslint-disable no-console -- notify that darkest was deprecated in S2 */ - console.warn("The 'darkest' color is deprecated in Spectrum 2. Please use 'dark' instead."); - color = "dark"; - } + container.classList.toggle("spectrum", true); // Let the static color override the color if it's set if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) { @@ -110,12 +85,12 @@ export const withContextWrapper = makeDecorator({ color = "light"; } - for (let c of ["light", "dark", "darkest"]) { - container.classList.toggle(`spectrum--${c}`, c === color && !isRaw); + for (let c of ["light", "dark"]) { + container.classList.toggle(`spectrum--${c}`, c === color); } for (const s of ["medium", "large"]) { - container.classList.toggle(`spectrum--${s}`, s === scale && !isRaw); + container.classList.toggle(`spectrum--${s}`, s === scale); } if (!isTestingWrapper) { @@ -129,7 +104,7 @@ export const withContextWrapper = makeDecorator({ } } - }, [context, color, scale, viewMode, original, staticColor, rootClass, tokens, legacyTokens, staticColorSettings, showTestingGrid]); + }, [viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, showTestingGrid]); return StoryFn(data); }, diff --git a/.storybook/guides/develop.mdx b/.storybook/guides/develop.mdx index d36ba09a9a..15211bc875 100644 --- a/.storybook/guides/develop.mdx +++ b/.storybook/guides/develop.mdx @@ -14,11 +14,10 @@ Welcome to the development and exploration environment for Spectrum CSS, driven This guide is intended to get you up to speed on how we work within Storybook in the Spectrum CSS project. It will cover the following topics: -- [Architecture](#architecture) +- [Component architecture](#component-architecture) - [Writing stories](#writing-stories) - [Templates](#templates) - [Testing stories](#testing-stories) -- [Changelog](#changelog) For more general information about how to contribute to the Spectrum CSS project, take a look at our [contribution guidelines on GitHub](https://github.com/adobe/spectrum-css/blob/main/.github/CONTRIBUTING.md). @@ -31,35 +30,24 @@ For more general information about how to contribute to the Spectrum CSS project Each component has the following files: -- `index.css` - The source file for all styles related to the component. This contains all selectors and css properties for the component but specifically lacks any custom properties or variables. These values are sourced from the `themes` directory. -- `themes/*.css` - The theme-specific, component-level custom properties used to style the component. These files are meant to be loaded with the source styles. +- `index.css` - The source file for all styles related to the component. This contains all selectors and css properties for the component. - `stories/*.stories.js` - The storybook file that defines the component's stories and the available knobs for the component. - `stories/template.js` - The template function that generates the component's mark-up based on the provided settings. - `stories/*.test.js` - The testing grid for visual regression testing in Chromatic. -- `stories/*.mdx` - This asset generates the component-specific documentation and is rendered in Storybook as the Docs page. Each component outputs the following assets to `dist`: -- `index.css`: This asset includes the base CSS and the `themes/spectrum.css` definitions (without the system mapping layer). This asset is meant to be used in a environment where only the current Spectrum theme is supported. -- `index-base.css`: This asset includes only the base CSS; that is, the CSS without any custom property definitions. This can be used in conjunction with `index-theme.css` and the desired `themes/*.css` file to render a themed component. -- `index-theme.css`: This asset includes only the custom property definitions for the component as mapped to the system variables. This can be used in conjunction with `index-base.css` and the desired `themes/*.css` file to render a themed component. - -Each component outputs theme-specific assets to `dist/themes`. These assets include the system variables mapped to their global token counterparts. This file is meant to be loaded in conjunction with the `index-base.css` and `index-theme.css` files to render a themed component. - -- `themes/spectrum-two.css`: Represents the current Spectrum theme, aka Spectrum 2. -- `themes/spectrum.css`: Represents the legacy Spectrum theme, aka Spectrum 1. **deprecated** -- `themes/express.css`: Represents the Express theme. **deprecated** +- `index.css`: This asset includes the CSS for the component and is meant to be loaded in conjunction with the tokens for your desired color context and scales. ## Adding a new component 1. Generate a new component using the `yarn new component` command. The generator will prompt you to answer questions about your component. 2. Edit the `dependencies` within the `package.json` file to use only the dependencies your component needs. All components rely on `@spectrum-css/tokens`, and most rely on `@spectrum-css/icon`. 3. Once your folder has been generated, you can run `yarn start` in the root of the project to begin developing. -4. The `index.css` file is where most of your styles will be added. Add any custom property mappings to the global token library in the `themes/spectrum.css` asset. -5. Inside the `stories` directory you will find a `template.js`, `*.stories.js`, and `*.mdx` file. +4. The `index.css` file is where all of your styles should be added. +5. Inside the `stories` directory you will find a `template.js` and `*.stories.js` file. - In the `*.stories.js` file, define the available knobs and properties for your component, as well as any standard variations you want to surface in [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction). - Update the `template.js` file with the markup, using [lit-html syntax](https://lit.dev/docs/templates/overview/) to adjust results based on the provided settings from the Storybook knobs. - - Update the `*.mdx` file with the documentation for your component. _Note_: Because we use scoped packages, before it can be published, you must manually publish the new component as public: @@ -116,8 +104,6 @@ CSS assets will be run through their respective postcss configurations. This mea ```js import "../index.css"; -import "../themes/express.css"; -import "../themes/spectrum.css"; ``` We are leaning on Storybook's `@storybook/web-components-vite` framework configuration as our stories rely on lit for dynamic attribute assignment. @@ -131,7 +117,7 @@ We rely on the following add-ons to power our implementation: - [@whitespace/storybook-addon-html](https://www.npmjs.com/package/@whitespace/storybook-addon-html) - [@etchteam/storybook-addon-status](https://storybook.js.org/addons/@etchteam/storybook-addon-status) - [@storybook/addon-interactions](https://github.com/storybookjs/storybook/tree/next/code/addons/interactions) -- [@chromaui/addon-visual-tests](https://www.chromatic.com/docs/visual-testing-addon/) +- [@chromatic-com/storybook](https://www.chromatic.com/docs/visual-testing-addon/) - [@storybook/addon-designs](https://storybook.js.org/addons/@storybook/addon-designs/) ## Writing stories @@ -345,8 +331,6 @@ 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 = ( { @@ -479,7 +463,7 @@ Default.parameters = { }; ``` -#### Story tags +### Story tags A story's [tags](https://storybook.js.org/docs/writing-stories/tags#built-in-tags) can be configured for a few different purposes. Through this project's global configuration, all stories include the `autodocs` tag by default, which causes them to appear on the component's "Docs" page. The `dev` tag, which Storybook applies by default, denotes stories that should be included in the Storybook sidebar. The `!` symbol is used to negate the tag. diff --git a/.storybook/main.js b/.storybook/main.js index ccd00e2f45..d8e1b0f225 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -20,6 +20,11 @@ export default { files: "*.@(stories.js|mdx)", titlePrefix: "Guides", }, + { + directory: "./foundations", + files: "*/*.@(stories.js|mdx)", + titlePrefix: "Foundations", + }, { directory: "./deprecated", files: "**/*.@(stories.js|mdx)", diff --git a/.storybook/manager.js b/.storybook/manager.js index 53b86a5660..ce8c242b04 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,11 +1,14 @@ + import { addons } from "@storybook/manager-api"; import { create } from "@storybook/theming"; +import { startCase } from "lodash"; -import "./assets/index.css"; import logo from "./assets/logo.svg"; import pkg from "./package.json"; +import "./assets/index.css"; + const root = document.body ?? document.documentElement; if (root) root.classList.add("spectrum", "spectrum--light", "spectrum--medium"); @@ -64,5 +67,6 @@ addons.setConfig({ }), sidebar: { showRoots: false, + renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)) + " 📚", }, }); diff --git a/.storybook/modes/index.js b/.storybook/modes/index.js index c3b991e5bd..b4df304251 100644 --- a/.storybook/modes/index.js +++ b/.storybook/modes/index.js @@ -20,16 +20,6 @@ const modes = { color: "dark", textDirection: "rtl", }, - "S1 | Light | LTR": { - context: "legacy", - color: "light", - textDirection: "ltr", - }, - "Express | Light | LTR": { - context: "express", - color: "light", - textDirection: "ltr", - }, }; export default modes; diff --git a/.storybook/package.json b/.storybook/package.json index 30ab7f9cdd..5c46f4c332 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -42,12 +42,11 @@ "@adobe/spectrum-css-workflow-icons": "^1.5.4", "@spectrum-css/bundle": "1.0.1", "@spectrum-css/tokens": "16.0.1", - "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.0.0", "@spectrum-css/ui-icons": "1.1.2" }, "devDependencies": { - "@babel/core": "^7.26.0", - "@chromatic-com/storybook": "^3.2.3", + "@babel/core": "^7.26.9", + "@chromatic-com/storybook": "^3.2.5", "@etchteam/storybook-addon-status": "^5.0.0", "@storybook/addon-a11y": "8.4.7", "@storybook/addon-actions": "8.4.7", @@ -65,7 +64,7 @@ "@storybook/theming": "8.4.7", "@storybook/web-components-vite": "8.4.7", "@whitespace/storybook-addon-html": "^6.1.1", - "chromatic": "^11.22.2", + "chromatic": "^11.27.0", "lit": "^3.2.1", "lodash-es": "^4.17.21", "npm-registry-fetch": "^18.0.2", @@ -74,7 +73,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-syntax-highlighter": "^15.6.1", - "remark-gfm": "^4.0.0", + "remark-gfm": "^4.0.1", "rollup-plugin-postcss-lit": "^2.1.0", "storybook": "8.4.7", "vite": "^5.4.11" diff --git a/.storybook/preview.js b/.storybook/preview.js index ff24304496..9f75a7e221 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -32,6 +32,8 @@ export const parameters = { order: [ "Guides", ["Contributing", "*", "Adobe Code of Conduct", "Changelog"], + "Foundations", + ["*"], "Components", ["*", ["Docs", "Default", "*"]], "Deprecated", @@ -88,7 +90,7 @@ export const parameters = { // Set an empty object to avoid the "undefined" value in the ComponentDetails doc block packageJson: {}, // A list of published npm tags that should not appear in the ComponentDetails doc block - ignoredTags: ["beta", "next"], + ignoredTags: ["beta"], }; export default { diff --git a/.storybook/types/global.js b/.storybook/types/global.js index 60a369079e..55f8c760e4 100644 --- a/.storybook/types/global.js +++ b/.storybook/types/global.js @@ -4,22 +4,6 @@ /** @type import('@storybook/types').GlobalTypes */ export default { - context: { - title: "Design context", - description: "The variation of Spectrum to use in the component", - defaultValue: "spectrum", - type: "string", - showName: true, - toolbar: { - items: [ - { value: "spectrum", title: "Spectrum 2", right: "default" }, - { value: "legacy", title: "Spectrum 1", right: "legacy" }, - { value: "express", title: "Express", right: "legacy" }, - { value: "raw", title: "Token-free", right: "raw" }, - ], - dynamicTitle: true, - }, - }, color: { title: "Color", description: "Controls the color context of the component", @@ -30,7 +14,6 @@ export default { items: [ { value: "light", title: "Light", right: "default" }, { value: "dark", title: "Dark" }, - { value: "darkest", title: "Darkest", right: "deprecated" }, ], dynamicTitle: true, }, diff --git a/.vscode/settings.json b/.vscode/settings.json index c940cee9d9..d6ebe229e3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -43,10 +43,6 @@ "siteId": "jira.corp.adobe.com" } ], - "atlascode.jira.lastCreateSiteAndProject": { - "projectKey": "CSS", - "siteId": "jira.corp.adobe.com" - }, "atlascode.jira.workingSite": { "baseUrlSuffix": "jira.corp.adobe.com" }, @@ -101,10 +97,8 @@ } ], "cssVariables.lookupFiles": [ - "${workspaceFolder}/tokens/dist/css/index.css", - "${workspaceFolder}/tokens/dist/css/*.css", - "${workspaceFolder}/components/*/index.css", - "${workspaceFolder}/components/*/themes/*.css" + "${workspaceFolder}/tokens/**/*.css", + "${workspaceFolder}/components/*/index.css" ], "docthis.includeDescriptionTag": true, "docthis.inferTypesFromNames": true, @@ -150,19 +144,19 @@ "githubPullRequests.queries": [ { "label": "Waiting for my review", - "query": "is:open review-requested:${user}" + "query": "repo:${owner}/${repository} is:open review-requested:${user}" }, { "label": "Assigned to me", - "query": "is:open assignee:${user}" + "query": "repo:${owner}/${repository} is:open assignee:${user}" }, { "label": "Created by me", - "query": "is:open author:${user}" + "query": "repo:${owner}/${repository} is:open author:${user}" }, { "label": "Mentioned me", - "query": "is:open mentions:${user}" + "query": "repo:${owner}/${repository} is:open mentions:${user}" } ], "js/ts.implicitProjectConfig.experimentalDecorators": true, diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index 3f3e89fbf1..4080a4b78f 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -39,9 +39,7 @@ ".spectrum-Accordion:dir(rtl)", ".spectrum-Accordion:lang(ja)", ".spectrum-Accordion:lang(ko)", - ".spectrum-Accordion:lang(zh)", - "[dir=\"rtl\"] .spectrum-Accordion", - "[dir=\"rtl\"] .spectrum-Accordion-itemIconContainer" + ".spectrum-Accordion:lang(zh)" ], "modifiers": [ "--mod-accordion-background-color-default", @@ -198,11 +196,6 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-sans-font-family-stack" ], - "system-theme": [ - "--system-accordion-divider-color", - "--system-accordion-item-content-color", - "--system-accordion-item-content-disabled-color" - ], "passthroughs": [], "high-contrast": [] } diff --git a/components/accordion/index.css b/components/accordion/index.css index 2e0a761645..e08441208d 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -11,9 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Accordion { + --spectrum-accordion-divider-color: var(--spectrum-gray-200); + --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-content-color: var(--spectrum-body-color); + --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); diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 8294f3a402..79fc3648bf 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -7,9 +7,6 @@ import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const AccordionItem = ({ heading, diff --git a/components/accordion/themes/express.css b/components/accordion/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/accordion/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/accordion/themes/spectrum-two.css b/components/accordion/themes/spectrum-two.css deleted file mode 100644 index 7097b1adc6..0000000000 --- a/components/accordion/themes/spectrum-two.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. - */ - -@container style(--system: spectrum) { - .spectrum-Accordion { - --spectrum-accordion-divider-color: var(--spectrum-gray-200); - --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); - --spectrum-accordion-item-content-color: var(--spectrum-body-color); - } -} diff --git a/components/accordion/themes/spectrum.css b/components/accordion/themes/spectrum.css deleted file mode 100644 index 572d3f1db1..0000000000 --- a/components/accordion/themes/spectrum.css +++ /dev/null @@ -1,24 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Accordion { - --spectrum-accordion-divider-color: var(--spectrum-gray-300); - --spectrum-accordion-item-content-disabled-color: var(--spectrum-gray-400); - --spectrum-accordion-item-content-color: var(--spectrum-gray-800); - } -} diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json index 3632db90bf..da9142c6fc 100644 --- a/components/actionbar/dist/metadata.json +++ b/components/actionbar/dist/metadata.json @@ -88,10 +88,6 @@ "--spectrum-spacing-75", "--spectrum-white" ], - "system-theme": [ - "--system-action-bar-popover-background-color", - "--system-action-bar-popover-border-color" - ], "passthroughs": [], "high-contrast": ["--highcontrast-actionbar-popover-border-color"] } diff --git a/components/actionbar/index.css b/components/actionbar/index.css index 474499e462..6bf566dcb3 100644 --- a/components/actionbar/index.css +++ b/components/actionbar/index.css @@ -11,9 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-ActionBar { + /* colors - applied to popover */ + --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); + --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); + --spectrum-actionbar-height: var(--spectrum-action-bar-height); --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100); diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js index 8b134157bd..6809e55225 100644 --- a/components/actionbar/stories/template.js +++ b/components/actionbar/stories/template.js @@ -1,16 +1,13 @@ -import { Container } from "@spectrum-css/preview/decorators"; import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; +import { Container } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ActionBar", diff --git a/components/actionbar/themes/express.css b/components/actionbar/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/actionbar/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/actionbar/themes/spectrum-two.css b/components/actionbar/themes/spectrum-two.css deleted file mode 100644 index 157c2dc929..0000000000 --- a/components/actionbar/themes/spectrum-two.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. - */ - -@container style(--system: spectrum) { - .spectrum-ActionBar { - /* colors - applied to popover */ - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); - --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - } -} diff --git a/components/actionbar/themes/spectrum.css b/components/actionbar/themes/spectrum.css deleted file mode 100644 index 27971810d3..0000000000 --- a/components/actionbar/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ActionBar { - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50); - --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - } -} diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index 08d99aab27..f2ef34ab26 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -3,7 +3,6 @@ "selectors": [ ".spectrum-ActionButton", ".spectrum-ActionButton--sizeL", - ".spectrum-ActionButton--sizeM", ".spectrum-ActionButton--sizeS", ".spectrum-ActionButton--sizeXL", ".spectrum-ActionButton--sizeXS", @@ -20,11 +19,6 @@ ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label", ".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)", ".spectrum-ActionButton.spectrum-ActionButton--quiet", - ".spectrum-ActionButton.spectrum-ActionButton--sizeL", - ".spectrum-ActionButton.spectrum-ActionButton--sizeM", - ".spectrum-ActionButton.spectrum-ActionButton--sizeS", - ".spectrum-ActionButton.spectrum-ActionButton--sizeXL", - ".spectrum-ActionButton.spectrum-ActionButton--sizeXS", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite", @@ -38,7 +32,6 @@ ".spectrum-ActionButton:focus-visible", ".spectrum-ActionButton:focus-visible:after", ".spectrum-ActionButton:hover", - "[dir=\"rtl\"] .spectrum-ActionButton", "a.spectrum-ActionButton" ], "modifiers": [ @@ -90,10 +83,7 @@ "--mod-actionbutton-label-color", "--mod-actionbutton-min-width", "--mod-actionbutton-static-content-color", - "--mod-actionbutton-text-to-visual", - "--mod-animation-duration-100", - "--mod-line-height-100", - "--mod-sans-font-family-stack" + "--mod-actionbutton-text-to-visual" ], "component": [ "--spectrum-action-button-edge-to-hold-icon-extra-large", @@ -119,7 +109,6 @@ "--spectrum-actionbutton-border-color-focus", "--spectrum-actionbutton-border-color-hover", "--spectrum-actionbutton-border-radius", - "--spectrum-actionbutton-border-radius-default", "--spectrum-actionbutton-border-width", "--spectrum-actionbutton-content-color", "--spectrum-actionbutton-content-color-selected", @@ -213,12 +202,8 @@ "--spectrum-text-to-visual-75", "--spectrum-transparent-black-100", "--spectrum-transparent-black-200", - "--spectrum-transparent-black-800", - "--spectrum-transparent-black-900", "--spectrum-transparent-white-100", "--spectrum-transparent-white-200", - "--spectrum-transparent-white-800", - "--spectrum-transparent-white-900", "--spectrum-white", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", @@ -226,66 +211,6 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-action-button-background-color-default", - "--system-action-button-background-color-disabled", - "--system-action-button-background-color-down", - "--system-action-button-background-color-focus", - "--system-action-button-background-color-hover", - "--system-action-button-background-color-selected", - "--system-action-button-background-color-selected-down", - "--system-action-button-background-color-selected-focus", - "--system-action-button-background-color-selected-hover", - "--system-action-button-border-color-default", - "--system-action-button-border-color-disabled", - "--system-action-button-border-color-down", - "--system-action-button-border-color-focus", - "--system-action-button-border-color-hover", - "--system-action-button-content-color-selected", - "--system-action-button-quiet-background-color-default", - "--system-action-button-quiet-background-color-disabled", - "--system-action-button-quiet-background-color-down", - "--system-action-button-quiet-background-color-focus", - "--system-action-button-quiet-background-color-hover", - "--system-action-button-quiet-background-color-selected-disabled", - "--system-action-button-size-l-border-radius-default", - "--system-action-button-size-m-border-radius-default", - "--system-action-button-size-s-border-radius-default", - "--system-action-button-size-xl-border-radius-default", - "--system-action-button-size-xs-border-radius-default", - "--system-action-button-static-black-background-color-default", - "--system-action-button-static-black-background-color-disabled", - "--system-action-button-static-black-background-color-down", - "--system-action-button-static-black-background-color-focus", - "--system-action-button-static-black-background-color-hover", - "--system-action-button-static-black-background-color-selected-disabled", - "--system-action-button-static-black-border-color-default", - "--system-action-button-static-black-border-color-disabled", - "--system-action-button-static-black-border-color-down", - "--system-action-button-static-black-border-color-focus", - "--system-action-button-static-black-border-color-hover", - "--system-action-button-static-black-quiet-background-color-default", - "--system-action-button-static-black-quiet-background-color-disabled", - "--system-action-button-static-black-quiet-background-color-down", - "--system-action-button-static-black-quiet-background-color-focus", - "--system-action-button-static-black-quiet-background-color-hover", - "--system-action-button-static-white-background-color-default", - "--system-action-button-static-white-background-color-disabled", - "--system-action-button-static-white-background-color-down", - "--system-action-button-static-white-background-color-focus", - "--system-action-button-static-white-background-color-hover", - "--system-action-button-static-white-background-color-selected-disabled", - "--system-action-button-static-white-border-color-default", - "--system-action-button-static-white-border-color-disabled", - "--system-action-button-static-white-border-color-down", - "--system-action-button-static-white-border-color-focus", - "--system-action-button-static-white-border-color-hover", - "--system-action-button-static-white-quiet-background-color-default", - "--system-action-button-static-white-quiet-background-color-disabled", - "--system-action-button-static-white-quiet-background-color-down", - "--system-action-button-static-white-quiet-background-color-focus", - "--system-action-button-static-white-quiet-background-color-hover" - ], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index ac4f410471..d2bd0509b6 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -12,7 +12,6 @@ */ @import "@spectrum-css/commons/basebutton.css"; -@import "./themes/spectrum-two.css"; @media (forced-colors: active) { .spectrum-ActionButton { @@ -49,43 +48,75 @@ } .spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100); + + --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); + --spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + + --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-content-color-selected: var(--spectrum-gray-50); + --spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); --spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); --spectrum-actionbutton-content-color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))); - --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default)); + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-medium)); --spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100)); --spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); --spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); --spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color))); + --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100); + --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100); + &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } &.spectrum-ActionButton--quiet { --spectrum-actionbutton-border-color: transparent; - } - /* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes */ - &.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { - --mod-actionbutton-background-color-default-selected: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); - --mod-actionbutton-background-color-hover-selected: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); - --mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); - --mod-actionbutton-background-color-focus-selected: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); - - --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); } &.spectrum-ActionButton--staticBlack { - --mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-800); - --mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900); + --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-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); + + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); --mod-actionbutton-content-color-default: var(--spectrum-black); --mod-actionbutton-content-color-hover: var(--spectrum-black); @@ -99,14 +130,30 @@ --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); --mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-disabled: transparent; + } } &.spectrum-ActionButton--staticWhite { - /* background color _not_ selected is coming from the system theme layer */ - --mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-white-800); - --mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900); + --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-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); + + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); --mod-actionbutton-content-color-default: var(--spectrum-white); --mod-actionbutton-content-color-hover: var(--spectrum-white); @@ -120,6 +167,27 @@ --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); --mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-disabled: transparent; + } + } + + /* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes */ + &.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { + --mod-actionbutton-background-color-default-selected: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); + --mod-actionbutton-background-color-hover-selected: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); + --mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); + --mod-actionbutton-background-color-focus-selected: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); + + --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); } &.is-selected { @@ -167,19 +235,8 @@ } } -.spectrum-ActionButton, -.spectrum-ActionButton--sizeM { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100); -} - .spectrum-ActionButton--sizeXS { + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-extra-small)); --spectrum-actionbutton-sized-height: var(--spectrum-component-height-50); --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-50); --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-50); @@ -191,6 +248,7 @@ } .spectrum-ActionButton--sizeS { + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-small)); --spectrum-actionbutton-sized-height: var(--spectrum-component-height-75); --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-75); @@ -202,6 +260,7 @@ } .spectrum-ActionButton--sizeL { + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-large)); --spectrum-actionbutton-sized-height: var(--spectrum-component-height-200); --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-200); --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-200); @@ -213,6 +272,7 @@ } .spectrum-ActionButton--sizeXL { + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-extra-large)); --spectrum-actionbutton-sized-height: var(--spectrum-component-height-300); --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-300); --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-300); diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js index 425b7e4115..9c1fd98005 100644 --- a/components/actionbutton/stories/template.js +++ b/components/actionbutton/stories/template.js @@ -7,9 +7,6 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * @todo load order should not influence the icon size but it is; fix this diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css deleted file mode 100644 index a2f9f79610..0000000000 --- a/components/actionbutton/themes/express.css +++ /dev/null @@ -1,71 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-disabled: 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-border-color-disabled: transparent; - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); - } - - &.spectrum-ActionButton--staticBlack, - &.spectrum-ActionButton--staticWhite { - --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--staticBlack { - --spectrum-actionbutton-background-color-disabled: transparent; - - &, - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); - --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--staticWhite { - --spectrum-actionbutton-background-color-disabled: transparent; - - &, - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); - --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); - } - } - } -} diff --git a/components/actionbutton/themes/spectrum-two.css b/components/actionbutton/themes/spectrum-two.css deleted file mode 100644 index b436e9a77b..0000000000 --- a/components/actionbutton/themes/spectrum-two.css +++ /dev/null @@ -1,112 +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. - */ - -@container style(--system: spectrum) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default); - --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - --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-content-color-selected: var(--spectrum-gray-50); - - &.spectrum-ActionButton--sizeM { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-medium); - } - - &.spectrum-ActionButton--sizeXS { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-small); - } - - &.spectrum-ActionButton--sizeS { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-small); - } - - &.spectrum-ActionButton--sizeL { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-large); - } - - &.spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-large); - } - - &.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-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); - } - - &.spectrum-ActionButton--staticBlack { - --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-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); - - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-disabled: transparent; - } - } - - &.spectrum-ActionButton--staticWhite { - --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-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); - - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-disabled: transparent; - } - } - } -} diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css deleted file mode 100644 index 0c07028cf5..0000000000 --- a/components/actionbutton/themes/spectrum.css +++ /dev/null @@ -1,93 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); - --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-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); - - --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-border-color-disabled: var(--spectrum-disabled-border-color); - - --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-75); - - &.spectrum-ActionButton--sizeXS, - &.spectrum-ActionButton--sizeS, - &.spectrum-ActionButton--sizeM, - &.spectrum-ActionButton--sizeL, - &.spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-100); - } - - &.spectrum-ActionButton--quiet { - --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--staticBlack { - --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-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - - --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-background-color-disabled: transparent; - - &.spectrum-ActionButton--quiet { - --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-background-color-disabled: transparent; - } - } - - &.spectrum-ActionButton--staticWhite { - --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-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - - --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-background-color-disabled: transparent; - - &.spectrum-ActionButton--quiet { - --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-background-color-disabled: transparent; - } - } - } -} diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index c78e7d3096..b6de149009 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -20,10 +20,7 @@ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--sizeL", - ".spectrum-ActionGroup--sizeM", ".spectrum-ActionGroup--sizeS", - ".spectrum-ActionGroup--sizeXL", ".spectrum-ActionGroup--sizeXS", ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" @@ -53,11 +50,6 @@ "--spectrum-spacing-100", "--spectrum-spacing-75" ], - "system-theme": [ - "--system-action-group-gap-size-compact", - "--system-action-group-horizontal-spacing-compact", - "--system-action-group-vertical-spacing-compact" - ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], "high-contrast": [] } diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css index bbd26cb0f6..0c11bb15f7 100644 --- a/components/actiongroup/index.css +++ b/components/actiongroup/index.css @@ -11,9 +11,16 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-ActionGroup { + --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-100); + --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-100); + + --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); @@ -25,13 +32,6 @@ --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); -} - .spectrum-ActionGroup { display: flex; flex-wrap: wrap; diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js index d13cdac64a..25d8f25f4e 100644 --- a/components/actiongroup/stories/template.js +++ b/components/actiongroup/stories/template.js @@ -6,9 +6,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ActionGroup", diff --git a/components/actiongroup/themes/express.css b/components/actiongroup/themes/express.css deleted file mode 100644 index 3fd8de9cdb..0000000000 --- a/components/actiongroup/themes/express.css +++ /dev/null @@ -1,26 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - --spectrum-actiongroup-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - } -} diff --git a/components/actiongroup/themes/spectrum-two.css b/components/actiongroup/themes/spectrum-two.css deleted file mode 100644 index b25c0f945b..0000000000 --- a/components/actiongroup/themes/spectrum-two.css +++ /dev/null @@ -1,22 +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. - */ - -@container style(--system: spectrum) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: 0; - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: -1px; - --spectrum-actiongroup-vertical-spacing-compact: -1px; - } -} diff --git a/components/actiongroup/themes/spectrum.css b/components/actiongroup/themes/spectrum.css deleted file mode 100644 index 3d81bc564b..0000000000 --- a/components/actiongroup/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json index 15b6983e63..b9c7b84a4d 100644 --- a/components/alertbanner/dist/metadata.json +++ b/components/alertbanner/dist/metadata.json @@ -71,7 +71,6 @@ "--spectrum-white", "--spectrum-workflow-icon-size-100" ], - "system-theme": ["--system-alert-banner-neutral-background"], "passthroughs": [ "--mod-button-margin-block", "--mod-button-margin-left", diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css index 2f483970fb..04701fe55f 100644 --- a/components/alertbanner/index.css +++ b/components/alertbanner/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-AlertBanner { + --spectrum-alert-banner-neutral-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; diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js index 3eb719c061..b564deeed0 100644 --- a/components/alertbanner/stories/template.js +++ b/components/alertbanner/stories/template.js @@ -10,9 +10,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-AlertBanner", diff --git a/components/alertbanner/themes/express.css b/components/alertbanner/themes/express.css deleted file mode 100644 index a86424d5e4..0000000000 --- a/components/alertbanner/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-AlertBanner { - --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-background-color-default); - } -} diff --git a/components/alertbanner/themes/spectrum-two.css b/components/alertbanner/themes/spectrum-two.css deleted file mode 100644 index 3e038dbd7a..0000000000 --- a/components/alertbanner/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-AlertBanner { - --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); - } -} diff --git a/components/alertbanner/themes/spectrum.css b/components/alertbanner/themes/spectrum.css deleted file mode 100644 index 4dd42f109f..0000000000 --- a/components/alertbanner/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-AlertBanner { - --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); - } -} diff --git a/components/alertdialog/dist/metadata.json b/components/alertdialog/dist/metadata.json index 03bf62123f..4e34b0e5fb 100644 --- a/components/alertdialog/dist/metadata.json +++ b/components/alertdialog/dist/metadata.json @@ -78,7 +78,6 @@ "--spectrum-spacing-300", "--spectrum-workflow-icon-size-100" ], - "system-theme": [], "passthroughs": ["--mod-buttongroup-justify-content", "--mod-icon-color"], "high-contrast": [] } diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json index 306c123b1b..6389e295f4 100644 --- a/components/asset/dist/metadata.json +++ b/components/asset/dist/metadata.json @@ -20,12 +20,9 @@ ], "component": [ "--spectrum-asset-file-background", - "--spectrum-asset-file-background-color", "--spectrum-asset-file-outline", "--spectrum-asset-folder-background", - "--spectrum-asset-folder-background-color", - "--spectrum-asset-folder-outline", - "--spectrum-asset-icon-outline-color" + "--spectrum-asset-folder-outline" ], "global": [ "--spectrum-animation-duration-100", @@ -33,11 +30,6 @@ "--spectrum-gray-25", "--spectrum-gray-500" ], - "system-theme": [ - "--system-asset-file-background-color", - "--system-asset-folder-background-color", - "--system-asset-icon-outline-color" - ], "passthroughs": [], "high-contrast": ["--highcontrast-asset-icon-background-color"] } diff --git a/components/asset/index.css b/components/asset/index.css index abf5d42572..e31f6aea3a 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -11,13 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Asset { - --spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-asset-folder-background-color))); - --spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-asset-file-background-color))); - --spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color)); - --spectrum-asset-file-outline: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color)); + --spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-200))); + --spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-25))); + --spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500)); + --spectrum-asset-file-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500)); display: flex; align-items: center; diff --git a/components/asset/stories/template.js b/components/asset/stories/template.js index c32f792cd4..795c346c50 100644 --- a/components/asset/stories/template.js +++ b/components/asset/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Asset", diff --git a/components/asset/themes/express.css b/components/asset/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/asset/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/asset/themes/spectrum-two.css b/components/asset/themes/spectrum-two.css deleted file mode 100644 index 5eda732011..0000000000 --- a/components/asset/themes/spectrum-two.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. - */ - -@container style(--system: spectrum) { - .spectrum-Asset { - --spectrum-asset-folder-background-color: var(--spectrum-gray-200); - --spectrum-asset-file-background-color: var(--spectrum-gray-25); - --spectrum-asset-icon-outline-color: var(--spectrum-gray-500); - } -} diff --git a/components/asset/themes/spectrum.css b/components/asset/themes/spectrum.css deleted file mode 100644 index 8b2b12ee37..0000000000 --- a/components/asset/themes/spectrum.css +++ /dev/null @@ -1,24 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Asset { - --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/dist/metadata.json b/components/assetcard/dist/metadata.json index 1c86dc4752..94bf07de0a 100644 --- a/components/assetcard/dist/metadata.json +++ b/components/assetcard/dist/metadata.json @@ -176,12 +176,6 @@ "--spectrum-transparent-black-300", "--spectrum-white" ], - "system-theme": [ - "--system-asset-card-background-color", - "--system-asset-card-overlay-background-color", - "--system-asset-card-selectionindicator-background-color-default", - "--system-asset-card-selectionindicator-box-shadow-color" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-assectcard-border-color-selected-down", diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 26881a3f45..b776e53414 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -11,10 +11,13 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* outer container, unstyled */ .spectrum-AssetCard { + --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); + --spectrum-assetcard-background-color: var(--spectrum-gray-75); + --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9); + --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); + /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ --spectrum-assetcard-asset-size: 224px; --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100); diff --git a/components/assetcard/stories/template.js b/components/assetcard/stories/template.js index 864fcd951b..1b44be4e56 100644 --- a/components/assetcard/stories/template.js +++ b/components/assetcard/stories/template.js @@ -8,9 +8,6 @@ import { when } from "lit/directives/when.js"; import { camelCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-AssetCard", diff --git a/components/assetcard/themes/express.css b/components/assetcard/themes/express.css deleted file mode 100644 index 63115538f1..0000000000 --- a/components/assetcard/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(109 115 246 / 20%); - } -} diff --git a/components/assetcard/themes/spectrum-two.css b/components/assetcard/themes/spectrum-two.css deleted file mode 100644 index f38045fb75..0000000000 --- a/components/assetcard/themes/spectrum-two.css +++ /dev/null @@ -1,21 +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. - */ - -@container style(--system: spectrum) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); - --spectrum-assetcard-background-color: var(--spectrum-gray-75); - --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9); - --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); - } -} diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css deleted file mode 100644 index c3e7ef9e0a..0000000000 --- a/components/assetcard/themes/spectrum.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@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-200); - --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); - --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-200); - } -} diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json index 011c28ee31..0da89f4ae5 100644 --- a/components/assetlist/dist/metadata.json +++ b/components/assetlist/dist/metadata.json @@ -24,8 +24,7 @@ ".spectrum-AssetList-itemChildIndicator", ".spectrum-AssetList-itemLabel", ".spectrum-AssetList-itemSelector", - ".spectrum-AssetList:dir(rtl)", - "[dir=\"rtl\"] .spectrum-AssetList" + ".spectrum-AssetList:dir(rtl)" ], "modifiers": [ "--mod-assetlist-border-color-key-focus", @@ -85,10 +84,6 @@ "--spectrum-spacing-600", "--spectrum-spacing-75" ], - "system-theme": [ - "--system-asset-list-item-background-color-down", - "--system-asset-list-item-background-color-hover" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-assetlist-border-color-key-focus", diff --git a/components/assetlist/index.css b/components/assetlist/index.css index 742070edbd..28801db0d8 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-AssetList { + --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); + --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); + --spectrum-assetlist-width: 272px; --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100); diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js index 96d8f75a80..f5c6d9731a 100644 --- a/components/assetlist/stories/template.js +++ b/components/assetlist/stories/template.js @@ -7,9 +7,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const AssetListItem = ({ rootClass = "spectrum-AssetList-item", @@ -45,10 +42,10 @@ export const AssetListItem = ({ customClasses: [`${rootClass}Selector`], }, context) )} - ${when(image, () => + ${when(image, () => html`asset image thumbnail` )} - ${when(iconName, () => + ${when(iconName, () => Icon({ iconName, setName: iconSet, diff --git a/components/assetlist/themes/express.css b/components/assetlist/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/assetlist/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/assetlist/themes/spectrum-two.css b/components/assetlist/themes/spectrum-two.css deleted file mode 100644 index 0624623caf..0000000000 --- a/components/assetlist/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-AssetList { - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); - } -} diff --git a/components/assetlist/themes/spectrum.css b/components/assetlist/themes/spectrum.css deleted file mode 100644 index 30f67757c2..0000000000 --- a/components/assetlist/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-AssetList { - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200); - } -} diff --git a/components/avatar/dist/metadata.json b/components/avatar/dist/metadata.json index 47df733191..93b1c6f25e 100644 --- a/components/avatar/dist/metadata.json +++ b/components/avatar/dist/metadata.json @@ -52,7 +52,6 @@ "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-avatar-focus-indicator-color"] } diff --git a/components/badge/dist/metadata.json b/components/badge/dist/metadata.json index c8be859d83..050f08d41e 100644 --- a/components/badge/dist/metadata.json +++ b/components/badge/dist/metadata.json @@ -175,7 +175,6 @@ "--spectrum-workflow-icon-size-75", "--spectrum-yellow-background-color-default" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-badge-border-color"] } diff --git a/components/badge/index.css b/components/badge/index.css index bf4e458aca..8cbf37e63e 100644 --- a/components/badge/index.css +++ b/components/badge/index.css @@ -12,20 +12,20 @@ */ .spectrum-Badge { - /* badge styling for all t-shirt sizes and all themes */ + /* badge styling for all t-shirt sizes */ --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100); - /* label text styles for all t-shirt sizes and all themes */ + /* label text styles for all t-shirt sizes */ --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 */ + /* text and icon color default white for all t-shirt sizes */ --spectrum-badge-label-icon-color: var(--spectrum-white); - /* background color default for all t-shirt sizes and all themes */ + /* background color default for all t-shirt sizes */ --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - /* semantic background colors for all t-shirt sizes and all themes */ + /* semantic background colors for all t-shirt sizes */ --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); diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json index 561253d9ef..8a3e1e5d55 100644 --- a/components/breadcrumb/dist/metadata.json +++ b/components/breadcrumb/dist/metadata.json @@ -34,8 +34,7 @@ ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible", ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover", ".spectrum-Breadcrumbs-itemSeparator", - ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)", - "[dir=\"rtl\"] .spectrum-Breadcrumbs-itemSeparator" + ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)" ], "modifiers": [ "--mod-breadcrumbs-action-button-color", @@ -190,7 +189,6 @@ "--spectrum-text-underline-gap", "--spectrum-text-underline-thickness" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-breadcrumbs-action-button-color", diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index be9fdd8fe8..24f17dfea9 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -62,7 +62,6 @@ "a.spectrum-Button" ], "modifiers": [ - "--mod-animation-duration-100", "--mod-bold-font-weight", "--mod-button-animation-duration", "--mod-button-background-color-default", @@ -108,8 +107,6 @@ "--mod-button-top-to-icon", "--mod-button-top-to-text", "--mod-focus-indicator-gap", - "--mod-line-height-100", - "--mod-sans-font-family-stack", "--mod-static-black-focus-indicator-color" ], "component": [ @@ -284,110 +281,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-button-background-color-default", - "--system-button-background-color-disabled", - "--system-button-background-color-down", - "--system-button-background-color-focus", - "--system-button-background-color-hover", - "--system-button-border-color-default", - "--system-button-border-color-disabled", - "--system-button-border-color-down", - "--system-button-border-color-focus", - "--system-button-border-color-hover", - "--system-button-primary-content-color-default", - "--system-button-primary-content-color-down", - "--system-button-primary-content-color-focus", - "--system-button-primary-content-color-hover", - "--system-button-primary-outline-background-color-down", - "--system-button-primary-outline-background-color-focus", - "--system-button-primary-outline-background-color-hover", - "--system-button-secondary-background-color-default", - "--system-button-secondary-background-color-down", - "--system-button-secondary-background-color-focus", - "--system-button-secondary-background-color-hover", - "--system-button-secondary-outline-background-color-down", - "--system-button-secondary-outline-background-color-focus", - "--system-button-secondary-outline-background-color-hover", - "--system-button-secondary-outline-border-color-default", - "--system-button-secondary-outline-border-color-down", - "--system-button-selected-background-color-default", - "--system-button-selected-background-color-down", - "--system-button-selected-background-color-focus", - "--system-button-selected-background-color-hover", - "--system-button-static-black-background-color-default", - "--system-button-static-black-background-color-down", - "--system-button-static-black-background-color-focus", - "--system-button-static-black-background-color-hover", - "--system-button-static-black-content-color-default", - "--system-button-static-black-content-color-down", - "--system-button-static-black-content-color-focus", - "--system-button-static-black-content-color-hover", - "--system-button-static-black-outline-background-color-default", - "--system-button-static-black-outline-background-color-down", - "--system-button-static-black-outline-background-color-focus", - "--system-button-static-black-outline-background-color-hover", - "--system-button-static-black-outline-border-color-default", - "--system-button-static-black-outline-border-color-down", - "--system-button-static-black-outline-border-color-focus", - "--system-button-static-black-outline-border-color-hover", - "--system-button-static-black-outline-content-color-default", - "--system-button-static-black-outline-content-color-down", - "--system-button-static-black-outline-content-color-focus", - "--system-button-static-black-outline-content-color-hover", - "--system-button-static-black-secondary-background-color-default", - "--system-button-static-black-secondary-background-color-down", - "--system-button-static-black-secondary-background-color-focus", - "--system-button-static-black-secondary-background-color-hover", - "--system-button-static-black-secondary-content-color-default", - "--system-button-static-black-secondary-content-color-down", - "--system-button-static-black-secondary-content-color-focus", - "--system-button-static-black-secondary-content-color-hover", - "--system-button-static-black-secondary-outline-background-color-default", - "--system-button-static-black-secondary-outline-background-color-down", - "--system-button-static-black-secondary-outline-background-color-focus", - "--system-button-static-black-secondary-outline-background-color-hover", - "--system-button-static-black-secondary-outline-border-color-default", - "--system-button-static-black-secondary-outline-border-color-down", - "--system-button-static-black-secondary-outline-border-color-focus", - "--system-button-static-black-secondary-outline-border-color-hover", - "--system-button-static-white-background-color-default", - "--system-button-static-white-background-color-down", - "--system-button-static-white-background-color-focus", - "--system-button-static-white-background-color-hover", - "--system-button-static-white-content-color-default", - "--system-button-static-white-content-color-down", - "--system-button-static-white-content-color-focus", - "--system-button-static-white-content-color-hover", - "--system-button-static-white-outline-background-color-default", - "--system-button-static-white-outline-background-color-down", - "--system-button-static-white-outline-background-color-focus", - "--system-button-static-white-outline-background-color-hover", - "--system-button-static-white-outline-border-color-default", - "--system-button-static-white-outline-border-color-down", - "--system-button-static-white-outline-border-color-focus", - "--system-button-static-white-outline-border-color-hover", - "--system-button-static-white-outline-content-color-default", - "--system-button-static-white-outline-content-color-down", - "--system-button-static-white-outline-content-color-focus", - "--system-button-static-white-outline-content-color-hover", - "--system-button-static-white-secondary-background-color-default", - "--system-button-static-white-secondary-background-color-down", - "--system-button-static-white-secondary-background-color-focus", - "--system-button-static-white-secondary-background-color-hover", - "--system-button-static-white-secondary-content-color-default", - "--system-button-static-white-secondary-content-color-down", - "--system-button-static-white-secondary-content-color-focus", - "--system-button-static-white-secondary-content-color-hover", - "--system-button-static-white-secondary-outline-background-color-default", - "--system-button-static-white-secondary-outline-background-color-down", - "--system-button-static-white-secondary-outline-background-color-focus", - "--system-button-static-white-secondary-outline-background-color-hover", - "--system-button-static-white-secondary-outline-border-color-default", - "--system-button-static-white-secondary-outline-border-color-down", - "--system-button-static-white-secondary-outline-border-color-focus", - "--system-button-static-white-secondary-outline-border-color-hover" - ], "passthroughs": [ "--mod-progress-circle-position", "--mod-progress-circle-thickness", diff --git a/components/button/index.css b/components/button/index.css index cbddb4e2ec..8720612f9c 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -12,7 +12,6 @@ */ @import "@spectrum-css/commons/basebutton.css"; -@import "./themes/spectrum-two.css"; .spectrum-Button { --spectrum-button-sized-height: var(--spectrum-component-height-100); @@ -78,6 +77,163 @@ --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-button-background-color-default: var(--spectrum-gray-50); + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + + --spectrum-button-border-color-default: var(--spectrum-gray-400); + --spectrum-button-border-color-hover: var(--spectrum-gray-500); + --spectrum-button-border-color-down: var(--spectrum-gray-600); + --spectrum-button-border-color-focus: var(--spectrum-gray-500); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + + &.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--primary { + --spectrum-button-content-color-default: var(--spectrum-gray-25); + --spectrum-button-content-color-hover: var(--spectrum-gray-25); + --spectrum-button-content-color-down: var(--spectrum-gray-25); + --spectrum-button-content-color-focus: var(--spectrum-gray-25); + + &.spectrum-Button--outline { + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + } + } + + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-gray-100); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-down: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); + + &.spectrum-Button--outline { + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + + --spectrum-button-border-color-default: var(--spectrum-gray-300); + --spectrum-button-border-color-down: var(--spectrum-gray-400); + } + } + + /* static white: double the selector, double the fun (specificity...) */ + &.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-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--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); + + --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--secondary { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-200); + + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); + + &.spectrum-Button--outline { + --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-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); + + --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + } + } + } + + /* 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-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--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-900); + } + + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-200); + + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); + + &.spectrum-Button--outline { + --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-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); + + --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + } + } + } + &.is-selected { --spectrum-button-border-color-default: transparent; --spectrum-button-border-color-hover: transparent; diff --git a/components/button/stories/template.js b/components/button/stories/template.js index 16e259bd86..cecada6f7a 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -9,9 +9,6 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Button", diff --git a/components/button/themes/express.css b/components/button/themes/express.css deleted file mode 100644 index 1b4b5618ed..0000000000 --- a/components/button/themes/express.css +++ /dev/null @@ -1,37 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-200); - --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); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - &.is-selected { - --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); - } - } -} diff --git a/components/button/themes/spectrum-two.css b/components/button/themes/spectrum-two.css deleted file mode 100644 index 1275f3fd45..0000000000 --- a/components/button/themes/spectrum-two.css +++ /dev/null @@ -1,173 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-50); - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-200); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - - --spectrum-button-border-color-default: var(--spectrum-gray-400); - --spectrum-button-border-color-hover: var(--spectrum-gray-500); - --spectrum-button-border-color-down: var(--spectrum-gray-600); - --spectrum-button-border-color-focus: var(--spectrum-gray-500); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - - &.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--primary { - --spectrum-button-content-color-default: var(--spectrum-gray-25); - --spectrum-button-content-color-hover: var(--spectrum-gray-25); - --spectrum-button-content-color-down: var(--spectrum-gray-25); - --spectrum-button-content-color-focus: var(--spectrum-gray-25); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-100); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - } - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-gray-100); - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-200); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-100); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - - --spectrum-button-border-color-default: var(--spectrum-gray-300); - --spectrum-button-border-color-down: var(--spectrum-gray-400); - } - } - - /* static white: double the selector, double the fun (specificity...) */ - &.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-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--outline { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); - - --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); - - --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--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-200); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-200); - - --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); - - &.spectrum-Button--outline { - --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-400); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); - - --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); - } - } - } - - /* 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-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--outline { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); - - --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-900); - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-200); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-200); - - --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); - - &.spectrum-Button--outline { - --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-400); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); - - --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); - } - } - } - } -} diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css deleted file mode 100644 index 9f9dc03cd9..0000000000 --- a/components/button/themes/spectrum.css +++ /dev/null @@ -1,148 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-75); - --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--primary { - --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--outline { - --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); - } - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-gray-200); - --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); - - &.spectrum-Button--outline { - --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); - - --spectrum-button-border-color-default: var(--spectrum-gray-300); - --spectrum-button-border-color-down: var(--spectrum-gray-500); - } - } - - &.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--outline { - --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-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-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--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-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--outline { - --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-background-color-default: var(--spectrum-transparent-white-800); - --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--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--outline { - --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-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-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--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-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--outline { - --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-background-color-default: var(--spectrum-transparent-black-800); - --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); - } - } - } - } -} diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json index 38d29f26e3..ab60149abb 100644 --- a/components/buttongroup/dist/metadata.json +++ b/components/buttongroup/dist/metadata.json @@ -19,7 +19,6 @@ "--spectrum-buttongroup-spacing" ], "global": ["--spectrum-spacing-200", "--spectrum-spacing-300"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index 676c81a041..cc1fb80035 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -54,8 +54,7 @@ ".spectrum-Calendar-tableCell", ".spectrum-Calendar-tableCell:focus", ".spectrum-Calendar-title", - ".spectrum-Calendar:dir(rtl)", - "[dir=\"rtl\"] .spectrum-Calendar" + ".spectrum-Calendar:dir(rtl)" ], "modifiers": [ "--mod-calendar-border-radius-reset", @@ -176,7 +175,6 @@ "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight" ], - "system-theme": ["--system-calendar-day-background-color-selected-disabled"], "passthroughs": [ "--mod-actionbutton-content-color-default", "--mod-actionbutton-edge-to-text", diff --git a/components/calendar/index.css b/components/calendar/index.css index 2ca1bc289a..3a641fa47f 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Calendar { + --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); + --spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100)); --spectrum-calendar-day-height: var(--mod-calendar-day-height, var(--spectrum-component-height-100)); --spectrum-calendar-day-border-size: var(--mod-calendar-day-border-size, var(--spectrum-border-width-200)); diff --git a/components/calendar/stories/template.js b/components/calendar/stories/template.js index 19c70fe939..863f5e8d11 100644 --- a/components/calendar/stories/template.js +++ b/components/calendar/stories/template.js @@ -8,9 +8,6 @@ import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Calendar", diff --git a/components/calendar/themes/express.css b/components/calendar/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/calendar/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/calendar/themes/spectrum-two.css b/components/calendar/themes/spectrum-two.css deleted file mode 100644 index b14c713435..0000000000 --- a/components/calendar/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Calendar { - --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); - } -} diff --git a/components/calendar/themes/spectrum.css b/components/calendar/themes/spectrum.css deleted file mode 100644 index 368d50d51e..0000000000 --- a/components/calendar/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Calendar { - --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-200-rgb), 0.4); - } -} diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json index 54eb899211..83d96a4098 100644 --- a/components/card/dist/metadata.json +++ b/components/card/dist/metadata.json @@ -215,13 +215,6 @@ "--spectrum-spacing-300", "--spectrum-spacing-400" ], - "system-theme": [ - "--system-card-border-color", - "--system-card-border-color-hover", - "--system-card-divider-color", - "--system-card-preview-background-color", - "--system-card-preview-background-color-hover" - ], "passthroughs": [], "high-contrast": [] } diff --git a/components/card/index.css b/components/card/index.css index f56599c17c..e6cabc897e 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -11,9 +11,13 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Card { + --spectrum-card-border-color: var(--spectrum-gray-100); + --spectrum-card-border-color-hover: var(--spectrum-gray-200); + --spectrum-card-divider-color: var(--spectrum-gray-200); + --spectrum-card-preview-background-color: var(--spectrum-gray-100); + --spectrum-card-preview-background-color-hover: var(--spectrum-gray-200); + /* Default Layout */ --spectrum-card-background-color: var(--mod-card-background-color, var(--spectrum-background-layer-2-color)); --spectrum-card-body-spacing: var(--mod-card-body-spacing, var(--spectrum-spacing-400)); diff --git a/components/card/stories/template.js b/components/card/stories/template.js index d1d226c7b0..09eb036080 100644 --- a/components/card/stories/template.js +++ b/components/card/stories/template.js @@ -11,9 +11,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Card", diff --git a/components/card/themes/express.css b/components/card/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/card/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/card/themes/spectrum-two.css b/components/card/themes/spectrum-two.css deleted file mode 100644 index 2ef275418e..0000000000 --- a/components/card/themes/spectrum-two.css +++ /dev/null @@ -1,22 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Card { - --spectrum-card-border-color: var(--spectrum-gray-100); - --spectrum-card-border-color-hover: var(--spectrum-gray-200); - --spectrum-card-divider-color: var(--spectrum-gray-200); - --spectrum-card-preview-background-color: var(--spectrum-gray-100); - --spectrum-card-preview-background-color-hover: var(--spectrum-gray-200); - } -} diff --git a/components/card/themes/spectrum.css b/components/card/themes/spectrum.css deleted file mode 100644 index a1906d601b..0000000000 --- a/components/card/themes/spectrum.css +++ /dev/null @@ -1,26 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Card { - --spectrum-card-border-color: var(--spectrum-gray-200); - --spectrum-card-border-color-hover: var(--spectrum-gray-300); - --spectrum-card-divider-color: var(--spectrum-gray-300); - --spectrum-card-preview-background-color: var(--spectrum-background-base-color); - --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300); - } -} diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index 695a4df09f..c493875171 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -207,14 +207,6 @@ "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [ - "--system-checkbox-checkmark-color", - "--system-checkbox-control-color-default", - "--system-checkbox-control-color-down", - "--system-checkbox-control-color-focus", - "--system-checkbox-control-color-hover", - "--system-checkbox-control-corner-radius" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-checkbox-background-color-default", diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 3c1a778239..60513a6b87 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -11,14 +11,15 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; +.spectrum-Checkbox { + --spectrum-checkbox-control-color-default: var(--spectrum-neutral-content-color-default); + --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); -/* - * .spectrum-Checkbox-box::before is the Checkbox "box" - * .spectrum-Checkbox-box::after is the focus indicator - */ + --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); + --spectrum-checkbox-control-corner-radius: 2px; -.spectrum-Checkbox { /* Color */ --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); --spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js index ebeaba0e27..989fdf7e7f 100644 --- a/components/checkbox/stories/template.js +++ b/components/checkbox/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Checkbox", diff --git a/components/checkbox/themes/express.css b/components/checkbox/themes/express.css deleted file mode 100644 index 1c84aa5f83..0000000000 --- a/components/checkbox/themes/express.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-gray-800); - --spectrum-checkbox-control-color-hover: var(--spectrum-gray-900); - --spectrum-checkbox-control-color-down: var(--spectrum-gray-900); - --spectrum-checkbox-control-color-focus: var(--spectrum-gray-900); - } -} diff --git a/components/checkbox/themes/spectrum-two.css b/components/checkbox/themes/spectrum-two.css deleted file mode 100644 index 4b7d8a675f..0000000000 --- a/components/checkbox/themes/spectrum-two.css +++ /dev/null @@ -1,24 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-neutral-content-color-default); - --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); - - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); - --spectrum-checkbox-control-corner-radius: 2px; - } -} diff --git a/components/checkbox/themes/spectrum.css b/components/checkbox/themes/spectrum.css deleted file mode 100644 index 698c531cc5..0000000000 --- a/components/checkbox/themes/spectrum.css +++ /dev/null @@ -1,24 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-gray-600); - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75); - --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json index 7702979183..7c038466b7 100644 --- a/components/clearbutton/dist/metadata.json +++ b/components/clearbutton/dist/metadata.json @@ -68,15 +68,6 @@ "--spectrum-transparent-white-500", "--spectrum-white" ], - "system-theme": [ - "--system-clear-button-background-color", - "--system-clear-button-background-color-down", - "--system-clear-button-background-color-hover", - "--system-clear-button-background-color-key-focus", - "--system-clear-button-static-white-background-color-down", - "--system-clear-button-static-white-background-color-hover", - "--system-clear-button-static-white-background-color-key-focus" - ], "passthroughs": [], "high-contrast": ["--highcontrast-clear-button-icon-color-hover"] } diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index edee47004e..517093d7c3 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -11,9 +11,12 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .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); @@ -57,6 +60,10 @@ } &.spectrum-ClearButton--staticWhite { + --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400); + --mod-clear-button-icon-color: var(--spectrum-white); --mod-clear-button-icon-color-hover: var(--spectrum-white); --mod-clear-button-icon-color-down: var(--spectrum-white); diff --git a/components/clearbutton/stories/template.js b/components/clearbutton/stories/template.js index 58e90007c0..a4ce921c7a 100644 --- a/components/clearbutton/stories/template.js +++ b/components/clearbutton/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ClearButton", diff --git a/components/clearbutton/themes/express.css b/components/clearbutton/themes/express.css deleted file mode 100644 index e13724e288..0000000000 --- a/components/clearbutton/themes/express.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-ClearButton { - --spectrum-clear-button-background-color: var(--spectrum-gray-200); - --spectrum-clear-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-clear-button-background-color-down: var(--spectrum-gray-400); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-300); - } -} diff --git a/components/clearbutton/themes/spectrum-two.css b/components/clearbutton/themes/spectrum-two.css deleted file mode 100644 index abba1f7855..0000000000 --- a/components/clearbutton/themes/spectrum-two.css +++ /dev/null @@ -1,27 +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. - */ - -@container style(--system: spectrum) { - .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-ClearButton--staticWhite { - --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400); - } - } -} diff --git a/components/clearbutton/themes/spectrum.css b/components/clearbutton/themes/spectrum.css deleted file mode 100644 index e4235fb3df..0000000000 --- a/components/clearbutton/themes/spectrum.css +++ /dev/null @@ -1,26 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ClearButton { - &.spectrum-ClearButton--staticWhite { - --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-300); - } - } -} diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json index 756fc3d7e6..ecd16bd998 100644 --- a/components/closebutton/dist/metadata.json +++ b/components/closebutton/dist/metadata.json @@ -60,7 +60,6 @@ "a.spectrum-CloseButton" ], "modifiers": [ - "--mod-animation-duration-100", "--mod-closebutton-align-self", "--mod-closebutton-animation-duraction", "--mod-closebutton-animation-duration", @@ -85,9 +84,7 @@ "--mod-closebutton-static-background-color-down", "--mod-closebutton-static-background-color-focus", "--mod-closebutton-static-background-color-hover", - "--mod-closebutton-width", - "--mod-line-height-100", - "--mod-sans-font-family-stack" + "--mod-closebutton-width" ], "component": [ "--spectrum-closebutton-animation-duration", @@ -139,18 +136,6 @@ "--spectrum-transparent-white-500", "--spectrum-white" ], - "system-theme": [ - "--system-close-button-background-color-default", - "--system-close-button-background-color-down", - "--system-close-button-background-color-focus", - "--system-close-button-background-color-hover", - "--system-close-button-static-black-static-background-color-down", - "--system-close-button-static-black-static-background-color-focus", - "--system-close-button-static-black-static-background-color-hover", - "--system-close-button-static-white-static-background-color-down", - "--system-close-button-static-white-static-background-color-focus", - "--system-close-button-static-white-static-background-color-hover" - ], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", diff --git a/components/closebutton/index.css b/components/closebutton/index.css index 14880d3ee6..cec97f24c2 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -11,7 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/basebutton.css"; /* Windows high contrast mode */ @@ -49,6 +48,11 @@ } .spectrum-CloseButton { + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-closebutton-background-color-down: var(--spectrum-gray-200); + --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); + /* Cross icon */ --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default); --spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover); @@ -85,6 +89,10 @@ } &.spectrum-CloseButton--staticWhite { + --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-400); + --spectrum-closebutton-static-background-color-default: transparent; --spectrum-closebutton-icon-color-default: var(--spectrum-white); @@ -93,13 +101,19 @@ } &.spectrum-CloseButton--staticBlack { + --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-400); + --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-500); + --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-400); + --spectrum-closebutton-static-background-color-default: transparent; --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); } +} +.spectrum-CloseButton { @extend %spectrum-BaseButton; block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size)); diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js index 644ce705f6..4e730b8529 100644 --- a/components/closebutton/stories/template.js +++ b/components/closebutton/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { capitalize, upperCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-CloseButton", diff --git a/components/closebutton/themes/express.css b/components/closebutton/themes/express.css deleted file mode 100644 index 06a90e4fee..0000000000 --- a/components/closebutton/themes/express.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-400); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-300); - } -} diff --git a/components/closebutton/themes/spectrum-two.css b/components/closebutton/themes/spectrum-two.css deleted file mode 100644 index 01479c42fd..0000000000 --- a/components/closebutton/themes/spectrum-two.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. - */ - -@container style(--system: spectrum) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-200); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); - - &.spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-400); - } - - &.spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-400); - } - } -} diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css deleted file mode 100644 index 62e907bae8..0000000000 --- a/components/closebutton/themes/spectrum.css +++ /dev/null @@ -1,36 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-CloseButton { - --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); - - &.spectrum-CloseButton--staticWhite { - --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--staticBlack { - --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); - } - } -} diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json index 9714f9f1ed..8f4aa52965 100644 --- a/components/coachindicator/dist/metadata.json +++ b/components/coachindicator/dist/metadata.json @@ -10,10 +10,7 @@ ".spectrum-CoachIndicator.spectrum-CoachIndicator--light", ".spectrum-CoachIndicator.spectrum-CoachIndicator--quiet", ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack", - ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite", - "0%", - "50%", - "to" + ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite" ], "modifiers": [ "--mod-coach-animation-indicator-ring-center-delay-multiple", @@ -60,7 +57,6 @@ "--spectrum-coach-animation-indicator-ring-duration", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json index 8bc036d5fc..690cd1f8f6 100644 --- a/components/coachmark/dist/metadata.json +++ b/components/coachmark/dist/metadata.json @@ -81,7 +81,6 @@ "--spectrum-spacing-200", "--spectrum-spacing-300" ], - "system-theme": [], "passthroughs": [ "--mod-button-edge-to-visual-only", "--mod-buttongroup-justify-content", diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json index ff86d1c004..55a1b14c6b 100644 --- a/components/colorarea/dist/metadata.json +++ b/components/colorarea/dist/metadata.json @@ -9,8 +9,7 @@ ".spectrum-ColorArea.is-disabled", ".spectrum-ColorArea.is-disabled .spectrum-ColorArea-gradient", ".spectrum-ColorArea.is-focused", - ".spectrum-ColorHandle-color", - "[dir=\"rtl\"] .spectrum-ColorArea-handle" + ".spectrum-ColorHandle-color" ], "modifiers": [ "--mod-colorarea-border-color", @@ -32,7 +31,6 @@ "--spectrum-colorarea-border-color" ], "global": ["--spectrum-disabled-background-color"], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-colorarea-border-color", diff --git a/components/colorhandle/dist/metadata.json b/components/colorhandle/dist/metadata.json index 4d8589ac1c..cbd2b5d599 100644 --- a/components/colorhandle/dist/metadata.json +++ b/components/colorhandle/dist/metadata.json @@ -46,7 +46,6 @@ "--spectrum-picked-color", "--spectrum-white" ], - "system-theme": [], "passthroughs": ["--mod-opacity-checkerboard-position"], "high-contrast": [ "--highcontrast-colorhandle-border-color-disabled", diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json index 245bb476b1..0406b61c90 100644 --- a/components/colorloupe/dist/metadata.json +++ b/components/colorloupe/dist/metadata.json @@ -9,8 +9,7 @@ ".spectrum-ColorLoupe-outer-border", ".spectrum-ColorLoupe.is-disabled", ".spectrum-ColorLoupe.is-open", - ".spectrum-ColorLoupe:dir(rtl)", - "[dir=\"rtl\"] .spectrum-ColorLoupe" + ".spectrum-ColorLoupe:dir(rtl)" ], "modifiers": [ "--mod-colorloupe-animation-distance", @@ -45,7 +44,6 @@ "--spectrum-opacity-checkerboard-square-light", "--spectrum-picked-color" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-colorloupe-outer-border-color"] } diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json index ea202a9f0a..1eb855b9d5 100644 --- a/components/colorslider/dist/metadata.json +++ b/components/colorslider/dist/metadata.json @@ -13,8 +13,7 @@ ".spectrum-ColorSlider.is-disabled", ".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard", ".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-gradient", - ".spectrum-ColorSlider.is-focused", - "[dir=\"rtl\"] .spectrum-ColorSlider-gradient" + ".spectrum-ColorSlider.is-focused" ], "modifiers": [ "--mod-color-slider-background-color-disabled", @@ -45,7 +44,6 @@ "--spectrum-disabled-background-color", "--spectrum-gray-900-rgb" ], - "system-theme": [], "passthroughs": ["--mod-colorhandle-hitarea-border-radius"], "high-contrast": [ "--highcontrast-color-slider-background-color-disabled", diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index c321e1aca2..960c4171c9 100644 --- a/components/colorwheel/dist/metadata.json +++ b/components/colorwheel/dist/metadata.json @@ -14,8 +14,7 @@ ".spectrum-ColorWheel-wheel.is-disabled", ".spectrum-ColorWheel.is-disabled", ".spectrum-ColorWheel.is-dragged", - ".spectrum-ColorWheel.is-focused", - "[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle" + ".spectrum-ColorWheel.is-focused" ], "modifiers": [ "--mod-colorwheel-border-color", @@ -50,7 +49,6 @@ "--spectrum-disabled-background-color", "--spectrum-transparent-black-300" ], - "system-theme": ["--system-color-wheel-border-color"], "passthroughs": [], "high-contrast": [ "--highcontrast-colorwheel-border-color-disabled", diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index e44d21045f..9c0f9746c6 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* Windows High Contrast Mode */ @media (forced-colors: active) { .spectrum-ColorWheel { @@ -24,6 +22,8 @@ } .spectrum-ColorWheel { + --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); + --spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width)); --spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width)); --spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color)); diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js index 851150ffd3..1d02f5e782 100644 --- a/components/colorwheel/stories/template.js +++ b/components/colorwheel/stories/template.js @@ -5,9 +5,6 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ColorWheel", diff --git a/components/colorwheel/themes/express.css b/components/colorwheel/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/colorwheel/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/colorwheel/themes/spectrum-two.css b/components/colorwheel/themes/spectrum-two.css deleted file mode 100644 index b80c228ebb..0000000000 --- a/components/colorwheel/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-ColorWheel { - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); - } -} diff --git a/components/colorwheel/themes/spectrum.css b/components/colorwheel/themes/spectrum.css deleted file mode 100644 index 9c47a280a6..0000000000 --- a/components/colorwheel/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ColorWheel { - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200); - } -} diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index bdf2685d75..7477527a7d 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -78,8 +78,7 @@ ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon", ".spectrum-Textfield.is-loading .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon", - "[dir=\"rtl\"] .spectrum-Combobox-progress-circle" + ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon" ], "modifiers": [ "--mod-combobox-alert-icon-color", @@ -251,16 +250,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-combobox-background-color-disabled", - "--system-combobox-border-color-default", - "--system-combobox-border-color-disabled", - "--system-combobox-border-color-focus", - "--system-combobox-border-color-focus-hover", - "--system-combobox-border-color-hover", - "--system-combobox-border-color-key-focus", - "--system-combobox-readonly-input-border-color" - ], "passthroughs": [ "--mod-picker-button-background-color", "--mod-picker-button-background-color-disabled", diff --git a/components/combobox/index.css b/components/combobox/index.css index 1718cb5d75..9b82c8a2f4 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -11,9 +11,18 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .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-800); + --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800); + + --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500); + + --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); + --spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color); + --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)); diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index fe68d45cba..96dfdcf25e 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -10,9 +10,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; const Combobox = ({ rootClass = "spectrum-Combobox", diff --git a/components/combobox/themes/express.css b/components/combobox/themes/express.css deleted file mode 100644 index dc19625a85..0000000000 --- a/components/combobox/themes/express.css +++ /dev/null @@ -1,28 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Combobox { - --spectrum-combobox-border-color-default: var(--spectrum-gray-400); - --spectrum-combobox-border-color-hover: var(--spectrum-gray-500); - --spectrum-combobox-border-color-focus: var(--spectrum-gray-900); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-800); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-900); - - --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-400); - } -} diff --git a/components/combobox/themes/spectrum-two.css b/components/combobox/themes/spectrum-two.css deleted file mode 100644 index 9d8502ebb3..0000000000 --- a/components/combobox/themes/spectrum-two.css +++ /dev/null @@ -1,27 +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. - */ - -@container style(--system: spectrum) { - .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-800); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800); - - --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500); - - --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); - --spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color); - } -} diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css deleted file mode 100644 index 5b0a3eea8b..0000000000 --- a/components/combobox/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Combobox { - --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-readonly-input-border-color: var(--spectrum-gray-500); - - --spectrum-combobox-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-combobox-border-color-disabled: transparent; - } -} diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css index fa015bc145..ca0caa6bba 100644 --- a/components/commons/basebutton.css +++ b/components/commons/basebutton.css @@ -29,39 +29,40 @@ /* Remove button the margin in Firefox and Safari. */ margin: 0; - /* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */ - font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))); + font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack)); + + /* Adjacent buttons should be aligned correctly */ + vertical-align: top; -webkit-font-smoothing: antialiased; /* Font smoothing for Firefox */ -moz-osx-font-smoothing: grayscale; - /* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */ - line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100))); + line-height: var(--mod-button-line-height, var(--spectrum-line-height-100)); text-decoration: none; /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */ text-transform: none; - /* Adjacent buttons should be aligned correctly */ - vertical-align: top; - /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */ -webkit-appearance: button; - border-style: solid; - transition: - background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out; + background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + border-color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + box-shadow var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out; /* Fix Firefox */ &::-moz-focus-inner { - border-style: none; + margin-block-start: -2px; + margin-block-end: -2px; padding: 0; + border: 0; + + /* Remove the inner border and padding for button in Firefox. */ + border-style: none; } &:focus { @@ -90,12 +91,11 @@ inset-inline-end: 0; display: block; - - margin: calc(-1 * var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap))); + margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); transition: - opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out, - margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out; + opacity var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + margin var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out; } &:focus-visible::after { diff --git a/components/contextualhelp/dist/metadata.json b/components/contextualhelp/dist/metadata.json index 4f7dbd58c5..8711f77b47 100644 --- a/components/contextualhelp/dist/metadata.json +++ b/components/contextualhelp/dist/metadata.json @@ -31,7 +31,6 @@ "--spectrum-spacing-300", "--spectrum-spacing-400" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-contextual-help-body-color", diff --git a/components/datepicker/dist/metadata.json b/components/datepicker/dist/metadata.json index f52f1b93cd..cf8fffe86d 100644 --- a/components/datepicker/dist/metadata.json +++ b/components/datepicker/dist/metadata.json @@ -140,7 +140,6 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "system-theme": ["--system-date-picker-initial-height"], "passthroughs": [ "--mod-picker-button-background-color", "--mod-picker-button-background-color-hover-disabled", diff --git a/components/datepicker/index.css b/components/datepicker/index.css index 7b20a28ae6..6a5554d320 100644 --- a/components/datepicker/index.css +++ b/components/datepicker/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-DatePicker { + --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); + --spectrum-datepicker-border-radius: var(--mod-datepicker-border-radius, var(--spectrum-corner-radius-100)); --spectrum-datepicker-border-radius-quiet: var(--mod-datepicker-border-radius-quiet, 0); --spectrum-datepicker-border-width: var(--spectrum-border-width-100); diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js index 2d56102d24..eebb928df8 100644 --- a/components/datepicker/stories/template.js +++ b/components/datepicker/stories/template.js @@ -9,9 +9,6 @@ import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const DatePicker = ({ rootClass = "spectrum-DatePicker", diff --git a/components/datepicker/themes/express.css b/components/datepicker/themes/express.css deleted file mode 100644 index ead071e6f1..0000000000 --- a/components/datepicker/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-DatePicker { - --spectrum-datepicker-initial-height: var(--spectrum-component-height-75); - } -} diff --git a/components/datepicker/themes/spectrum-two.css b/components/datepicker/themes/spectrum-two.css deleted file mode 100644 index 05b3ca88ae..0000000000 --- a/components/datepicker/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-DatePicker { - --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); - } -} diff --git a/components/datepicker/themes/spectrum.css b/components/datepicker/themes/spectrum.css deleted file mode 100644 index 3d81bc564b..0000000000 --- a/components/datepicker/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json index cf8d026a3b..1d91c2bb53 100644 --- a/components/dial/dist/metadata.json +++ b/components/dial/dist/metadata.json @@ -112,10 +112,6 @@ "--spectrum-gray-800", "--spectrum-line-height-200" ], - "system-theme": [ - "--system-dial-background-color-default", - "--system-dial-handle-marker-color-key-focus" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-dial-border-color", diff --git a/components/dial/index.css b/components/dial/index.css index 8aee8cef36..1db955a115 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Dial { + --spectrum-dial-background-color-default: var(--spectrum-gray-75); + --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); + --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); --spectrum-dial-border-color: var(--spectrum-gray-700); diff --git a/components/dial/stories/template.js b/components/dial/stories/template.js index c8f25c2175..547fb97f66 100644 --- a/components/dial/stories/template.js +++ b/components/dial/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Dial", diff --git a/components/dial/themes/express.css b/components/dial/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/dial/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/dial/themes/spectrum-two.css b/components/dial/themes/spectrum-two.css deleted file mode 100644 index 410196c391..0000000000 --- a/components/dial/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-75); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); - } -} diff --git a/components/dial/themes/spectrum.css b/components/dial/themes/spectrum.css deleted file mode 100644 index 24077607a8..0000000000 --- a/components/dial/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-100); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); - } -} diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json index 812542da22..101bdebcbd 100644 --- a/components/dialog/dist/metadata.json +++ b/components/dialog/dist/metadata.json @@ -95,7 +95,6 @@ "--spectrum-spacing-50", "--spectrum-spacing-600" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json index a485bf25e3..15fa0043a7 100644 --- a/components/divider/dist/metadata.json +++ b/components/divider/dist/metadata.json @@ -42,11 +42,6 @@ "--spectrum-transparent-white-200", "--spectrum-transparent-white-800" ], - "system-theme": [ - "--system-divider-background-color", - "--system-divider-background-color-static-black", - "--system-divider-background-color-static-white" - ], "passthroughs": [], "high-contrast": ["--highcontrast-divider-background-color"] } diff --git a/components/divider/index.css b/components/divider/index.css index 188aeea7ec..0e01578eed 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* windows high contrast mode */ @media (forced-colors: active) { .spectrum-Divider { @@ -21,6 +19,15 @@ } .spectrum-Divider { + /* background colors */ + --spectrum-divider-background-color: var(--spectrum-gray-200); + + /* static white background colors */ + --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-200); + + /* static black background colors */ + --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-200); + --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); } diff --git a/components/divider/stories/template.js b/components/divider/stories/template.js index ac2ffa2a4c..cd3d9bc1a6 100644 --- a/components/divider/stories/template.js +++ b/components/divider/stories/template.js @@ -4,9 +4,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize, upperCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Divider", diff --git a/components/divider/themes/express.css b/components/divider/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/divider/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/divider/themes/spectrum-two.css b/components/divider/themes/spectrum-two.css deleted file mode 100644 index 58f8de9a76..0000000000 --- a/components/divider/themes/spectrum-two.css +++ /dev/null @@ -1,25 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Divider { - /* background colors */ - --spectrum-divider-background-color: var(--spectrum-gray-200); - - /* static white background colors */ - --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-200); - - /* static black background colors */ - --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-200); - } -} diff --git a/components/divider/themes/spectrum.css b/components/divider/themes/spectrum.css deleted file mode 100644 index ecfe3f3a46..0000000000 --- a/components/divider/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Divider { - /* background colors */ - --spectrum-divider-background-color: var(--spectrum-gray-300); - - /* static white background colors */ - --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-300); - - /* static black background colors */ - --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-300); - } -} diff --git a/components/dropindicator/dist/metadata.json b/components/dropindicator/dist/metadata.json index dd3a7a5081..294d6ad70b 100644 --- a/components/dropindicator/dist/metadata.json +++ b/components/dropindicator/dist/metadata.json @@ -23,7 +23,6 @@ "--spectrum-dropindicator-color" ], "global": ["--spectrum-border-width-200"], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-dropindicator-color"] } diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index 3044ecfc90..96f850663e 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -100,7 +100,6 @@ "--spectrum-spacing-75", "--spectrum-white" ], - "system-theme": ["--system-drop-zone-border-color"], "passthroughs": [ "--mod-actionbutton-edge-to-text", "--mod-actionbutton-font-size", diff --git a/components/dropzone/index.css b/components/dropzone/index.css index 2b3fbefe0c..768ee1dd1f 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-DropZone { + --spectrum-drop-zone-border-color: var(--spectrum-gray-200); + --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js index 9eb2dfface..3363790ecc 100644 --- a/components/dropzone/stories/template.js +++ b/components/dropzone/stories/template.js @@ -7,9 +7,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-DropZone", diff --git a/components/dropzone/themes/express.css b/components/dropzone/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/dropzone/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/dropzone/themes/spectrum-two.css b/components/dropzone/themes/spectrum-two.css deleted file mode 100644 index cf71b766c3..0000000000 --- a/components/dropzone/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-DropZone { - --spectrum-drop-zone-border-color: var(--spectrum-gray-200); - } -} diff --git a/components/dropzone/themes/spectrum.css b/components/dropzone/themes/spectrum.css deleted file mode 100644 index 0760508568..0000000000 --- a/components/dropzone/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-DropZone { - --spectrum-drop-zone-border-color: var(--spectrum-gray-300); - } -} diff --git a/components/fieldgroup/dist/metadata.json b/components/fieldgroup/dist/metadata.json index c8875b9d3a..3c2343b101 100644 --- a/components/fieldgroup/dist/metadata.json +++ b/components/fieldgroup/dist/metadata.json @@ -13,7 +13,6 @@ "modifiers": [], "component": [], "global": ["--spectrum-spacing-300"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/fieldlabel/dist/metadata.json b/components/fieldlabel/dist/metadata.json index cc26c19a02..0aec1706f2 100644 --- a/components/fieldlabel/dist/metadata.json +++ b/components/fieldlabel/dist/metadata.json @@ -75,7 +75,6 @@ "--spectrum-spacing-100", "--spectrum-spacing-200" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-field-label-content-color"] } diff --git a/components/floatingactionbutton/dist/metadata.json b/components/floatingactionbutton/dist/metadata.json index 7daf062a32..0ddd22d190 100644 --- a/components/floatingactionbutton/dist/metadata.json +++ b/components/floatingactionbutton/dist/metadata.json @@ -72,7 +72,6 @@ "--spectrum-white", "--spectrum-workflow-icon-size-200" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-floating-action-button-background-color", diff --git a/components/form/dist/metadata.json b/components/form/dist/metadata.json index 88655f8edd..c07dfdca8d 100644 --- a/components/form/dist/metadata.json +++ b/components/form/dist/metadata.json @@ -31,7 +31,6 @@ "--spectrum-spacing-200", "--spectrum-spacing-300" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-form-item-disabled-content-color"] } diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index f730c33a67..5eab153c21 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -77,7 +77,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json index 7f5d27e378..590503e05b 100644 --- a/components/icon/dist/metadata.json +++ b/components/icon/dist/metadata.json @@ -170,7 +170,6 @@ "--spectrum-workflow-icon-size-xxl", "--spectrum-workflow-icon-size-xxs" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json index 24de798ac3..313c6d7188 100644 --- a/components/illustratedmessage/dist/metadata.json +++ b/components/illustratedmessage/dist/metadata.json @@ -76,7 +76,6 @@ "--spectrum-spacing-400", "--spectrum-spacing-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-illustrated-message-illustration-accent-color", diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json index 563089a406..f280498caf 100644 --- a/components/infieldbutton/dist/metadata.json +++ b/components/infieldbutton/dist/metadata.json @@ -138,19 +138,6 @@ "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus" ], - "system-theme": [ - "--system-infield-button-background-color", - "--system-infield-button-background-color-down", - "--system-infield-button-background-color-hover", - "--system-infield-button-background-color-key-focus", - "--system-infield-button-border-color", - "--system-infield-button-border-radius", - "--system-infield-button-border-radius-reset", - "--system-infield-button-border-width", - "--system-infield-button-disabled-border-color", - "--system-infield-button-stacked-bottom-border-radius-end-start", - "--system-infield-button-stacked-top-border-radius-start-start" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-infield-button-border-color", diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index cf9c6458cc..858845b4e2 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -11,9 +11,22 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .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-100); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-down: var(--spectrum-gray-200); + --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); @@ -33,12 +46,22 @@ --spectrum-infield-button-fill-justify-content: center; + --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); + &:disabled { --mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color)); --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-infield-button-border-color)); + --mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-gray-300)); --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color)); --mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js index 7f0b4ee8db..5cc77d4204 100644 --- a/components/infieldbutton/stories/template.js +++ b/components/infieldbutton/stories/template.js @@ -4,9 +4,6 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ( { diff --git a/components/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css deleted file mode 100644 index 1d930d4cfe..0000000000 --- a/components/infieldbutton/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-InfieldButton { - --spectrum-infield-button-border-width: 0; - --spectrum-infield-button-border-color: transparent; - - --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); - - --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); - - --spectrum-infield-button-background-color: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-400); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300); - } -} diff --git a/components/infieldbutton/themes/spectrum-two.css b/components/infieldbutton/themes/spectrum-two.css deleted file mode 100644 index ec2307ef3a..0000000000 --- a/components/infieldbutton/themes/spectrum-two.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. - */ - -@container style(--system: spectrum) { - .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-100); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); - - &:disabled { - --spectrum-infield-button-border-color: var(--spectrum-gray-300); - } - } -} diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css deleted file mode 100644 index 93ae76972e..0000000000 --- a/components/infieldbutton/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-InfieldButton { - --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); - - &:disabled { - --spectrum-infield-button-border-color: var(--spectrum-gray-200); - } - } -} diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json index 935c89f08a..bd5894d28c 100644 --- a/components/inlinealert/dist/metadata.json +++ b/components/inlinealert/dist/metadata.json @@ -98,7 +98,6 @@ "--spectrum-spacing-400", "--spectrum-workflow-icon-size-100" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-inlinealert-background-color", diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json index 9befaceefc..ad90df3384 100644 --- a/components/link/dist/metadata.json +++ b/components/link/dist/metadata.json @@ -42,7 +42,6 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-link-text-color"] } diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json index 6adfbf58b2..195d8c8708 100644 --- a/components/logicbutton/dist/metadata.json +++ b/components/logicbutton/dist/metadata.json @@ -15,9 +15,7 @@ ".spectrum-LogicButton:focus-visible:after" ], "modifiers": [ - "--mod-animation-duration-100", "--mod-focus-indicator-gap", - "--mod-line-height-100", "--mod-logic-button-and-background-color", "--mod-logic-button-and-background-color-disabled", "--mod-logic-button-and-background-color-hover", @@ -46,8 +44,7 @@ "--mod-logic-button-or-border-color-hover-disabled", "--mod-logic-button-or-text-color", "--mod-logic-button-or-text-color-disabled", - "--mod-logic-button-padding", - "--mod-sans-font-family-stack" + "--mod-logic-button-padding" ], "component": [ "--spectrum-logic-button-and-background-color", @@ -88,16 +85,6 @@ "--spectrum-sans-font-family-stack", "--spectrum-white" ], - "system-theme": [ - "--system-logic-button-and-background-color-disabled", - "--system-logic-button-and-background-color-hover-disabled", - "--system-logic-button-and-border-color-disabled", - "--system-logic-button-and-border-color-hover-disabled", - "--system-logic-button-or-background-color-disabled", - "--system-logic-button-or-background-color-hover-disabled", - "--system-logic-button-or-border-color-disabled", - "--system-logic-button-or-border-color-hover-disabled" - ], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-focus-indicator-gap", diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index 4429907705..53984da575 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -12,9 +12,18 @@ */ @import "@spectrum-css/commons/basebutton.css"; -@import "./themes/spectrum-two.css"; .spectrum-LogicButton { + --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100); + + --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100); --spectrum-logic-button-and-text-color: var(--spectrum-white); @@ -23,7 +32,9 @@ --spectrum-logic-button-or-text-color: var(--spectrum-white); --spectrum-logic-button-text-color-disabled: var(--spectrum-gray-500); +} +.spectrum-LogicButton { @extend %spectrum-BaseButton; @extend %spectrum-ButtonWithFocusRing; diff --git a/components/logicbutton/stories/template.js b/components/logicbutton/stories/template.js index 5b0730616e..02f5b3aa02 100644 --- a/components/logicbutton/stories/template.js +++ b/components/logicbutton/stories/template.js @@ -2,9 +2,6 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-LogicButton", diff --git a/components/logicbutton/themes/express.css b/components/logicbutton/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/logicbutton/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/logicbutton/themes/spectrum-two.css b/components/logicbutton/themes/spectrum-two.css deleted file mode 100644 index c0bd0d1b3f..0000000000 --- a/components/logicbutton/themes/spectrum-two.css +++ /dev/null @@ -1,26 +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. - */ - -@container style(--system: spectrum) { - .spectrum-LogicButton { - --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100); - - --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100); - } -} diff --git a/components/logicbutton/themes/spectrum.css b/components/logicbutton/themes/spectrum.css deleted file mode 100644 index 4aa43a0104..0000000000 --- a/components/logicbutton/themes/spectrum.css +++ /dev/null @@ -1,30 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-LogicButton { - --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-200); - - --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-200); - } -} diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json index 5142e09aa6..e86959dc52 100644 --- a/components/menu/dist/metadata.json +++ b/components/menu/dist/metadata.json @@ -134,9 +134,7 @@ ".spectrum-Menu:dir(rtl)", ".spectrum-Menu:lang(ja)", ".spectrum-Menu:lang(ko)", - ".spectrum-Menu:lang(zh)", - "[dir=\"rtl\"] .spectrum-Menu", - "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron" + ".spectrum-Menu:lang(zh)" ], "modifiers": [ "--mod-menu-back-heading-color", @@ -378,16 +376,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-menu-item-background-color-down", - "--system-menu-item-background-color-hover", - "--system-menu-item-background-color-key-focus", - "--system-menu-item-corner-radius", - "--system-menu-item-focus-indicator-offset", - "--system-menu-item-focus-indicator-outline-style", - "--system-menu-item-focus-indicator-shadow", - "--system-menu-item-spacing-multiplier" - ], "passthroughs": [ "--mod-checkbox-text-to-control", "--mod-checkbox-top-to-text", diff --git a/components/menu/index.css b/components/menu/index.css index 3d48ce7649..4055911de7 100644 --- a/components/menu/index.css +++ b/components/menu/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - @media (forced-colors: active) { .spectrum-Menu { --highcontrast-menu-item-background-color-default: ButtonFace; @@ -81,6 +79,18 @@ } .spectrum-Menu { + --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + + --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100); + + /* Focus state styling */ + --spectrum-menu-item-focus-indicator-shadow: none; + --spectrum-menu-item-focus-indicator-offset: var(--spectrum-spacing-50); + --spectrum-menu-item-spacing-multiplier: 1; + --spectrum-menu-item-focus-indicator-outline-style: solid; + --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js index c50482cb69..79c4136fda 100644 --- a/components/menu/stories/template.js +++ b/components/menu/stories/template.js @@ -13,9 +13,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * Get the tray submenu back arrow name with scale number (defined in design spec). diff --git a/components/menu/themes/express.css b/components/menu/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/menu/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/menu/themes/spectrum-two.css b/components/menu/themes/spectrum-two.css deleted file mode 100644 index 11951a4255..0000000000 --- a/components/menu/themes/spectrum-two.css +++ /dev/null @@ -1,28 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Menu { - --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - - --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100); - - /* Focus state styling */ - --spectrum-menu-item-focus-indicator-shadow: none; - --spectrum-menu-item-focus-indicator-offset: var(--spectrum-spacing-50); - --spectrum-menu-item-spacing-multiplier: 1; - --spectrum-menu-item-focus-indicator-outline-style: solid; - } -} diff --git a/components/menu/themes/spectrum.css b/components/menu/themes/spectrum.css deleted file mode 100644 index 0836ce0774..0000000000 --- a/components/menu/themes/spectrum.css +++ /dev/null @@ -1,32 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Menu { - --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); - - --spectrum-menu-item-corner-radius: 0; - - /* Focus state styling */ - --spectrum-menu-item-focus-indicator-shadow: inset; - --spectrum-menu-item-focus-indicator-offset: 0; - --spectrum-menu-item-spacing-multiplier: 0; - --spectrum-menu-item-focus-indicator-outline-style: none; - } -} diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json index 9bfe3424ce..fbf343ed94 100644 --- a/components/meter/dist/metadata.json +++ b/components/meter/dist/metadata.json @@ -29,7 +29,6 @@ "--spectrum-notice-visual-color", "--spectrum-positive-visual-color" ], - "system-theme": [], "passthroughs": [ "--mod-progressbar-fill-color", "--mod-progressbar-font-size", diff --git a/components/miller/dist/metadata.json b/components/miller/dist/metadata.json index adb2109144..fbb3770d55 100644 --- a/components/miller/dist/metadata.json +++ b/components/miller/dist/metadata.json @@ -13,7 +13,6 @@ ], "component": [], "global": ["--spectrum-spacing-100"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index 950d9fca3c..d4d333cf3b 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -46,7 +46,6 @@ "--spectrum-corner-radius-100", "--spectrum-dialog-confirm-entry-animation-distance" ], - "system-theme": ["--system-modal-background-color"], "passthroughs": [], "high-contrast": [] } diff --git a/components/modal/index.css b/components/modal/index.css index 8a5e2e9ad9..edf5cb5f9f 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -12,20 +12,6 @@ */ @import "@spectrum-css/commons/overlay.css"; -@import "./themes/spectrum-two.css"; - -.spectrum-Modal { - --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500)); - /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-modal-confirm-entry-animation-delay */ - --spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))); - - /* @deprecated --mod-overlay-animation-duration in favor of --mod-modal-confirm-exit-animation-duration */ - --spectrum-modal-confirm-exit-animation-duration: var(--mod-overlay-animation-duration, var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))); - --spectrum-modal-confirm-exit-animation-delay: var(--mod-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: var(--mod-modal-fullscreen-margin, 32px); -} /* Used to position the modal */ .spectrum-Modal-wrapper { @@ -68,6 +54,19 @@ } .spectrum-Modal { + --spectrum-modal-background-color: var(--spectrum-background-layer-2-color); + + --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500)); + /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-modal-confirm-entry-animation-delay */ + --spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))); + + /* @deprecated --mod-overlay-animation-duration in favor of --mod-modal-confirm-exit-animation-duration */ + --spectrum-modal-confirm-exit-animation-duration: var(--mod-overlay-animation-duration, var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))); + --spectrum-modal-confirm-exit-animation-delay: var(--mod-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: var(--mod-modal-fullscreen-margin, 32px); + visibility: hidden; opacity: 0; diff --git a/components/modal/stories/template.js b/components/modal/stories/template.js index 07a52b8913..9abbf49ebe 100644 --- a/components/modal/stories/template.js +++ b/components/modal/stories/template.js @@ -5,9 +5,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * Just the modal markup. diff --git a/components/modal/themes/express.css b/components/modal/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/modal/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/modal/themes/spectrum-two.css b/components/modal/themes/spectrum-two.css deleted file mode 100644 index c31756dcda..0000000000 --- a/components/modal/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Modal { - --spectrum-modal-background-color: var(--spectrum-background-layer-2-color); - } -} diff --git a/components/modal/themes/spectrum.css b/components/modal/themes/spectrum.css deleted file mode 100644 index f637e6f343..0000000000 --- a/components/modal/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Modal { - --spectrum-modal-background-color: var(--spectrum-gray-100); - } -} diff --git a/components/opacitycheckerboard/dist/metadata.json b/components/opacitycheckerboard/dist/metadata.json index 51c1a15587..83e45f13a2 100644 --- a/components/opacitycheckerboard/dist/metadata.json +++ b/components/opacitycheckerboard/dist/metadata.json @@ -13,7 +13,6 @@ "--spectrum-opacity-checkerboard-square-size" ], "global": [], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json index cb8c8163de..a0f8465c06 100644 --- a/components/page/dist/metadata.json +++ b/components/page/dist/metadata.json @@ -1,15 +1,16 @@ { "sourceFile": "index.css", "selectors": [":root"], - "modifiers": ["--mod-page-background", "--mod-page-content-tap-highlight"], - "component": [ - "--spectrum-page-background-color", - "--spectrum-page-content-tap-highlight" + "modifiers": [ + "--mod-page-background", + "--mod-page-content-color", + "--mod-page-content-tap-highlight" ], - "global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"], - "system-theme": [ - "--system-root-page-background-color", - "--system-root-page-content-tap-highlight" + "component": [], + "global": [ + "--spectrum-gray-75", + "--spectrum-neutral-content-color-default", + "--spectrum-transparent-black-25" ], "passthroughs": [], "high-contrast": [] diff --git a/components/page/index.css b/components/page/index.css index 7a29f49a2e..7f528553e6 100644 --- a/components/page/index.css +++ b/components/page/index.css @@ -11,11 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - :root { - background: var(--mod-page-background, var(--spectrum-page-background-color)); + background: var(--mod-page-background, var(--spectrum-gray-75)); + color: var(--mod-page-content-color, var(--spectrum-neutral-content-color-default)); /* The highlight that appears over a link while it's being tapped */ - -webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-page-content-tap-highlight)); + -webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-transparent-black-25)); } diff --git a/components/page/stories/template.js b/components/page/stories/template.js index 570ca98b24..395f6d4839 100644 --- a/components/page/stories/template.js +++ b/components/page/stories/template.js @@ -2,9 +2,6 @@ import { renderContent } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ content = [] } = {}, context = {}) => { return html`${renderContent(content, { context })}`; diff --git a/components/page/themes/express.css b/components/page/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/page/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/page/themes/spectrum-two.css b/components/page/themes/spectrum-two.css deleted file mode 100644 index 896ecf506c..0000000000 --- a/components/page/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - :root { - --spectrum-page-background-color: var(--spectrum-gray-75); - --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-25); - } -} diff --git a/components/page/themes/spectrum.css b/components/page/themes/spectrum.css deleted file mode 100644 index f6c120c2d4..0000000000 --- a/components/page/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - :root { - --spectrum-page-background-color: var(--spectrum-gray-100); - --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-100); - } -} diff --git a/components/pagination/dist/metadata.json b/components/pagination/dist/metadata.json index 7a0b21fe8d..6c52ad62e8 100644 --- a/components/pagination/dist/metadata.json +++ b/components/pagination/dist/metadata.json @@ -10,8 +10,7 @@ ".spectrum-Pagination-prevButton", ".spectrum-Pagination-prevButton .spectrum-Icon", ".spectrum-Pagination-textfield", - ".spectrum-Pagination:dir(rtl)", - "[dir=\"rtl\"] .spectrum-Pagination" + ".spectrum-Pagination:dir(rtl)" ], "modifiers": [ "--mod-pagination-counter-color", @@ -34,7 +33,6 @@ "--spectrum-logical-rotation", "--spectrum-neutral-subdued-content-color-default" ], - "system-theme": [], "passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"], "high-contrast": [] } diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index e2c3b4e5c0..da0bfdc749 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -77,8 +77,6 @@ ".spectrum-Picker:hover .spectrum-Picker-menuIcon" ], "modifiers": [ - "--mod-animation-duration-100", - "--mod-line-height-100", "--mod-picker-animation-duration", "--mod-picker-background-color-active", "--mod-picker-background-color-default", @@ -141,8 +139,7 @@ "--mod-picker-spacing-top-to-alert-icon", "--mod-picker-spacing-top-to-disclosure-icon", "--mod-picker-spacing-top-to-progress-circle", - "--mod-picker-spacing-top-to-text", - "--mod-sans-font-family-stack" + "--mod-picker-spacing-top-to-text" ], "component": [ "--spectrum-picker-animation-duration", @@ -304,22 +301,6 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75" ], - "system-theme": [ - "--system-picker-background-color-active", - "--system-picker-background-color-default", - "--system-picker-background-color-default-open", - "--system-picker-background-color-hover", - "--system-picker-background-color-hover-open", - "--system-picker-background-color-key-focus", - "--system-picker-border-color-active", - "--system-picker-border-color-default", - "--system-picker-border-color-default-open", - "--system-picker-border-color-disabled", - "--system-picker-border-color-hover", - "--system-picker-border-color-hover-open", - "--system-picker-border-color-key-focus", - "--system-picker-border-width" - ], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", diff --git a/components/picker/index.css b/components/picker/index.css index e59888c78f..6bfcf747c0 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -11,10 +11,26 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/basebutton.css"; .spectrum-Picker { + --spectrum-picker-background-color-default: var(--spectrum-gray-100); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-active: 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-800); + --spectrum-picker-border-color-hover: var(--spectrum-gray-600); + --spectrum-picker-border-color-hover-open: var(--spectrum-gray-900); + --spectrum-picker-border-color-active: var(--spectrum-gray-700); + --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900); + --spectrum-picker-border-color-disabled: var(--spectrum-gray-300); + + --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); diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index 5bce15f074..4be33a2092 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -11,9 +11,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * Template for Picker only (no popover or help text). diff --git a/components/picker/themes/express.css b/components/picker/themes/express.css deleted file mode 100644 index bb521933e6..0000000000 --- a/components/picker/themes/express.css +++ /dev/null @@ -1,36 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-200); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-300); - --spectrum-picker-background-color-active: var(--spectrum-gray-400); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-300); - - --spectrum-picker-border-color-default: transparent; - --spectrum-picker-border-color-default-open: transparent; - --spectrum-picker-border-color-hover: transparent; - --spectrum-picker-border-color-hover-open: transparent; - --spectrum-picker-border-color-active: transparent; - --spectrum-picker-border-color-key-focus: transparent; - - --spectrum-picker-border-width: 0px; - } -} diff --git a/components/picker/themes/spectrum-two.css b/components/picker/themes/spectrum-two.css deleted file mode 100644 index 3be66bfa10..0000000000 --- a/components/picker/themes/spectrum-two.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. - */ - -@container style(--system: spectrum) { - .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-100); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-active: 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-800); - --spectrum-picker-border-color-hover: var(--spectrum-gray-600); - --spectrum-picker-border-color-hover-open: var(--spectrum-gray-900); - --spectrum-picker-border-color-active: var(--spectrum-gray-700); - --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900); - --spectrum-picker-border-color-disabled: var(--spectrum-gray-300); - - --spectrum-picker-border-width: var(--spectrum-border-width-100); - } -} diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css deleted file mode 100644 index 70759b6ea3..0000000000 --- a/components/picker/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-75); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-active: var(--spectrum-gray-300); - --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-open: var(--spectrum-gray-600); - --spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); - --spectrum-picker-border-color-disabled: transparent; - } -} diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index 7eb82d7c8c..e2c3199a47 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -136,18 +136,6 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-50" ], - "system-theme": [ - "--system-picker-button-background-color", - "--system-picker-button-background-color-down", - "--system-picker-button-background-color-hover", - "--system-picker-button-background-color-key-focus", - "--system-picker-button-border-color", - "--system-picker-button-border-radius", - "--system-picker-button-border-radius-rounded-sided", - "--system-picker-button-border-radius-sided", - "--system-picker-button-border-width", - "--system-picker-button-padding" - ], "passthroughs": [], "high-contrast": [] } diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index d9404687ac..695a29bdab 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -11,9 +11,21 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-PickerButton { + --spectrum-picker-button-background-color: var(--spectrum-gray-100); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-down: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); + + --spectrum-picker-button-border-color: none; + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); + --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); + --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); + --spectrum-picker-button-border-width: 0px; + + /* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */ + --spectrum-picker-button-padding: 4px; + --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); diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js index 3df4f85b63..6adcb7398f 100644 --- a/components/pickerbutton/stories/template.js +++ b/components/pickerbutton/stories/template.js @@ -8,9 +8,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-PickerButton", diff --git a/components/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css deleted file mode 100644 index 9dbd1a7fa4..0000000000 --- a/components/pickerbutton/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-picker-button-background-color-down: var(--spectrum-gray-400); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-300); - - --spectrum-picker-button-border-color: none; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); - --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-width: 0px; - - --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); - } -} diff --git a/components/pickerbutton/themes/spectrum-two.css b/components/pickerbutton/themes/spectrum-two.css deleted file mode 100644 index 3d7cb7d385..0000000000 --- a/components/pickerbutton/themes/spectrum-two.css +++ /dev/null @@ -1,30 +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. - */ - -@container style(--system: spectrum) { - .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-100); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-down: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); - - --spectrum-picker-button-border-color: none; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); - --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-width: 0px; - - /* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */ - --spectrum-picker-button-padding: 4px; - } -} diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css deleted file mode 100644 index 85c3b9aaf9..0000000000 --- a/components/pickerbutton/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@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-padding: var(--spectrum-in-field-button-edge-to-fill); - } -} diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json index 234562ed9a..ed8f9308dd 100644 --- a/components/popover/dist/metadata.json +++ b/components/popover/dist/metadata.json @@ -84,19 +84,7 @@ ".spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip", ".spectrum-Popover.is-open", ".spectrum-Popover.spectrum-Popover--withTip", - ".spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle", - "[dir=\"rtl\"] .spectrum-Popover--end-bottom.is-open", - "[dir=\"rtl\"] .spectrum-Popover--end-top.is-open", - "[dir=\"rtl\"] .spectrum-Popover--end.is-open", - "[dir=\"rtl\"] .spectrum-Popover--start-bottom.is-open", - "[dir=\"rtl\"] .spectrum-Popover--start-top.is-open", - "[dir=\"rtl\"] .spectrum-Popover--start.is-open", - "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip", - "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip", - "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip", - "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip", - "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip", - "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip" + ".spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle" ], "modifiers": [ "--mod-overlay-animation-duration", @@ -149,7 +137,6 @@ "--spectrum-gray-400", "--spectrum-spacing-100" ], - "system-theme": ["--system-popover-border-width"], "passthroughs": [], "high-contrast": ["--highcontrast-popover-border-color"] } diff --git a/components/popover/index.css b/components/popover/index.css index 080412ed50..45c41dde7a 100644 --- a/components/popover/index.css +++ b/components/popover/index.css @@ -11,10 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/overlay.css"; .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); diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js index 6d7e55375e..b76c6fe5db 100644 --- a/components/popover/stories/template.js +++ b/components/popover/stories/template.js @@ -8,9 +8,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Popover", diff --git a/components/popover/themes/express.css b/components/popover/themes/express.css deleted file mode 100644 index 32c92bf71b..0000000000 --- a/components/popover/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Popover { - --spectrum-popover-border-width: 0; - } -} diff --git a/components/popover/themes/spectrum-two.css b/components/popover/themes/spectrum-two.css deleted file mode 100644 index 80c0cdc94c..0000000000 --- a/components/popover/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Popover { - --spectrum-popover-border-width: var(--spectrum-border-width-100); - } -} diff --git a/components/popover/themes/spectrum.css b/components/popover/themes/spectrum.css deleted file mode 100644 index 3d81bc564b..0000000000 --- a/components/popover/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 3294d6c477..ee2d79845c 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -7,7 +7,6 @@ ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage", ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track", ".spectrum-ProgressBar--sizeL", - ".spectrum-ProgressBar--sizeM", ".spectrum-ProgressBar--sizeS", ".spectrum-ProgressBar--sizeXL", ".spectrum-ProgressBar-fill", @@ -19,10 +18,7 @@ ".spectrum-ProgressBar:dir(rtl)", ".spectrum-ProgressBar:lang(ja)", ".spectrum-ProgressBar:lang(ko)", - ".spectrum-ProgressBar:lang(zh)", - "0%", - "[dir=\"rtl\"] .spectrum-ProgressBar", - "to" + ".spectrum-ProgressBar:lang(zh)" ], "modifiers": [ "--mod-progressbar-animation-duration-indeterminate", @@ -102,10 +98,6 @@ "--spectrum-transparent-white-400", "--spectrum-white" ], - "system-theme": [ - "--system-progress-bar-track-color", - "--system-progress-bar-track-color-white" - ], "passthroughs": ["--mod-fieldlabel-font-size"], "high-contrast": [ "--highcontrast-progressbar-fill-color", diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 648c492df0..f28ba7dd2d 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -11,17 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - -.spectrum-ProgressBar, -.spectrum-ProgressBar--sizeM { - --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); - /* @todo should this be --spectrum-progress-bar-thickness-medium? */ - --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large); - --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-100); -} - .spectrum-ProgressBar--sizeS { --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); @@ -44,6 +33,15 @@ } .spectrum-ProgressBar { + --spectrum-progressbar-track-color: var(--spectrum-gray-200); + --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400); + + --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); + /* @todo should this be --spectrum-progress-bar-thickness-medium? */ + --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large); + --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-progressbar-size-default: var(--mod-progressbar-size-default, var(--spectrum-progressbar-sized-size-default)); --spectrum-progressbar-font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-sized-font-size)); --spectrum-progressbar-thickness: var(--mod-progressbar-thickness, var(--spectrum-progressbar-sized-thickness)); diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js index c358879721..30c9cfeb82 100644 --- a/components/progressbar/stories/template.js +++ b/components/progressbar/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ProgressBar", diff --git a/components/progressbar/themes/express.css b/components/progressbar/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/progressbar/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/progressbar/themes/spectrum-two.css b/components/progressbar/themes/spectrum-two.css deleted file mode 100644 index 3b705ef64c..0000000000 --- a/components/progressbar/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-ProgressBar { - --spectrum-progressbar-track-color: var(--spectrum-gray-200); - --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400); - } -} diff --git a/components/progressbar/themes/spectrum.css b/components/progressbar/themes/spectrum.css deleted file mode 100644 index 3760cc4cfc..0000000000 --- a/components/progressbar/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ProgressBar { - --spectrum-progressbar-track-color: var(--spectrum-gray-300); - --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300); - } -} diff --git a/components/progresscircle/animation.css b/components/progresscircle/animation.css deleted file mode 100644 index 176d4da4c1..0000000000 --- a/components/progresscircle/animation.css +++ /dev/null @@ -1,510 +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-ProgressCircle--indeterminate-fill-submask-2 { - animation: 1s infinite linear spectrum-fill-mask-2; -} - -@keyframes spectrum-fill-mask-1 { - 0% { - transform: rotate(90deg); - } - - 1.69% { - transform: rotate(72.3deg); - } - - 3.39% { - transform: rotate(55.5deg); - } - - 5.08% { - transform: rotate(40.3deg); - } - - 6.78% { - transform: rotate(25deg); - } - - 8.47% { - transform: rotate(10.6deg); - } - - 10.17% { - transform: rotate(0deg); - } - - 11.86% { - transform: rotate(0deg); - } - - 13.56% { - transform: rotate(0deg); - } - - 15.25% { - transform: rotate(0deg); - } - - 16.95% { - transform: rotate(0deg); - } - - 18.64% { - transform: rotate(0deg); - } - - 20.34% { - transform: rotate(0deg); - } - - 22.03% { - transform: rotate(0deg); - } - - 23.73% { - transform: rotate(0deg); - } - - 25.42% { - transform: rotate(0deg); - } - - 27.12% { - transform: rotate(0deg); - } - - 28.81% { - transform: rotate(0deg); - } - - 30.51% { - transform: rotate(0deg); - } - - 32.2% { - transform: rotate(0deg); - } - - 33.9% { - transform: rotate(0deg); - } - - 35.59% { - transform: rotate(0deg); - } - - 37.29% { - transform: rotate(0deg); - } - - 38.98% { - transform: rotate(0deg); - } - - 40.68% { - transform: rotate(0deg); - } - - 42.37% { - transform: rotate(5.3deg); - } - - 44.07% { - transform: rotate(13.4deg); - } - - 45.76% { - transform: rotate(20.6deg); - } - - 47.46% { - transform: rotate(29deg); - } - - 49.15% { - transform: rotate(36.5deg); - } - - 50.85% { - transform: rotate(42.6deg); - } - - 52.54% { - transform: rotate(48.8deg); - } - - 54.24% { - transform: rotate(54.2deg); - } - - 55.93% { - transform: rotate(59.4deg); - } - - 57.63% { - transform: rotate(63.2deg); - } - - 59.32% { - transform: rotate(67.2deg); - } - - 61.02% { - transform: rotate(70.8deg); - } - - 62.71% { - transform: rotate(73.8deg); - } - - 64.41% { - transform: rotate(76.2deg); - } - - 66.1% { - transform: rotate(78.7deg); - } - - 67.8% { - transform: rotate(80.6deg); - } - - 69.49% { - transform: rotate(82.6deg); - } - - 71.19% { - transform: rotate(83.7deg); - } - - 72.88% { - transform: rotate(85deg); - } - - 74.58% { - transform: rotate(86.3deg); - } - - 76.27% { - transform: rotate(87deg); - } - - 77.97% { - transform: rotate(87.7deg); - } - - 79.66% { - transform: rotate(88.3deg); - } - - 81.36% { - transform: rotate(88.6deg); - } - - 83.05% { - transform: rotate(89.2deg); - } - - 84.75% { - transform: rotate(89.2deg); - } - - 86.44% { - transform: rotate(89.5deg); - } - - 88.14% { - transform: rotate(89.9deg); - } - - 89.83% { - transform: rotate(89.7deg); - } - - 91.53% { - transform: rotate(90.1deg); - } - - 93.22% { - transform: rotate(90.2deg); - } - - 94.92% { - transform: rotate(90.1deg); - } - - 96.61% { - transform: rotate(90deg); - } - - 98.31% { - transform: rotate(89.8deg); - } - - 100% { - transform: rotate(90deg); - } -} - -@keyframes spectrum-fill-mask-2 { - 0% { - transform: rotate(180deg); - } - - 1.69% { - transform: rotate(180deg); - } - - 3.39% { - transform: rotate(180deg); - } - - 5.08% { - transform: rotate(180deg); - } - - 6.78% { - transform: rotate(180deg); - } - - 8.47% { - transform: rotate(180deg); - } - - 10.17% { - transform: rotate(179.2deg); - } - - 11.86% { - transform: rotate(164deg); - } - - 13.56% { - transform: rotate(151.8deg); - } - - 15.25% { - transform: rotate(140.8deg); - } - - 16.95% { - transform: rotate(130.3deg); - } - - 18.64% { - transform: rotate(120.4deg); - } - - 20.34% { - transform: rotate(110.8deg); - } - - 22.03% { - transform: rotate(101.6deg); - } - - 23.73% { - transform: rotate(93.5deg); - } - - 25.42% { - transform: rotate(85.4deg); - } - - 27.12% { - transform: rotate(78.1deg); - } - - 28.81% { - transform: rotate(71.2deg); - } - - 30.51% { - transform: rotate(89.1deg); - } - - 32.2% { - transform: rotate(105.5deg); - } - - 33.9% { - transform: rotate(121.3deg); - } - - 35.59% { - transform: rotate(135.5deg); - } - - 37.29% { - transform: rotate(148.4deg); - } - - 38.98% { - transform: rotate(161deg); - } - - 40.68% { - transform: rotate(173.5deg); - } - - 42.37% { - transform: rotate(180deg); - } - - 44.07% { - transform: rotate(180deg); - } - - 45.76% { - transform: rotate(180deg); - } - - 47.46% { - transform: rotate(180deg); - } - - 49.15% { - transform: rotate(180deg); - } - - 50.85% { - transform: rotate(180deg); - } - - 52.54% { - transform: rotate(180deg); - } - - 54.24% { - transform: rotate(180deg); - } - - 55.93% { - transform: rotate(180deg); - } - - 57.63% { - transform: rotate(180deg); - } - - 59.32% { - transform: rotate(180deg); - } - - 61.02% { - transform: rotate(180deg); - } - - 62.71% { - transform: rotate(180deg); - } - - 64.41% { - transform: rotate(180deg); - } - - 66.1% { - transform: rotate(180deg); - } - - 67.8% { - transform: rotate(180deg); - } - - 69.49% { - transform: rotate(180deg); - } - - 71.19% { - transform: rotate(180deg); - } - - 72.88% { - transform: rotate(180deg); - } - - 74.58% { - transform: rotate(180deg); - } - - 76.27% { - transform: rotate(180deg); - } - - 77.97% { - transform: rotate(180deg); - } - - 79.66% { - transform: rotate(180deg); - } - - 81.36% { - transform: rotate(180deg); - } - - 83.05% { - transform: rotate(180deg); - } - - 84.75% { - transform: rotate(180deg); - } - - 86.44% { - transform: rotate(180deg); - } - - 88.14% { - transform: rotate(180deg); - } - - 89.83% { - transform: rotate(180deg); - } - - 91.53% { - transform: rotate(180deg); - } - - 93.22% { - transform: rotate(180deg); - } - - 94.92% { - transform: rotate(180deg); - } - - 96.61% { - transform: rotate(180deg); - } - - 98.31% { - transform: rotate(180deg); - } - - 100% { - transform: rotate(180deg); - } -} - -@keyframes spectrum-fills-rotate { - 0% { - transform: rotate(-90deg); - } - - 100% { - transform: rotate(270deg); - } -} diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json index 82493f1462..a815f0a2dd 100644 --- a/components/progresscircle/dist/metadata.json +++ b/components/progresscircle/dist/metadata.json @@ -17,67 +17,7 @@ ".spectrum-ProgressCircle.spectrum-ProgressCircle--medium", ".spectrum-ProgressCircle.spectrum-ProgressCircle--small", ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill", - ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track", - "0%", - "1.69%", - "10.17%", - "11.86%", - "13.56%", - "15.25%", - "16.95%", - "18.64%", - "20.34%", - "22.03%", - "23.73%", - "25.42%", - "27.12%", - "28.81%", - "3.39%", - "30.51%", - "32.2%", - "33.9%", - "35.59%", - "37.29%", - "38.98%", - "40.68%", - "42.37%", - "44.07%", - "45.76%", - "47.46%", - "49.15%", - "5.08%", - "50.85%", - "52.54%", - "54.24%", - "55.93%", - "57.63%", - "59.32%", - "6.78%", - "61.02%", - "62.71%", - "64.41%", - "66.1%", - "67.8%", - "69.49%", - "71.19%", - "72.88%", - "74.58%", - "76.27%", - "77.97%", - "79.66%", - "8.47%", - "81.36%", - "83.05%", - "84.75%", - "86.44%", - "88.14%", - "89.83%", - "91.53%", - "93.22%", - "94.92%", - "96.61%", - "98.31%", - "to" + ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track" ], "modifiers": [ "--mod-progress-circle-fill-border-color", @@ -113,11 +53,6 @@ "--spectrum-transparent-white-400", "--spectrum-transparent-white-900" ], - "system-theme": [ - "--system-progress-circle-fill-border-color-over-background", - "--system-progress-circle-track-border-color", - "--system-progress-circle-track-border-color-over-background" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-progress-circle-fill-border-color", diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index 019cbb78bb..a0de503623 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* windows high contrast mode */ @media (forced-colors: active) { .spectrum-ProgressCircle { @@ -30,6 +28,12 @@ } .spectrum-ProgressCircle { + /* circle unfilled border color */ + --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200); + + --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); + --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); + /* circle unfilled border color */ --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300); diff --git a/components/progresscircle/stories/template.js b/components/progresscircle/stories/template.js index 2e27221f91..8fbb22aa46 100644 --- a/components/progresscircle/stories/template.js +++ b/components/progresscircle/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ id = getRandomId("progress-circle"), @@ -59,4 +56,4 @@ export const Template = ({ `; -}; \ No newline at end of file +}; diff --git a/components/progresscircle/themes/express.css b/components/progresscircle/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/progresscircle/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/progresscircle/themes/spectrum-two.css b/components/progresscircle/themes/spectrum-two.css deleted file mode 100644 index 93464f2294..0000000000 --- a/components/progresscircle/themes/spectrum-two.css +++ /dev/null @@ -1,22 +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. - */ - -@container style(--system: spectrum) { - .spectrum-ProgressCircle { - /* circle unfilled border color */ - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200); - - --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); - --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); - } -} diff --git a/components/progresscircle/themes/spectrum.css b/components/progresscircle/themes/spectrum.css deleted file mode 100644 index 2d0e45eece..0000000000 --- a/components/progresscircle/themes/spectrum.css +++ /dev/null @@ -1,26 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ProgressCircle { - /* circle unfilled border color */ - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300); - - --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); - --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); - } -} diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index b94c6dfcf9..56f388cd3b 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -12,7 +12,6 @@ ".spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio--sizeL", - ".spectrum-Radio--sizeM", ".spectrum-Radio--sizeS", ".spectrum-Radio--sizeXL", ".spectrum-Radio-button", @@ -43,8 +42,7 @@ ".spectrum-Radio:hover .spectrum-Radio-label", ".spectrum-Radio:lang(ja)", ".spectrum-Radio:lang(ko)", - ".spectrum-Radio:lang(zh)", - "[dir=\"rtl\"] .spectrum-Radio .spectrum-Radio-button:after" + ".spectrum-Radio:lang(zh)" ], "modifiers": [ "--mod-radio-animation-duration", @@ -167,13 +165,6 @@ "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [ - "--system-radio-button-background-color", - "--system-radio-button-border-color-default", - "--system-radio-button-border-color-down", - "--system-radio-button-border-color-focus", - "--system-radio-button-border-color-hover" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-radio-button-background-color", diff --git a/components/radio/index.css b/components/radio/index.css index f531d01f8d..2365190a9e 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -11,37 +11,37 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; +.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); -/* - * Radio: - * ::before is to style the input circle (selection indicator) - * ::after is to style the focus ring - */ + --spectrum-radio-button-background-color: var(--spectrum-gray-50); -.spectrum-Radio { - /* state colors for all themes */ + /* state colors */ --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 */ + /* focus ring */ --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 */ + /* disabled */ --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 */ + /* emphasized state colors selection indicator */ --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 */ + /* selection indicator */ --spectrum-radio-border-width: var(--spectrum-border-width-200); /* checked selection indicator */ @@ -52,19 +52,9 @@ --spectrum-radio-line-height: var(--spectrum-line-height-100); - /* animation all themes */ + /* animation */ --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); - } -} - -.spectrum-Radio, -.spectrum-Radio--sizeM { --spectrum-radio-height: var(--spectrum-component-height-100); --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); @@ -74,6 +64,13 @@ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); --spectrum-radio-font-size: var(--spectrum-font-size-100); + + /* CJK language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); + } } .spectrum-Radio--sizeS { diff --git a/components/radio/stories/template.js b/components/radio/stories/template.js index 68c3cbf0e9..50ba8484b2 100644 --- a/components/radio/stories/template.js +++ b/components/radio/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Radio", diff --git a/components/radio/themes/express.css b/components/radio/themes/express.css deleted file mode 100644 index 8565459259..0000000000 --- a/components/radio/themes/express.css +++ /dev/null @@ -1,26 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Radio { - /* selection indicator */ - --spectrum-radio-button-border-color-default: var(--spectrum-gray-800); - --spectrum-radio-button-border-color-hover: var(--spectrum-gray-900); - --spectrum-radio-button-border-color-down: var(--spectrum-gray-900); - --spectrum-radio-button-border-color-focus: var(--spectrum-gray-900); - } -} diff --git a/components/radio/themes/spectrum-two.css b/components/radio/themes/spectrum-two.css deleted file mode 100644 index 48b980fc0e..0000000000 --- a/components/radio/themes/spectrum-two.css +++ /dev/null @@ -1,24 +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. - */ - -@container style(--system: spectrum) { - .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); - - --spectrum-radio-button-background-color: var(--spectrum-gray-50); - } -} diff --git a/components/radio/themes/spectrum.css b/components/radio/themes/spectrum.css deleted file mode 100644 index 33772fcc7c..0000000000 --- a/components/radio/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Radio { - --spectrum-radio-button-background-color: var(--spectrum-gray-75); - } -} diff --git a/components/rating/dist/metadata.json b/components/rating/dist/metadata.json index 75ee43e089..f0ab77b22a 100644 --- a/components/rating/dist/metadata.json +++ b/components/rating/dist/metadata.json @@ -101,13 +101,6 @@ "--spectrum-neutral-subdued-content-color-key-focus", "--spectrum-workflow-icon-size-100" ], - "system-theme": [ - "--system-rating-icon-color-default", - "--system-rating-icon-color-down", - "--system-rating-icon-color-hover", - "--system-rating-icon-color-key-focus", - "--system-rating-indicator-border-radius" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-rating-emphasized-icon-color-default", diff --git a/components/rating/index.css b/components/rating/index.css index 02c7619491..6b2ed7acd6 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -11,9 +11,14 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .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); + + --spectrum-rating-indicator-border-radius: 2px; + /* Icon */ --spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100); --spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100); diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js index 47ea5c5f61..245694af8f 100644 --- a/components/rating/stories/template.js +++ b/components/rating/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { repeat } from "lit/directives/repeat.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Rating", diff --git a/components/rating/themes/express.css b/components/rating/themes/express.css deleted file mode 100644 index 1a0d5c792b..0000000000 --- a/components/rating/themes/express.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Rating { - --spectrum-rating-icon-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-rating-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - } -} diff --git a/components/rating/themes/spectrum-two.css b/components/rating/themes/spectrum-two.css deleted file mode 100644 index 0c2a8df926..0000000000 --- a/components/rating/themes/spectrum-two.css +++ /dev/null @@ -1,23 +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. - */ - -@container style(--system: spectrum) { - .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); - - --spectrum-rating-indicator-border-radius: 2px; - } -} diff --git a/components/rating/themes/spectrum.css b/components/rating/themes/spectrum.css deleted file mode 100644 index c99df8e652..0000000000 --- a/components/rating/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Rating { - --spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json index b701431ddf..35987fa36d 100644 --- a/components/search/dist/metadata.json +++ b/components/search/dist/metadata.json @@ -25,10 +25,6 @@ ".spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon", ".spectrum-Search-textfield:hover .spectrum-Search-icon", ".spectrum-Search.is-disabled .spectrum-Search-clearButton", - ".spectrum-Search.spectrum-Search--sizeL", - ".spectrum-Search.spectrum-Search--sizeM", - ".spectrum-Search.spectrum-Search--sizeS", - ".spectrum-Search.spectrum-Search--sizeXL", ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon", ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input" ], @@ -149,28 +145,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-search-background-color", - "--system-search-background-color-disabled", - "--system-search-border-color-default", - "--system-search-border-color-disabled", - "--system-search-border-color-focus", - "--system-search-border-color-focus-hover", - "--system-search-border-color-hover", - "--system-search-border-color-key-focus", - "--system-search-border-radius", - "--system-search-edge-to-visual", - "--system-search-quiet-background-color-disabled", - "--system-search-quiet-border-color-disabled", - "--system-search-size-l-border-radius", - "--system-search-size-l-edge-to-visual", - "--system-search-size-m-border-radius", - "--system-search-size-m-edge-to-visual", - "--system-search-size-s-border-radius", - "--system-search-size-s-edge-to-visual", - "--system-search-size-xl-border-radius", - "--system-search-size-xl-edge-to-visual" - ], "passthroughs": [ "--mod-textfield-background-color", "--mod-textfield-background-color-disabled", diff --git a/components/search/index.css b/components/search/index.css index 3f98f73e14..dc03c43585 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -11,9 +11,20 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Search { + --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-800); + + --spectrum-search-background-color: var(--spectrum-gray-25); + --spectrum-search-background-color-disabled: var(--spectrum-gray-25); + --spectrum-search-border-color-disabled: var(--spectrum-gray-300); + + --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); @@ -89,18 +100,27 @@ } .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); @@ -211,7 +231,7 @@ --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. */ + /* added specificity, otherwise they are overridden by system specific variants */ --mod-search-border-radius: 0; --mod-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); diff --git a/components/search/stories/template.js b/components/search/stories/template.js index 364c8d8fde..09570d3358 100644 --- a/components/search/stories/template.js +++ b/components/search/stories/template.js @@ -7,9 +7,6 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Search", diff --git a/components/search/themes/express.css b/components/search/themes/express.css deleted file mode 100644 index 002ab9cecb..0000000000 --- a/components/search/themes/express.css +++ /dev/null @@ -1,47 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Search { - --spectrum-search-border-color-default: var(--spectrum-gray-400); - --spectrum-search-border-color-hover: var(--spectrum-gray-500); - --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--sizeM { - --spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); - } - - &.spectrum-Search--sizeS { - --spectrum-search-border-radius: calc(var(--spectrum-component-height-75) / 2); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75); - } - - &.spectrum-Search--sizeL { - --spectrum-search-border-radius: calc(var(--spectrum-component-height-200) / 2); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); - } - - &.spectrum-Search--sizeXL { - --spectrum-search-border-radius: calc(var(--spectrum-component-height-300) / 2); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); - } - } -} diff --git a/components/search/themes/spectrum-two.css b/components/search/themes/spectrum-two.css deleted file mode 100644 index 446eaea93a..0000000000 --- a/components/search/themes/spectrum-two.css +++ /dev/null @@ -1,52 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Search { - --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-800); - - --spectrum-search-background-color: var(--spectrum-gray-25); - --spectrum-search-background-color-disabled: var(--spectrum-gray-25); - --spectrum-search-border-color-disabled: var(--spectrum-gray-300); - - &, - &.spectrum-Search--sizeM { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - } - - &.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--sizeL { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-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--quiet { - --spectrum-search-background-color-disabled: transparent; - --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color); - } -} diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css deleted file mode 100644 index 59756ec73d..0000000000 --- a/components/search/themes/spectrum.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Search { - --spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-search-background-color: var(--spectrum-gray-50); - --spectrum-search-border-color-key-focus: var(--spectrum-gray-900); - } -} diff --git a/components/sidenav/dist/metadata.json b/components/sidenav/dist/metadata.json index a0be758aa5..0215529e38 100644 --- a/components/sidenav/dist/metadata.json +++ b/components/sidenav/dist/metadata.json @@ -180,15 +180,6 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "system-theme": [ - "--system-side-nav-background-hover", - "--system-side-nav-background-hover-selected", - "--system-side-nav-background-key-focus", - "--system-side-nav-background-key-focus-selected", - "--system-side-nav-item-background-default-selected", - "--system-side-nav-item-background-down", - "--system-side-nav-item-background-down-selected" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-sidenav-background-hover", diff --git a/components/sidenav/index.css b/components/sidenav/index.css index c0b75855d4..163a73f759 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - @media (forced-colors: active) { /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */ .spectrum-SideNav { @@ -47,6 +45,15 @@ } .spectrum-SideNav { + --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); + /* focus indicator */ --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness); --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); diff --git a/components/sidenav/stories/template.js b/components/sidenav/stories/template.js index 3aa9960e80..d3a832ab03 100644 --- a/components/sidenav/stories/template.js +++ b/components/sidenav/stories/template.js @@ -7,9 +7,6 @@ import { repeat } from "lit/directives/repeat.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-SideNav", diff --git a/components/sidenav/themes/express.css b/components/sidenav/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/sidenav/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/sidenav/themes/spectrum-two.css b/components/sidenav/themes/spectrum-two.css deleted file mode 100644 index 85869d92db..0000000000 --- a/components/sidenav/themes/spectrum-two.css +++ /dev/null @@ -1,25 +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. - */ - -@container style(--system: spectrum) { - .spectrum-SideNav { - --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); - } -} diff --git a/components/sidenav/themes/spectrum.css b/components/sidenav/themes/spectrum.css deleted file mode 100644 index 51828a4d8b..0000000000 --- a/components/sidenav/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-SideNav { - --spectrum-sidenav-background-hover: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200); - - --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200); - } -} diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 015c214510..a7a72c0031 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -83,19 +83,13 @@ ".spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before", ".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before", ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle", - ".spectrum-Slider.spectrum-Slider--sizeL", - ".spectrum-Slider.spectrum-Slider--sizeM", - ".spectrum-Slider.spectrum-Slider--sizeS", - ".spectrum-Slider.spectrum-Slider--sizeXL", ".spectrum-Slider:dir(rtl)", ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover", - ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)", - "[dir=\"rtl\"] .spectrum-Slider", - "[dir=\"rtl\"] .spectrum-Slider .spectrum-Slider-handle:before" + ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)" ], "modifiers": [ "--mod-animation-duration-100", @@ -258,29 +252,6 @@ "--spectrum-spacing-900", "--spectrum-text-to-visual-75" ], - "system-theme": [ - "--system-slider-handle-background-color", - "--system-slider-handle-background-color-disabled", - "--system-slider-handle-border-color", - "--system-slider-handle-border-color-down", - "--system-slider-handle-border-color-hover", - "--system-slider-handle-border-color-key-focus", - "--system-slider-handle-border-radius", - "--system-slider-handle-disabled-background-color", - "--system-slider-handle-focus-ring-color-key-focus", - "--system-slider-ramp-handle-background-color", - "--system-slider-ramp-track-color", - "--system-slider-ramp-track-color-disabled", - "--system-slider-size-l-handle-border-radius", - "--system-slider-size-m-handle-border-radius", - "--system-slider-size-s-handle-border-radius", - "--system-slider-size-xl-handle-border-radius", - "--system-slider-tick-mark-color", - "--system-slider-ticks-handle-background-color", - "--system-slider-track-color", - "--system-slider-track-corner-radius", - "--system-slider-track-fill-color" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-slider-filled-track-fill-color", diff --git a/components/slider/index.css b/components/slider/index.css index d49f584aab..54c875ab00 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -11,9 +11,29 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Slider { + --spectrum-slider-track-color: var(--spectrum-gray-200); + --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-100); + + --spectrum-slider-handle-background-color: transparent; + --spectrum-slider-handle-background-color-disabled: transparent; + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); + + --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + + --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); + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); + + --spectrum-slider-track-corner-radius: 2px; + /* 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); @@ -78,6 +98,8 @@ } .spectrum-Slider--sizeS { + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); + --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); @@ -88,6 +110,8 @@ } .spectrum-Slider--sizeL { + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + --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); @@ -101,6 +125,8 @@ } .spectrum-Slider--sizeXL { + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + --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); diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index c69a96b487..905fe770b4 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Slider", diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css deleted file mode 100644 index f9f149f4d9..0000000000 --- a/components/slider/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-200); - --spectrum-slider-track-fill-color: var(--spectrum-gray-600); - --spectrum-slider-ramp-track-color: var(--spectrum-gray-300); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - - --spectrum-slider-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50); - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-handle-border-color: var(--spectrum-gray-800); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50); - - --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); - - --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900); - --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); - --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-900); - --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - } -} diff --git a/components/slider/themes/spectrum-two.css b/components/slider/themes/spectrum-two.css deleted file mode 100644 index b118d77cff..0000000000 --- a/components/slider/themes/spectrum-two.css +++ /dev/null @@ -1,54 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-200); - --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-100); - - --spectrum-slider-handle-background-color: transparent; - --spectrum-slider-handle-background-color-disabled: transparent; - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); - --spectrum-slider-handle-border-color: var(--spectrum-gray-700); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); - - --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); - - --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); - - --spectrum-slider-track-corner-radius: 2px; - - &, - &.spectrum-Slider--sizeM { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - } - - &.spectrum-Slider--sizeS { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - } - - &.spectrum-Slider--sizeL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); - } - - &.spectrum-Slider--sizeXL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); - } - } -} diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css deleted file mode 100644 index f411427cc8..0000000000 --- a/components/slider/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-300); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); - --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75); - - &, - &.spectrum-Slider--sizeM { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - } - - &.spectrum-Slider--sizeS { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - } - - &.spectrum-Slider--sizeL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - } - - &.spectrum-Slider--sizeXL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - } - } -} diff --git a/components/splitview/dist/metadata.json b/components/splitview/dist/metadata.json index 4902e8e236..c6925723f7 100644 --- a/components/splitview/dist/metadata.json +++ b/components/splitview/dist/metadata.json @@ -81,11 +81,6 @@ "--spectrum-gray-75", "--spectrum-gray-800" ], - "system-theme": [ - "--system-split-view-background-color", - "--system-split-view-gripper-border-radius", - "--system-split-view-handle-background-color" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-splitview-handle-background-color", diff --git a/components/splitview/index.css b/components/splitview/index.css index 81ca706a34..990108806d 100644 --- a/components/splitview/index.css +++ b/components/splitview/index.css @@ -11,9 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-SplitView { + --spectrum-splitview-background-color: var(--spectrum-gray-75); + --spectrum-splitview-handle-background-color: var(--spectrum-gray-200); + --spectrum-splitview-gripper-border-radius: 2px; + --spectrum-splitview-vertical-width: 100%; --spectrum-splitview-vertical-gripper-width: 50%; --spectrum-splitview-vertical-gripper-outer-width: 100%; diff --git a/components/splitview/stories/template.js b/components/splitview/stories/template.js index 4fb08b911d..aacdd00a3e 100644 --- a/components/splitview/stories/template.js +++ b/components/splitview/stories/template.js @@ -3,9 +3,6 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-SplitView", diff --git a/components/splitview/themes/express.css b/components/splitview/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/splitview/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/splitview/themes/spectrum-two.css b/components/splitview/themes/spectrum-two.css deleted file mode 100644 index 14ef6131e5..0000000000 --- a/components/splitview/themes/spectrum-two.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. - */ - -@container style(--system: spectrum) { - .spectrum-SplitView { - --spectrum-splitview-background-color: var(--spectrum-gray-75); - --spectrum-splitview-handle-background-color: var(--spectrum-gray-200); - --spectrum-splitview-gripper-border-radius: 2px; - } -} diff --git a/components/splitview/themes/spectrum.css b/components/splitview/themes/spectrum.css deleted file mode 100644 index 209e46a4b3..0000000000 --- a/components/splitview/themes/spectrum.css +++ /dev/null @@ -1,24 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-SplitView { - --spectrum-splitview-background-color: var(--spectrum-gray-100); - --spectrum-splitview-handle-background-color: var(--spectrum-gray-300); - --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json index 7c7c6a7587..ecfd85258a 100644 --- a/components/statuslight/dist/metadata.json +++ b/components/statuslight/dist/metadata.json @@ -160,7 +160,6 @@ "--spectrum-text-to-visual-75", "--spectrum-yellow-visual-color" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-statuslight-content-color-default", diff --git a/components/steplist/dist/metadata.json b/components/steplist/dist/metadata.json index 3e4e5dc0be..27faf429c1 100644 --- a/components/steplist/dist/metadata.json +++ b/components/steplist/dist/metadata.json @@ -40,10 +40,7 @@ ".spectrum-Steplist-label:dir(rtl)", ".spectrum-Steplist-marker", ".spectrum-Steplist-markerContainer", - ".spectrum-Steplist-segment", - "[dir=\"rtl\"] .spectrum-Steplist-item:last-child .spectrum-Steplist-label", - "[dir=\"rtl\"] .spectrum-Steplist-item:only-child .spectrum-Steplist-label", - "[dir=\"rtl\"] .spectrum-Steplist-label" + ".spectrum-Steplist-segment" ], "modifiers": [ "--mod-steplist-complete-label-text-color", @@ -91,10 +88,6 @@ "--spectrum-gray-700", "--spectrum-gray-800" ], - "system-theme": [ - "--system-steplist-incomplete-marker-border-color", - "--system-steplist-incomplete-segment-border-block-end-color" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-steplist-complete-marker-background-color", diff --git a/components/steplist/index.css b/components/steplist/index.css index 7fc5709191..6290059101 100644 --- a/components/steplist/index.css +++ b/components/steplist/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Steplist { + --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); + --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); + /* The width of a step */ --spectrum-steplist-step-width: 80px; diff --git a/components/steplist/stories/template.js b/components/steplist/stories/template.js index ea9a57ef42..7edfdf8199 100644 --- a/components/steplist/stories/template.js +++ b/components/steplist/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { repeat } from "lit/directives/repeat.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const SteplistItem = ({ rootClass = "spectrum-Steplist-item", diff --git a/components/steplist/themes/express.css b/components/steplist/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/steplist/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/steplist/themes/spectrum-two.css b/components/steplist/themes/spectrum-two.css deleted file mode 100644 index 649e9fb4d3..0000000000 --- a/components/steplist/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Steplist { - --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); - --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); - } -} diff --git a/components/steplist/themes/spectrum.css b/components/steplist/themes/spectrum.css deleted file mode 100644 index bfe1e5f6f8..0000000000 --- a/components/steplist/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Steplist { - --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300); - --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300); - } -} diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index cfea6e878d..03a2e75645 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -32,7 +32,6 @@ ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus:hover", ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover", ".spectrum-Stepper.spectrum-Stepper--sizeL", - ".spectrum-Stepper.spectrum-Stepper--sizeM", ".spectrum-Stepper.spectrum-Stepper--sizeS", ".spectrum-Stepper.spectrum-Stepper--sizeXL", ".spectrum-Stepper:before", @@ -143,31 +142,6 @@ "--spectrum-negative-border-color-key-focus", "--spectrum-text-field-minimum-width-multiplier" ], - "system-theme": [ - "--system-stepper-border-color-default", - "--system-stepper-border-color-disabled", - "--system-stepper-border-color-focus", - "--system-stepper-border-color-focus-hover", - "--system-stepper-border-color-focus-hover-invalid", - "--system-stepper-border-color-focus-invalid", - "--system-stepper-border-color-hover", - "--system-stepper-border-color-invalid", - "--system-stepper-border-color-keyboard-focus", - "--system-stepper-border-color-keyboard-focus-invalid", - "--system-stepper-border-width", - "--system-stepper-button-border-width", - "--system-stepper-button-border-width-disabled", - "--system-stepper-buttons-background-color", - "--system-stepper-buttons-background-color-disabled", - "--system-stepper-buttons-border-color", - "--system-stepper-buttons-border-color-focus", - "--system-stepper-buttons-border-color-hover", - "--system-stepper-buttons-border-color-keyboard-focus", - "--system-stepper-buttons-border-style", - "--system-stepper-buttons-border-width", - "--system-stepper-quiet-button-edge-to-fill", - "--system-stepper-quiet-buttons-border-style" - ], "passthroughs": [ "--mod-infield-button-border-block-end-width", "--mod-infield-button-border-color", diff --git a/components/stepper/index.css b/components/stepper/index.css index f3c9682c07..3fdb3b69cd 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* --- High contrast settings --- */ @media (forced-colors: active) { .spectrum-Stepper { @@ -73,6 +71,34 @@ /* --- Component-level definitions --- */ .spectrum-Stepper { + --spectrum-stepper-border-width: var(--spectrum-border-width-100); + --spectrum-stepper-border-color-default: 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-900); + --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-800); + + --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-100); + --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-800); + + --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); + + /** Invalid **/ + --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); + + /** Disabled **/ + --spectrum-stepper-border-color-disabled: var(--spectrum-gray-300); + --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200); + --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); + --spectrum-stepper-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-default))); --spectrum-stepper-border-radius: var(--mod-stepper-border-radius, var(--spectrum-corner-radius-100)); @@ -82,11 +108,8 @@ --spectrum-stepper-animation-duration: var(--mod-stepper-animation-duration, var(--spectrum-animation-duration-100)); - &, - &.spectrum-Stepper--sizeM { - --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium)); - --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100)); - } + --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium)); + --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100)); &.spectrum-Stepper--sizeS { --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-small)); @@ -136,6 +159,8 @@ } &.spectrum-Stepper--quiet { + --spectrum-stepper-buttons-border-style: none; + --spectrum-stepper-button-edge-to-fill: 0; --mod-stepper-buttons-background-color: transparent; /* quiet hover */ @@ -225,6 +250,7 @@ } &.spectrum-Stepper--quiet { + /* @passthrough start -- MODS for quiet variant */ --mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width)); --mod-infield-button-border-color: var(--spectrum-stepper-border-color); --mod-infield-button-border-color-quiet: var(--spectrum-stepper-border-color); @@ -239,6 +265,7 @@ --mod-textfield-focus-indicator-color: transparent; --mod-textfield-background-color: transparent; --mod-textfield-border-color-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); + /* @passthrough end */ &:not(.is-disabled) { &:hover { diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js index fbb818b72f..fb14155af8 100644 --- a/components/stepper/stories/template.js +++ b/components/stepper/stories/template.js @@ -8,9 +8,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Stepper", diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css deleted file mode 100644 index 724f4e973f..0000000000 --- a/components/stepper/themes/express.css +++ /dev/null @@ -1,53 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Stepper { - --spectrum-stepper-border-width: var(--spectrum-border-width-200); - --spectrum-stepper-border-color-default: var(--spectrum-gray-400); - --spectrum-stepper-border-color-hover: var(--spectrum-gray-500); - --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --spectrum-stepper-border-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-stepper-buttons-border-style: solid; - --spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200); - --spectrum-stepper-buttons-border-color: transparent; - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); - --spectrum-stepper-buttons-border-color-hover: transparent; - --spectrum-stepper-buttons-border-color-focus: transparent; - --spectrum-stepper-buttons-border-color-keyboard-focus: transparent; - - --spectrum-stepper-button-border-width: 0; - - /** Invalid **/ - --spectrum-stepper-border-color-invalid: transparent; - --spectrum-stepper-border-color-focus-invalid: transparent; - --spectrum-stepper-border-color-focus-hover-invalid: transparent; - --spectrum-stepper-border-color-keyboard-focus-invalid: transparent; - - /** Disabled **/ - --spectrum-stepper-button-border-width-disabled: 0; - --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-disabled-background-color); - } - - .spectrum-Stepper--quiet { - --spectrum-stepper-buttons-border-style: none; - --spectrum-stepper-button-edge-to-fill: 0; - } -} diff --git a/components/stepper/themes/spectrum-two.css b/components/stepper/themes/spectrum-two.css deleted file mode 100644 index 18c580ff12..0000000000 --- a/components/stepper/themes/spectrum-two.css +++ /dev/null @@ -1,49 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Stepper { - --spectrum-stepper-border-width: var(--spectrum-border-width-100); - --spectrum-stepper-border-color-default: 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-900); - --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-800); - - --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-100); - --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-800); - - --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); - - /** Invalid **/ - --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); - - /** Disabled **/ - --spectrum-stepper-border-color-disabled: var(--spectrum-gray-300); - --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200); - --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); - } - - .spectrum-Stepper--quiet { - --spectrum-stepper-buttons-border-style: none; - --spectrum-stepper-button-edge-to-fill: 0; - } -} diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css deleted file mode 100644 index 1b904f9f95..0000000000 --- a/components/stepper/themes/spectrum.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Stepper { - --spectrum-stepper-border-color-disabled: transparent; - --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100); - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); - --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-100); - } -} diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json index 896cc7acc7..cf8b5e71c8 100644 --- a/components/swatch/dist/metadata.json +++ b/components/swatch/dist/metadata.json @@ -121,11 +121,6 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-swatch-border-color", - "--system-swatch-border-radius", - "--system-swatch-inner-border-color-selected" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-swatch-background-color-selected", diff --git a/components/swatch/index.css b/components/swatch/index.css index b6e636906e..a4d3ca19d4 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* Windows high contrast mode */ @media (forced-colors: active) { .spectrum-Swatch { @@ -60,9 +58,14 @@ } .spectrum-Swatch { + --spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); + --spectrum-swatch-border-radius: var(--spectrum-corner-radius-75); + + --spectrum-swatch-disabled-icon-color: var(--spectrum-white); + --spectrum-swatch-focus-indicator-border-radius: 8px; --spectrum-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-disabled-icon-border-opacity)); - --spectrum-swatch-disabled-icon-color: var(--spectrum-white); --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200); --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); diff --git a/components/swatch/stories/template.js b/components/swatch/stories/template.js index f3658577a3..c1ff884c4c 100644 --- a/components/swatch/stories/template.js +++ b/components/swatch/stories/template.js @@ -9,9 +9,6 @@ import { when } from "lit/directives/when.js"; import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Swatch", diff --git a/components/swatch/themes/express.css b/components/swatch/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/swatch/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/swatch/themes/spectrum-two.css b/components/swatch/themes/spectrum-two.css deleted file mode 100644 index ee21266473..0000000000 --- a/components/swatch/themes/spectrum-two.css +++ /dev/null @@ -1,21 +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. - */ - -@container style(--system: spectrum) { - /* Swatch tokens */ - .spectrum-Swatch { - --spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity)); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); - --spectrum-swatch-border-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/swatch/themes/spectrum.css b/components/swatch/themes/spectrum.css deleted file mode 100644 index 3661de0250..0000000000 --- a/components/swatch/themes/spectrum.css +++ /dev/null @@ -1,24 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Swatch { - --spectrum-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-opacity)); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100); - } -} diff --git a/components/swatchgroup/dist/metadata.json b/components/swatchgroup/dist/metadata.json index 74adf019d5..24e3423ca5 100644 --- a/components/swatchgroup/dist/metadata.json +++ b/components/swatchgroup/dist/metadata.json @@ -16,7 +16,6 @@ "--spectrum-spacing-50", "--spectrum-spacing-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 00a47cdd79..37d76fda6a 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -72,8 +72,7 @@ ".spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label", ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch", ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label", - "[dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before" + ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label" ], "modifiers": [ "--mod-animation-duration-100", @@ -202,19 +201,6 @@ "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [ - "--system-switch-background-color", - "--system-switch-background-color-disabled", - "--system-switch-handle-background-color", - "--system-switch-handle-border-color-default", - "--system-switch-handle-border-color-down", - "--system-switch-handle-border-color-focus", - "--system-switch-handle-border-color-hover", - "--system-switch-handle-border-color-selected-default", - "--system-switch-handle-border-color-selected-down", - "--system-switch-handle-border-color-selected-focus", - "--system-switch-handle-border-color-selected-hover" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-switch-background-color", diff --git a/components/switch/index.css b/components/switch/index.css index 763ad359ab..a811d41040 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -11,9 +11,21 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .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-background-color: var(--spectrum-gray-200); + --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); + --spectrum-switch-handle-background-color: var(--spectrum-gray-50); + --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); diff --git a/components/switch/stories/template.js b/components/switch/stories/template.js index 5e67a3cc8b..4f0877d5c8 100644 --- a/components/switch/stories/template.js +++ b/components/switch/stories/template.js @@ -6,9 +6,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Switch", diff --git a/components/switch/themes/express.css b/components/switch/themes/express.css deleted file mode 100644 index ac5198ba73..0000000000 --- a/components/switch/themes/express.css +++ /dev/null @@ -1,30 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Switch { - --spectrum-switch-handle-border-color-default: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-900); - - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); - } -} diff --git a/components/switch/themes/spectrum-two.css b/components/switch/themes/spectrum-two.css deleted file mode 100644 index c2ed1a192a..0000000000 --- a/components/switch/themes/spectrum-two.css +++ /dev/null @@ -1,30 +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. - */ - -@container style(--system: spectrum) { - .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-background-color: var(--spectrum-gray-200); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); - --spectrum-switch-handle-background-color: var(--spectrum-gray-50); - } -} diff --git a/components/switch/themes/spectrum.css b/components/switch/themes/spectrum.css deleted file mode 100644 index 8b32e03d8f..0000000000 --- a/components/switch/themes/spectrum.css +++ /dev/null @@ -1,24 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Switch { - --spectrum-switch-background-color: var(--spectrum-gray-300); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-300); - --spectrum-switch-handle-background-color: var(--spectrum-gray-75); - } -} diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json index e319678fb1..573f4948a7 100644 --- a/components/table/dist/metadata.json +++ b/components/table/dist/metadata.json @@ -122,8 +122,7 @@ ".spectrum-Table-thumbnailInner .spectrum-Table-thumbnailContent", ".spectrum-Table-thumbnailInner .spectrum-Thumbnail", ".spectrum-Table:dir(rtl)", - ".spectrum-Table:not(.spectrum-Table-scroller)", - "[dir=\"rtl\"] .spectrum-Table" + ".spectrum-Table:not(.spectrum-Table-scroller)" ], "modifiers": [ "--mod-table-border-color", @@ -435,18 +434,6 @@ "--spectrum-transparent-white-100", "--spectrum-transparent-white-25" ], - "system-theme": [ - "--system-table-border-color", - "--system-table-divider-color", - "--system-table-header-background-color", - "--system-table-icon-color-focus", - "--system-table-icon-color-focus-hover", - "--system-table-quiet-header-background-color", - "--system-table-quiet-row-background-color", - "--system-table-row-background-color", - "--system-table-section-header-background-color", - "--system-table-summary-row-background-color" - ], "passthroughs": ["--mod-checkbox-spacing", "--mod-thumbnail-size"], "high-contrast": [ "--highcontrast-table-border-color", diff --git a/components/table/index.css b/components/table/index.css index 830e1528ff..cbd0c1c796 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /********* HIGH CONTRAST *********/ @media (forced-colors: active) { .spectrum-Table { @@ -72,6 +70,15 @@ } .spectrum-Table { + --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); + --spectrum-table-border-color: var(--spectrum-gray-200); + --spectrum-table-divider-color: var(--spectrum-gray-200); + --spectrum-table-row-background-color: var(--spectrum-gray-25); + --spectrum-table-summary-row-background-color: var(--spectrum-gray-100); + --spectrum-table-section-header-background-color: var(--spectrum-gray-100); + --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content); --spectrum-table-border-radius: var(--spectrum-corner-radius-100); @@ -389,6 +396,9 @@ } .spectrum-Table--quiet { + --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); + --spectrum-table-row-background-color: var(--spectrum-transparent-white-25); + --mod-table-border-radius: var(--mod-table-border-radius--quiet, 0px); --mod-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width--quiet, 0px); --mod-table-header-background-color: var(--mod-table-header-background-color--quiet, var(--spectrum-transparent-white-100)); diff --git a/components/table/stories/template.js b/components/table/stories/template.js index 662a6e3206..8487cca716 100644 --- a/components/table/stories/template.js +++ b/components/table/stories/template.js @@ -9,9 +9,6 @@ import { when } from "lit/directives/when.js"; import { html, literal } from "lit/static-html.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const TableRowItem = ({ rootClass = "spectrum-Table", diff --git a/components/table/themes/express.css b/components/table/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/table/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/table/themes/spectrum-two.css b/components/table/themes/spectrum-two.css deleted file mode 100644 index 1c0a468407..0000000000 --- a/components/table/themes/spectrum-two.css +++ /dev/null @@ -1,30 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Table { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); - --spectrum-table-border-color: var(--spectrum-gray-200); - --spectrum-table-divider-color: var(--spectrum-gray-200); - --spectrum-table-row-background-color: var(--spectrum-gray-25); - --spectrum-table-summary-row-background-color: var(--spectrum-gray-100); - --spectrum-table-section-header-background-color: var(--spectrum-gray-100); - --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover); - } - - .spectrum-Table--quiet { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); - --spectrum-table-row-background-color: var(--spectrum-transparent-white-25); - } -} diff --git a/components/table/themes/spectrum.css b/components/table/themes/spectrum.css deleted file mode 100644 index a40d7fabde..0000000000 --- a/components/table/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Table { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); - --spectrum-table-border-color: var(--spectrum-gray-300); - --spectrum-table-divider-color: var(--spectrum-gray-300); - --spectrum-table-row-background-color: var(--spectrum-gray-50); - --spectrum-table-summary-row-background-color: var(--spectrum-gray-200); - --spectrum-table-section-header-background-color: var(--spectrum-gray-200); - --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-down); - } - - .spectrum-Table--quiet { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); - --spectrum-table-row-background-color: var(--spectrum-transparent-white-100); - } -} diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json index 544295ef04..959f04854d 100644 --- a/components/tabs/dist/metadata.json +++ b/components/tabs/dist/metadata.json @@ -50,9 +50,7 @@ ".spectrum-Tabs.spectrum-Tabs--sizeL", ".spectrum-Tabs.spectrum-Tabs--sizeS", ".spectrum-Tabs.spectrum-Tabs--sizeXL", - ".spectrum-Tabs.spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item:before", - "[dir=\"rtl\"] .spectrum-Tabs--vertical", - "[dir=\"rtl\"] .spectrum-Tabs--vertical-right" + ".spectrum-Tabs.spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item:before" ], "modifiers": [ "--mod-tabs-animation-duration", @@ -206,10 +204,6 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-tabs-divider-background-color", - "--system-tabs-font-weight" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-tabs-color", diff --git a/components/tabs/index.css b/components/tabs/index.css index 6727243f38..c2a430f3d7 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Tabs { + --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight); + --spectrum-tabs-divider-background-color: var(--spectrum-gray-200); + /* 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); diff --git a/components/tabs/stories/template.js b/components/tabs/stories/template.js index 716f45ea2e..387683f1ae 100644 --- a/components/tabs/stories/template.js +++ b/components/tabs/stories/template.js @@ -10,9 +10,6 @@ import { when } from "lit/directives/when.js"; import { html, literal } from "lit/static-html.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Tabs", diff --git a/components/tabs/themes/express.css b/components/tabs/themes/express.css deleted file mode 100644 index 83b105f4ac..0000000000 --- a/components/tabs/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-bold-font-weight); - } -} diff --git a/components/tabs/themes/spectrum-two.css b/components/tabs/themes/spectrum-two.css deleted file mode 100644 index 71d71c3c71..0000000000 --- a/components/tabs/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight); - --spectrum-tabs-divider-background-color: var(--spectrum-gray-200); - } -} diff --git a/components/tabs/themes/spectrum.css b/components/tabs/themes/spectrum.css deleted file mode 100644 index 97cb90cac5..0000000000 --- a/components/tabs/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight); - --spectrum-tabs-divider-background-color: var(--spectrum-gray-300); - } -} diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 10a87e4aa2..20d2158b8a 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -280,39 +280,6 @@ "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-tag-background-color", - "--system-tag-background-color-active", - "--system-tag-background-color-disabled", - "--system-tag-background-color-focus", - "--system-tag-background-color-hover", - "--system-tag-border-color", - "--system-tag-border-color-active", - "--system-tag-border-color-disabled", - "--system-tag-border-color-focus", - "--system-tag-border-color-hover", - "--system-tag-border-color-selected", - "--system-tag-border-color-selected-active", - "--system-tag-border-color-selected-focus", - "--system-tag-border-color-selected-hover", - "--system-tag-content-color", - "--system-tag-content-color-active", - "--system-tag-content-color-focus", - "--system-tag-content-color-hover", - "--system-tag-content-color-selected", - "--system-tag-size-large-clear-button-spacing-inline-end", - "--system-tag-size-large-corner-radius", - "--system-tag-size-large-label-spacing-inline-end", - "--system-tag-size-large-spacing-inline-start", - "--system-tag-size-medium-clear-button-spacing-inline-end", - "--system-tag-size-medium-corner-radius", - "--system-tag-size-medium-label-spacing-inline-end", - "--system-tag-size-medium-spacing-inline-start", - "--system-tag-size-small-clear-button-spacing-inline-end", - "--system-tag-size-small-corner-radius", - "--system-tag-size-small-label-spacing-inline-end", - "--system-tag-size-small-spacing-inline-start" - ], "passthroughs": [ "--mod-avatar-opacity-disabled", "--mod-clear-button-width", diff --git a/components/tag/index.css b/components/tag/index.css index 9385b432e6..23a6453edc 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -11,9 +11,47 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Tag { + --spectrum-tag-background-color: var(--spectrum-gray-50); + --spectrum-tag-background-color-hover: var(--spectrum-gray-50); + --spectrum-tag-background-color-active: var(--spectrum-gray-100); + --spectrum-tag-background-color-focus: var(--spectrum-gray-50); + + --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); + + --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); + + --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); + --spectrum-tag-content-color-selected: var(--spectrum-gray-25); + + --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; diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js index 90c72435ba..ee4b244dd4 100644 --- a/components/tag/stories/template.js +++ b/components/tag/stories/template.js @@ -9,9 +9,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Tag", diff --git a/components/tag/themes/express.css b/components/tag/themes/express.css deleted file mode 100644 index 7c2c2e6730..0000000000 --- a/components/tag/themes/express.css +++ /dev/null @@ -1,64 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Tag { - /* border */ - --spectrum-tag-background-color: transparent; - --spectrum-tag-background-color-hover: var(--spectrum-gray-300); - --spectrum-tag-background-color-active: var(--spectrum-gray-400); - --spectrum-tag-background-color-focus: var(--spectrum-gray-300); - - /* express has pill style full corner radius */ - --spectrum-tag-size-small-corner-radius: var(--spectrum-component-height-75); - --spectrum-tag-size-medium-corner-radius: var(--spectrum-component-height-100); - --spectrum-tag-size-large-corner-radius: var(--spectrum-component-height-200); - - /* background */ - --spectrum-tag-border-color: var(--spectrum-gray-300); - --spectrum-tag-border-color-hover: var(--spectrum-gray-400); - --spectrum-tag-border-color-active: var(--spectrum-gray-500); - --spectrum-tag-border-color-focus: var(--spectrum-gray-400); - - /* content color */ - --spectrum-tag-content-color: var(--spectrum-neutral-content-color-default); - --spectrum-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-tag-content-color-active: var(--spectrum-neutral-content-color-down); - --spectrum-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - /* selected */ - --spectrum-tag-border-color-selected: var(--spectrum-neutral-background-color-default); - --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down); - --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus); - - /* disabled */ - --spectrum-tag-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-tag-background-color-disabled: transparent; - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75); - --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75); - --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100); - --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100); - --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200); - --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200); - } -} diff --git a/components/tag/themes/spectrum-two.css b/components/tag/themes/spectrum-two.css deleted file mode 100644 index f9c51730f4..0000000000 --- a/components/tag/themes/spectrum-two.css +++ /dev/null @@ -1,56 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Tag { - --spectrum-tag-background-color: var(--spectrum-gray-50); - --spectrum-tag-background-color-hover: var(--spectrum-gray-50); - --spectrum-tag-background-color-active: var(--spectrum-gray-100); - --spectrum-tag-background-color-focus: var(--spectrum-gray-50); - - --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); - - --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); - - --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); - --spectrum-tag-content-color-selected: var(--spectrum-gray-25); - - --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); - } -} diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css deleted file mode 100644 index 171968e1f5..0000000000 --- a/components/tag/themes/spectrum.css +++ /dev/null @@ -1,27 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Tag { - --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); - - --spectrum-tag-content-color-selected: var(--spectrum-gray-50); - } -} diff --git a/components/taggroup/dist/metadata.json b/components/taggroup/dist/metadata.json index 10ed81256f..b9eeaede1e 100644 --- a/components/taggroup/dist/metadata.json +++ b/components/taggroup/dist/metadata.json @@ -10,7 +10,6 @@ "--spectrum-tag-group-item-margin-inline" ], "global": ["--spectrum-spacing-75"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json index 7e36cb740e..ea7001c7db 100644 --- a/components/textfield/dist/metadata.json +++ b/components/textfield/dist/metadata.json @@ -88,9 +88,6 @@ ".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon", ".spectrum-Textfield.spectrum-Textfield--quiet", ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.spectrum-Textfield--sizeL", - ".spectrum-Textfield.spectrum-Textfield--sizeS", - ".spectrum-Textfield.spectrum-Textfield--sizeXL", ".spectrum-Textfield:hover .spectrum-Textfield-input", ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder" ], @@ -331,22 +328,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-textfield-background-color", - "--system-textfield-background-color-disabled", - "--system-textfield-border-color", - "--system-textfield-border-color-disabled", - "--system-textfield-border-color-focus", - "--system-textfield-border-color-focus-hover", - "--system-textfield-border-color-hover", - "--system-textfield-border-color-keyboard-focus", - "--system-textfield-border-width", - "--system-textfield-icon-spacing-block-invalid", - "--system-textfield-quiet-border-color-disabled", - "--system-textfield-size-l-icon-spacing-block-invalid", - "--system-textfield-size-s-icon-spacing-block-invalid", - "--system-textfield-size-xl-icon-spacing-block-invalid" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-textfield-border-color", diff --git a/components/textfield/index.css b/components/textfield/index.css index 329672d06a..3ad5784df6 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -11,9 +11,21 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Textfield { + --spectrum-textfield-background-color: var(--spectrum-gray-25); + --spectrum-textfield-background-color-disabled: var(--spectrum-gray-25); + + --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-800); + --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); + + --spectrum-textfield-border-width: var(--spectrum-border-width-100); + + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100); + /* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */ /* disallow mod for max compatibility */ --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); @@ -109,10 +121,16 @@ /* Text Area / Multiline size medium */ --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + + &.spectrum-Textfield--quiet { + --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); + } } /********* Text field t-shirt sizes *********/ .spectrum-Textfield--sizeS { + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75); + --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); @@ -135,6 +153,8 @@ } .spectrum-Textfield--sizeL { + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200); + --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); @@ -157,6 +177,8 @@ } .spectrum-Textfield--sizeXL { + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300); + --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); diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js index 5f20b0abb8..55c2d55d12 100644 --- a/components/textfield/stories/template.js +++ b/components/textfield/stories/template.js @@ -10,9 +10,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * @typedef API diff --git a/components/textfield/themes/express.css b/components/textfield/themes/express.css deleted file mode 100644 index 31de0c5779..0000000000 --- a/components/textfield/themes/express.css +++ /dev/null @@ -1,28 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Textfield { - --spectrum-textfield-border-color: var(--spectrum-gray-400); - --spectrum-textfield-border-color-hover: var(--spectrum-gray-500); - --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-200); - } -} diff --git a/components/textfield/themes/spectrum-two.css b/components/textfield/themes/spectrum-two.css deleted file mode 100644 index 9d0f61284f..0000000000 --- a/components/textfield/themes/spectrum-two.css +++ /dev/null @@ -1,46 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Textfield { - --spectrum-textfield-background-color: var(--spectrum-gray-25); - --spectrum-textfield-background-color-disabled: var(--spectrum-gray-25); - - --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-800); - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); - - --spectrum-textfield-border-width: var(--spectrum-border-width-100); - - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100); - - &.spectrum-Textfield--sizeS { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75); - } - - &.spectrum-Textfield--sizeL { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200); - } - - &.spectrum-Textfield--sizeXL { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300); - } - - &.spectrum-Textfield--quiet { - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); - } - } -} diff --git a/components/textfield/themes/spectrum.css b/components/textfield/themes/spectrum.css deleted file mode 100644 index 1a097e31ea..0000000000 --- a/components/textfield/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Textfield { - --spectrum-textfield-background-color: var(--spectrum-gray-50); - --spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-200); - - --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); - - &.spectrum-Textfield--sizeS { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); - } - - &.spectrum-Textfield--sizeL { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); - } - - &.spectrum-Textfield--sizeXL { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); - } - - &.spectrum-Textfield--quiet { - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); - } - } -} diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json index 067259ff6a..6b62c03e7d 100644 --- a/components/thumbnail/dist/metadata.json +++ b/components/thumbnail/dist/metadata.json @@ -49,7 +49,6 @@ "--spectrum-thumbnail-border-color-selected", "--spectrum-thumbnail-border-opacity", "--spectrum-thumbnail-border-radius", - "--spectrum-thumbnail-border-radius-default", "--spectrum-thumbnail-border-width", "--spectrum-thumbnail-border-width-selected", "--spectrum-thumbnail-color-opacity-disabled", @@ -88,7 +87,6 @@ "--spectrum-gray-800-rgb", "--spectrum-white" ], - "system-theme": ["--system-thumbnail-border-radius"], "passthroughs": [], "high-contrast": [ "--highcontrast-thumbnail-border-color", diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 62e4466551..2a2aaa9e72 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Thumbnail, .spectrum-Thumbnail--size500 { --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500); @@ -70,7 +68,7 @@ --spectrum-thumbnail-border-color-selected: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-accent-color-800))); --spectrum-thumbnail-border-width: var(--mod-thumbnail-border-width, var(--spectrum-border-width-100)); --spectrum-thumbnail-border-width-selected: var(--mod-thumbnail-border-width-selected, var(--spectrum-border-width-200)); - --spectrum-thumbnail-border-radius-default: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + --spectrum-thumbnail-border-radius: var(--mod-thumbnail-border-radius, 2px); --spectrum-thumbnail-layer-border-color-inner: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white))); --spectrum-thumbnail-layer-border-color-outer: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500))); @@ -91,7 +89,7 @@ inline-size: var(--spectrum-thumbnail-size); block-size: var(--spectrum-thumbnail-size); - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--spectrum-thumbnail-border-radius); overflow: hidden; z-index: 0; @@ -102,7 +100,7 @@ position: absolute; inline-size: 100%; block-size: 100%; - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--spectrum-thumbnail-border-radius); box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) var(--spectrum-thumbnail-border-color); } @@ -118,7 +116,7 @@ border-style: solid; border-width: var(--spectrum-thumbnail-focus-indicator-thickness); border-color: var(--spectrum-thumbnail-focus-indicator-color); - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--spectrum-thumbnail-border-radius); position: absolute; inset-inline-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); inset-inline-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); @@ -128,7 +126,7 @@ .spectrum-Thumbnail-image-wrapper { overflow: hidden; - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--spectrum-thumbnail-border-radius); } } } @@ -202,7 +200,7 @@ inline-size: 100%; background-size: cover; background-position: center center; - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--spectrum-thumbnail-border-radius); } /* Windows High Contrast Mode */ diff --git a/components/thumbnail/stories/template.js b/components/thumbnail/stories/template.js index aa476ea722..2b40d8e101 100644 --- a/components/thumbnail/stories/template.js +++ b/components/thumbnail/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Thumbnail", diff --git a/components/thumbnail/themes/express.css b/components/thumbnail/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/thumbnail/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/thumbnail/themes/spectrum-two.css b/components/thumbnail/themes/spectrum-two.css deleted file mode 100644 index 4cd647afd8..0000000000 --- a/components/thumbnail/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Thumbnail { - --spectrum-thumbnail-border-radius: 2px; - } -} diff --git a/components/thumbnail/themes/spectrum.css b/components/thumbnail/themes/spectrum.css deleted file mode 100644 index b1abf32465..0000000000 --- a/components/thumbnail/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Thumbnail { - --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json index 8721a98ef8..e20cd4f7e4 100644 --- a/components/toast/dist/metadata.json +++ b/components/toast/dist/metadata.json @@ -18,8 +18,7 @@ ".spectrum-Toast-content:lang(ja)", ".spectrum-Toast-content:lang(ko)", ".spectrum-Toast-content:lang(zh)", - ".spectrum-Toast-typeIcon", - "[dir=\"rtl\"] .spectrum-Toast-body .spectrum-Button" + ".spectrum-Toast-typeIcon" ], "modifiers": [ "--mod-toast-background-color-default", @@ -99,10 +98,6 @@ "--spectrum-transparent-white-400", "--spectrum-white" ], - "system-theme": [ - "--system-toast-background-color-default", - "--system-toast-divider-color" - ], "passthroughs": [], "high-contrast": ["--highcontrast-toast-border-color"] } diff --git a/components/toast/index.css b/components/toast/index.css index 8b3793de9a..b8156dc08b 100644 --- a/components/toast/index.css +++ b/components/toast/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Toast { + --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-toast-divider-color: var(--spectrum-transparent-white-400); + /* Hardcoded variables */ --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js index 89d459dbf0..6bf4321540 100644 --- a/components/toast/stories/template.js +++ b/components/toast/stories/template.js @@ -9,9 +9,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Toast", diff --git a/components/toast/themes/express.css b/components/toast/themes/express.css deleted file mode 100644 index 2de113b03e..0000000000 --- a/components/toast/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Toast { - --spectrum-toast-background-color-default: var(--spectrum-neutral-background-color-default); - } -} diff --git a/components/toast/themes/spectrum-two.css b/components/toast/themes/spectrum-two.css deleted file mode 100644 index 1097d45729..0000000000 --- a/components/toast/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Toast { - --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-toast-divider-color: var(--spectrum-transparent-white-400); - } -} diff --git a/components/toast/themes/spectrum.css b/components/toast/themes/spectrum.css deleted file mode 100644 index 3f6e05c5d7..0000000000 --- a/components/toast/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Toast { - --spectrum-toast-divider-color: var(--spectrum-transparent-white-300); - } -} diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 7f6d6d0b94..3ac8acfd1a 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -250,59 +250,7 @@ ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-end", ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-left", ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-right", - ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start", - "[dir=\"rtl\"] .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--end .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--end-bottom.is-open", - "[dir=\"rtl\"] .spectrum-Tooltip--end-top .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--end-top.is-open", - "[dir=\"rtl\"] .spectrum-Tooltip--end.is-open", - "[dir=\"rtl\"] .spectrum-Tooltip--left .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--left-top .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--right .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--right-top .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--start .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--start-bottom.is-open", - "[dir=\"rtl\"] .spectrum-Tooltip--start-top .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--start-top.is-open", - "[dir=\"rtl\"] .spectrum-Tooltip--start.is-open", - "[dir=\"rtl\"] .spectrum-Tooltip--top-end .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--top-start .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--end", - "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--end-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--end-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--start", - "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--start-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--start-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end", - "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start", - "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end", - "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start", - "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end", - "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start", - "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end", - "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start", - "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top" + ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start" ], "modifiers": [ "--mod-overlay-animation-duration", @@ -391,7 +339,6 @@ "--spectrum-white", "--spectrum-workflow-icon-size-50" ], - "system-theme": ["--system-tooltip-backgound-color-default-neutral"], "passthroughs": [], "high-contrast": [ "--highcontrast-tooltip-background-color-default", diff --git a/components/tooltip/index.css b/components/tooltip/index.css index f488b9cbf4..b8c5806afa 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -11,10 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/overlay.css"; .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 */ diff --git a/components/tooltip/stories/template.js b/components/tooltip/stories/template.js index 5c5c260f4d..4098beb8b7 100644 --- a/components/tooltip/stories/template.js +++ b/components/tooltip/stories/template.js @@ -7,9 +7,6 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Tooltip", diff --git a/components/tooltip/themes/express.css b/components/tooltip/themes/express.css deleted file mode 100644 index ec00162e91..0000000000 --- a/components/tooltip/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default); - } -} diff --git a/components/tooltip/themes/spectrum-two.css b/components/tooltip/themes/spectrum-two.css deleted file mode 100644 index 42b423e344..0000000000 --- a/components/tooltip/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); - } -} diff --git a/components/tooltip/themes/spectrum.css b/components/tooltip/themes/spectrum.css deleted file mode 100644 index 3d81bc564b..0000000000 --- a/components/tooltip/themes/spectrum.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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/tray/dist/metadata.json b/components/tray/dist/metadata.json index 2d510b6a7a..db6c152c44 100644 --- a/components/tray/dist/metadata.json +++ b/components/tray/dist/metadata.json @@ -36,7 +36,6 @@ "--spectrum-background-layer-2-color", "--spectrum-corner-radius-100" ], - "system-theme": [], "passthroughs": ["--mod-modal-max-width"], "high-contrast": ["--highcontrast-tray-background-color"] } diff --git a/components/treeview/dist/metadata.json b/components/treeview/dist/metadata.json index 0e5af23858..e3b03e94fc 100644 --- a/components/treeview/dist/metadata.json +++ b/components/treeview/dist/metadata.json @@ -49,8 +49,7 @@ ".spectrum-TreeView.spectrum-TreeView--detached", ".spectrum-TreeView.spectrum-TreeView--quiet", ".spectrum-TreeView.spectrum-TreeView--thumbnail", - ".spectrum-TreeView:dir(rtl)", - "[dir=\"rtl\"] .spectrum-TreeView" + ".spectrum-TreeView:dir(rtl)" ], "modifiers": [ "--mod-treeview-font-size", @@ -168,10 +167,6 @@ "--spectrum-neutral-content-color-default", "--spectrum-text-to-visual-75" ], - "system-theme": [ - "--system-tree-view-item-background-color-focus", - "--system-tree-view-item-background-color-hover" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-treeview-heading-color", diff --git a/components/treeview/index.css b/components/treeview/index.css index 2c55ebea3b..31d6652fe0 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - @media (forced-colors: active) { .spectrum-TreeView { --highcontrast-treeview-item-background-color-selected: Highlight; @@ -116,6 +114,9 @@ } .spectrum-TreeView { + --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); + --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); + --spectrum-treeview-item-indentation: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-sized-indentation)); --spectrum-treeview-section-spacing: var(--mod-treeview-section-spacing, var(--spectrum-treeview-item-indentation)); --spectrum-treeview-heading-color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, var(--spectrum-heading-color))); diff --git a/components/treeview/stories/template.js b/components/treeview/stories/template.js index df31e3ed46..6c15ccdacd 100644 --- a/components/treeview/stories/template.js +++ b/components/treeview/stories/template.js @@ -9,9 +9,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const TreeViewItem = ({ rootClass = "spectrum-TreeView", diff --git a/components/treeview/themes/express.css b/components/treeview/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/treeview/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/treeview/themes/spectrum-two.css b/components/treeview/themes/spectrum-two.css deleted file mode 100644 index 215290b3b6..0000000000 --- a/components/treeview/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-TreeView { - --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); - } -} diff --git a/components/treeview/themes/spectrum.css b/components/treeview/themes/spectrum.css deleted file mode 100644 index 7698b2b4c3..0000000000 --- a/components/treeview/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-TreeView { - --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200); - } -} diff --git a/components/typography/dist/metadata.json b/components/typography/dist/metadata.json index 5d45be326d..3ef566f741 100644 --- a/components/typography/dist/metadata.json +++ b/components/typography/dist/metadata.json @@ -751,7 +751,6 @@ "--spectrum-sans-font-family-stack", "--spectrum-serif-font-family-stack" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-body-font-color", diff --git a/components/underlay/dist/metadata.json b/components/underlay/dist/metadata.json index 6b35fb4f7f..21a3e4aa1d 100644 --- a/components/underlay/dist/metadata.json +++ b/components/underlay/dist/metadata.json @@ -30,7 +30,6 @@ "--spectrum-black-rgb", "--spectrum-overlay-opacity" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/well/dist/metadata.json b/components/well/dist/metadata.json index 3587fa73f7..c9fdd7f6da 100644 --- a/components/well/dist/metadata.json +++ b/components/well/dist/metadata.json @@ -27,7 +27,6 @@ "--spectrum-gray-1000-rgb", "--spectrum-gray-800-rgb" ], - "system-theme": ["--system-well-border-color"], "passthroughs": [], "high-contrast": [] } diff --git a/components/well/index.css b/components/well/index.css index 26abcff003..c29be3ca10 100644 --- a/components/well/index.css +++ b/components/well/index.css @@ -11,9 +11,8 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Well { + --spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05); --spectrum-well-border-width: var(--spectrum-border-width-100); --spectrum-well-content-color: var(--spectrum-body-color); --spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02); diff --git a/components/well/stories/template.js b/components/well/stories/template.js index c9645cfdcd..5e8210305d 100644 --- a/components/well/stories/template.js +++ b/components/well/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Well", diff --git a/components/well/themes/express.css b/components/well/themes/express.css deleted file mode 100644 index 9fd550418f..0000000000 --- a/components/well/themes/express.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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/well/themes/spectrum-two.css b/components/well/themes/spectrum-two.css deleted file mode 100644 index f4a2ef0983..0000000000 --- a/components/well/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Well { - --spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05); - } -} diff --git a/components/well/themes/spectrum.css b/components/well/themes/spectrum.css deleted file mode 100644 index 5cfe712039..0000000000 --- a/components/well/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Well { - --spectrum-well-border-color: rgba(var(--spectrum-gray-900-rgb), 0.05); - } -} diff --git a/package.json b/package.json index 4bcca63f21..d7d1da6faa 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "refresh:config": "bash ./tasks/chromatic-config-creation.sh || exit 0", "refresh:env": "bash ./tasks/copy-env-from-root.sh || exit 0", "release": "yarn ci && changeset publish", - "report": "yarn reporter tag:component", + "report": "cross-env NODE_ENV=production yarn reporter tag:component", "reporter": "nx run-many --target report --projects", "start": "cross-env NODE_ENV=development nx start storybook", "test": "cross-env NODE_ENV=development nx test storybook", @@ -66,15 +66,14 @@ ], "devDependencies": { "@adobe/token-diff-generator": "^1.3.0", - "@changesets/changelog-github": "^0.5.0", - "@changesets/cli": "^2.27.11", - "@commitlint/cli": "^19.6.1", - "@commitlint/config-conventional": "^19.6.0", - "@nx/devkit": "^19.8.2", - "@spectrum-tools/postcss-add-theming-layer": "1.0.2", - "@spectrum-tools/postcss-property-rollup": "0.0.1", + "@changesets/changelog-github": "^0.5.1", + "@changesets/cli": "^2.28.1", + "@commitlint/cli": "^19.8.0", + "@commitlint/config-conventional": "^19.8.0", + "@csstools/postcss-bundler": "^2.0.6", + "@nx/devkit": "^19.8.14", "@spectrum-tools/postcss-rgb-mapping": "1.1.0", - "@yarnpkg/types": "^4.0.0", + "@yarnpkg/types": "^4.0.1", "at-rule-packer": "^0.4.2", "autoprefixer": "^10.4.21", "colors": "^1.4.0", @@ -83,21 +82,21 @@ "cssnano-preset-advanced": "^7.0.6", "diff": "^7.0.0", "diff2html": "^3.4.51", - "eslint": "^8.57.0", - "eslint-plugin-jsonc": "^2.18.2", - "eslint-plugin-prettier": "^5.1.3", + "eslint": "^8.57.1", + "eslint-plugin-jsonc": "^2.19.1", + "eslint-plugin-prettier": "^5.2.3", "fast-glob": "^3.3.3", "gh-pages": "^6.3.0", "husky": "^9.1.7", "jsonc-eslint-parser": "^2.4.0", - "lint-staged": "^15.3.0", + "lint-staged": "^15.4.3", "lodash": "^4.17.21", "markdownlint": "^0.37.4", "markdownlint-cli": "^0.44.0", - "node-gyp": "^10.1.0", + "node-gyp": "^10.3.1", "npm-registry-fetch": "^18.0.2", "nunjucks": "^3.2.4", - "nx": "^19.8.2", + "nx": "^19.8.14", "open": "^10.1.0", "pajv": "^1.2.0", "postcss": "^8.5.3", diff --git a/plugins/postcss-add-theming-layer/README.md b/plugins/postcss-add-theming-layer/README.md deleted file mode 100644 index 610310f566..0000000000 --- a/plugins/postcss-add-theming-layer/README.md +++ /dev/null @@ -1,115 +0,0 @@ -# postcss-add-theming-layer - -> Leveraging style container queries to create an abstraction layer for supporting multiple theming systems. - -## Installation - -Add the dependency to your project: - -```sh -npm install postcss-add-theming-layer -``` - -or - -```sh -yarn add -DW postcss-add-theming-layer -``` - -Use the plugin in your PostCSS configuration: - -```js -module.exports = { - plugins: { - "postcss-add-theming-layer": {}, - }, -}; -``` - -or as part of your CLI command: - -```sh -postcss -u postcss-add-theming-layer -o dist/index.css src/index.css -``` - -## Options - -### `selectorPrefix` [string] - -This optional input will prefix the new theming layer selector with the provided string. This can be useful if you want to namespace the injected selectors for the new theming layer to avoid conflicts. - -### `skipMapping` [boolean=false] - -Skip the mapping of the variables to the system variables. This can be useful if you only want to extract the variables and not map them to the system variables. - -### `preserveVariables` [boolean=true] - -When used with `skipMapping`, this option will preserve the variables defined inside the container query in the output by injecting them to the root selector. - -### `referencesOnly` [boolean=false] - -This option will only output those variables that are referencing the newly created system variables and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component. - -### `stripLocalSelectors` [boolean=false] - -This option will remove the local selectors (those that map to system variables) from the output leaving only the system definitions. - -### `processIdentifier` [(identifierValue: string, identifierName: string) => string]` - -Customize the selectors that variables are placed in. Passed the value and key of the variable that was passed to the container, i.e. `identifierValue = spectrum` and `identifierName = system` for the example below. By default, `identifierName` is used as-is. - -## Usage - -This plugin turns this: - -```css -@container style(--system: legacy) { - .component { - --background-color: blue; - } - .component.is-selected { - --background-color: darkblue; - } - .component .icon { - --color: gray; - } -} - -@container style(--system: modern) { - .component { - --background-color: purple; - } - .component.is-selected { - --background-color: darkpurple; - } - .component .icon { - --color: white; - } -} -``` - -Into this: - -```css -.legacy { - --system-component-background-color: blue; - --system-component-selected-background-color: darkblue; -} - -.modern { - --system-component-background-color: purple; - --system-component-selected-background-color: darkpurple; -} - -.component { - --background-color: var(--system-component-background-color); -} - -.component.is-selected { - --background-color: var(--system-component-selected-background-color); -} -``` - -## Usage notes - -This plugin will ignore any underscore-prefixed variables, as they are considered private and not part of the theming layer. diff --git a/plugins/postcss-add-theming-layer/expected/basic.css b/plugins/postcss-add-theming-layer/expected/basic.css deleted file mode 100644 index 711a906a74..0000000000 --- a/plugins/postcss-add-theming-layer/expected/basic.css +++ /dev/null @@ -1,41 +0,0 @@ -.legacy { - --system-component-background-color: blue; - --system-component-selected-background-color: darkblue; - --system-component-icon-color: gray; - --system-where-component-background-color: blue; - --system-component-where-selected-background-color: darkblue; - --system-component-has-icon-color: gray -} - -.modern { - --system-component-background-color: purple; - --system-component-selected-background-color: indigo; - --system-component-icon-color: white; - --system-where-component-background-color: indigo; - --system-component-where-selected-background-color: darkpurple; - --system-component-has-icon-color: white -} - -.component { - --background-color: var(--system-component-background-color) -} - -.component.is-selected { - --background-color: var(--system-component-selected-background-color) -} - -.component .icon { - --color: var(--system-component-icon-color) -} - -:where(.component) { - --background-color: var(--system-where-component-background-color) -} - -.component:where(:selected,.is-selected) { - --background-color: var(--system-component-where-selected-background-color) -} - -.component:has(.icon) { - --color: var(--system-component-has-icon-color) -} diff --git a/plugins/postcss-add-theming-layer/fixtures/basic.css b/plugins/postcss-add-theming-layer/fixtures/basic.css deleted file mode 100644 index 50692d9709..0000000000 --- a/plugins/postcss-add-theming-layer/fixtures/basic.css +++ /dev/null @@ -1,49 +0,0 @@ -@container style(--system: legacy) { - .component { - --background-color: blue; - } - .component.is-selected { - --background-color: darkblue; - } - .component .icon { - --color: gray; - } - - :where(.component) { - --background-color: blue; - } - - .component:where(:selected, .is-selected) { - --background-color: darkblue; - } - - .component:has(.icon) { - --color: gray; - } -} - -@container style(--system: modern) { - .component { - --background-color: purple; - } - - .component.is-selected { - --background-color: indigo; - } - - .component .icon { - --color: white; - } - - :where(.component) { - --background-color: indigo; - } - - .component:where(:selected, .is-selected) { - --background-color: darkpurple; - } - - .component:has(.icon) { - --color: white; - } -} diff --git a/plugins/postcss-add-theming-layer/index.js b/plugins/postcss-add-theming-layer/index.js deleted file mode 100644 index 38c11bb69f..0000000000 --- a/plugins/postcss-add-theming-layer/index.js +++ /dev/null @@ -1,201 +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. - */ - -const selectorParser = require("postcss-selector-parser"); -const { - cleanPropertyName, - extractFallbackValue, - getVariableName, - checkForReplacement -} = require("./utilities.js"); - -/** - * @typedef Options - * @property {string} [selectorPrefix] - The prefix to use for the new selectors - * @property {boolean} [skipMapping=false] - Skip the mapping of the variables to the system variables. This can be useful if you only want to extract the variables and not map them to the system variables. - * @property {boolean} [preserveVariables=false] - When used with `skipMapping`, this option will preserve the variables defined inside the container query in the output by injecting them to the root selector. - * @property {boolean} [referencesOnly=false] - This option will only output those variables that are referencing the newly created system variables and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component. - * @property {boolean} [stripLocalSelectors=false] - This option will remove the local selectors (those that map to system variables) from the output leaving only the system definitions. - * @property {(identifierValue: string, identifierName: string) => string} [processIdentifier] - A function that processes the identifier value and creates a new selector -*/ - -/** @type import('postcss').PluginCreator */ -module.exports = ({ - selectorPrefix, - skipMapping = false, - preserveVariables = true, - referencesOnly = false, - stripLocalSelectors = false, - processIdentifier, -}) => ({ - postcssPlugin: "postcss-add-theming-layer", - OnceExit(root, { Rule, Declaration }) { - // Fallback function to process the identifier value and create a new selector - if (typeof processIdentifier !== "function") { - // If the base prefix exists and differs from the identifier value, append the identifier value to the base prefix as the new class name - processIdentifier = (identifierValue) => selectorPrefix && selectorPrefix !== identifierValue ? `.${selectorPrefix}--${identifierValue}` : `.${identifierValue}`; - } - - // This object will store the mappings for each selector - const systemMap = new Map(); - const conversionMap = new Map(); - - // Step 1: loop over all the container style queries and create a new selector for each - // to be used as a theming toggle for components where style queries are not natively supported - // @todo should there be a support check around this? - root.walkAtRules(/container/, (container) => { - if (skipMapping) { - if (preserveVariables) { - // Iterate over each rule in the container and append them to the root - container.walkRules((rule) => { - root.insertAfter(root.first, rule); - }); - } - - container.remove(); - return; - } - - // Extract the custom property name and it's value to use in creating the new selector - // Identifier name is the prefix used for the custom properties created for the bridge - // Identifier value is used to create the new selector - const [, identifierName, identifierValue] = container.params.match( - /\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/ - ); - - const selectorMap = systemMap.get(identifierName) ?? {}; - - // Create a new rule using this selector to attach the new system-level custom properties - let rule; - - // If we're only interested in references, we can skip the next step of appending the new rule - if (!referencesOnly) { - rule = new Rule({ - selector: processIdentifier(identifierValue, identifierName), - source: container.source, - }); - - container.parent.insertAfter(container, rule); - } - - // Iterate over each custom property in the container to create a new mapping that supports the new selector - container.walkDecls(/^--[A-Z|a-z]/, (decl) => { - selectorParser((selectors) => { - selectors.each((s) => { - // Check if the property is already mapped - const variableName = getVariableName(s, decl.prop, { - identifierName, - identifierValue, - selectorPrefix - }); - - const newDecl = decl.clone({ - prop: variableName, - }); - newDecl.raws.before = "\n "; - - const uniqueSet = conversionMap.get(decl.prop) ?? new Set(); - conversionMap.set(decl.prop, uniqueSet.add(variableName)); - - if (!referencesOnly) { - rule.append(newDecl); - } - - const selector = s.toString(); - selectorMap[selector] = selectorMap[selector] ?? {}; - - const selectorNode = selectorMap[selector]; - - // Check for fallbacks in the var() function - const fallbackValue = extractFallbackValue(decl.value); - if (fallbackValue) { - // The final declaration should have the override present - selectorNode[decl.prop] = `var(${fallbackValue}, var(${variableName}))`; - - // The system-level declaration should only have the fallback - newDecl.value = `var(${fallbackValue})`; - } - else { - selectorNode[decl.prop] = `var(${variableName})`; - } - - selectorMap[selector] = selectorNode; - }); - }).processSync(decl.parent.selector, { lossless: false }); - }); - - systemMap.set(identifierName, selectorMap); - - if (rule) { - rule.walkDecls((decl) => { - const convertedProps = [...conversionMap.keys()]; - - if (!convertedProps.some((key) => decl.value.includes(key))) return; - - // loop over all the updated properties and update internal references to the new variables - for (let [prop, mappedValues] of conversionMap.entries()) { - // Check if this key exists in the value - if (!decl.value.match(new RegExp(`${prop}[^-]`))) continue; - - const systemValues = [...mappedValues]; - - // If there is only one system variable, replace all instances of the prop with the system variable - if (systemValues.length === 1) { - decl.value = decl.value.replace(new RegExp(prop, "g"), systemValues[0]); - continue; - } - - const replacement = checkForReplacement(decl, prop, [ - `--${identifierName}-${cleanPropertyName(prop, { selectorPrefix })}`, - ], systemValues); - - if (replacement) { - decl.value = replacement; - continue; - } - - // @note: this will be an empty variable because we didn't find a match but it will match the format of the other variables - decl.value = decl.value.replace(new RegExp(decl.prop, "g"), `--${identifierName}-${cleanPropertyName(decl.prop, { selectorPrefix })}`); - } - }); - } - - container.remove(); - }); - - // Our job here is done - if (skipMapping || stripLocalSelectors) return; - - const rules = []; - for (let [, selectorMap] of systemMap.entries()) { - // This adds the new selectors to the root with their respective system-level mappings - for (let [selector, props] of Object.entries(selectorMap)) { - const rule = new Rule({ selector }); - - for (let [prop, value] of Object.entries(props)) { - const decl = new Declaration({ prop, value }); - decl.raws.before = "\n "; - - rule.append(decl); - } - - rules.push(rule); - } - } - - // Insert the new rules in order after the first rule in the root - root.append(rules); - }, -}); - -module.exports.postcss = true; diff --git a/plugins/postcss-add-theming-layer/package.json b/plugins/postcss-add-theming-layer/package.json deleted file mode 100644 index baf25437dd..0000000000 --- a/plugins/postcss-add-theming-layer/package.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "name": "@spectrum-tools/postcss-add-theming-layer", - "version": "1.0.2", - "description": "Leveraging style container queries to create an abstraction layer for supporting multiple theming systems", - "license": "Apache-2.0", - "author": "Adobe", - "contributors": [ - "Cassondra Roberts " - ], - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "plugins/postcss-add-theming-layer" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "index.js", - "files": [ - "package.json", - "index.js", - "*.md" - ], - "dependencies": { - "postcss-selector-parser": "^6.1.2", - "postcss-values-parser": "^6.0.2" - }, - "peerDependencies": { - "postcss": ">=8" - }, - "devDependencies": { - "ava": "^6.2.0", - "c8": "^10.1.3", - "postcss": "^8.5.3" - }, - "keywords": [ - "css", - "theming", - "custom properties", - "postcss", - "postcss-plugin" - ] -} diff --git a/plugins/postcss-add-theming-layer/project.json b/plugins/postcss-add-theming-layer/project.json deleted file mode 100644 index 7797edce0f..0000000000 --- a/plugins/postcss-add-theming-layer/project.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "name": "postcss-add-theming-layer", - "tags": ["tooling", "postcss"], - "targets": { - "format": { - "defaultConfiguration": "plugins" - }, - "lint": { - "defaultConfiguration": "plugins" - }, - "test": { - "defaultConfiguration": "plugins" - } - } -} diff --git a/plugins/postcss-add-theming-layer/test.js b/plugins/postcss-add-theming-layer/test.js deleted file mode 100644 index ed431c85f2..0000000000 --- a/plugins/postcss-add-theming-layer/test.js +++ /dev/null @@ -1,43 +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. - */ - -const fs = require("fs"); -const test = require("ava"); -const postcss = require("postcss"); -const plugin = require("./index.js"); - -function compare( - t, - fixtureFilePath, - expectedFilePath, - options = {} -) { - return postcss([plugin(options)]) - .process(readFile(`./fixtures/${fixtureFilePath}`), { - from: fixtureFilePath, - }) - .then((result) => { - const actual = result.css; - const expected = readFile(`./expected/${expectedFilePath}`); - t.is(actual, expected); - t.is(result.warnings().length, 0); - }); -} - -function readFile(filename) { - return fs.readFileSync(filename, "utf8"); -} - -test("create basic output", (t) => { - return compare(t, "basic.css", "basic.css"); -}); diff --git a/plugins/postcss-add-theming-layer/utilities.js b/plugins/postcss-add-theming-layer/utilities.js deleted file mode 100644 index 0988f27ce3..0000000000 --- a/plugins/postcss-add-theming-layer/utilities.js +++ /dev/null @@ -1,244 +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. - */ - -const valuesParser = require("postcss-values-parser"); - -/** - * Clean the property name to be used as a variable name - * @param {string} prop - * @param {{ selectorPrefix: string }} options - * @returns {string} The clean variable name - */ -function cleanPropertyName(prop, { selectorPrefix = "" } = {}) { - if (!prop) return; - return ( - prop - // Remove the provided prefix if used - .replace(new RegExp(selectorPrefix, "gi"), "") - // Remove mod from the new property name - .replace(/-?mod-/g, "-") - // Remove state-based prefix - .replace(/is-/g, "") - // Remove the internal identifier marker - .replace(/^_/g, "") - // If a string has a lowercase letter followed by an uppercase letter, insert a dash between them - .replace(/([a-z])([A-Z])/g, "$1-$2") - // If a string has two uppercase letters followed by a lowercase letter, insert a dash between them - .replace(/([A-Z])([A-Z])([a-z])/g, "$1-$2$3") - .replace(/([a-z])([0-9])/g, "$1-$2") - // Remove all whitespace - .replace(/\s+/g, "") - // Remove non-alphanumeric characters - .replace(/\W/g, "-") - // Replace multiple dashes with a single dash - .replace(/-+/g, "-") - // Remove any leading or trailing dashes - .replace(/^-/g, "") - .replace(/-$/g, "") - .toLowerCase() - ); -} - -/** - * Extract the fallback value from a var() function - * @param {string} declValue - * @returns {string} The fallback value - */ -function extractFallbackValue(declValue) { - const parsed = valuesParser.parse(declValue); - let fallbackValue; - - parsed.walk((node) => { - if (node.type !== "func" || node.value !== "var") { - return; - } - - // Assuming the second argument of the var() function is the fallback - const fallbackNode = node.nodes[2]; - if (fallbackNode) { - // Convert the fallback node back to a string - fallbackValue = valuesParser.stringify(fallbackNode); - } - }); - - return fallbackValue; -} - -/** - * Get the base selector for a given selector - * @param {string} selector - * @param {{ selectorPrefix: string }} options - * @returns {string} The base selector - */ -function getBaseSelector(selector, { selectorPrefix = "" } = {}) { - let baseSelector; - - if (!selector || !selector.nodes) return baseSelector; - - // This regex is designed to pull spectrum- out of a selector - const baseRegex = new RegExp( - `^(${selectorPrefix ? `${selectorPrefix}-` : ""}[A-Z][^\\W-.\\s]+)`, - ); - - // Iterate over the selector nodes to find a common root class name - const found = []; - selector.each((node) => { - if (node.type !== "class") return; - if (!node.value) return; - - const value = node.value ?? node.toString(); - const matches = value.match(baseRegex); - if (!matches) return; - - const [, foundSelector] = matches; - if (foundSelector) found.push(foundSelector); - }); - - if (found.length === 1) { - return cleanPropertyName(found[0], { selectorPrefix }); - } - - let countMap = new Map(); - - // Find and return the most common base selector in the array - found.forEach((s) => countMap.set(s, (countMap.get(s) || 0) + 1)); - - let count = 0; - for (let [s, c] of countMap.entries()) { - if (c > count) { - baseSelector = s; - count = c; - } - } - - // Remove the selector prefix from the returned base selector - return baseSelector ? cleanPropertyName(baseSelector, { selectorPrefix }) : baseSelector; -} - -/** - * Fallback function to process the name of the new variable - * @param {string} selector - * @param {string} prop - * @param {{ identifierName: string, identifierValue: string, selectorPrefix: string }} options - * @returns {string} The new variable name - */ -function getVariableName( - selector, - prop, - { selectorPrefix = "", identifierName, identifierValue } = {}, -) { - const baseSelector = getBaseSelector(selector, { selectorPrefix }) ?? ""; - - const clean = (prop) => - prop && - cleanPropertyName( - prop - .replace(new RegExp(selectorPrefix, "gi"), "") - // Remove the identifers if they exist - .replace(new RegExp(baseSelector, "gi"), "") - // Check for identifiers in the property name that don't include the dash - .replace(new RegExp(baseSelector?.replace(/-/g, ""), "gi"), "") - .replace(new RegExp(identifierName, "gi"), "") - .replace(new RegExp(identifierValue, "gi"), ""), - { selectorPrefix } - ); - - let property = []; - - function processSelector(node) { - if (node.type === "pseudo") { - property.push(node.value.slice(1)); - } - else if (node.type === "tag") { - property.push(node.value); - } - else if (node.type === "combinator") { - switch (node.value) { - case " ": // Descendant combinator - break; - case ">": - property.push("child-of"); - break; - case "+": - property.push("next-to"); - break; - case "~": - property.push("sibling-of"); - break; - } - } - else if (node.type === "class") { - if (node.value === baseSelector) return; - property.push(clean(node.value)); - return; - } - - if (!node.nodes) return; - node.each(processSelector); - } - - selector.each(processSelector); - - // Dedupe the property array, removing the 2nd instance of a property - property = property - .filter((value, index) => property.indexOf(value) === index) - .filter(Boolean); - - return `--${[identifierName, baseSelector, clean([...property, prop].filter(Boolean).join("-"))].filter(Boolean).join("-").toLowerCase()}`; -} - -/** - * Check for a replacement value based on the provided guesses - * @param {import('postcss').Declaration} decl - * @param {string} replace - * @param {string[]} guesses - * @param {string[]} systemValues - * @returns {string|undefined|void} The updated declaration value - */ -function checkForReplacement( - decl, - replace, - guesses = [], - systemValues = [], -) { - if (!decl || !replace || guesses.length === 0) return; - - const replacer = new RegExp(replace, "g"); - - for (const g of guesses) { - if (systemValues.includes(g)) { - return decl.value.replace(replacer, g); - } - - const values = systemValues.filter((value) => value.startsWith(g)); - if (values.length === 0) continue; - - if (values.length === 1) { - return decl.value.replace(replacer, values[0]); - } - - if (values.length > 1) { - return decl.value.replace(replacer, values[0]); - } - - continue; - } -} - -module.exports = { - cleanPropertyName, - extractFallbackValue, - getBaseSelector, - getVariableName, - checkForReplacement, -}; diff --git a/plugins/postcss-property-rollup/README.md b/plugins/postcss-property-rollup/README.md deleted file mode 100644 index a7a653d2a1..0000000000 --- a/plugins/postcss-property-rollup/README.md +++ /dev/null @@ -1,74 +0,0 @@ -# postcss-property-rollup - -> Combines multiple blocks of custom properties - -## Installation - -```sh -npm install postcss-property-rollup -``` - -## Usage - -On the command line: - -```sh -postcss -u postcss-property-rollup -o dist/index.css src/index.css -``` - -or in the PostCSS configuration: - -```js -module.exports = { - plugins: { - "postcss-property-rollup": {}, - }, -}; -``` - -This plugin turns this: - -```css -.lorem { - --spectrum-actionbutton-background-color: blue; - --spectrum-actionbutton-border-color: transparent; -} - -.ipsum { - --spectrum-actionbutton-background-color: purple; -} -``` - -Into this: - -```css -.ipsum { - --spectrum-actionbutton-border-color: transparent; - --spectrum-actionbutton-background-color: purple; -} -``` - -The resulting selector comes from the last rule unless a `newSelector` option is provided, and all duplicate properties in the subsequent rules override the previous declarations. - -## Options - -### `newSelector` - -Type: `string`
-Default: `null` - -The selector to use for the combined rule. If not provided, the last selector in the list will be used. - -### `ignore` - -Type: `string[]`
-Default: `[]` - -An array of selectors to ignore when combining rules. - -### `keyword` - -Type: `string`
-Default: `combine` - -The `@` prefixed comment keyword to search for when determining what code to roll-up into the new selector. diff --git a/plugins/postcss-property-rollup/expected/basic.css b/plugins/postcss-property-rollup/expected/basic.css deleted file mode 100644 index 201ab4356c..0000000000 --- a/plugins/postcss-property-rollup/expected/basic.css +++ /dev/null @@ -1,4 +0,0 @@ -.spectrum--express { - --spectrum-actionbutton-background-color: purple; - --spectrum-actionbutton-border-color: transparent; -} diff --git a/plugins/postcss-property-rollup/fixtures/basic.css b/plugins/postcss-property-rollup/fixtures/basic.css deleted file mode 100644 index d7614ec6ee..0000000000 --- a/plugins/postcss-property-rollup/fixtures/basic.css +++ /dev/null @@ -1,9 +0,0 @@ -/* @combine */ -.spectrum { - --spectrum-actionbutton-background-color: blue; - --spectrum-actionbutton-border-color: transparent; -} - -.spectrum--express { - --spectrum-actionbutton-background-color: purple; -} diff --git a/plugins/postcss-property-rollup/index.js b/plugins/postcss-property-rollup/index.js deleted file mode 100644 index 2d986684c9..0000000000 --- a/plugins/postcss-property-rollup/index.js +++ /dev/null @@ -1,98 +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. - */ - -/** - * @typedef Options - * @property ignore {string[]} - List of selectors to ignore - * @property newSelector {string} - New selector to create with the combined declarations - */ - -/** @type import('postcss').PluginCreator */ -module.exports = ({ - ignore = [], - newSelector, -} = {}) => { - return { - postcssPlugin: "postcss-property-rollup", - OnceExit(root, { Rule }) { - let shouldCombine = false; - let localSelector; - // Check the file for a comment with @combine and fetch the preceeding selector(s) - root.walkComments((comment) => { - if (!comment.text.includes("@combine")) return; - - shouldCombine = true; - - // Remove the @combine from the string - const selectors = comment.text.replace("@combine", "").trim(); - - comment.remove(); - - if (!selectors) return; - - // Prefer the selectors from the comment over one provided in the config - if (!localSelector) localSelector = selectors; - }); - - if (!shouldCombine) return; - - if (localSelector) newSelector = localSelector; - - const rules = []; - const declarations = {}; - - root.walkRules((rule) => { - if (ignore.includes(rule.selector)) return; - rules.push(rule); - rule.walkDecls(/^--/, (decl) => { - declarations[decl.prop] = decl; - decl.remove(); - }); - }); - - if (!rules.length) return; - - if (newSelector) { - // Create a new rule with the combined declarations - const newRule = new Rule({ selector: newSelector }); - for (const decl of Object.values(declarations)) { - newRule.append(decl); - } - root.append(newRule); - - // Remove the rules from the root - rules.forEach((rule) => { - rule.remove(); - }); - - return; - } - - // If no new selector is provided, combine the declarations into the last rule - const lastIdx = rules.length - 1; - const lastRule = rules[lastIdx]; - - if (!lastRule) return; - - rules.forEach((rule, index) => { - if (index !== lastIdx) rule.remove(); - }); - - for (const decl of Object.values(declarations)) { - lastRule.append(decl); - } - }, - }; -}; - -module.exports.postcss = true; diff --git a/plugins/postcss-property-rollup/package.json b/plugins/postcss-property-rollup/package.json deleted file mode 100644 index 1c90972223..0000000000 --- a/plugins/postcss-property-rollup/package.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "name": "@spectrum-tools/postcss-property-rollup", - "version": "0.0.1", - "description": "Combines custom properties from multiple selectors into a single selector", - "license": "Apache-2.0", - "author": "Adobe", - "contributors": [ - "Cassondra Roberts " - ], - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "plugins/postcss-property-rollup" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "index.js", - "files": [ - "package.json", - "index.js", - "*.md" - ], - "peerDependencies": { - "postcss": ">=8" - }, - "devDependencies": { - "ava": "^6.2.0", - "c8": "^10.1.3", - "postcss": "^8.5.3" - }, - "keywords": [ - "css", - "theming", - "custom properties", - "postcss", - "postcss-plugin" - ] -} diff --git a/plugins/postcss-property-rollup/project.json b/plugins/postcss-property-rollup/project.json deleted file mode 100644 index 681869f7a1..0000000000 --- a/plugins/postcss-property-rollup/project.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "name": "postcss-property-rollup", - "tags": ["tooling", "postcss"], - "targets": { - "format": { - "defaultConfiguration": "plugins" - }, - "lint": { - "defaultConfiguration": "plugins" - }, - "test": { - "defaultConfiguration": "plugins" - } - } -} diff --git a/plugins/postcss-property-rollup/test.js b/plugins/postcss-property-rollup/test.js deleted file mode 100644 index 2e2923f7b9..0000000000 --- a/plugins/postcss-property-rollup/test.js +++ /dev/null @@ -1,50 +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. - */ - -const fs = require("fs"); -const test = require("ava"); -const postcss = require("postcss"); -const plugin = require("./index.js"); - -function compare( - t, - fixtureFilePath, - expectedFilePath, - options = { - processIdentifier: (identifier) => { - if (identifier === "express") { - return "spectrum--express"; - } - return identifier; - }, - } -) { - return postcss([plugin(options)]) - .process(readFile(`./fixtures/${fixtureFilePath}`), { - from: fixtureFilePath, - }) - .then((result) => { - const actual = result.css; - const expected = readFile(`./expected/${expectedFilePath}`); - t.is(actual, expected); - t.is(result.warnings().length, 0); - }); -} - -function readFile(filename) { - return fs.readFileSync(filename, "utf8"); -} - -test("create basic output", (t) => { - return compare(t, "basic.css", "basic.css"); -}); diff --git a/plugins/postcss-rgb-mapping/index.js b/plugins/postcss-rgb-mapping/index.js index ce1df4515d..22ee0214eb 100644 --- a/plugins/postcss-rgb-mapping/index.js +++ b/plugins/postcss-rgb-mapping/index.js @@ -25,7 +25,7 @@ function rgbMappingFunction ({ }) { return { - postcssPlugin: "postcss-rgb-mapping", + postcssPlugin: "@spectrum-tools/postcss-rgb-mapping", /** @type {import('postcss').RootProcessor} */ Root(root) { /* Gather all the custom properties that reference "unprocessed" transparent tokens (i.e. transparent-white-200) */ diff --git a/plugins/stylelint-no-unknown-custom-properties/index.js b/plugins/stylelint-no-unknown-custom-properties/index.js index 443af61c20..69ec3f8ad6 100644 --- a/plugins/stylelint-no-unknown-custom-properties/index.js +++ b/plugins/stylelint-no-unknown-custom-properties/index.js @@ -30,7 +30,6 @@ const messages = ruleMessages(ruleName, { expected: (prop) => `Custom property ${prop.magenta} not defined`, }); -import fg from "fast-glob"; import { parse } from "postcss"; import valuesParser from "postcss-values-parser"; @@ -71,14 +70,6 @@ const ruleFunction = (enabled, options = {}) => { const sharedDefinitions = new Set(); - for (const themePath of fg.sync(["themes/*.css"], { cwd: componentRoot, absolute: true })) { - const content = readFileSync(themePath, "utf8"); - if (!content) continue; - parse(content).walkDecls(/^--/, ({ prop }) => { - sharedDefinitions.add(prop); - }); - } - function fetchResolutions(depName) { let req; try { diff --git a/plugins/stylelint-theme-alignment/README.md b/plugins/stylelint-theme-alignment/README.md deleted file mode 100644 index 1aa58cd7fa..0000000000 --- a/plugins/stylelint-theme-alignment/README.md +++ /dev/null @@ -1,78 +0,0 @@ -# stylelint-no-unused-custom-properties - -> Remove or report on unused variable definitions - -## Installation - -```sh -yarn add -D @spectrum-tools/stylelint-no-unused-custom-properties -``` - -## Usage - -Assuming you have some variables defined and rule(s) that use them: - -```css -:root { - --prefix-component-background-color: blue; - --prefix-component-width: 10px; - --prefix-component-height: 10px; - --prefix-component-size: 10px; -} - -.component { - background-color: var(--prefix-component-background-color); - - width: var(--prefix-component-width); - height: var(--prefix-component-height); -} -``` - -The variables that are not used in any rule will be removed from the output or reported to the console: - -```css -:root { - --prefix-component-background-color: blue; - --prefix-component-width: 10px; - --prefix-component-height: 10px; -} - -.component { - background-color: var(--prefix-component-background-color); - - width: var(--prefix-component-width); - height: var(--prefix-component-height); -} -``` - -To allow variables to be defined without being used, such as when you want to pass custom properties down to a child component, you can add a `/* @passthrough */` comment to the variable definition: - -```css -:root { - /* @passthrough */ - --nested-component-background-color: blue; - --prefix-component-width: 10px; - --prefix-component-height: 10px; - --prefix-component-size: 10px; -} -``` - -To allow a group of properties to be passed down, you can prefix the set with `/* @passthrough start */` and suffix it with `/* @passthrough end */`: - -```css -:root { - /* @passthrough start */ - --nested-component-background-color: blue; - --nested-component-width: 10px; - /* @passthrough end */ - - --prefix-component-height: 10px; - --prefix-component-size: 10px; -} -``` - -## Options - -### `ignoreList` (default: `[]`) - -An array of strings or regular expressions that will be matched against the variable name. If a match is found, the variable will be ignored. diff --git a/plugins/stylelint-theme-alignment/index.js b/plugins/stylelint-theme-alignment/index.js deleted file mode 100644 index 98653a2225..0000000000 --- a/plugins/stylelint-theme-alignment/index.js +++ /dev/null @@ -1,158 +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 http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import fs from "node:fs"; -import { basename, relative, sep } from "node:path"; - -import postcss from "postcss"; -import valuesParser from "postcss-values-parser"; -import stylelint from "stylelint"; -import { isString } from "stylelint/lib/utils/validateTypes.mjs"; - -const { - createPlugin, - utils: { report, ruleMessages, validateOptions } -} = stylelint; - -import "colors"; - -const ruleName = "spectrum-tools/theme-alignment"; -const messages = ruleMessages(ruleName, { - missing: (baseFile, sourceFile, rootPath) => `A base file (${relative(rootPath, baseFile)}) is required to validate ${relative(rootPath, sourceFile)}.`, - // Report if a selector is in this file but not in the base file - expected: (selector, baseFile, rootPath) => `Selector "${selector}" is not used or defined in the base file (${relative(rootPath, baseFile)}).`, - // Report if a custom property is used in this file but not in the base file - referenced: (property, baseFile, rootPath) => `Custom property "${property}" is not used or defined by the base file (${relative(rootPath, baseFile)}).`, -}); - -/** @type {import('stylelint').Plugin} */ -const ruleFunction = (enabled, options = {}) => { - return (root, result) => { - const validOptions = validateOptions( - result, - ruleName, - { - actual: enabled, - possible: [true], - }, - { - actual: options, - possible: { - baseFilename: isString, - }, - optional: true, - }, - ); - - if (!validOptions) return; - - - const { baseFilename = "spectrum" } = options; - - const sourceFile = root.source.input.file; - const parts = sourceFile ? sourceFile.split(sep) : []; - const isTheme = parts[parts.length - 2] === "themes"; - const filename = parts[parts.length - 1]; - - if (!isTheme || basename(filename, ".css") === baseFilename) return; - - // All the parts of the source file but replace the filename with the baseFilename - const baseFile = [...parts.slice(0, -1), `${baseFilename}.css`].join(sep); - const rootPath = parts.slice(0, -2).join(sep); - - // If the base file doesn't exist, throw an error - if (!fs.existsSync(baseFile)) { - report({ - message: messages.missing, - messageArgs: [baseFile, sourceFile, rootPath], - node: root, - result, - ruleName, - }); - return; - } - - // Read in the base file and parse it - const baseContent = fs.readFileSync(baseFile, "utf8"); - const baseRoot = postcss.parse(baseContent); - - /* A list of all selectors in the base file */ - const baseSelectors = new Set(); - /* A list of all properties in the base file */ - const baseProperties = new Set(); - - /* Iterate over selectors in the base root */ - baseRoot.walkRules((rule) => { - rule.selectors.forEach((selector) => { - // Add this selector to the selectors set - baseSelectors.add(selector); - }); - - rule.walkDecls((decl) => { - // If this is a custom property, add it to the properties set - if (decl.prop.startsWith("--")) { - baseProperties.add(decl.prop); - } - - // If the value of this declaration includes a custom property, add it to the properties set - const parsed = valuesParser.parse(decl.value); - parsed.walk((node) => { - if (node.type === "func" && node.value === "var") { - baseProperties.add(node.nodes[0].value); - } - }); - }); - }); - - /* Iterate over selectors in the source root and validate that they align with the base */ - root.walkRules((rule) => { - rule.selectors.forEach((selector) => { - // Check if this selector exists in the base - if (!baseSelectors.has(selector)) { - // Report any selectors that don't exist in the base - report({ - message: messages.expected, - messageArgs: [selector, baseFile, rootPath], - node: rule, - result, - ruleName, - }); - return; - } - }); - - rule.walkDecls((decl) => { - const isProperty = decl.prop.startsWith("--"); - // @todo should report that this is setting something other than a custom property in the theme file - if (!isProperty) { - return; - } - - // If this is a custom property, check if it's used in the base - if (!baseProperties.has(decl.prop)) { - report({ - message: messages.referenced, - messageArgs: [decl.prop, baseFile, rootPath], - node: decl, - result, - ruleName, - }); - } - }); - }); - }; -}; - -ruleFunction.ruleName = ruleName; -ruleFunction.messages = messages; - -export default createPlugin(ruleName, ruleFunction); diff --git a/plugins/stylelint-theme-alignment/package.json b/plugins/stylelint-theme-alignment/package.json deleted file mode 100644 index efbc9fe767..0000000000 --- a/plugins/stylelint-theme-alignment/package.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "name": "@spectrum-tools/stylelint-theme-alignment", - "version": "1.2.1", - "description": "A utility to ensure that all custom properties are intially defined in a core resource file and all subsequent uses leverage only values defined there first.", - "license": "Apache-2.0", - "author": "Adobe", - "contributors": [ - "Cassondra Roberts " - ], - "homepage": "https://opensource.adobe.com/spectrum-css", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "plugins/stylelint-theme-alignment" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "type": "module", - "main": "index.js", - "files": [ - "package.json", - "index.js", - "*.md" - ], - "dependencies": { - "colors": "^1.4.0", - "postcss": "^8.5.3", - "postcss-values-parser": "^6.0.2" - }, - "peerDependencies": { - "stylelint": ">=16" - }, - "devDependencies": { - "stylelint": "^16.18.0" - }, - "keywords": [ - "css", - "lint", - "properties", - "report", - "stylelint-plugin" - ] -} diff --git a/plugins/stylelint-theme-alignment/project.json b/plugins/stylelint-theme-alignment/project.json deleted file mode 100644 index 90709f217a..0000000000 --- a/plugins/stylelint-theme-alignment/project.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "name": "stylelint-theme-alignment", - "tags": ["tooling", "stylelint"], - "targets": { - "format": { - "defaultConfiguration": "plugins" - }, - "lint": { - "defaultConfiguration": "plugins" - } - } -} diff --git a/postcss.config.js b/postcss.config.js index 71b276317e..91f4325874 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -15,12 +15,7 @@ const fs = require("node:fs"); const { join, basename } = require("node:path"); module.exports = ({ - skipMapping = false, - referencesOnly = false, - preserveVariables = true, - stripLocalSelectors = false, resolveImports = true, - shouldCombine = false, lint = true, verbose = true, minify = false, @@ -84,19 +79,6 @@ module.exports = ({ prefix: "is-" } : false, "postcss-hover-media-feature": {}, - /* --------------------------------------------------- */ - /* ------------------- VARIABLE PARSING -------------- */ - "@spectrum-tools/postcss-add-theming-layer": { - selectorPrefix: "spectrum", - skipMapping, - preserveVariables, - referencesOnly, - stripLocalSelectors, - debug: verbose, - }, - "@spectrum-tools/postcss-property-rollup": shouldCombine ? { - newSelector: ".spectrum", - } : false, ...additionalPlugins, /* --------------------------------------------------- */ /* ------------------- POLYFILLS --------------------- */ @@ -113,7 +95,6 @@ module.exports = ({ stage: 2, env, features: { - "dir-pseudo-class": { preserve: true }, "nesting-rules": { preserve: true, edition: "2021", diff --git a/schemas/metadata.schema.json b/schemas/metadata.schema.json index c91ce98e0f..1352f80290 100644 --- a/schemas/metadata.schema.json +++ b/schemas/metadata.schema.json @@ -10,71 +10,54 @@ "pattern": "^.+\\.css$", "description": "The path to the source file used in generating the metadata." }, - "selectors": { - "description": "These are the selectors available for the component.", - "type": "array", - "items": { - "type": "string" - } - }, - "modifiers": { - "description": "These are the modifiers available for the component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--mod-" - } - }, - "component": { - "description": "The component-level custom properties for the component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--spectrum-" - } - }, - "global": { - "description": "The global custom properties used in this component as generated by the design tokens.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--spectrum-" - } - }, - "system-theme": { - "description": "The system theme hooks created by the postcss tooling to allow theme toggling on a component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--system-" - } - }, - "passthroughs": { - "description": "Modifier custom properties for nested components that are passed through by this component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--mod-" - } - }, - "high-contrast": { - "description": "Custom properties that allow high-contrast styles to be applied to the component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--highcontrast-" - } - } + "selectors": { + "description": "These are the selectors available for the component.", + "type": "array", + "items": { + "type": "string" + } + }, + "modifiers": { + "description": "These are the modifiers available for the component.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--mod-" + } + }, + "component": { + "description": "The component-level custom properties for the component.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--spectrum-" + } + }, + "global": { + "description": "The global custom properties used in this component as generated by the design tokens.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--spectrum-" + } + }, + "passthroughs": { + "description": "Modifier custom properties for nested components that are passed through by this component.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--mod-" + } + }, + "high-contrast": { + "description": "Custom properties that allow high-contrast styles to be applied to the component.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--highcontrast-" + } + } }, - "required": [ - "sourceFile", - "selectors", - "modifiers", - "component", - "global", - "system-theme", - "passthroughs", - "high-contrast" - ], + "required": ["sourceFile", "selectors", "modifiers", "component", "global", "passthroughs", "high-contrast"], "additionalProperties": false } diff --git a/stylelint.config.js b/stylelint.config.js index e0afd5518e..f4b704f4bd 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -11,7 +11,6 @@ module.exports = { "@spectrum-tools/stylelint-no-missing-var", "@spectrum-tools/stylelint-no-unused-custom-properties", "@spectrum-tools/stylelint-no-unknown-custom-properties", - "@spectrum-tools/stylelint-theme-alignment", // "stylelint-high-performance-animation", ], ignoreFiles: [ @@ -164,7 +163,6 @@ module.exports = { * Local/custom plugins * -------------------------------------------------------------- */ "spectrum-tools/no-missing-var": true, - "spectrum-tools/theme-alignment": null, "spectrum-tools/no-unused-custom-properties": null, "spectrum-tools/no-unknown-custom-properties": null, }, @@ -173,7 +171,7 @@ module.exports = { * -------------------------------------------------------------- */ overrides: [ { - files: ["components/*/index.css", "components/*/themes/spectrum.css"], + files: ["components/*/index.css"], rules: { "selector-class-pattern": [ "^(spectrum-|is-|u-)[A-Za-z0-9-]+", { @@ -222,21 +220,6 @@ module.exports = { "custom-property-pattern": [/^(spectrum|color|scale|system)/, {}], } }, - { - /* Validate that the legacy themes don't introduce any new selectors or custom properties */ - files: ["components/*/themes/express.css", "components/*/themes/spectrum.css"], - rules: { - "spectrum-tools/no-unused-custom-properties": null, - "selector-class-pattern": [ - "^(spectrum-|is-|u-)[A-Za-z0-9-]+", { - resolveNestedSelectors: true - } - ], - "spectrum-tools/theme-alignment": [true, { - baseFilename: "spectrum-two", - }], - }, - }, { /* Allow "tree shaking" of unused custom properties in the bundle */ files: ["tools/bundle/**/*.css"], diff --git a/tasks/component-builder.js b/tasks/component-builder.js index 5a388b0c2f..3f882beab7 100644 --- a/tasks/component-builder.js +++ b/tasks/component-builder.js @@ -204,79 +204,6 @@ async function build({ cwd = process.cwd(), clean = false, minify = false, compo ]); } -/** - * The builder for the individual themes assets - * @param {object} config - * @param {string} config.cwd - Current working directory for the component being built - * @param {boolean} config.clean - Should the built assets be cleaned before running the build - * @returns Promise - */ -async function buildThemes({ cwd = process.cwd(), minify = false, clean = false } = {}) { - // This fetches the content of the files and returns an array of objects with the content and input paths - const contentData = await fetchContent(["themes/*.css"], { cwd, clean }); - - // Nothing to do if there's no content - if (!contentData || contentData.length === 0) return; - - const imports = contentData.map(({ input }) => input); - const importMap = imports.map((i) => `@import "${i}";`).join("\n"); - - const basePostCSSOptions = { - cwd, - clean, - map: false, - env: "production", - lint: false, - }; - - const promises = []; - - contentData.forEach(async ({ content, input }) => { - const theme = path.basename(input, ".css"); - - promises.push( - processCSS(content, path.join(cwd, input), path.join(cwd, "dist", "themes", `${theme}.css`), { - ...basePostCSSOptions, - shouldCombine: true, - // Only output the new selectors with the system mappings - stripLocalSelectors: true, - }), - minify ? processCSS(content, path.join(cwd, input), path.join(cwd, "dist", "themes", `${theme}.min.css`), { - ...basePostCSSOptions, - shouldCombine: true, - // Only output the new selectors with the system mappings - stripLocalSelectors: true, - }) : Promise.resolve(), - ); - }); - - promises.push( - processCSS(undefined, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-base.css"), { - ...basePostCSSOptions, - referencesOnly: true, - // Only output the new selectors with the system mappings - stripLocalSelectors: true, - }), - minify ? processCSS(undefined, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-base.min.css"), { - ...basePostCSSOptions, - referencesOnly: true, - // Only output the new selectors with the system mappings - stripLocalSelectors: true, - }) : Promise.resolve(), - // Expect this file to have component-specific selectors mapping to the system tokens but not the system tokens themselves - processCSS(importMap, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-theme.css"), { - ...basePostCSSOptions, - referencesOnly: true, - }), - minify ? processCSS(importMap, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-theme.min.css"), { - ...basePostCSSOptions, - referencesOnly: true, - }) : Promise.resolve(), - ); - - return Promise.all(promises); -} - /** * The main entry point for this tool; this builds a CSS component * @param {object} config @@ -318,42 +245,33 @@ async function main({ const key = `[build] ${`@spectrum-css/${componentName}`.cyan}`; console.time(key); - // Create the dist directory if it doesn't exist - if (!fs.existsSync(path.join(cwd, "dist"))) { - fs.mkdirSync(path.join(cwd, "dist")); + const reports = []; + const errors = []; + + await build({ cwd, clean, minify }).then((report) => reports.push(report)).catch((err) => errors.push(err)); + + const logs = reports.flat(Infinity).filter(Boolean); + const errs = errors.flat(Infinity).filter(Boolean); + + console.log(`\n\n${key} 🔨`); + console.log(`${"".padStart(30, "-")}`); + + if (errs && errs.length > 0) { + errs.forEach((err) => console.error(err)); + } + else { + if (logs && logs.length > 0) { + logs.forEach((log) => console.log(log)); + } + else console.log("No assets created.".gray); } - return Promise.all([ - build({ cwd, clean, minify }), - buildThemes({ cwd, clean, minify }), - ]) - .then((report) => { - const logs = report.flat(Infinity).filter(Boolean); - - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - if (logs && logs.length > 0) { - logs.forEach((log) => console.log(log)); - } - else console.log("No assets created.".gray); - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - }) - .catch((err) => { - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - console.trace(err); - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - - process.exit(1); - }); + console.log(`${"".padStart(30, "-")}`); + console.timeEnd(key); + console.log(""); + + if (errs && errs.length > 0) process.exit(1); + else process.exit(0); } exports.processCSS = processCSS; diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js index 90a2da7d1c..b281de49bc 100644 --- a/tasks/component-reporter.js +++ b/tasks/component-reporter.js @@ -69,6 +69,9 @@ async function extractModifiers( const selectors = new Set(); const root = postcss.parse(content); root.walkRules((rule) => { + // Check that the selector is not inside a keyframe + if (rule.parent.type === "atrule" && rule.parent.name === "keyframes") return; + if (rule.selectors) { rule.selectors.forEach((selector) => { // If the selector is not a base selector, add it to the set @@ -173,10 +176,6 @@ async function main({ const processed = await processCSS(undefined, sourceCSS, undefined, { cwd, - skipMapping: false, - referencesOnly: false, - preserveVariables: true, - stripLocalSelectors: false, map: false, env: "production", }); @@ -187,11 +186,10 @@ async function main({ cwd, sourcePath: sourceCSS, componentName, - baseSelectors: [".spectrum", ".spectrum--express", ".spectrum--legacy"], + baseSelectors: [".spectrum"], dataModel: { modifiers: ["mod"], spectrum: ["spectrum"], - "system-theme": ["system"], "high-contrast": ["highcontrast"], }, } @@ -206,7 +204,6 @@ async function main({ modifiers: meta.modifiers, component: meta.component, global: meta.global, - "system-theme": meta["system-theme"], passthroughs: meta.passthroughs, "high-contrast": meta["high-contrast"], }, null, 2), diff --git a/tokens/README.md b/tokens/README.md index a0e99bf238..ebdf427d75 100644 --- a/tokens/README.md +++ b/tokens/README.md @@ -29,7 +29,7 @@ Consumers should load only the mappings for the components they are using in the The output is concatenated into a single `dist/index.css` for use in a vanilla HTML application. This entire file should be imported, and the relevant classes should be toggled to swap out core tokens. -On the `` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. To switch to another context, add `.spectrum--legacy` or `.spectrum--express`. +On the `` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. For additional guidance on which assets to load, see the architecture section below. diff --git a/tokens/custom/global-vars.css b/tokens/custom/global-vars.css index 55cad6984b..663e24ad88 100644 --- a/tokens/custom/global-vars.css +++ b/tokens/custom/global-vars.css @@ -57,9 +57,15 @@ --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); - /* static white / black background color for docs containers */ - --spectrum-docs-static-white-background-color: rgb(15 121 125); - --spectrum-docs-static-black-background-color: rgb(181 209 211); + /* Gradient that changes with the color theme. */ + --spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500)); + + /* Gradients that do not change with the color theme, for use in static color backgrounds. */ + --spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255)); + --spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67)); --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); + + /* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */ + --spectrum-corner-radius-1000: 9999px; } diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index 358ad3404c..cdc0bc73bf 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -104,6 +104,11 @@ --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; + --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400); + --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-400); + --spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-300); + --spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-400); + --spectrum-treeview-item-indentation-medium: 20px; --spectrum-treeview-item-indentation-small: 15px; --spectrum-treeview-item-indentation-large: 25px; @@ -111,7 +116,9 @@ --spectrum-treeview-indicator-inset-block-start: 6px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - --spectrum-tooltip-animation-distance: 5px; + /* To get a square that measures 12px on the diagonal, the sides have to be 10px */ + --spectrum-tooltip-tip-square-size: 10px; + --spectrum-ui-icon-medium-display: none; --spectrum-ui-icon-large-display: block; diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index 5221e74999..817e26b2d5 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -102,6 +102,11 @@ --spectrum-slider-ramp-track-height: 16px; --spectrum-slider-tick-mark-height: 10px; + --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500); + --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-500); + --spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-400); + --spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-500); + --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); @@ -109,7 +114,9 @@ --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); + /* To get a square that measures 10px on the diagonal, the sides have to be 8px */ + --spectrum-tooltip-tip-square-size: 8px; + --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; diff --git a/tokens/dist/json/tokens.json b/tokens/dist/json/tokens.json index b634c3e29b..687daf22c9 100644 --- a/tokens/dist/json/tokens.json +++ b/tokens/dist/json/tokens.json @@ -386,6 +386,42 @@ "value": "20px" } }, + "accordion-content-area-edge-to-content-extra-large": { + "prop": "--spectrum-accordion-content-area-edge-to-content-extra-large", + "desktop": { + "value": "15px" + }, + "mobile": { + "value": "19px" + } + }, + "accordion-content-area-edge-to-content-large": { + "prop": "--spectrum-accordion-content-area-edge-to-content-large", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "accordion-content-area-edge-to-content-medium": { + "prop": "--spectrum-accordion-content-area-edge-to-content-medium", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "accordion-content-area-edge-to-content-small": { + "prop": "--spectrum-accordion-content-area-edge-to-content-small", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, "accordion-content-area-top-to-content": { "prop": "--spectrum-accordion-content-area-top-to-content", "desktop": { @@ -399,6 +435,42 @@ "prop": "--spectrum-accordion-disclosure-indicator-to-text", "value": "0px" }, + "accordion-disclosure-indicator-to-text-extra-large": { + "prop": "--spectrum-accordion-disclosure-indicator-to-text-extra-large", + "desktop": { + "value": "17px" + }, + "mobile": { + "value": "22px" + } + }, + "accordion-disclosure-indicator-to-text-large": { + "prop": "--spectrum-accordion-disclosure-indicator-to-text-large", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "accordion-disclosure-indicator-to-text-medium": { + "prop": "--spectrum-accordion-disclosure-indicator-to-text-medium", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" + } + }, + "accordion-disclosure-indicator-to-text-small": { + "prop": "--spectrum-accordion-disclosure-indicator-to-text-small", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + }, "accordion-edge-to-disclosure-indicator": { "prop": "--spectrum-accordion-edge-to-disclosure-indicator", "value": "0px" @@ -411,6 +483,10 @@ "prop": "--spectrum-accordion-focus-indicator-gap", "value": "0px" }, + "accordion-item-to-divider": { + "prop": "--spectrum-accordion-item-to-divider", + "value": "0px" + }, "accordion-minimum-width": { "prop": "--spectrum-accordion-minimum-width", "desktop": { @@ -527,22 +603,68 @@ "value": "12px" } }, + "action-bar-bottom-to-content-area": { + "prop": "--spectrum-action-bar-bottom-to-content-area", + "ref": "var(--spectrum-spacing-200)", + "value": "12px" + }, + "action-bar-close-button-to-counter": { + "prop": "--spectrum-action-bar-close-button-to-counter", + "ref": "var(--spectrum-text-to-control-50)", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "action-bar-counter-font-size": { + "prop": "--spectrum-action-bar-counter-font-size", + "ref": "var(--spectrum-font-size-100)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "action-bar-edge-to-content-area": { + "prop": "--spectrum-action-bar-edge-to-content-area", + "ref": "var(--spectrum-spacing-100)", + "value": "8px" + }, "action-bar-height": { "prop": "--spectrum-action-bar-height", + "ref": "var(--spectrum-component-height-400)", "desktop": { - "value": "48px" + "value": "56px" }, "mobile": { - "value": "56px" + "value": "70px" } }, + "action-bar-label-to-action-group-area": { + "prop": "--spectrum-action-bar-label-to-action-group-area", + "ref": "var(--spectrum-spacing-300)", + "value": "16px" + }, + "action-bar-minimum-width": { + "prop": "--spectrum-action-bar-minimum-width", + "value": "176px" + }, + "action-bar-top-to-content-area": { + "prop": "--spectrum-action-bar-top-to-content-area", + "ref": "var(--spectrum-spacing-200)", + "value": "12px" + }, "action-bar-top-to-item-counter": { "prop": "--spectrum-action-bar-top-to-item-counter", + "ref": "var(--spectrum-component-top-to-text-300)", "desktop": { - "value": "14px" + "value": "12px" }, "mobile": { - "value": "16px" + "value": "15px" } }, "action-button-edge-to-hold-icon-extra-large": { @@ -583,7 +705,7 @@ "alert-banner-bottom-to-text": { "prop": "--spectrum-alert-banner-bottom-to-text", "desktop": { - "value": "17px" + "value": "20px" }, "mobile": { "value": "22px" @@ -592,7 +714,7 @@ "alert-banner-minimum-height": { "prop": "--spectrum-alert-banner-minimum-height", "desktop": { - "value": "48px" + "value": "56px" }, "mobile": { "value": "64px" @@ -602,7 +724,7 @@ "prop": "--spectrum-alert-banner-to-bottom-text", "ref": "var(--spectrum-alert-banner-bottom-to-text)", "desktop": { - "value": "17px" + "value": "20px" }, "mobile": { "value": "22px" @@ -612,7 +734,7 @@ "prop": "--spectrum-alert-banner-to-top-text", "ref": "var(--spectrum-alert-banner-top-to-text)", "desktop": { - "value": "14px" + "value": "18px" }, "mobile": { "value": "21px" @@ -622,16 +744,25 @@ "prop": "--spectrum-alert-banner-to-top-workflow-icon", "ref": "var(--spectrum-alert-banner-top-to-workflow-icon)", "desktop": { - "value": "15px" + "value": "18px" }, "mobile": { - "value": "21px" + "value": "20px" + } + }, + "alert-banner-top-to-alert-icon": { + "prop": "--spectrum-alert-banner-top-to-alert-icon", + "desktop": { + "value": "37px" + }, + "mobile": { + "value": "29px" } }, "alert-banner-top-to-text": { "prop": "--spectrum-alert-banner-top-to-text", "desktop": { - "value": "14px" + "value": "18px" }, "mobile": { "value": "21px" @@ -640,10 +771,10 @@ "alert-banner-top-to-workflow-icon": { "prop": "--spectrum-alert-banner-top-to-workflow-icon", "desktop": { - "value": "15px" + "value": "18px" }, "mobile": { - "value": "21px" + "value": "20px" } }, "alert-banner-width": { @@ -655,14 +786,24 @@ "value": "680px" } }, + "alert-dialog-description-font-size": { + "prop": "--spectrum-alert-dialog-description-font-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, "alert-dialog-description-size": { "prop": "--spectrum-alert-dialog-description-size", - "ref": "var(--spectrum-body-size-xs)", + "ref": "var(--spectrum-body-size-s)", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "15px" + "value": "17px" } }, "alert-dialog-maximum-width": { @@ -673,14 +814,24 @@ "prop": "--spectrum-alert-dialog-minimum-width", "value": "288px" }, + "alert-dialog-title-font-size": { + "prop": "--spectrum-alert-dialog-title-font-size", + "ref": "var(--spectrum-title-size-xl)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "24px" + } + }, "alert-dialog-title-size": { "prop": "--spectrum-alert-dialog-title-size", - "ref": "var(--spectrum-heading-size-xs)", + "ref": "var(--spectrum-title-size-xl)", "desktop": { - "value": "18px" + "value": "22px" }, "mobile": { - "value": "19px" + "value": "24px" } }, "android-elevation": { @@ -781,49 +932,64 @@ "prop": "--spectrum-asterisk-icon-size-75", "value": "8px" }, - "avatar-opacity-disabled": { - "prop": "--spectrum-avatar-opacity-disabled", - "ref": "var(--spectrum-opacity-disabled)", - "value": "0.3" - }, - "avatar-size-100": { - "prop": "--spectrum-avatar-size-100", - "desktop": { - "value": "20px" + "avatar-border-color": { + "prop": "--spectrum-avatar-border-color", + "ref": "var(--spectrum-gray-25)", + "dark": { + "value": "rgb(17, 17, 17)" }, - "mobile": { - "value": "26px" + "light": { + "value": "rgb(255, 255, 255)" } }, - "avatar-size-200": { - "prop": "--spectrum-avatar-size-200", + "avatar-border-width": { + "prop": "--spectrum-avatar-border-width", + "ref": "var(--spectrum-border-width-100)", + "value": "1px" + }, + "avatar-group-size-100": { + "prop": "--spectrum-avatar-group-size-100", + "ref": "var(--spectrum-avatar-size-100)", "desktop": { - "value": "22px" + "value": "24px" }, "mobile": { "value": "28px" } }, - "avatar-size-300": { - "prop": "--spectrum-avatar-size-300", + "avatar-group-size-200": { + "prop": "--spectrum-avatar-group-size-200", + "ref": "var(--spectrum-avatar-size-200)", "desktop": { - "value": "26px" + "value": "28px" }, "mobile": { "value": "32px" } }, - "avatar-size-400": { - "prop": "--spectrum-avatar-size-400", + "avatar-group-size-300": { + "prop": "--spectrum-avatar-group-size-300", + "ref": "var(--spectrum-avatar-size-300)", "desktop": { - "value": "28px" + "value": "32px" }, "mobile": { "value": "36px" } }, - "avatar-size-50": { - "prop": "--spectrum-avatar-size-50", + "avatar-group-size-400": { + "prop": "--spectrum-avatar-group-size-400", + "ref": "var(--spectrum-avatar-size-400)", + "desktop": { + "value": "36px" + }, + "mobile": { + "value": "40px" + } + }, + "avatar-group-size-50": { + "prop": "--spectrum-avatar-group-size-50", + "ref": "var(--spectrum-avatar-size-50)", "desktop": { "value": "16px" }, @@ -831,89 +997,294 @@ "value": "20px" } }, - "avatar-size-500": { - "prop": "--spectrum-avatar-size-500", + "avatar-group-size-500": { + "prop": "--spectrum-avatar-group-size-500", + "ref": "var(--spectrum-avatar-size-500)", "desktop": { - "value": "32px" + "value": "40px" }, "mobile": { - "value": "40px" + "value": "44px" } }, - "avatar-size-600": { - "prop": "--spectrum-avatar-size-600", + "avatar-group-size-75": { + "prop": "--spectrum-avatar-group-size-75", + "ref": "var(--spectrum-avatar-size-75)", "desktop": { - "value": "36px" + "value": "20px" }, "mobile": { - "value": "46px" + "value": "24px" } }, - "avatar-size-700": { - "prop": "--spectrum-avatar-size-700", + "avatar-opacity-disabled": { + "prop": "--spectrum-avatar-opacity-disabled", + "ref": "var(--spectrum-opacity-disabled)", + "value": "0.3" + }, + "avatar-size-100": { + "prop": "--spectrum-avatar-size-100", "desktop": { - "value": "40px" + "value": "24px" }, "mobile": { - "value": "50px" + "value": "28px" } }, - "avatar-size-75": { - "prop": "--spectrum-avatar-size-75", + "avatar-size-1000": { + "prop": "--spectrum-avatar-size-1000", "desktop": { - "value": "18px" + "value": "64px" }, "mobile": { - "value": "22px" + "value": "72px" } }, - "background-base-color": { - "prop": "--spectrum-background-base-color", - "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(17, 17, 17)" + "avatar-size-1100": { + "prop": "--spectrum-avatar-size-1100", + "desktop": { + "value": "72px" }, - "light": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "80px" } }, - "background-elevated-color": { - "prop": "--spectrum-background-elevated-color", - "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(34, 34, 34)" + "avatar-size-1200": { + "prop": "--spectrum-avatar-size-1200", + "desktop": { + "value": "80px" }, - "light": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "88px" } }, - "background-layer-1-color": { - "prop": "--spectrum-background-layer-1-color", - "ref": "var(--spectrum-gray-50)", - "light": { - "value": "rgb(248, 248, 248)" + "avatar-size-1300": { + "prop": "--spectrum-avatar-size-1300", + "desktop": { + "value": "88px" }, - "dark": { - "value": "rgb(27, 27, 27)" + "mobile": { + "value": "96px" } }, - "background-layer-2-color": { - "prop": "--spectrum-background-layer-2-color", - "ref": "var(--spectrum-gray-75)", - "light": { - "value": "rgb(255, 255, 255)" + "avatar-size-1400": { + "prop": "--spectrum-avatar-size-1400", + "desktop": { + "value": "96px" }, - "dark": { - "value": "rgb(34, 34, 34)" + "mobile": { + "value": "104px" } }, - "background-opacity-default": { - "prop": "--spectrum-background-opacity-default", - "value": "0" - }, - "background-opacity-down": { - "prop": "--spectrum-background-opacity-down", - "value": "0.1" + "avatar-size-1500": { + "prop": "--spectrum-avatar-size-1500", + "desktop": { + "value": "104px" + }, + "mobile": { + "value": "112px" + } + }, + "avatar-size-200": { + "prop": "--spectrum-avatar-size-200", + "desktop": { + "value": "28px" + }, + "mobile": { + "value": "32px" + } + }, + "avatar-size-300": { + "prop": "--spectrum-avatar-size-300", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "36px" + } + }, + "avatar-size-400": { + "prop": "--spectrum-avatar-size-400", + "desktop": { + "value": "36px" + }, + "mobile": { + "value": "40px" + } + }, + "avatar-size-50": { + "prop": "--spectrum-avatar-size-50", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "avatar-size-500": { + "prop": "--spectrum-avatar-size-500", + "desktop": { + "value": "40px" + }, + "mobile": { + "value": "44px" + } + }, + "avatar-size-600": { + "prop": "--spectrum-avatar-size-600", + "desktop": { + "value": "44px" + }, + "mobile": { + "value": "48px" + } + }, + "avatar-size-700": { + "prop": "--spectrum-avatar-size-700", + "desktop": { + "value": "48px" + }, + "mobile": { + "value": "52px" + } + }, + "avatar-size-75": { + "prop": "--spectrum-avatar-size-75", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "avatar-size-800": { + "prop": "--spectrum-avatar-size-800", + "desktop": { + "value": "52px" + }, + "mobile": { + "value": "56px" + } + }, + "avatar-size-900": { + "prop": "--spectrum-avatar-size-900", + "desktop": { + "value": "56px" + }, + "mobile": { + "value": "64px" + } + }, + "avatar-to-avatar-100": { + "prop": "--spectrum-avatar-to-avatar-100", + "desktop": { + "value": "-6px" + }, + "mobile": { + "value": "-7px" + } + }, + "avatar-to-avatar-200": { + "prop": "--spectrum-avatar-to-avatar-200", + "desktop": { + "value": "-7px" + }, + "mobile": { + "value": "-8px" + } + }, + "avatar-to-avatar-300": { + "prop": "--spectrum-avatar-to-avatar-300", + "desktop": { + "value": "-8px" + }, + "mobile": { + "value": "-9px" + } + }, + "avatar-to-avatar-400": { + "prop": "--spectrum-avatar-to-avatar-400", + "desktop": { + "value": "-9px" + }, + "mobile": { + "value": "-10px" + } + }, + "avatar-to-avatar-50": { + "prop": "--spectrum-avatar-to-avatar-50", + "desktop": { + "value": "-4px" + }, + "mobile": { + "value": "-5px" + } + }, + "avatar-to-avatar-500": { + "prop": "--spectrum-avatar-to-avatar-500", + "desktop": { + "value": "-10px" + }, + "mobile": { + "value": "-11px" + } + }, + "avatar-to-avatar-75": { + "prop": "--spectrum-avatar-to-avatar-75", + "desktop": { + "value": "-5px" + }, + "mobile": { + "value": "-6px" + } + }, + "background-base-color": { + "prop": "--spectrum-background-base-color", + "ref": "var(--spectrum-gray-25)", + "dark": { + "value": "rgb(17, 17, 17)" + }, + "light": { + "value": "rgb(255, 255, 255)" + } + }, + "background-elevated-color": { + "prop": "--spectrum-background-elevated-color", + "ref": "var(--spectrum-gray-25)", + "dark": { + "value": "rgb(34, 34, 34)" + }, + "light": { + "value": "rgb(255, 255, 255)" + } + }, + "background-layer-1-color": { + "prop": "--spectrum-background-layer-1-color", + "ref": "var(--spectrum-gray-50)", + "light": { + "value": "rgb(248, 248, 248)" + }, + "dark": { + "value": "rgb(27, 27, 27)" + } + }, + "background-layer-2-color": { + "prop": "--spectrum-background-layer-2-color", + "ref": "var(--spectrum-gray-75)", + "light": { + "value": "rgb(255, 255, 255)" + }, + "dark": { + "value": "rgb(34, 34, 34)" + } + }, + "background-opacity-default": { + "prop": "--spectrum-background-opacity-default", + "value": "0" + }, + "background-opacity-down": { + "prop": "--spectrum-background-opacity-down", + "value": "0.1" }, "background-opacity-hover": { "prop": "--spectrum-background-opacity-hover", @@ -933,6 +1304,42 @@ "value": "rgb(233, 233, 233)" } }, + "bar-panel-gripper-color": { + "prop": "--spectrum-bar-panel-gripper-color", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(225, 225, 225)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "bar-panel-gripper-color-drag": { + "prop": "--spectrum-bar-panel-gripper-color-drag", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "bar-panel-maximum-width": { + "prop": "--spectrum-bar-panel-maximum-width", + "value": "72px" + }, + "bar-panel-minimum-width": { + "prop": "--spectrum-bar-panel-minimum-width", + "value": "40px" + }, + "bar-panel-spacing-extra-spacious": { + "prop": "--spectrum-bar-panel-spacing-extra-spacious", + "value": "20px" + }, + "bar-panel-width": { + "prop": "--spectrum-bar-panel-width", + "value": "56px" + }, "black": { "prop": "--spectrum-black", "value": "rgb(0, 0, 0)" @@ -1144,46 +1551,126 @@ "body-cjk-line-height": { "prop": "--spectrum-body-cjk-line-height", "ref": "var(--spectrum-cjk-line-height-200)", - "value": "1.7" + "value": 1.7 }, - "body-cjk-strong-emphasized-font-style": { - "prop": "--spectrum-body-cjk-strong-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" + "body-cjk-size-l": { + "prop": "--spectrum-body-cjk-size-l", + "ref": "var(--spectrum-font-size-200)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "19px" + } }, - "body-cjk-strong-emphasized-font-weight": { - "prop": "--spectrum-body-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "body-cjk-size-m": { + "prop": "--spectrum-body-cjk-size-m", + "ref": "var(--spectrum-font-size-100)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } }, - "body-cjk-strong-font-style": { - "prop": "--spectrum-body-cjk-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" + "body-cjk-size-s": { + "prop": "--spectrum-body-cjk-size-s", + "ref": "var(--spectrum-font-size-75)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } }, - "body-cjk-strong-font-weight": { - "prop": "--spectrum-body-cjk-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "body-cjk-size-xl": { + "prop": "--spectrum-body-cjk-size-xl", + "ref": "var(--spectrum-font-size-300)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } }, - "body-color": { - "prop": "--spectrum-body-color", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" + "body-cjk-size-xs": { + "prop": "--spectrum-body-cjk-size-xs", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" }, - "dark": { - "value": "rgb(219, 219, 219)" + "mobile": { + "value": "13px" + } + }, + "body-cjk-size-xxl": { + "prop": "--spectrum-body-cjk-size-xxl", + "ref": "var(--spectrum-font-size-400)", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "body-cjk-size-xxs": { + "prop": "--spectrum-body-cjk-size-xxs", + "ref": "var(--spectrum-font-size-25)", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "body-cjk-size-xxxl": { + "prop": "--spectrum-body-cjk-size-xxxl", + "ref": "var(--spectrum-font-size-500)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "27px" + } + }, + "body-cjk-strong-emphasized-font-style": { + "prop": "--spectrum-body-cjk-strong-emphasized-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "body-cjk-strong-emphasized-font-weight": { + "prop": "--spectrum-body-cjk-strong-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "body-cjk-strong-font-style": { + "prop": "--spectrum-body-cjk-strong-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "body-cjk-strong-font-weight": { + "prop": "--spectrum-body-cjk-strong-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "body-color": { + "prop": "--spectrum-body-color", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" } }, "body-line-height": { "prop": "--spectrum-body-line-height", "ref": "var(--spectrum-line-height-200)", - "value": "1.5" + "value": 1.5 }, "body-margin-multiplier": { "prop": "--spectrum-body-margin-multiplier", - "value": "0.75" + "value": 0.75 }, "body-sans-serif-emphasized-font-style": { "prop": "--spectrum-body-sans-serif-emphasized-font-style", @@ -1335,6 +1822,16 @@ "value": "27px" } }, + "body-size-xxs": { + "prop": "--spectrum-body-size-xxs", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" + } + }, "body-size-xxxl": { "prop": "--spectrum-body-size-xxxl", "ref": "var(--spectrum-font-size-600)", @@ -1364,20 +1861,22 @@ }, "breadcrumbs-bottom-to-text": { "prop": "--spectrum-breadcrumbs-bottom-to-text", + "ref": "var(--spectrum-component-bottom-to-text-200)", "desktop": { - "value": "15px" + "value": "11px" }, "mobile": { - "value": "19px" + "value": "14px" } }, "breadcrumbs-bottom-to-text-compact": { "prop": "--spectrum-breadcrumbs-bottom-to-text-compact", + "ref": "var(--spectrum-component-bottom-to-text-100)", "desktop": { - "value": "12px" + "value": "9px" }, "mobile": { - "value": "19px" + "value": "11px" } }, "breadcrumbs-bottom-to-text-multiline": { @@ -1386,7 +1885,7 @@ "value": "9px" }, "mobile": { - "value": "10px" + "value": "11px" } }, "breadcrumbs-end-edge-to-text": { @@ -1395,22 +1894,22 @@ }, "breadcrumbs-height": { "prop": "--spectrum-breadcrumbs-height", - "ref": "var(--spectrum-component-height-300)", + "ref": "var(--spectrum-component-height-200)", "desktop": { - "value": "48px" + "value": "40px" }, "mobile": { - "value": "60px" + "value": "50px" } }, "breadcrumbs-height-compact": { "prop": "--spectrum-breadcrumbs-height-compact", - "ref": "var(--spectrum-component-height-200)", + "ref": "var(--spectrum-component-height-100)", "desktop": { - "value": "40px" + "value": "32px" }, "mobile": { - "value": "50px" + "value": "40px" } }, "breadcrumbs-height-multiline": { @@ -1419,11 +1918,21 @@ "value": "72px" }, "mobile": { - "value": "84px" + "value": "90px" } }, "breadcrumbs-separator-icon-to-bottom-text-multiline": { "prop": "--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline", + "ref": "var(--spectrum-breadcrumbs-separator-to-bottom-text-multiline)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "15px" + } + }, + "breadcrumbs-separator-to-bottom-text-multiline": { + "prop": "--spectrum-breadcrumbs-separator-to-bottom-text-multiline", "desktop": { "value": "11px" }, @@ -1433,17 +1942,72 @@ }, "breadcrumbs-start-edge-to-text": { "prop": "--spectrum-breadcrumbs-start-edge-to-text", + "ref": "var(--spectrum-breadcrumbs-start-edge-to-text-large)", "desktop": { - "value": "8px" + "value": "9px" }, "mobile": { + "value": "11px" + } + }, + "breadcrumbs-start-edge-to-text-large": { + "prop": "--spectrum-breadcrumbs-start-edge-to-text-large", + "desktop": { "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "breadcrumbs-start-edge-to-text-medium": { + "prop": "--spectrum-breadcrumbs-start-edge-to-text-medium", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "breadcrumbs-start-edge-to-text-multiline": { + "prop": "--spectrum-breadcrumbs-start-edge-to-text-multiline", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" } }, "breadcrumbs-start-edge-to-truncated-menu": { "prop": "--spectrum-breadcrumbs-start-edge-to-truncated-menu", "value": "0px" }, + "breadcrumbs-text-to-separator-large": { + "prop": "--spectrum-breadcrumbs-text-to-separator-large", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "breadcrumbs-text-to-separator-medium": { + "prop": "--spectrum-breadcrumbs-text-to-separator-medium", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "breadcrumbs-text-to-separator-multiline": { + "prop": "--spectrum-breadcrumbs-text-to-separator-multiline", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, "breadcrumbs-top-text-to-bottom-text": { "prop": "--spectrum-breadcrumbs-top-text-to-bottom-text", "desktop": { @@ -1455,24 +2019,36 @@ }, "breadcrumbs-top-to-separator-icon": { "prop": "--spectrum-breadcrumbs-top-to-separator-icon", + "ref": "var(--spectrum-breadcrumbs-top-to-separator-large)", "desktop": { - "value": "19px" + "value": "15px" }, "mobile": { - "value": "25px" + "value": "20px" } }, "breadcrumbs-top-to-separator-icon-compact": { "prop": "--spectrum-breadcrumbs-top-to-separator-icon-compact", + "ref": "var(--spectrum-breadcrumbs-top-to-separator-medium)", "desktop": { - "value": "15px" + "value": "11px" }, "mobile": { - "value": "23px" + "value": "15px" } }, "breadcrumbs-top-to-separator-icon-multiline": { "prop": "--spectrum-breadcrumbs-top-to-separator-icon-multiline", + "ref": "var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline)", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "15px" + } + }, + "breadcrumbs-top-to-separator-large": { + "prop": "--spectrum-breadcrumbs-top-to-separator-large", "desktop": { "value": "15px" }, @@ -1480,44 +2056,64 @@ "value": "20px" } }, + "breadcrumbs-top-to-separator-medium": { + "prop": "--spectrum-breadcrumbs-top-to-separator-medium", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "15px" + } + }, + "breadcrumbs-top-to-separator-multiline": { + "prop": "--spectrum-breadcrumbs-top-to-separator-multiline", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "10px" + } + }, "breadcrumbs-top-to-text": { "prop": "--spectrum-breadcrumbs-top-to-text", + "ref": "var(--spectrum-component-top-to-text-200)", "desktop": { - "value": "13px" + "value": "9px" }, "mobile": { - "value": "17px" + "value": "12px" } }, "breadcrumbs-top-to-text-compact": { "prop": "--spectrum-breadcrumbs-top-to-text-compact", + "ref": "var(--spectrum-component-top-to-text-100)", "desktop": { - "value": "11px" + "value": "6px" }, "mobile": { - "value": "16px" + "value": "8px" } }, "breadcrumbs-top-to-text-multiline": { "prop": "--spectrum-breadcrumbs-top-to-text-multiline", "desktop": { - "value": "12px" + "value": "4px" }, "mobile": { - "value": "15px" + "value": "5px" } }, "breadcrumbs-top-to-truncated-menu": { "prop": "--spectrum-breadcrumbs-top-to-truncated-menu", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } + "value": "0px" }, "breadcrumbs-top-to-truncated-menu-compact": { "prop": "--spectrum-breadcrumbs-top-to-truncated-menu-compact", + "ref": "var(--spectrum-breadcrumbs-top-to-truncated-menu)", + "value": "0px" + }, + "breadcrumbs-truncated-menu-to-bottom-text": { + "prop": "--spectrum-breadcrumbs-truncated-menu-to-bottom-text", "desktop": { "value": "4px" }, @@ -1525,12 +2121,13 @@ "value": "5px" } }, - "breadcrumbs-truncated-menu-to-bottom-text": { - "prop": "--spectrum-breadcrumbs-truncated-menu-to-bottom-text", + "breadcrumbs-truncated-menu-to-separator": { + "prop": "--spectrum-breadcrumbs-truncated-menu-to-separator", "value": "0px" }, "breadcrumbs-truncated-menu-to-separator-icon": { "prop": "--spectrum-breadcrumbs-truncated-menu-to-separator-icon", + "ref": "var(--spectrum-breadcrumbs-truncated-menu-to-separator)", "value": "0px" }, "brown-100": { @@ -1709,7 +2306,7 @@ }, "button-minimum-width-multiplier": { "prop": "--spectrum-button-minimum-width-multiplier", - "value": "2.25" + "value": 2.25 }, "card-minimum-width": { "prop": "--spectrum-card-minimum-width", @@ -2124,73 +2721,73 @@ "checkbox-control-size-extra-large": { "prop": "--spectrum-checkbox-control-size-extra-large", "desktop": { - "value": "18px" + "value": "20px" }, "mobile": { - "value": "22px" + "value": "26px" } }, "checkbox-control-size-large": { "prop": "--spectrum-checkbox-control-size-large", "desktop": { - "value": "16px" + "value": "18px" }, "mobile": { - "value": "20px" + "value": "22px" } }, "checkbox-control-size-medium": { "prop": "--spectrum-checkbox-control-size-medium", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "18px" + "value": "20px" } }, "checkbox-control-size-small": { "prop": "--spectrum-checkbox-control-size-small", "desktop": { - "value": "12px" + "value": "14px" }, "mobile": { - "value": "16px" + "value": "18px" } }, "checkbox-top-to-control-extra-large": { "prop": "--spectrum-checkbox-top-to-control-extra-large", "desktop": { - "value": "15px" + "value": "14px" }, "mobile": { - "value": "19px" + "value": "17px" } }, "checkbox-top-to-control-large": { "prop": "--spectrum-checkbox-top-to-control-large", "desktop": { - "value": "12px" + "value": "11px" }, "mobile": { - "value": "15px" + "value": "14px" } }, "checkbox-top-to-control-medium": { "prop": "--spectrum-checkbox-top-to-control-medium", "desktop": { - "value": "9px" + "value": "8px" }, "mobile": { - "value": "11px" + "value": "10px" } }, "checkbox-top-to-control-small": { "prop": "--spectrum-checkbox-top-to-control-small", "desktop": { - "value": "6px" + "value": "5px" }, "mobile": { - "value": "7px" + "value": "6px" } }, "checkmark-icon-size-100": { @@ -2517,24 +3114,73 @@ }, "cjk-letter-spacing": { "prop": "--spectrum-cjk-letter-spacing", - "value": "0.05em" + "ref": "var(--spectrum-letter-spacing)", + "value": "0em" }, "cjk-line-height-100": { "prop": "--spectrum-cjk-line-height-100", - "value": "1.5" + "value": 1.5 }, "cjk-line-height-200": { "prop": "--spectrum-cjk-line-height-200", - "value": "1.7" + "value": 1.7 + }, + "coach-indicator-collapsed-gap": { + "prop": "--spectrum-coach-indicator-collapsed-gap", + "value": "2px" + }, + "coach-indicator-collapsed-ring-rounding-increment": { + "prop": "--spectrum-coach-indicator-collapsed-ring-rounding-increment", + "value": "6px" + }, + "coach-indicator-collapsed-ring-thickness": { + "prop": "--spectrum-coach-indicator-collapsed-ring-thickness", + "value": "4px" + }, + "coach-indicator-color": { + "prop": "--spectrum-coach-indicator-color", + "ref": "var(--spectrum-blue-800)", + "light": { + "value": "rgb(75, 117, 255)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "coach-indicator-expanded-gap": { + "prop": "--spectrum-coach-indicator-expanded-gap", + "value": "6px" + }, + "coach-indicator-expanded-ring-rounding-increment": { + "prop": "--spectrum-coach-indicator-expanded-ring-rounding-increment", + "value": "14px" + }, + "coach-indicator-expanded-ring-thickness": { + "prop": "--spectrum-coach-indicator-expanded-ring-thickness", + "value": "8px" + }, + "coach-indicator-opacity": { + "prop": "--spectrum-coach-indicator-opacity", + "value": "0.2" + }, + "coach-mark-body-font-size": { + "prop": "--spectrum-coach-mark-body-font-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } }, "coach-mark-body-size": { "prop": "--spectrum-coach-mark-body-size", - "ref": "var(--spectrum-body-size-xs)", + "ref": "var(--spectrum-body-size-s)", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "15px" + "value": "17px" } }, "coach-mark-edge-to-content": { @@ -2584,6 +3230,16 @@ "value": "216px" } }, + "coach-mark-pagination-body-font-size": { + "prop": "--spectrum-coach-mark-pagination-body-font-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, "coach-mark-pagination-body-size": { "prop": "--spectrum-coach-mark-pagination-body-size", "ref": "var(--spectrum-body-size-xs)", @@ -2613,9 +3269,19 @@ "value": "22px" } }, + "coach-mark-title-font-size": { + "prop": "--spectrum-coach-mark-title-font-size", + "ref": "var(--spectrum-title-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, "coach-mark-title-size": { "prop": "--spectrum-coach-mark-title-size", - "ref": "var(--spectrum-heading-size-xxs)", + "ref": "var(--spectrum-title-size-s)", "desktop": { "value": "16px" }, @@ -2660,7 +3326,57 @@ "code-cjk-line-height": { "prop": "--spectrum-code-cjk-line-height", "ref": "var(--spectrum-cjk-line-height-200)", - "value": "1.7" + "value": 1.7 + }, + "code-cjk-size-l": { + "prop": "--spectrum-code-cjk-size-l", + "ref": "var(--spectrum-code-size-l)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "code-cjk-size-m": { + "prop": "--spectrum-code-cjk-size-m", + "ref": "var(--spectrum-code-size-m)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "19px" + } + }, + "code-cjk-size-s": { + "prop": "--spectrum-code-cjk-size-s", + "ref": "var(--spectrum-code-size-s)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "code-cjk-size-xl": { + "prop": "--spectrum-code-cjk-size-xl", + "ref": "var(--spectrum-code-size-xl)", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "code-cjk-size-xs": { + "prop": "--spectrum-code-cjk-size-xs", + "ref": "var(--spectrum-code-size-xs)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } }, "code-cjk-strong-emphasized-font-style": { "prop": "--spectrum-code-cjk-strong-emphasized-font-style", @@ -2669,8 +3385,8 @@ }, "code-cjk-strong-emphasized-font-weight": { "prop": "--spectrum-code-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" }, "code-cjk-strong-font-style": { "prop": "--spectrum-code-cjk-strong-font-style", @@ -2679,8 +3395,8 @@ }, "code-cjk-strong-font-weight": { "prop": "--spectrum-code-cjk-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" }, "code-color": { "prop": "--spectrum-code-color", @@ -2719,7 +3435,7 @@ "code-line-height": { "prop": "--spectrum-code-line-height", "ref": "var(--spectrum-line-height-200)", - "value": "1.5" + "value": 1.5 }, "code-size-l": { "prop": "--spectrum-code-size-l", @@ -2793,12 +3509,12 @@ }, "color-area-border-color": { "prop": "--spectrum-color-area-border-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, + "ref": "var(--spectrum-gray-1000)", "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" } }, "color-area-border-opacity": { @@ -2938,20 +3654,22 @@ }, "color-loupe-drop-shadow-blur": { "prop": "--spectrum-color-loupe-drop-shadow-blur", + "ref": "var(--spectrum-drop-shadow-elevated-blur)", "value": "8px" }, "color-loupe-drop-shadow-color": { "prop": "--spectrum-color-loupe-drop-shadow-color", - "ref": "var(--spectrum-transparent-black-300)", + "ref": "var(--spectrum-drop-shadow-elevated-color)", "light": { - "value": "rgba(0, 0, 0, 0.15)" + "value": "rgba(0, 0, 0, 0.16)" }, "dark": { - "value": "rgba(0, 0, 0, 0.15)" + "value": "rgba(0, 0, 0, 0.48)" } }, "color-loupe-drop-shadow-y": { "prop": "--spectrum-color-loupe-drop-shadow-y", + "ref": "var(--spectrum-drop-shadow-elevated-y)", "value": "2px" }, "color-loupe-height": { @@ -2961,12 +3679,7 @@ "color-loupe-inner-border": { "prop": "--spectrum-color-loupe-inner-border", "ref": "var(--spectrum-transparent-black-200)", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.12)" - } + "value": "rgba(0, 0, 0, 0.12)" }, "color-loupe-inner-border-width": { "prop": "--spectrum-color-loupe-inner-border-width", @@ -2975,12 +3688,7 @@ "color-loupe-outer-border": { "prop": "--spectrum-color-loupe-outer-border", "ref": "var(--spectrum-white)", - "light": { - "value": "rgb(255, 255, 255)" - }, - "dark": { - "value": "rgb(255, 255, 255)" - } + "value": "rgb(255, 255, 255)" }, "color-loupe-outer-border-width": { "prop": "--spectrum-color-loupe-outer-border-width", @@ -2993,12 +3701,12 @@ }, "color-slider-border-color": { "prop": "--spectrum-color-slider-border-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, + "ref": "var(--spectrum-gray-1000)", "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" } }, "color-slider-border-opacity": { @@ -3032,6 +3740,20 @@ "value": "100px" } }, + "color-wheel-border-color": { + "prop": "--spectrum-color-wheel-border-color", + "ref": "var(--spectrum-gray-1000)", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" + } + }, + "color-wheel-border-opacity": { + "prop": "--spectrum-color-wheel-border-opacity", + "value": "0.1" + }, "color-wheel-color-area-margin": { "prop": "--spectrum-color-wheel-color-area-margin", "value": "12px" @@ -3056,51 +3778,40 @@ }, "combo-box-minimum-width-multiplier": { "prop": "--spectrum-combo-box-minimum-width-multiplier", - "value": "2.5" + "value": 2.5 }, "combo-box-quiet-minimum-width-multiplier": { "prop": "--spectrum-combo-box-quiet-minimum-width-multiplier", - "value": "2" + "value": 2 + }, + "combo-box-visual-to-field-button": { + "prop": "--spectrum-combo-box-visual-to-field-button", + "value": "0px" }, "combo-box-visual-to-field-button-extra-large": { "prop": "--spectrum-combo-box-visual-to-field-button-extra-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } + "ref": "var(--spectrum-combo-box-visual-to-field-button)", + "value": "0px" }, "combo-box-visual-to-field-button-large": { "prop": "--spectrum-combo-box-visual-to-field-button-large", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } + "ref": "var(--spectrum-combo-box-visual-to-field-button)", + "value": "0px" }, "combo-box-visual-to-field-button-medium": { "prop": "--spectrum-combo-box-visual-to-field-button-medium", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } + "ref": "var(--spectrum-combo-box-visual-to-field-button)", + "value": "0px" }, "combo-box-visual-to-field-button-quiet": { "prop": "--spectrum-combo-box-visual-to-field-button-quiet", + "ref": "var(--spectrum-combo-box-visual-to-field-button)", "value": "0px" }, "combo-box-visual-to-field-button-small": { "prop": "--spectrum-combo-box-visual-to-field-button-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } + "ref": "var(--spectrum-combo-box-visual-to-field-button)", + "value": "0px" }, "component-bottom-to-text-100": { "prop": "--spectrum-component-bottom-to-text-100", @@ -3162,13 +3873,13 @@ "value": "15px" }, "mobile": { - "value": "18px" + "value": "19px" } }, "component-edge-to-text-300": { "prop": "--spectrum-component-edge-to-text-300", "desktop": { - "value": "17px" + "value": "18px" }, "mobile": { "value": "22px" @@ -3180,16 +3891,16 @@ "value": "8px" }, "mobile": { - "value": "11px" + "value": "10px" } }, "component-edge-to-text-75": { "prop": "--spectrum-component-edge-to-text-75", "desktop": { - "value": "10px" + "value": "9px" }, "mobile": { - "value": "13px" + "value": "11px" } }, "component-edge-to-visual-100": { @@ -3207,34 +3918,34 @@ "value": "13px" }, "mobile": { - "value": "15px" + "value": "16px" } }, "component-edge-to-visual-300": { "prop": "--spectrum-component-edge-to-visual-300", "desktop": { - "value": "14px" + "value": "15px" }, "mobile": { - "value": "20px" + "value": "19px" } }, "component-edge-to-visual-50": { "prop": "--spectrum-component-edge-to-visual-50", "desktop": { - "value": "7px" + "value": "6px" }, "mobile": { - "value": "9px" + "value": "7px" } }, "component-edge-to-visual-75": { "prop": "--spectrum-component-edge-to-visual-75", "desktop": { - "value": "8px" + "value": "7px" }, "mobile": { - "value": "11px" + "value": "9px" } }, "component-edge-to-visual-only-100": { @@ -3360,13 +4071,13 @@ "value": "20px" }, "mobile": { - "value": "24px" + "value": "25px" } }, "component-pill-edge-to-text-300": { "prop": "--spectrum-component-pill-edge-to-text-300", "desktop": { - "value": "23px" + "value": "24px" }, "mobile": { "value": "30px" @@ -3375,10 +4086,10 @@ "component-pill-edge-to-text-75": { "prop": "--spectrum-component-pill-edge-to-text-75", "desktop": { - "value": "13px" + "value": "12px" }, "mobile": { - "value": "17px" + "value": "15px" } }, "component-pill-edge-to-visual-100": { @@ -3396,25 +4107,25 @@ "value": "18px" }, "mobile": { - "value": "21px" + "value": "22px" } }, "component-pill-edge-to-visual-300": { "prop": "--spectrum-component-pill-edge-to-visual-300", "desktop": { - "value": "20px" + "value": "21px" }, "mobile": { - "value": "28px" + "value": "27px" } }, "component-pill-edge-to-visual-75": { "prop": "--spectrum-component-pill-edge-to-visual-75", "desktop": { - "value": "11px" + "value": "10px" }, "mobile": { - "value": "15px" + "value": "13px" } }, "component-pill-edge-to-visual-only-100": { @@ -3453,6 +4164,22 @@ "value": "6px" } }, + "component-size-difference-down": { + "prop": "--spectrum-component-size-difference-down", + "value": "-2px" + }, + "component-size-maximum-perspective-down": { + "prop": "--spectrum-component-size-maximum-perspective-down", + "value": "96px" + }, + "component-size-minimum-perspective-down": { + "prop": "--spectrum-component-size-minimum-perspective-down", + "value": "24px" + }, + "component-size-width-ratio-down": { + "prop": "--spectrum-component-size-width-ratio-down", + "value": 0.3333 + }, "component-to-menu-extra-large": { "prop": "--spectrum-component-to-menu-extra-large", "desktop": { @@ -3579,6 +4306,16 @@ "value": "6px" } }, + "contextual-help-body-font-size": { + "prop": "--spectrum-contextual-help-body-font-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, "contextual-help-body-size": { "prop": "--spectrum-contextual-help-body-size", "ref": "var(--spectrum-body-size-xs)", @@ -3593,9 +4330,19 @@ "prop": "--spectrum-contextual-help-minimum-width", "value": "268px" }, + "contextual-help-title-font-size": { + "prop": "--spectrum-contextual-help-title-font-size", + "ref": "var(--spectrum-title-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, "contextual-help-title-size": { "prop": "--spectrum-contextual-help-title-size", - "ref": "var(--spectrum-heading-size-xxs)", + "ref": "var(--spectrum-title-size-s)", "desktop": { "value": "16px" }, @@ -3609,15 +4356,15 @@ }, "corner-radius-100": { "prop": "--spectrum-corner-radius-100", - "value": "8px" + "value": "4px" }, "corner-radius-1000": { "prop": "--spectrum-corner-radius-1000", - "value": "0.5" + "value": 0.5 }, "corner-radius-200": { "prop": "--spectrum-corner-radius-200", - "value": "10px" + "value": "5px" }, "corner-radius-300": { "prop": "--spectrum-corner-radius-300", @@ -3641,7 +4388,7 @@ }, "corner-radius-75": { "prop": "--spectrum-corner-radius-75", - "value": "4px" + "value": "3px" }, "corner-radius-800": { "prop": "--spectrum-corner-radius-800", @@ -3655,7 +4402,7 @@ "corner-radius-full": { "prop": "--spectrum-corner-radius-full", "ref": "var(--spectrum-corner-radius-1000)", - "value": "0.5" + "value": 0.5 }, "corner-radius-large-default": { "prop": "--spectrum-corner-radius-large-default", @@ -3700,7 +4447,7 @@ "corner-radius-small-default": { "prop": "--spectrum-corner-radius-small-default", "ref": "var(--spectrum-corner-radius-100)", - "value": "8px" + "value": "4px" }, "corner-radius-small-size-extra-large": { "prop": "--spectrum-corner-radius-small-size-extra-large", @@ -3710,17 +4457,17 @@ "corner-radius-small-size-large": { "prop": "--spectrum-corner-radius-small-size-large", "ref": "var(--spectrum-corner-radius-200)", - "value": "10px" + "value": "5px" }, "corner-radius-small-size-medium": { "prop": "--spectrum-corner-radius-small-size-medium", "ref": "var(--spectrum-corner-radius-100)", - "value": "8px" + "value": "4px" }, "corner-radius-small-size-small": { "prop": "--spectrum-corner-radius-small-size-small", "ref": "var(--spectrum-corner-radius-75)", - "value": "4px" + "value": "3px" }, "corner-triangle-icon-size-100": { "prop": "--spectrum-corner-triangle-icon-size-100", @@ -4083,8 +4830,8 @@ }, "detail-cjk-emphasized-font-weight": { "prop": "--spectrum-detail-cjk-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "detail-cjk-font-family": { "prop": "--spectrum-detail-cjk-font-family", @@ -4098,8 +4845,8 @@ }, "detail-cjk-font-weight": { "prop": "--spectrum-detail-cjk-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" }, "detail-cjk-light-emphasized-font-style": { "prop": "--spectrum-detail-cjk-light-emphasized-font-style", @@ -4144,7 +4891,57 @@ "detail-cjk-line-height": { "prop": "--spectrum-detail-cjk-line-height", "ref": "var(--spectrum-cjk-line-height-100)", - "value": "1.5" + "value": 1.5 + }, + "detail-cjk-size-l": { + "prop": "--spectrum-detail-cjk-size-l", + "ref": "var(--spectrum-font-size-100)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "detail-cjk-size-m": { + "prop": "--spectrum-detail-cjk-size-m", + "ref": "var(--spectrum-font-size-75)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "detail-cjk-size-s": { + "prop": "--spectrum-detail-cjk-size-s", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" + } + }, + "detail-cjk-size-xl": { + "prop": "--spectrum-detail-cjk-size-xl", + "ref": "var(--spectrum-font-size-200)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "19px" + } + }, + "detail-cjk-size-xs": { + "prop": "--spectrum-detail-cjk-size-xs", + "ref": "var(--spectrum-font-size-25)", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } }, "detail-cjk-strong-emphasized-font-style": { "prop": "--spectrum-detail-cjk-strong-emphasized-font-style", @@ -4153,8 +4950,8 @@ }, "detail-cjk-strong-emphasized-font-weight": { "prop": "--spectrum-detail-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "detail-cjk-strong-font-style": { "prop": "--spectrum-detail-cjk-strong-font-style", @@ -4163,17 +4960,17 @@ }, "detail-cjk-strong-font-weight": { "prop": "--spectrum-detail-cjk-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "detail-color": { "prop": "--spectrum-detail-color", - "ref": "var(--spectrum-gray-900)", + "ref": "var(--spectrum-gray-600)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(113, 113, 113)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(138, 138, 138)" } }, "detail-letter-spacing": { @@ -4183,15 +4980,15 @@ "detail-line-height": { "prop": "--spectrum-detail-line-height", "ref": "var(--spectrum-line-height-100)", - "value": "1.3" + "value": 1.3 }, "detail-margin-bottom-multiplier": { "prop": "--spectrum-detail-margin-bottom-multiplier", - "value": "0.25" + "value": 0.25 }, "detail-margin-top-multiplier": { "prop": "--spectrum-detail-margin-top-multiplier", - "value": "0.88888889" + "value": 0.88888889 }, "detail-sans-serif-emphasized-font-style": { "prop": "--spectrum-detail-sans-serif-emphasized-font-style", @@ -4200,8 +4997,8 @@ }, "detail-sans-serif-emphasized-font-weight": { "prop": "--spectrum-detail-sans-serif-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-regular-font-weight)", + "value": "400" }, "detail-sans-serif-font-family": { "prop": "--spectrum-detail-sans-serif-font-family", @@ -4215,8 +5012,8 @@ }, "detail-sans-serif-font-weight": { "prop": "--spectrum-detail-sans-serif-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-medium-font-weight)", + "value": "500" }, "detail-sans-serif-light-emphasized-font-style": { "prop": "--spectrum-detail-sans-serif-light-emphasized-font-style", @@ -4289,8 +5086,8 @@ }, "detail-serif-emphasized-font-weight": { "prop": "--spectrum-detail-serif-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-medium-font-weight)", + "value": "500" }, "detail-serif-font-family": { "prop": "--spectrum-detail-serif-font-family", @@ -4304,8 +5101,8 @@ }, "detail-serif-font-weight": { "prop": "--spectrum-detail-serif-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-medium-font-weight)", + "value": "500" }, "detail-serif-light-emphasized-font-style": { "prop": "--spectrum-detail-serif-light-emphasized-font-style", @@ -4373,42 +5170,52 @@ }, "detail-size-l": { "prop": "--spectrum-detail-size-l", - "ref": "var(--spectrum-font-size-100)", + "ref": "var(--spectrum-font-size-200)", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "17px" + "value": "19px" } }, "detail-size-m": { "prop": "--spectrum-detail-size-m", - "ref": "var(--spectrum-font-size-75)", + "ref": "var(--spectrum-font-size-100)", "desktop": { - "value": "12px" + "value": "14px" }, "mobile": { - "value": "15px" + "value": "17px" } }, "detail-size-s": { "prop": "--spectrum-detail-size-s", - "ref": "var(--spectrum-font-size-50)", + "ref": "var(--spectrum-font-size-75)", "desktop": { - "value": "11px" + "value": "12px" }, "mobile": { - "value": "13px" + "value": "15px" } }, "detail-size-xl": { "prop": "--spectrum-detail-size-xl", - "ref": "var(--spectrum-font-size-200)", + "ref": "var(--spectrum-font-size-300)", "desktop": { - "value": "16px" + "value": "18px" }, "mobile": { - "value": "19px" + "value": "22px" + } + }, + "detail-size-xs": { + "prop": "--spectrum-detail-size-xs", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" } }, "disabled-background-color": { @@ -4444,62 +5251,32 @@ "disabled-static-black-background-color": { "prop": "--spectrum-disabled-static-black-background-color", "ref": "var(--spectrum-transparent-black-100)", - "light": { - "value": "rgba(0, 0, 0, 0.09)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.09)" - } + "value": "rgba(0, 0, 0, 0.09)" }, "disabled-static-black-border-color": { "prop": "--spectrum-disabled-static-black-border-color", "ref": "var(--spectrum-transparent-black-300)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } + "value": "rgba(0, 0, 0, 0.15)" }, "disabled-static-black-content-color": { "prop": "--spectrum-disabled-static-black-content-color", "ref": "var(--spectrum-transparent-black-400)", - "light": { - "value": "rgba(0, 0, 0, 0.22)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.22)" - } + "value": "rgba(0, 0, 0, 0.22)" }, "disabled-static-white-background-color": { "prop": "--spectrum-disabled-static-white-background-color", "ref": "var(--spectrum-transparent-white-100)", - "light": { - "value": "rgba(255, 255, 255, 0.11)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.11)" - } + "value": "rgba(255, 255, 255, 0.11)" }, "disabled-static-white-border-color": { "prop": "--spectrum-disabled-static-white-border-color", "ref": "var(--spectrum-transparent-white-300)", - "light": { - "value": "rgba(255, 255, 255, 0.17)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.17)" - } + "value": "rgba(255, 255, 255, 0.17)" }, "disabled-static-white-content-color": { "prop": "--spectrum-disabled-static-white-content-color", "ref": "var(--spectrum-transparent-white-400)", - "light": { - "value": "rgba(255, 255, 255, 0.21)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.21)" - } + "value": "rgba(255, 255, 255, 0.21)" }, "disclosure-indicator-top-to-disclosure-icon-extra-large": { "prop": "--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large", @@ -4537,6 +5314,10 @@ "value": "9px" } }, + "divider-horizontal-minimum-width": { + "prop": "--spectrum-divider-horizontal-minimum-width", + "value": "200px" + }, "divider-thickness-large": { "prop": "--spectrum-divider-thickness-large", "value": "4px" @@ -4549,14 +5330,26 @@ "prop": "--spectrum-divider-thickness-small", "value": "1px" }, + "divider-vertical-minimum-height": { + "prop": "--spectrum-divider-vertical-minimum-height", + "value": "200px" + }, "drop-shadow-blur": { "prop": "--spectrum-drop-shadow-blur", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "6px" - } + "ref": "var(--spectrum-drop-shadow-blur-100)", + "value": "6px" + }, + "drop-shadow-blur-100": { + "prop": "--spectrum-drop-shadow-blur-100", + "value": "6px" + }, + "drop-shadow-blur-200": { + "prop": "--spectrum-drop-shadow-blur-200", + "value": "8px" + }, + "drop-shadow-blur-300": { + "prop": "--spectrum-drop-shadow-blur-300", + "value": "16px" }, "drop-shadow-color": { "prop": "--spectrum-drop-shadow-color", @@ -4595,6 +5388,11 @@ "value": "rgba(0, 0, 0, 0.6)" } }, + "drop-shadow-dragged-blur": { + "prop": "--spectrum-drop-shadow-dragged-blur", + "ref": "var(--spectrum-drop-shadow-blur-300)", + "value": "16px" + }, "drop-shadow-dragged-color": { "prop": "--spectrum-drop-shadow-dragged-color", "ref": "var(--spectrum-drop-shadow-color-300)", @@ -4605,6 +5403,21 @@ "value": "rgba(0, 0, 0, 0.6)" } }, + "drop-shadow-dragged-x": { + "prop": "--spectrum-drop-shadow-dragged-x", + "ref": "var(--spectrum-drop-shadow-x-300)", + "value": "0px" + }, + "drop-shadow-dragged-y": { + "prop": "--spectrum-drop-shadow-dragged-y", + "ref": "var(--spectrum-drop-shadow-y-300)", + "value": "6px" + }, + "drop-shadow-elevated-blur": { + "prop": "--spectrum-drop-shadow-elevated-blur", + "ref": "var(--spectrum-drop-shadow-blur-200)", + "value": "8px" + }, "drop-shadow-elevated-color": { "prop": "--spectrum-drop-shadow-elevated-color", "ref": "var(--spectrum-drop-shadow-color-200)", @@ -4615,6 +5428,21 @@ "value": "rgba(0, 0, 0, 0.48)" } }, + "drop-shadow-elevated-x": { + "prop": "--spectrum-drop-shadow-elevated-x", + "ref": "var(--spectrum-drop-shadow-x-200)", + "value": "0px" + }, + "drop-shadow-elevated-y": { + "prop": "--spectrum-drop-shadow-elevated-y", + "ref": "var(--spectrum-drop-shadow-y-200)", + "value": "2px" + }, + "drop-shadow-emphasized-default-blur": { + "prop": "--spectrum-drop-shadow-emphasized-default-blur", + "ref": "var(--spectrum-drop-shadow-blur-100)", + "value": "6px" + }, "drop-shadow-emphasized-default-color": { "prop": "--spectrum-drop-shadow-emphasized-default-color", "ref": "var(--spectrum-drop-shadow-color-100)", @@ -4625,6 +5453,21 @@ "value": "rgba(0, 0, 0, 0.36)" } }, + "drop-shadow-emphasized-default-x": { + "prop": "--spectrum-drop-shadow-emphasized-default-x", + "ref": "var(--spectrum-drop-shadow-x-100)", + "value": "0px" + }, + "drop-shadow-emphasized-default-y": { + "prop": "--spectrum-drop-shadow-emphasized-default-y", + "ref": "var(--spectrum-drop-shadow-y-100)", + "value": "1px" + }, + "drop-shadow-emphasized-hover-blur": { + "prop": "--spectrum-drop-shadow-emphasized-hover-blur", + "ref": "var(--spectrum-drop-shadow-blur-200)", + "value": "8px" + }, "drop-shadow-emphasized-hover-color": { "prop": "--spectrum-drop-shadow-emphasized-hover-color", "ref": "var(--spectrum-drop-shadow-color-200)", @@ -4635,18 +5478,49 @@ "value": "rgba(0, 0, 0, 0.48)" } }, + "drop-shadow-emphasized-hover-x": { + "prop": "--spectrum-drop-shadow-emphasized-hover-x", + "ref": "var(--spectrum-drop-shadow-x-200)", + "value": "0px" + }, + "drop-shadow-emphasized-hover-y": { + "prop": "--spectrum-drop-shadow-emphasized-hover-y", + "ref": "var(--spectrum-drop-shadow-y-200)", + "value": "2px" + }, "drop-shadow-x": { "prop": "--spectrum-drop-shadow-x", + "ref": "var(--spectrum-drop-shadow-x-100)", + "value": "0px" + }, + "drop-shadow-x-100": { + "prop": "--spectrum-drop-shadow-x-100", + "value": "0px" + }, + "drop-shadow-x-200": { + "prop": "--spectrum-drop-shadow-x-200", + "value": "0px" + }, + "drop-shadow-x-300": { + "prop": "--spectrum-drop-shadow-x-300", "value": "0px" }, "drop-shadow-y": { "prop": "--spectrum-drop-shadow-y", - "desktop": { - "value": "1px" - }, - "mobile": { - "value": "2px" - } + "ref": "var(--spectrum-drop-shadow-y-100)", + "value": "1px" + }, + "drop-shadow-y-100": { + "prop": "--spectrum-drop-shadow-y-100", + "value": "1px" + }, + "drop-shadow-y-200": { + "prop": "--spectrum-drop-shadow-y-200", + "value": "2px" + }, + "drop-shadow-y-300": { + "prop": "--spectrum-drop-shadow-y-300", + "value": "6px" }, "drop-zone-background-color": { "prop": "--spectrum-drop-zone-background-color", @@ -4666,8 +5540,8 @@ "prop": "--spectrum-drop-zone-background-color-opacity-filled", "value": "0.3" }, - "drop-zone-body-size": { - "prop": "--spectrum-drop-zone-body-size", + "drop-zone-body-font-size": { + "prop": "--spectrum-drop-zone-body-font-size", "ref": "var(--spectrum-body-size-xs)", "desktop": { "value": "14px" @@ -4676,39 +5550,54 @@ "value": "15px" } }, + "drop-zone-body-size": { + "prop": "--spectrum-drop-zone-body-size", + "ref": "var(--spectrum-drop-zone-body-font-size)", + "value": "{drop-zone-body-font-size}" + }, "drop-zone-border-dash-gap": { "prop": "--spectrum-drop-zone-border-dash-gap", - "value": "4px" + "value": "6px" }, "drop-zone-border-dash-length": { "prop": "--spectrum-drop-zone-border-dash-length", "value": "8px" }, - "drop-zone-cjk-title-size": { - "prop": "--spectrum-drop-zone-cjk-title-size", - "ref": "var(--spectrum-heading-cjk-size-s)", + "drop-zone-cjk-title-font-size": { + "prop": "--spectrum-drop-zone-cjk-title-font-size", + "ref": "var(--spectrum-title-cjk-size-l)", "desktop": { - "value": "20px" + "value": "18px" }, "mobile": { - "value": "22px" + "value": "19px" } }, + "drop-zone-cjk-title-size": { + "prop": "--spectrum-drop-zone-cjk-title-size", + "ref": "var(--spectrum-drop-zone-cjk-title-font-size)", + "value": "{drop-zone-cjk-title-font-size}" + }, "drop-zone-content-maximum-width": { "prop": "--spectrum-drop-zone-content-maximum-width", "ref": "var(--spectrum-illustrated-message-maximum-width)", "value": "380px" }, - "drop-zone-title-size": { - "prop": "--spectrum-drop-zone-title-size", - "ref": "var(--spectrum-heading-size-s)", + "drop-zone-title-font-size": { + "prop": "--spectrum-drop-zone-title-font-size", + "ref": "var(--spectrum-title-size-l)", "desktop": { - "value": "22px" + "value": "20px" }, "mobile": { "value": "22px" } }, + "drop-zone-title-size": { + "prop": "--spectrum-drop-zone-title-size", + "ref": "var(--spectrum-drop-zone-title-font-size)", + "value": "{drop-zone-title-font-size}" + }, "drop-zone-width": { "prop": "--spectrum-drop-zone-width", "value": "428px" @@ -4718,6 +5607,42 @@ "ref": "extra-bold", "value": "800" }, + "field-default-width-extra-large": { + "prop": "--spectrum-field-default-width-extra-large", + "desktop": { + "value": "240px" + }, + "mobile": { + "value": "288px" + } + }, + "field-default-width-large": { + "prop": "--spectrum-field-default-width-large", + "desktop": { + "value": "224px" + }, + "mobile": { + "value": "272px" + } + }, + "field-default-width-medium": { + "prop": "--spectrum-field-default-width-medium", + "desktop": { + "value": "208px" + }, + "mobile": { + "value": "256px" + } + }, + "field-default-width-small": { + "prop": "--spectrum-field-default-width-small", + "desktop": { + "value": "192px" + }, + "mobile": { + "value": "240px" + } + }, "field-edge-to-alert-icon-extra-large": { "prop": "--spectrum-field-edge-to-alert-icon-extra-large", "desktop": { @@ -4960,30 +5885,15 @@ }, "field-label-top-margin-extra-large": { "prop": "--spectrum-field-label-top-margin-extra-large", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } + "value": "0px" }, "field-label-top-margin-large": { "prop": "--spectrum-field-label-top-margin-large", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } + "value": "0px" }, "field-label-top-margin-medium": { "prop": "--spectrum-field-label-top-margin-medium", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } + "value": "0px" }, "field-label-top-margin-small": { "prop": "--spectrum-field-label-top-margin-small", @@ -4992,7 +5902,7 @@ "field-label-top-to-asterisk-extra-large": { "prop": "--spectrum-field-label-top-to-asterisk-extra-large", "desktop": { - "value": "19px" + "value": "18px" }, "mobile": { "value": "24px" @@ -5172,28 +6082,28 @@ "field-top-to-progress-circle-extra-large": { "prop": "--spectrum-field-top-to-progress-circle-extra-large", "desktop": { - "value": "16px" + "value": "11px" }, "mobile": { - "value": "22px" + "value": "15px" } }, "field-top-to-progress-circle-large": { "prop": "--spectrum-field-top-to-progress-circle-large", "desktop": { - "value": "12px" + "value": "9px" }, "mobile": { - "value": "17px" + "value": "11px" } }, "field-top-to-progress-circle-medium": { "prop": "--spectrum-field-top-to-progress-circle-medium", "desktop": { - "value": "8px" + "value": "6px" }, "mobile": { - "value": "12px" + "value": "8px" } }, "field-top-to-progress-circle-small": { @@ -5202,7 +6112,7 @@ "value": "4px" }, "mobile": { - "value": "7px" + "value": "6px" } }, "field-top-to-validation-icon-extra-large": { @@ -5243,6 +6153,47 @@ }, "field-width": { "prop": "--spectrum-field-width", + "ref": "var(--spectrum-field-width-small)", + "desktop": { + "value": "192px" + }, + "mobile": { + "value": "240px" + } + }, + "field-width-extra-large": { + "prop": "--spectrum-field-width-extra-large", + "ref": "var(--spectrum-field-default-width-extra-large)", + "desktop": { + "value": "240px" + }, + "mobile": { + "value": "288px" + } + }, + "field-width-large": { + "prop": "--spectrum-field-width-large", + "ref": "var(--spectrum-field-default-width-large)", + "desktop": { + "value": "224px" + }, + "mobile": { + "value": "272px" + } + }, + "field-width-medium": { + "prop": "--spectrum-field-width-medium", + "ref": "var(--spectrum-field-default-width-medium)", + "desktop": { + "value": "208px" + }, + "mobile": { + "value": "256px" + } + }, + "field-width-small": { + "prop": "--spectrum-field-width-small", + "ref": "var(--spectrum-field-default-width-small)", "desktop": { "value": "192px" }, @@ -5257,12 +6208,7 @@ "floating-action-button-drop-shadow-color": { "prop": "--spectrum-floating-action-button-drop-shadow-color", "ref": "var(--spectrum-transparent-black-300)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } + "value": "rgba(0, 0, 0, 0.15)" }, "floating-action-button-drop-shadow-y": { "prop": "--spectrum-floating-action-button-drop-shadow-y", @@ -5271,12 +6217,7 @@ "floating-action-button-shadow-color": { "prop": "--spectrum-floating-action-button-shadow-color", "ref": "var(--spectrum-floating-action-button-drop-shadow-color)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } + "value": "rgba(0, 0, 0, 0.15)" }, "focus-indicator-color": { "prop": "--spectrum-focus-indicator-color", @@ -5326,7 +6267,7 @@ "font-size-1200": { "prop": "--spectrum-font-size-1200", "desktop": { - "value": "50px" + "value": "51px" }, "mobile": { "value": "62px" @@ -5335,13 +6276,31 @@ "font-size-1300": { "prop": "--spectrum-font-size-1300", "desktop": { - "value": "60px" + "value": "58px" }, "mobile": { "value": "70px" } }, - "font-size-200": { + "font-size-1400": { + "prop": "--spectrum-font-size-1400", + "desktop": { + "value": "65px" + }, + "mobile": { + "value": "79px" + } + }, + "font-size-1500": { + "prop": "--spectrum-font-size-1500", + "desktop": { + "value": "73px" + }, + "mobile": { + "value": "88px" + } + }, + "font-size-200": { "prop": "--spectrum-font-size-200", "desktop": { "value": "16px" @@ -5350,6 +6309,15 @@ "value": "19px" } }, + "font-size-25": { + "prop": "--spectrum-font-size-25", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, "font-size-300": { "prop": "--spectrum-font-size-300", "desktop": { @@ -5605,6 +6573,30 @@ "value": "rgb(213, 73, 235)" } }, + "gradient-stop-1-genai": { + "prop": "--spectrum-gradient-stop-1-genai", + "value": 0 + }, + "gradient-stop-1-premium": { + "prop": "--spectrum-gradient-stop-1-premium", + "value": 0 + }, + "gradient-stop-2-genai": { + "prop": "--spectrum-gradient-stop-2-genai", + "value": 0.3333 + }, + "gradient-stop-2-premium": { + "prop": "--spectrum-gradient-stop-2-premium", + "value": 0.6666 + }, + "gradient-stop-3-genai": { + "prop": "--spectrum-gradient-stop-3-genai", + "value": 1 + }, + "gradient-stop-3-premium": { + "prop": "--spectrum-gradient-stop-3-premium", + "value": 1 + }, "gray-100": { "prop": "--spectrum-gray-100", "light": { @@ -5968,8 +6960,8 @@ }, "heading-cjk-heavy-font-weight": { "prop": "--spectrum-heading-cjk-heavy-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "heading-cjk-heavy-strong-emphasized-font-style": { "prop": "--spectrum-heading-cjk-heavy-strong-emphasized-font-style", @@ -6034,7 +7026,7 @@ "heading-cjk-line-height": { "prop": "--spectrum-heading-cjk-line-height", "ref": "var(--spectrum-cjk-line-height-100)", - "value": "1.5" + "value": 1.5 }, "heading-cjk-size-l": { "prop": "--spectrum-heading-cjk-size-l", @@ -6088,12 +7080,12 @@ }, "heading-cjk-size-xxl": { "prop": "--spectrum-heading-cjk-size-xxl", - "ref": "var(--spectrum-font-size-900)", + "ref": "var(--spectrum-font-size-1000)", "desktop": { - "value": "36px" + "value": "40px" }, "mobile": { - "value": "44px" + "value": "49px" } }, "heading-cjk-size-xxs": { @@ -6108,12 +7100,22 @@ }, "heading-cjk-size-xxxl": { "prop": "--spectrum-heading-cjk-size-xxxl", - "ref": "var(--spectrum-font-size-1300)", + "ref": "var(--spectrum-font-size-1200)", "desktop": { - "value": "60px" + "value": "51px" }, "mobile": { - "value": "70px" + "value": "62px" + } + }, + "heading-cjk-size-xxxxl": { + "prop": "--spectrum-heading-cjk-size-xxxxl", + "ref": "var(--spectrum-font-size-1400)", + "desktop": { + "value": "65px" + }, + "mobile": { + "value": "79px" } }, "heading-cjk-strong-emphasized-font-style": { @@ -6149,15 +7151,15 @@ "heading-line-height": { "prop": "--spectrum-heading-line-height", "ref": "var(--spectrum-line-height-100)", - "value": "1.3" + "value": 1.3 }, "heading-margin-bottom-multiplier": { "prop": "--spectrum-heading-margin-bottom-multiplier", - "value": "0.25" + "value": 0.25 }, "heading-margin-top-multiplier": { "prop": "--spectrum-heading-margin-top-multiplier", - "value": "0.88888889" + "value": 0.88888889 }, "heading-sans-serif-emphasized-font-style": { "prop": "--spectrum-heading-sans-serif-emphasized-font-style", @@ -6166,8 +7168,8 @@ }, "heading-sans-serif-emphasized-font-weight": { "prop": "--spectrum-heading-sans-serif-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "heading-sans-serif-font-family": { "prop": "--spectrum-heading-sans-serif-font-family", @@ -6181,8 +7183,8 @@ }, "heading-sans-serif-font-weight": { "prop": "--spectrum-heading-sans-serif-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "heading-sans-serif-heavy-emphasized-font-style": { "prop": "--spectrum-heading-sans-serif-heavy-emphasized-font-style", @@ -6431,12 +7433,12 @@ }, "heading-size-s": { "prop": "--spectrum-heading-size-s", - "ref": "var(--spectrum-font-size-300)", + "ref": "var(--spectrum-font-size-400)", "desktop": { - "value": "18px" + "value": "20px" }, "mobile": { - "value": "22px" + "value": "24px" } }, "heading-size-xl": { @@ -6451,12 +7453,12 @@ }, "heading-size-xs": { "prop": "--spectrum-heading-size-xs", - "ref": "var(--spectrum-font-size-200)", + "ref": "var(--spectrum-font-size-300)", "desktop": { - "value": "16px" + "value": "18px" }, "mobile": { - "value": "19px" + "value": "22px" } }, "heading-size-xxl": { @@ -6483,50 +7485,74 @@ "prop": "--spectrum-heading-size-xxxl", "ref": "var(--spectrum-font-size-1300)", "desktop": { - "value": "60px" + "value": "58px" }, "mobile": { "value": "70px" } }, + "heading-size-xxxxl": { + "prop": "--spectrum-heading-size-xxxxl", + "ref": "var(--spectrum-font-size-1500)", + "desktop": { + "value": "73px" + }, + "mobile": { + "value": "88px" + } + }, "help-text-to-component": { "prop": "--spectrum-help-text-to-component", "value": "0px" }, "help-text-top-to-workflow-icon-extra-large": { "prop": "--spectrum-help-text-top-to-workflow-icon-extra-large", + "ref": "var(--spectrum-component-top-to-workflow-icon-300)", "desktop": { - "value": "9px" + "value": "11px" }, "mobile": { - "value": "11px" + "value": "15px" } }, "help-text-top-to-workflow-icon-large": { "prop": "--spectrum-help-text-top-to-workflow-icon-large", + "ref": "var(--spectrum-component-top-to-workflow-icon-200)", "desktop": { - "value": "6px" + "value": "9px" }, "mobile": { - "value": "8px" + "value": "11px" } }, "help-text-top-to-workflow-icon-medium": { "prop": "--spectrum-help-text-top-to-workflow-icon-medium", + "ref": "var(--spectrum-component-top-to-workflow-icon-100)", "desktop": { - "value": "3px" + "value": "6px" }, "mobile": { - "value": "4px" + "value": "8px" } }, "help-text-top-to-workflow-icon-small": { "prop": "--spectrum-help-text-top-to-workflow-icon-small", + "ref": "var(--spectrum-component-top-to-workflow-icon-75)", "desktop": { "value": "4px" }, "mobile": { - "value": "5px" + "value": "6px" + } + }, + "icon-color-blue-background": { + "prop": "--spectrum-icon-color-blue-background", + "ref": "var(--spectrum-blue-300)", + "light": { + "value": "rgb(229, 240, 254)" + }, + "dark": { + "value": "rgb(12, 33, 117)" } }, "icon-color-blue-primary-default": { @@ -6539,3189 +7565,5614 @@ "value": "rgb(64, 105, 253)" } }, - "icon-color-green-primary-default": { - "prop": "--spectrum-icon-color-green-primary-default", - "ref": "var(--spectrum-green-800)", + "icon-color-blue-primary-down": { + "prop": "--spectrum-icon-color-blue-primary-down", + "ref": "var(--spectrum-blue-1000)", "light": { - "value": "rgb(5, 131, 78)" + "value": "rgb(29, 62, 207)" }, "dark": { - "value": "rgb(6, 136, 80)" + "value": "rgb(105, 149, 254)" } }, - "icon-color-inverse": { - "prop": "--spectrum-icon-color-inverse", - "ref": "var(--spectrum-gray-50)", + "icon-color-blue-primary-hover": { + "prop": "--spectrum-icon-color-blue-primary-hover", + "ref": "var(--spectrum-blue-900)", "light": { - "value": "rgb(248, 248, 248)" + "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(27, 27, 27)" + "value": "rgb(86, 129, 255)" } }, - "icon-color-primary-default": { - "prop": "--spectrum-icon-color-primary-default", - "ref": "var(--spectrum-neutral-content-color-default)", + "icon-color-brown-background": { + "prop": "--spectrum-icon-color-brown-background", + "ref": "var(--spectrum-brown-400)", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(247, 238, 225)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(78, 55, 19)" } }, - "icon-color-red-primary-default": { - "prop": "--spectrum-icon-color-red-primary-default", - "ref": "var(--spectrum-red-700)", + "icon-color-brown-primary-default": { + "prop": "--spectrum-icon-color-brown-primary-default", + "ref": "var(--spectrum-brown-700)", "light": { - "value": "rgb(215, 50, 32)" + "value": "rgb(154, 123, 77)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(132, 104, 61)" } }, - "icon-color-yellow-primary-default": { - "prop": "--spectrum-icon-color-yellow-primary-default", - "ref": "var(--spectrum-yellow-1000)", + "icon-color-brown-primary-down": { + "prop": "--spectrum-icon-color-brown-primary-down", + "ref": "var(--spectrum-brown-900)", "light": { - "value": "rgb(245, 199, 0)" + "value": "rgb(119, 91, 50)" }, "dark": { - "value": "rgb(203, 141, 0)" + "value": "rgb(163, 132, 84)" } }, - "illustrated-message-body-size": { - "prop": "--spectrum-illustrated-message-body-size", - "ref": "var(--spectrum-body-size-xs)", - "desktop": { - "value": "14px" + "icon-color-brown-primary-hover": { + "prop": "--spectrum-icon-color-brown-primary-hover", + "ref": "var(--spectrum-brown-800)", + "light": { + "value": "rgb(139, 109, 66)" }, - "mobile": { - "value": "15px" + "dark": { + "value": "rgb(143, 114, 69)" } }, - "illustrated-message-cjk-title-size": { - "prop": "--spectrum-illustrated-message-cjk-title-size", - "ref": "var(--spectrum-heading-cjk-size-s)", - "desktop": { - "value": "20px" + "icon-color-celery-background": { + "prop": "--spectrum-icon-color-celery-background", + "ref": "var(--spectrum-celery-400)", + "light": { + "value": "rgb(235, 255, 220)" }, - "mobile": { - "value": "22px" + "dark": { + "value": "rgb(31, 67, 4)" } }, - "illustrated-message-maximum-width": { - "prop": "--spectrum-illustrated-message-maximum-width", - "value": "380px" - }, - "illustrated-message-title-size": { - "prop": "--spectrum-illustrated-message-title-size", - "ref": "var(--spectrum-heading-size-s)", - "desktop": { - "value": "22px" + "icon-color-celery-primary-default": { + "prop": "--spectrum-icon-color-celery-primary-default", + "ref": "var(--spectrum-celery-900)", + "light": { + "value": "rgb(82, 161, 25)" }, - "mobile": { - "value": "22px" + "dark": { + "value": "rgb(78, 154, 23)" } }, - "in-field-button-edge-to-disclosure-icon-stacked-extra-large": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large", - "value": "16px" - }, - "in-field-button-edge-to-disclosure-icon-stacked-large": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large", - "value": "13px" + "icon-color-celery-primary-down": { + "prop": "--spectrum-icon-color-celery-primary-down", + "ref": "var(--spectrum-celery-1100)", + "light": { + "value": "rgb(64, 129, 17)" + }, + "dark": { + "value": "rgb(100, 190, 35)" + } }, - "in-field-button-edge-to-disclosure-icon-stacked-medium": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium", - "value": "9px" + "icon-color-celery-primary-hover": { + "prop": "--spectrum-icon-color-celery-primary-hover", + "ref": "var(--spectrum-celery-1000)", + "light": { + "value": "rgb(72, 144, 20)" + }, + "dark": { + "value": "rgb(88, 172, 28)" + } }, - "in-field-button-edge-to-disclosure-icon-stacked-small": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small", - "value": "7px" + "icon-color-chartreuse-background": { + "prop": "--spectrum-icon-color-chartreuse-background", + "ref": "var(--spectrum-chartreuse-400)", + "light": { + "value": "rgb(234, 246, 173)" + }, + "dark": { + "value": "rgb(53, 63, 0)" + } }, - "in-field-button-edge-to-fill": { - "prop": "--spectrum-in-field-button-edge-to-fill", - "value": "0px" + "icon-color-chartreuse-primary-default": { + "prop": "--spectrum-icon-color-chartreuse-primary-default", + "ref": "var(--spectrum-chartreuse-1000)", + "light": { + "value": "rgb(143, 172, 0)" + }, + "dark": { + "value": "rgb(136, 164, 0)" + } }, - "in-field-button-fill-stacked-inner-border-rounding": { - "prop": "--spectrum-in-field-button-fill-stacked-inner-border-rounding", - "value": "0px" + "icon-color-chartreuse-primary-down": { + "prop": "--spectrum-icon-color-chartreuse-primary-down", + "ref": "var(--spectrum-chartreuse-1200)", + "light": { + "value": "rgb(114, 137, 0)" + }, + "dark": { + "value": "rgb(169, 203, 0)" + } }, - "in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large": { - "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large", - "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large)", - "value": "5px" + "icon-color-chartreuse-primary-hover": { + "prop": "--spectrum-icon-color-chartreuse-primary-hover", + "ref": "var(--spectrum-chartreuse-1100)", + "light": { + "value": "rgb(128, 153, 0)" + }, + "dark": { + "value": "rgb(151, 181, 0)" + } }, - "in-field-button-inner-edge-to-disclosure-icon-stacked-large": { - "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large", - "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large)", - "value": "4px" + "icon-color-cinnamon-background": { + "prop": "--spectrum-icon-color-cinnamon-background", + "ref": "var(--spectrum-cinnamon-300)", + "light": { + "value": "rgb(249, 236, 229)" + }, + "dark": { + "value": "rgb(79, 28, 7)" + } }, - "in-field-button-inner-edge-to-disclosure-icon-stacked-medium": { - "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium", - "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium)", - "value": "3px" + "icon-color-cinnamon-primary-default": { + "prop": "--spectrum-icon-color-cinnamon-primary-default", + "ref": "var(--spectrum-cinnamon-800)", + "dark": { + "value": "rgb(176, 98, 59)" + }, + "light": { + "value": "rgb(184, 109, 70)" + } }, - "in-field-button-inner-edge-to-disclosure-icon-stacked-small": { - "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small", - "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small)", - "value": "3px" + "icon-color-cinnamon-primary-down": { + "prop": "--spectrum-icon-color-cinnamon-primary-down", + "ref": "var(--spectrum-cinnamon-1000)", + "dark": { + "value": "rgb(206, 136, 99)" + }, + "light": { + "value": "rgb(147, 77, 43)" + } }, - "in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large": { - "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large", - "value": "5px" - }, - "in-field-button-outer-edge-to-disclosure-icon-stacked-large": { - "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large", - "value": "4px" - }, - "in-field-button-outer-edge-to-disclosure-icon-stacked-medium": { - "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium", - "value": "3px" - }, - "in-field-button-outer-edge-to-disclosure-icon-stacked-small": { - "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small", - "value": "3px" - }, - "in-field-button-stacked-inner-edge-to-fill": { - "prop": "--spectrum-in-field-button-stacked-inner-edge-to-fill", - "value": "0px" - }, - "in-field-button-width-stacked-extra-large": { - "prop": "--spectrum-in-field-button-width-stacked-extra-large", - "value": "44px" - }, - "in-field-button-width-stacked-large": { - "prop": "--spectrum-in-field-button-width-stacked-large", - "value": "36px" - }, - "in-field-button-width-stacked-medium": { - "prop": "--spectrum-in-field-button-width-stacked-medium", - "value": "28px" - }, - "in-field-button-width-stacked-small": { - "prop": "--spectrum-in-field-button-width-stacked-small", - "value": "20px" - }, - "in-line-alert-minimum-width": { - "prop": "--spectrum-in-line-alert-minimum-width", - "value": "240px" - }, - "indigo-100": { - "prop": "--spectrum-indigo-100", - "light": { - "value": "rgb(247, 248, 255)" - }, + "icon-color-cinnamon-primary-hover": { + "prop": "--spectrum-icon-color-cinnamon-primary-hover", + "ref": "var(--spectrum-cinnamon-900)", "dark": { - "value": "rgb(30, 0, 93)" + "value": "rgb(192, 119, 80)" + }, + "light": { + "value": "rgb(170, 94, 56)" } }, - "indigo-1000": { - "prop": "--spectrum-indigo-1000", + "icon-color-cyan-background": { + "prop": "--spectrum-icon-color-cyan-background", + "ref": "var(--spectrum-cyan-400)", "light": { - "value": "rgb(99, 56, 238)" + "value": "rgb(238, 250, 254)" }, "dark": { - "value": "rgb(139, 141, 254)" + "value": "rgb(0, 64, 88)" } }, - "indigo-1100": { - "prop": "--spectrum-indigo-1100", + "icon-color-cyan-primary-default": { + "prop": "--spectrum-icon-color-cyan-primary-default", + "ref": "var(--spectrum-cyan-800)", "light": { - "value": "rgb(84, 36, 219)" + "value": "rgb(18, 134, 205)" }, "dark": { - "value": "rgb(153, 161, 255)" + "value": "rgb(13, 125, 186)" } }, - "indigo-1200": { - "prop": "--spectrum-indigo-1200", + "icon-color-cyan-primary-down": { + "prop": "--spectrum-icon-color-cyan-primary-down", + "ref": "var(--spectrum-cyan-1000)", "light": { - "value": "rgb(69, 19, 191)" + "value": "rgb(4, 102, 145)" }, "dark": { - "value": "rgb(176, 186, 255)" + "value": "rgb(38, 159, 244)" } }, - "indigo-1300": { - "prop": "--spectrum-indigo-1300", + "icon-color-cyan-primary-hover": { + "prop": "--spectrum-icon-color-cyan-primary-hover", + "ref": "var(--spectrum-cyan-900)", "light": { - "value": "rgb(55, 6, 160)" + "value": "rgb(11, 120, 179)" }, "dark": { - "value": "rgb(199, 208, 255)" + "value": "rgb(24, 142, 220)" } }, - "indigo-1400": { - "prop": "--spectrum-indigo-1400", + "icon-color-disabled-primary": { + "prop": "--spectrum-icon-color-disabled-primary", + "ref": "var(--spectrum-gray-400)", "light": { - "value": "rgb(42, 0, 129)" + "value": "rgb(198, 198, 198)" }, "dark": { - "value": "rgb(223, 228, 255)" + "value": "rgb(68, 68, 68)" } }, - "indigo-1500": { - "prop": "--spectrum-indigo-1500", - "dark": { - "value": "rgb(243, 244, 255)" - }, + "icon-color-emphasized-background": { + "prop": "--spectrum-icon-color-emphasized-background", + "ref": "var(--spectrum-gray-900)", "light": { - "value": "rgb(31, 0, 98)" - } - }, - "indigo-1600": { - "prop": "--spectrum-indigo-1600", - "dark": { - "value": "rgb(255, 255, 255)" + "value": "rgb(19, 19, 19)" }, - "light": { - "value": "rgb(17, 0, 54)" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "indigo-200": { - "prop": "--spectrum-indigo-200", + "icon-color-fuchsia-background": { + "prop": "--spectrum-icon-color-fuchsia-background", + "ref": "var(--spectrum-fuchsia-200)", "light": { - "value": "rgb(235, 238, 255)" + "value": "rgb(253, 233, 255)" }, "dark": { - "value": "rgb(35, 0, 110)" + "value": "rgb(61, 0, 74)" } }, - "indigo-300": { - "prop": "--spectrum-indigo-300", + "icon-color-fuchsia-primary-default": { + "prop": "--spectrum-icon-color-fuchsia-primary-default", + "ref": "var(--spectrum-fuchsia-700)", "light": { - "value": "rgb(216, 222, 255)" + "value": "rgb(181, 57, 200)" }, "dark": { - "value": "rgb(47, 0, 140)" + "value": "rgb(173, 51, 192)" } }, - "indigo-400": { - "prop": "--spectrum-indigo-400", + "icon-color-fuchsia-primary-down": { + "prop": "--spectrum-icon-color-fuchsia-primary-down", + "ref": "var(--spectrum-fuchsia-900)", "light": { - "value": "rgb(192, 201, 255)" + "value": "rgb(135, 27, 154)" }, "dark": { - "value": "rgb(62, 12, 174)" + "value": "rgb(213, 73, 235)" } }, - "indigo-500": { - "prop": "--spectrum-indigo-500", + "icon-color-fuchsia-primary-hover": { + "prop": "--spectrum-icon-color-fuchsia-primary-hover", + "ref": "var(--spectrum-fuchsia-800)", "light": { - "value": "rgb(167, 178, 255)" + "value": "rgb(156, 40, 175)" }, "dark": { - "value": "rgb(79, 30, 209)" + "value": "rgb(186, 60, 206)" } }, - "indigo-600": { - "prop": "--spectrum-indigo-600", + "icon-color-green-background": { + "prop": "--spectrum-icon-color-green-background", + "ref": "var(--spectrum-green-400)", "light": { - "value": "rgb(145, 151, 254)" + "value": "rgb(237, 252, 241)" }, "dark": { - "value": "rgb(95, 52, 235)" + "value": "rgb(0, 68, 48)" } }, - "indigo-700": { - "prop": "--spectrum-indigo-700", + "icon-color-green-primary-default": { + "prop": "--spectrum-icon-color-green-primary-default", + "ref": "var(--spectrum-green-800)", "light": { - "value": "rgb(132, 128, 254)" + "value": "rgb(7, 147, 85)" }, "dark": { - "value": "rgb(109, 75, 248)" + "value": "rgb(6, 136, 80)" } }, - "indigo-800": { - "prop": "--spectrum-indigo-800", + "icon-color-green-primary-down": { + "prop": "--spectrum-icon-color-green-primary-down", + "ref": "var(--spectrum-green-1000)", "light": { - "value": "rgb(122, 106, 253)" + "value": "rgb(3, 110, 69)" }, "dark": { - "value": "rgb(116, 91, 252)" + "value": "rgb(14, 175, 98)" } }, - "indigo-900": { - "prop": "--spectrum-indigo-900", + "icon-color-green-primary-hover": { + "prop": "--spectrum-icon-color-green-primary-hover", + "ref": "var(--spectrum-green-900)", "light": { - "value": "rgb(113, 85, 250)" + "value": "rgb(5, 131, 78)" }, "dark": { - "value": "rgb(128, 119, 254)" + "value": "rgb(9, 157, 89)" } }, - "indigo-background-color-default": { - "prop": "--spectrum-indigo-background-color-default", - "ref": "var(--spectrum-indigo-800)", + "icon-color-indigo-background": { + "prop": "--spectrum-icon-color-indigo-background", + "ref": "var(--spectrum-indigo-100)", "light": { - "value": "rgb(113, 85, 250)" + "value": "rgb(235, 238, 255)" }, "dark": { - "value": "rgb(116, 91, 252)" + "value": "rgb(30, 0, 93)" } }, - "indigo-subtle-background-color-default": { - "prop": "--spectrum-indigo-subtle-background-color-default", - "ref": "var(--spectrum-indigo-300)", + "icon-color-indigo-primary-default": { + "prop": "--spectrum-icon-color-indigo-primary-default", + "ref": "var(--spectrum-indigo-700)", "light": { - "value": "rgb(235, 238, 255)" + "value": "rgb(113, 85, 250)" }, "dark": { - "value": "rgb(47, 0, 140)" + "value": "rgb(109, 75, 248)" } }, - "indigo-visual-color": { - "prop": "--spectrum-indigo-visual-color", + "icon-color-indigo-primary-down": { + "prop": "--spectrum-icon-color-indigo-primary-down", "ref": "var(--spectrum-indigo-900)", "light": { - "value": "rgb(122, 106, 253)" + "value": "rgb(84, 36, 219)" }, "dark": { "value": "rgb(128, 119, 254)" } }, - "informative-background-color-default": { - "prop": "--spectrum-informative-background-color-default", - "ref": "var(--spectrum-informative-color-800)", + "icon-color-indigo-primary-hover": { + "prop": "--spectrum-icon-color-indigo-primary-hover", + "ref": "var(--spectrum-indigo-800)", "light": { - "value": "rgb(59, 99, 251)" + "value": "rgb(99, 56, 238)" }, "dark": { - "value": "rgb(64, 105, 253)" + "value": "rgb(116, 91, 252)" } }, - "informative-background-color-down": { - "prop": "--spectrum-informative-background-color-down", - "ref": "var(--spectrum-informative-color-700)", + "icon-color-informative": { + "prop": "--spectrum-icon-color-informative", + "ref": "var(--spectrum-informative-color-900)", "light": { - "value": "rgb(39, 77, 234)" + "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(86, 129, 255)" } }, - "informative-background-color-hover": { - "prop": "--spectrum-informative-background-color-hover", - "ref": "var(--spectrum-informative-color-700)", + "icon-color-inverse": { + "prop": "--spectrum-icon-color-inverse", + "ref": "var(--spectrum-gray-50)", "light": { - "value": "rgb(39, 77, 234)" + "value": "rgb(248, 248, 248)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(27, 27, 27)" } }, - "informative-background-color-key-focus": { - "prop": "--spectrum-informative-background-color-key-focus", - "ref": "var(--spectrum-informative-color-700)", + "icon-color-inverse-background": { + "prop": "--spectrum-icon-color-inverse-background", + "ref": "var(--spectrum-gray-50)", "light": { - "value": "rgb(39, 77, 234)" + "value": "rgb(248, 248, 248)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(27, 27, 27)" } }, - "informative-color-100": { - "prop": "--spectrum-informative-color-100", - "ref": "var(--spectrum-blue-100)", + "icon-color-magenta-background": { + "prop": "--spectrum-icon-color-magenta-background", + "ref": "var(--spectrum-magenta-200)", "light": { - "value": "rgb(245, 249, 255)" + "value": "rgb(255, 232, 240)" }, "dark": { - "value": "rgb(14, 23, 63)" + "value": "rgb(74, 0, 27)" } }, - "informative-color-1000": { - "prop": "--spectrum-informative-color-1000", - "ref": "var(--spectrum-blue-1000)", + "icon-color-magenta-primary-default": { + "prop": "--spectrum-icon-color-magenta-primary-default", + "ref": "var(--spectrum-magenta-700)", "light": { - "value": "rgb(39, 77, 234)" + "value": "rgb(217, 35, 97)" }, "dark": { - "value": "rgb(105, 149, 254)" + "value": "rgb(207, 31, 92)" } }, - "informative-color-1100": { - "prop": "--spectrum-informative-color-1100", - "ref": "var(--spectrum-blue-1100)", + "icon-color-magenta-primary-down": { + "prop": "--spectrum-icon-color-magenta-primary-down", + "ref": "var(--spectrum-magenta-900)", "light": { - "value": "rgb(29, 62, 207)" + "value": "rgb(163, 5, 62)" }, "dark": { - "value": "rgb(124, 169, 252)" + "value": "rgb(255, 51, 119)" } }, - "informative-color-1200": { - "prop": "--spectrum-informative-color-1200", - "ref": "var(--spectrum-blue-1200)", + "icon-color-magenta-primary-hover": { + "prop": "--spectrum-icon-color-magenta-primary-hover", + "ref": "var(--spectrum-magenta-800)", "light": { - "value": "rgb(21, 50, 173)" + "value": "rgb(186, 22, 80)" }, "dark": { - "value": "rgb(152, 192, 252)" + "value": "rgb(224, 38, 101)" } }, - "informative-color-1300": { - "prop": "--spectrum-informative-color-1300", - "ref": "var(--spectrum-blue-1300)", + "icon-color-negative": { + "prop": "--spectrum-icon-color-negative", + "ref": "var(--spectrum-negative-color-900)", "light": { - "value": "rgb(16, 40, 140)" + "value": "rgb(240, 56, 35)" }, "dark": { - "value": "rgb(181, 213, 253)" + "value": "rgb(252, 67, 46)" } }, - "informative-color-1400": { - "prop": "--spectrum-informative-color-1400", - "ref": "var(--spectrum-blue-1400)", + "icon-color-neutral": { + "prop": "--spectrum-icon-color-neutral", + "ref": "var(--spectrum-gray-600)", "light": { - "value": "rgb(12, 31, 105)" + "value": "rgb(143, 143, 143)" }, "dark": { - "value": "rgb(213, 231, 254)" + "value": "rgb(138, 138, 138)" } }, - "informative-color-1500": { - "prop": "--spectrum-informative-color-1500", - "ref": "var(--spectrum-blue-1500)", - "dark": { - "value": "rgb(238, 245, 255)" - }, + "icon-color-notice": { + "prop": "--spectrum-icon-color-notice", + "ref": "var(--spectrum-notice-color-900)", "light": { - "value": "rgb(14, 24, 67)" - } - }, - "informative-color-1600": { - "prop": "--spectrum-informative-color-1600", - "ref": "var(--spectrum-blue-1600)", - "dark": { - "value": "rgb(255, 255, 255)" + "value": "rgb(212, 91, 0)" }, - "light": { - "value": "rgb(7, 11, 30)" + "dark": { + "value": "rgb(224, 100, 0)" } }, - "informative-color-200": { - "prop": "--spectrum-informative-color-200", - "ref": "var(--spectrum-blue-200)", + "icon-color-orange-background": { + "prop": "--spectrum-icon-color-orange-background", + "ref": "var(--spectrum-orange-300)", "light": { - "value": "rgb(229, 240, 254)" + "value": "rgb(255, 236, 207)" }, "dark": { - "value": "rgb(15, 28, 82)" + "value": "rgb(80, 27, 0)" } }, - "informative-color-300": { - "prop": "--spectrum-informative-color-300", - "ref": "var(--spectrum-blue-300)", + "icon-color-orange-primary-default": { + "prop": "--spectrum-icon-color-orange-primary-default", + "ref": "var(--spectrum-orange-900)", "light": { - "value": "rgb(203, 226, 254)" + "value": "rgb(232, 106, 0)" }, "dark": { - "value": "rgb(12, 33, 117)" + "value": "rgb(224, 100, 0)" } }, - "informative-color-400": { - "prop": "--spectrum-informative-color-400", - "ref": "var(--spectrum-blue-400)", + "icon-color-orange-primary-down": { + "prop": "--spectrum-icon-color-orange-primary-down", + "ref": "var(--spectrum-orange-1100)", "light": { - "value": "rgb(172, 207, 253)" + "value": "rgb(194, 78, 0)" }, "dark": { - "value": "rgb(18, 45, 154)" + "value": "rgb(255, 137, 0)" } }, - "informative-color-500": { - "prop": "--spectrum-informative-color-500", - "ref": "var(--spectrum-blue-500)", + "icon-color-orange-primary-hover": { + "prop": "--spectrum-icon-color-orange-primary-hover", + "ref": "var(--spectrum-orange-1000)", "light": { - "value": "rgb(142, 185, 252)" + "value": "rgb(212, 91, 0)" }, "dark": { - "value": "rgb(26, 58, 195)" + "value": "rgb(243, 117, 0)" } }, - "informative-color-600": { - "prop": "--spectrum-informative-color-600", - "ref": "var(--spectrum-blue-600)", - "light": { - "value": "rgb(114, 158, 253)" - }, + "icon-color-pink-background": { + "prop": "--spectrum-icon-color-pink-background", + "ref": "var(--spectrum-pink-200)", "dark": { - "value": "rgb(37, 73, 229)" + "value": "rgb(71, 0, 44)" + }, + "light": { + "value": "rgb(255, 232, 247)" } }, - "informative-color-700": { - "prop": "--spectrum-informative-color-700", - "ref": "var(--spectrum-blue-700)", + "icon-color-pink-primary-default": { + "prop": "--spectrum-icon-color-pink-primary-default", + "ref": "var(--spectrum-pink-700)", "light": { - "value": "rgb(93, 137, 255)" + "value": "rgb(228, 52, 163)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(196, 39, 138)" } }, - "informative-color-800": { - "prop": "--spectrum-informative-color-800", - "ref": "var(--spectrum-blue-800)", + "icon-color-pink-primary-down": { + "prop": "--spectrum-icon-color-pink-primary-down", + "ref": "var(--spectrum-pink-900)", "light": { - "value": "rgb(75, 117, 255)" + "value": "rgb(176, 31, 123)" }, "dark": { - "value": "rgb(64, 105, 253)" + "value": "rgb(236, 67, 175)" } }, - "informative-color-900": { - "prop": "--spectrum-informative-color-900", - "ref": "var(--spectrum-blue-900)", + "icon-color-pink-primary-hover": { + "prop": "--spectrum-icon-color-pink-primary-hover", + "ref": "var(--spectrum-pink-800)", "light": { - "value": "rgb(59, 99, 251)" + "value": "rgb(206, 42, 146)" }, "dark": { - "value": "rgb(86, 129, 255)" + "value": "rgb(213, 45, 151)" } }, - "informative-subtle-background-color-default": { - "prop": "--spectrum-informative-subtle-background-color-default", - "ref": "var(--spectrum-informative-color-300)", + "icon-color-positive": { + "prop": "--spectrum-icon-color-positive", + "ref": "var(--spectrum-positive-color-900)", "light": { - "value": "rgb(229, 240, 254)" + "value": "rgb(7, 147, 85)" }, "dark": { - "value": "rgb(12, 33, 117)" + "value": "rgb(9, 157, 89)" } }, - "informative-visual-color": { - "prop": "--spectrum-informative-visual-color", - "ref": "var(--spectrum-informative-color-900)", + "icon-color-primary-default": { + "prop": "--spectrum-icon-color-primary-default", + "ref": "var(--spectrum-neutral-content-color-default)", "light": { - "value": "rgb(75, 117, 255)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(86, 129, 255)" + "value": "rgb(219, 219, 219)" } }, - "italic-font-style": { - "prop": "--spectrum-italic-font-style", - "value": "italic" - }, - "light-font-weight": { - "prop": "--spectrum-light-font-weight", - "ref": "light", - "value": "300" - }, - "line-height-100": { - "prop": "--spectrum-line-height-100", - "value": "1.3" - }, - "line-height-200": { - "prop": "--spectrum-line-height-200", - "value": "1.5" - }, - "magenta-100": { - "prop": "--spectrum-magenta-100", + "icon-color-primary-down": { + "prop": "--spectrum-icon-color-primary-down", + "ref": "var(--spectrum-neutral-content-color-down)", "light": { - "value": "rgb(255, 245, 248)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(59, 0, 22)" + "value": "rgb(242, 242, 242)" } }, - "magenta-1000": { - "prop": "--spectrum-magenta-1000", + "icon-color-primary-hover": { + "prop": "--spectrum-icon-color-primary-hover", + "ref": "var(--spectrum-neutral-content-color-hover)", "light": { - "value": "rgb(186, 22, 80)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(255, 96, 149)" + "value": "rgb(242, 242, 242)" } }, - "magenta-1100": { - "prop": "--spectrum-magenta-1100", + "icon-color-purple-background": { + "prop": "--spectrum-icon-color-purple-background", + "ref": "var(--spectrum-purple-200)", "light": { - "value": "rgb(163, 5, 62)" + "value": "rgb(244, 235, 252)" }, "dark": { - "value": "rgb(255, 128, 171)" + "value": "rgb(50, 0, 96)" } }, - "magenta-1200": { - "prop": "--spectrum-magenta-1200", + "icon-color-purple-primary-default": { + "prop": "--spectrum-icon-color-purple-primary-default", + "ref": "var(--spectrum-purple-700)", "light": { - "value": "rgb(136, 0, 51)" + "value": "rgb(154, 71, 226)" }, "dark": { - "value": "rgb(255, 163, 194)" + "value": "rgb(148, 62, 224)" } }, - "magenta-1300": { - "prop": "--spectrum-magenta-1300", + "icon-color-purple-primary-down": { + "prop": "--spectrum-icon-color-purple-primary-down", + "ref": "var(--spectrum-purple-900)", "light": { - "value": "rgb(111, 0, 40)" + "value": "rgb(115, 13, 204)" }, "dark": { - "value": "rgb(255, 193, 214)" + "value": "rgb(173, 105, 233)" } }, - "magenta-1400": { - "prop": "--spectrum-magenta-1400", + "icon-color-purple-primary-hover": { + "prop": "--spectrum-icon-color-purple-primary-hover", + "ref": "var(--spectrum-purple-800)", "light": { - "value": "rgb(86, 0, 30)" + "value": "rgb(134, 40, 217)" }, "dark": { - "value": "rgb(255, 220, 232)" + "value": "rgb(157, 78, 228)" } }, - "magenta-1500": { - "prop": "--spectrum-magenta-1500", - "dark": { - "value": "rgb(255, 241, 246)" - }, + "icon-color-red-background": { + "prop": "--spectrum-icon-color-red-background", + "ref": "var(--spectrum-red-300)", "light": { - "value": "rgb(64, 0, 22)" + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(87, 17, 7)" } }, - "magenta-1600": { - "prop": "--spectrum-magenta-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, + "icon-color-red-primary-default": { + "prop": "--spectrum-icon-color-red-primary-default", + "ref": "var(--spectrum-red-700)", "light": { - "value": "rgb(35, 0, 12)" + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(205, 46, 29)" } }, - "magenta-200": { - "prop": "--spectrum-magenta-200", + "icon-color-red-primary-down": { + "prop": "--spectrum-icon-color-red-primary-down", + "ref": "var(--spectrum-red-900)", "light": { - "value": "rgb(255, 232, 240)" + "value": "rgb(156, 33, 19)" }, "dark": { - "value": "rgb(74, 0, 27)" + "value": "rgb(252, 67, 46)" } }, - "magenta-300": { - "prop": "--spectrum-magenta-300", + "icon-color-red-primary-hover": { + "prop": "--spectrum-icon-color-red-primary-hover", + "ref": "var(--spectrum-red-800)", "light": { - "value": "rgb(255, 213, 227)" + "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(93, 0, 34)" + "value": "rgb(223, 52, 34)" } }, - "magenta-400": { - "prop": "--spectrum-magenta-400", + "icon-color-seafoam-background": { + "prop": "--spectrum-icon-color-seafoam-background", + "ref": "var(--spectrum-seafoam-400)", "light": { - "value": "rgb(255, 185, 208)" + "value": "rgb(211, 246, 234)" }, "dark": { - "value": "rgb(123, 0, 45)" + "value": "rgb(0, 67, 59)" } }, - "magenta-500": { - "prop": "--spectrum-magenta-500", + "icon-color-seafoam-primary-default": { + "prop": "--spectrum-icon-color-seafoam-primary-default", + "ref": "var(--spectrum-seafoam-800)", "light": { - "value": "rgb(255, 152, 187)" + "value": "rgb(9, 144, 120)" }, "dark": { - "value": "rgb(152, 7, 60)" + "value": "rgb(8, 134, 112)" } }, - "magenta-600": { - "prop": "--spectrum-magenta-600", + "icon-color-seafoam-primary-down": { + "prop": "--spectrum-icon-color-seafoam-primary-down", + "ref": "var(--spectrum-seafoam-1000)", "light": { - "value": "rgb(255, 112, 159)" + "value": "rgb(5, 108, 92)" }, "dark": { - "value": "rgb(181, 19, 76)" + "value": "rgb(12, 173, 142)" } }, - "magenta-700": { - "prop": "--spectrum-magenta-700", + "icon-color-seafoam-primary-hover": { + "prop": "--spectrum-icon-color-seafoam-primary-hover", + "ref": "var(--spectrum-seafoam-900)", "light": { - "value": "rgb(255, 72, 133)" + "value": "rgb(7, 129, 109)" }, "dark": { - "value": "rgb(207, 31, 92)" + "value": "rgb(10, 154, 128)" } }, - "magenta-800": { - "prop": "--spectrum-magenta-800", + "icon-color-silver-background": { + "prop": "--spectrum-icon-color-silver-background", + "ref": "var(--spectrum-silver-400)", "light": { - "value": "rgb(240, 45, 110)" + "value": "rgb(239, 239, 239)" }, "dark": { - "value": "rgb(224, 38, 101)" + "value": "rgb(59, 59, 59)" } }, - "magenta-900": { - "prop": "--spectrum-magenta-900", + "icon-color-silver-primary-default": { + "prop": "--spectrum-icon-color-silver-primary-default", + "ref": "var(--spectrum-silver-800)", "light": { - "value": "rgb(217, 35, 97)" + "value": "rgb(143, 143, 143)" }, "dark": { - "value": "rgb(255, 51, 119)" + "value": "rgb(118, 118, 118)" } }, - "magenta-background-color-default": { - "prop": "--spectrum-magenta-background-color-default", - "ref": "var(--spectrum-magenta-800)", + "icon-color-silver-primary-down": { + "prop": "--spectrum-icon-color-silver-primary-down", + "ref": "var(--spectrum-silver-1000)", "light": { - "value": "rgb(217, 35, 97)" + "value": "rgb(114, 114, 114)" }, "dark": { - "value": "rgb(224, 38, 101)" + "value": "rgb(152, 152, 152)" } }, - "magenta-subtle-background-color-default": { - "prop": "--spectrum-magenta-subtle-background-color-default", - "ref": "var(--spectrum-magenta-300)", + "icon-color-silver-primary-hover": { + "prop": "--spectrum-icon-color-silver-primary-hover", + "ref": "var(--spectrum-silver-900)", "light": { - "value": "rgb(255, 232, 240)" + "value": "rgb(128, 128, 128)" }, "dark": { - "value": "rgb(93, 0, 34)" + "value": "rgb(137, 137, 137)" } }, - "magenta-visual-color": { - "prop": "--spectrum-magenta-visual-color", - "ref": "var(--spectrum-magenta-900)", + "icon-color-turquoise-background": { + "prop": "--spectrum-icon-color-turquoise-background", + "ref": "var(--spectrum-turquoise-400)", "light": { - "value": "rgb(240, 45, 110)" + "value": "rgb(209, 245, 245)" }, "dark": { - "value": "rgb(255, 51, 119)" + "value": "rgb(0, 66, 72)" } }, - "medium-font-weight": { - "prop": "--spectrum-medium-font-weight", - "ref": "medium", - "value": "500" - }, - "menu-item-edge-to-content-not-selected-extra-large": { - "prop": "--spectrum-menu-item-edge-to-content-not-selected-extra-large", - "desktop": { - "value": "45px" + "icon-color-turquoise-primary-default": { + "prop": "--spectrum-icon-color-turquoise-primary-default", + "ref": "var(--spectrum-turquoise-800)", + "light": { + "value": "rgb(12, 158, 171)" }, - "mobile": { - "value": "54px" + "dark": { + "value": "rgb(9, 131, 142)" } }, - "menu-item-edge-to-content-not-selected-large": { - "prop": "--spectrum-menu-item-edge-to-content-not-selected-large", - "desktop": { - "value": "38px" + "icon-color-turquoise-primary-down": { + "prop": "--spectrum-icon-color-turquoise-primary-down", + "ref": "var(--spectrum-turquoise-1000)", + "light": { + "value": "rgb(8, 126, 137)" }, - "mobile": { - "value": "47px" + "dark": { + "value": "rgb(13, 168, 182)" } }, - "menu-item-edge-to-content-not-selected-medium": { - "prop": "--spectrum-menu-item-edge-to-content-not-selected-medium", - "desktop": { - "value": "32px" + "icon-color-turquoise-primary-hover": { + "prop": "--spectrum-icon-color-turquoise-primary-hover", + "ref": "var(--spectrum-turquoise-900)", + "light": { + "value": "rgb(10, 141, 153)" }, - "mobile": { - "value": "42px" + "dark": { + "value": "rgb(11, 151, 164)" } }, - "menu-item-edge-to-content-not-selected-small": { - "prop": "--spectrum-menu-item-edge-to-content-not-selected-small", - "desktop": { - "value": "28px" + "icon-color-yellow-background": { + "prop": "--spectrum-icon-color-yellow-background", + "ref": "var(--spectrum-yellow-400)", + "light": { + "value": "rgb(255, 248, 204)" }, - "mobile": { - "value": "24px" + "dark": { + "value": "rgb(83, 52, 0)" } }, - "menu-item-label-to-description": { - "prop": "--spectrum-menu-item-label-to-description", - "value": "1px" - }, - "menu-item-section-divider-height": { - "prop": "--spectrum-menu-item-section-divider-height", - "value": "8px" - }, - "menu-item-top-to-disclosure-icon-extra-large": { - "prop": "--spectrum-menu-item-top-to-disclosure-icon-extra-large", - "desktop": { - "value": "17px" + "icon-color-yellow-primary-default": { + "prop": "--spectrum-icon-color-yellow-primary-default", + "ref": "var(--spectrum-yellow-1200)", + "light": { + "value": "rgb(245, 199, 0)" }, - "mobile": { - "value": "22px" + "dark": { + "value": "rgb(235, 183, 0)" } }, - "menu-item-top-to-disclosure-icon-large": { - "prop": "--spectrum-menu-item-top-to-disclosure-icon-large", - "desktop": { - "value": "14px" + "icon-color-yellow-primary-down": { + "prop": "--spectrum-icon-color-yellow-primary-down", + "ref": "var(--spectrum-yellow-1400)", + "light": { + "value": "rgb(210, 149, 0)" }, - "mobile": { - "value": "17px" + "dark": { + "value": "rgb(255, 230, 86)" } }, - "menu-item-top-to-disclosure-icon-medium": { - "prop": "--spectrum-menu-item-top-to-disclosure-icon-medium", - "desktop": { - "value": "11px" + "icon-color-yellow-primary-hover": { + "prop": "--spectrum-icon-color-yellow-primary-hover", + "ref": "var(--spectrum-yellow-1300)", + "light": { + "value": "rgb(230, 175, 0)" }, - "mobile": { - "value": "13px" + "dark": { + "value": "rgb(249, 206, 0)" } }, - "menu-item-top-to-disclosure-icon-small": { - "prop": "--spectrum-menu-item-top-to-disclosure-icon-small", + "illustrated-message-body-size": { + "prop": "--spectrum-illustrated-message-body-size", + "ref": "var(--spectrum-body-size-xs)", "desktop": { - "value": "7px" + "value": "14px" }, "mobile": { - "value": "9px" + "value": "15px" } }, - "menu-item-top-to-selected-icon-extra-large": { - "prop": "--spectrum-menu-item-top-to-selected-icon-extra-large", + "illustrated-message-cjk-title-size": { + "prop": "--spectrum-illustrated-message-cjk-title-size", + "ref": "var(--spectrum-title-cjk-size-xl)", "desktop": { - "value": "17px" + "value": "20px" }, "mobile": { "value": "22px" } }, - "menu-item-top-to-selected-icon-large": { - "prop": "--spectrum-menu-item-top-to-selected-icon-large", + "illustrated-message-horizontal-maximum-width": { + "prop": "--spectrum-illustrated-message-horizontal-maximum-width", + "value": "535px" + }, + "illustrated-message-large-body-font-size": { + "prop": "--spectrum-illustrated-message-large-body-font-size", + "ref": "var(--spectrum-body-size-xs)", "desktop": { "value": "14px" }, "mobile": { - "value": "17px" + "value": "15px" } }, - "menu-item-top-to-selected-icon-medium": { - "prop": "--spectrum-menu-item-top-to-selected-icon-medium", + "illustrated-message-large-cjk-title-font-size": { + "prop": "--spectrum-illustrated-message-large-cjk-title-font-size", + "ref": "var(--spectrum-title-cjk-size-xl)", "desktop": { - "value": "11px" + "value": "20px" }, "mobile": { - "value": "13px" + "value": "22px" } }, - "menu-item-top-to-selected-icon-small": { - "prop": "--spectrum-menu-item-top-to-selected-icon-small", + "illustrated-message-large-title-font-size": { + "prop": "--spectrum-illustrated-message-large-title-font-size", + "ref": "var(--spectrum-title-size-xl)", "desktop": { - "value": "7px" + "value": "22px" }, "mobile": { - "value": "9px" + "value": "24px" } }, - "meter-default-width": { - "prop": "--spectrum-meter-default-width", - "ref": "var(--spectrum-meter-width)", + "illustrated-message-maximum-width": { + "prop": "--spectrum-illustrated-message-maximum-width", + "ref": "var(--spectrum-illustrated-message-vertical-maximum-width)", + "value": "380px" + }, + "illustrated-message-medium-body-font-size": { + "prop": "--spectrum-illustrated-message-medium-body-font-size", + "ref": "var(--spectrum-body-size-xs)", "desktop": { - "value": "192px" + "value": "14px" }, "mobile": { - "value": "240px" + "value": "15px" } }, - "meter-maximum-width": { - "prop": "--spectrum-meter-maximum-width", - "value": "768px" - }, - "meter-minimum-width": { - "prop": "--spectrum-meter-minimum-width", - "value": "48px" - }, - "meter-thickness-large": { - "prop": "--spectrum-meter-thickness-large", + "illustrated-message-medium-cjk-title-font-size": { + "prop": "--spectrum-illustrated-message-medium-cjk-title-font-size", + "ref": "var(--spectrum-title-cjk-size-l)", "desktop": { - "value": "6px" + "value": "18px" }, "mobile": { - "value": "8px" + "value": "19px" } }, - "meter-thickness-small": { - "prop": "--spectrum-meter-thickness-small", + "illustrated-message-medium-title-font-size": { + "prop": "--spectrum-illustrated-message-medium-title-font-size", + "ref": "var(--spectrum-title-size-l)", "desktop": { - "value": "4px" + "value": "20px" }, "mobile": { - "value": "5px" + "value": "22px" } }, - "meter-width": { - "prop": "--spectrum-meter-width", + "illustrated-message-small-body-font-size": { + "prop": "--spectrum-illustrated-message-small-body-font-size", + "ref": "var(--spectrum-body-size-xs)", "desktop": { - "value": "192px" + "value": "12px" }, "mobile": { - "value": "240px" + "value": "15px" } }, - "navigational-indicator-top-to-back-icon-extra-large": { - "prop": "--spectrum-navigational-indicator-top-to-back-icon-extra-large", + "illustrated-message-small-cjk-title-font-size": { + "prop": "--spectrum-illustrated-message-small-cjk-title-font-size", + "ref": "var(--spectrum-title-cjk-size-s)", "desktop": { - "value": "15px" + "value": "14px" }, "mobile": { - "value": "19px" + "value": "15px" } }, - "navigational-indicator-top-to-back-icon-large": { - "prop": "--spectrum-navigational-indicator-top-to-back-icon-large", + "illustrated-message-small-title-font-size": { + "prop": "--spectrum-illustrated-message-small-title-font-size", + "ref": "var(--spectrum-title-size-s)", "desktop": { - "value": "12px" + "value": "16px" }, "mobile": { - "value": "16px" + "value": "17px" } }, - "navigational-indicator-top-to-back-icon-medium": { - "prop": "--spectrum-navigational-indicator-top-to-back-icon-medium", + "illustrated-message-title-size": { + "prop": "--spectrum-illustrated-message-title-size", + "ref": "var(--spectrum-title-size-xl)", "desktop": { - "value": "9px" + "value": "22px" }, "mobile": { - "value": "12px" + "value": "24px" } }, - "navigational-indicator-top-to-back-icon-small": { - "prop": "--spectrum-navigational-indicator-top-to-back-icon-small", + "illustrated-message-vertical-maximum-width": { + "prop": "--spectrum-illustrated-message-vertical-maximum-width", + "value": "380px" + }, + "in-field-button-edge-to-disclosure-icon-stacked-extra-large": { + "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large", + "value": "16px" + }, + "in-field-button-edge-to-disclosure-icon-stacked-large": { + "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large", + "value": "13px" + }, + "in-field-button-edge-to-disclosure-icon-stacked-medium": { + "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium", + "value": "9px" + }, + "in-field-button-edge-to-disclosure-icon-stacked-small": { + "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small", + "value": "7px" + }, + "in-field-button-edge-to-fill": { + "prop": "--spectrum-in-field-button-edge-to-fill", + "value": "0px" + }, + "in-field-button-edge-to-fill-extra-large": { + "prop": "--spectrum-in-field-button-edge-to-fill-extra-large", "desktop": { - "value": "6px" + "value": "8px" }, "mobile": { - "value": "7px" + "value": "10px" } }, - "negative-background-color-default": { - "prop": "--spectrum-negative-background-color-default", - "ref": "var(--spectrum-negative-color-800)", - "light": { - "value": "rgb(215, 50, 32)" - }, - "dark": { - "value": "rgb(223, 52, 34)" - } + "in-field-button-edge-to-fill-large": { + "prop": "--spectrum-in-field-button-edge-to-fill-large", + "value": "8px" }, - "negative-background-color-down": { - "prop": "--spectrum-negative-background-color-down", - "ref": "var(--spectrum-negative-color-700)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(205, 46, 29)" - } + "in-field-button-edge-to-fill-medium": { + "prop": "--spectrum-in-field-button-edge-to-fill-medium", + "value": "6px" }, - "negative-background-color-hover": { - "prop": "--spectrum-negative-background-color-hover", - "ref": "var(--spectrum-negative-color-700)", - "light": { - "value": "rgb(183, 40, 24)" + "in-field-button-edge-to-fill-small": { + "prop": "--spectrum-in-field-button-edge-to-fill-small", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgb(205, 46, 29)" + "mobile": { + "value": "5px" } }, - "negative-background-color-key-focus": { - "prop": "--spectrum-negative-background-color-key-focus", - "ref": "var(--spectrum-negative-color-700)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(205, 46, 29)" - } + "in-field-button-fill-stacked-inner-border-rounding": { + "prop": "--spectrum-in-field-button-fill-stacked-inner-border-rounding", + "value": "0px" }, - "negative-border-color-default": { - "prop": "--spectrum-negative-border-color-default", - "ref": "var(--spectrum-negative-color-900)", - "light": { - "value": "rgb(215, 50, 32)" - }, - "dark": { - "value": "rgb(252, 67, 46)" + "in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large": { + "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large", + "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large)", + "value": "5px" + }, + "in-field-button-inner-edge-to-disclosure-icon-stacked-large": { + "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large", + "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large)", + "value": "4px" + }, + "in-field-button-inner-edge-to-disclosure-icon-stacked-medium": { + "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium", + "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium)", + "value": "3px" + }, + "in-field-button-inner-edge-to-disclosure-icon-stacked-small": { + "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small", + "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small)", + "value": "3px" + }, + "in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large": { + "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large", + "value": "5px" + }, + "in-field-button-outer-edge-to-disclosure-icon-stacked-large": { + "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large", + "value": "4px" + }, + "in-field-button-outer-edge-to-disclosure-icon-stacked-medium": { + "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium", + "value": "3px" + }, + "in-field-button-outer-edge-to-disclosure-icon-stacked-small": { + "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small", + "value": "3px" + }, + "in-field-button-stacked-inner-edge-to-fill": { + "prop": "--spectrum-in-field-button-stacked-inner-edge-to-fill", + "value": "0px" + }, + "in-field-button-width-stacked-extra-large": { + "prop": "--spectrum-in-field-button-width-stacked-extra-large", + "value": "44px" + }, + "in-field-button-width-stacked-large": { + "prop": "--spectrum-in-field-button-width-stacked-large", + "value": "36px" + }, + "in-field-button-width-stacked-medium": { + "prop": "--spectrum-in-field-button-width-stacked-medium", + "value": "28px" + }, + "in-field-button-width-stacked-small": { + "prop": "--spectrum-in-field-button-width-stacked-small", + "value": "20px" + }, + "in-field-progress-circle-edge-to-fill": { + "prop": "--spectrum-in-field-progress-circle-edge-to-fill", + "desktop": { + "value": "1px" + }, + "mobile": { + "value": "2px" } }, - "negative-border-color-down": { - "prop": "--spectrum-negative-border-color-down", - "ref": "var(--spectrum-negative-color-1100)", - "light": { - "value": "rgb(156, 33, 19)" + "in-field-progress-circle-size-100": { + "prop": "--spectrum-in-field-progress-circle-size-100", + "desktop": { + "value": "20px" }, - "dark": { - "value": "rgb(255, 134, 120)" + "mobile": { + "value": "24px" } }, - "negative-border-color-focus": { - "prop": "--spectrum-negative-border-color-focus", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" + "in-field-progress-circle-size-200": { + "prop": "--spectrum-in-field-progress-circle-size-200", + "desktop": { + "value": "22px" }, - "dark": { - "value": "rgb(255, 103, 86)" + "mobile": { + "value": "28px" } }, - "negative-border-color-focus-hover": { - "prop": "--spectrum-negative-border-color-focus-hover", - "ref": "var(--spectrum-negative-border-color-down)", - "light": { - "value": "rgb(156, 33, 19)" + "in-field-progress-circle-size-300": { + "prop": "--spectrum-in-field-progress-circle-size-300", + "desktop": { + "value": "26px" }, - "dark": { - "value": "rgb(255, 134, 120)" + "mobile": { + "value": "30px" } }, - "negative-border-color-hover": { - "prop": "--spectrum-negative-border-color-hover", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" + "in-field-progress-circle-size-75": { + "prop": "--spectrum-in-field-progress-circle-size-75", + "desktop": { + "value": "16px" }, - "dark": { - "value": "rgb(255, 103, 86)" + "mobile": { + "value": "18px" } }, - "negative-border-color-key-focus": { - "prop": "--spectrum-negative-border-color-key-focus", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" + "in-field-stepper-to-end-extra-large": { + "prop": "--spectrum-in-field-stepper-to-end-extra-large", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgb(255, 103, 86)" + "mobile": { + "value": "5px" } }, - "negative-color-100": { - "prop": "--spectrum-negative-color-100", - "ref": "var(--spectrum-red-100)", + "in-field-stepper-to-end-large": { + "prop": "--spectrum-in-field-stepper-to-end-large", + "value": "4px" + }, + "in-field-stepper-to-end-medium": { + "prop": "--spectrum-in-field-stepper-to-end-medium", + "value": "3px" + }, + "in-field-stepper-to-end-small": { + "prop": "--spectrum-in-field-stepper-to-end-small", + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "3px" + } + }, + "in-line-alert-minimum-width": { + "prop": "--spectrum-in-line-alert-minimum-width", + "value": "240px" + }, + "indigo-100": { + "prop": "--spectrum-indigo-100", "light": { - "value": "rgb(255, 246, 245)" + "value": "rgb(247, 248, 255)" }, "dark": { - "value": "rgb(54, 10, 3)" + "value": "rgb(30, 0, 93)" } }, - "negative-color-1000": { - "prop": "--spectrum-negative-color-1000", - "ref": "var(--spectrum-red-1000)", + "indigo-1000": { + "prop": "--spectrum-indigo-1000", "light": { - "value": "rgb(183, 40, 24)" + "value": "rgb(99, 56, 238)" }, "dark": { - "value": "rgb(255, 103, 86)" + "value": "rgb(139, 141, 254)" } }, - "negative-color-1100": { - "prop": "--spectrum-negative-color-1100", - "ref": "var(--spectrum-red-1100)", + "indigo-1100": { + "prop": "--spectrum-indigo-1100", "light": { - "value": "rgb(156, 33, 19)" + "value": "rgb(84, 36, 219)" }, "dark": { - "value": "rgb(255, 134, 120)" + "value": "rgb(153, 161, 255)" } }, - "negative-color-1200": { - "prop": "--spectrum-negative-color-1200", - "ref": "var(--spectrum-red-1200)", + "indigo-1200": { + "prop": "--spectrum-indigo-1200", "light": { - "value": "rgb(129, 27, 14)" + "value": "rgb(69, 19, 191)" }, "dark": { - "value": "rgb(255, 167, 157)" + "value": "rgb(176, 186, 255)" } }, - "negative-color-1300": { - "prop": "--spectrum-negative-color-1300", - "ref": "var(--spectrum-red-1300)", + "indigo-1300": { + "prop": "--spectrum-indigo-1300", "light": { - "value": "rgb(104, 21, 10)" + "value": "rgb(55, 6, 160)" }, "dark": { - "value": "rgb(255, 196, 189)" + "value": "rgb(199, 208, 255)" } }, - "negative-color-1400": { - "prop": "--spectrum-negative-color-1400", - "ref": "var(--spectrum-red-1400)", + "indigo-1400": { + "prop": "--spectrum-indigo-1400", "light": { - "value": "rgb(80, 16, 6)" + "value": "rgb(42, 0, 129)" }, "dark": { - "value": "rgb(255, 222, 219)" + "value": "rgb(223, 228, 255)" } }, - "negative-color-1500": { - "prop": "--spectrum-negative-color-1500", - "ref": "var(--spectrum-red-1500)", + "indigo-1500": { + "prop": "--spectrum-indigo-1500", "dark": { - "value": "rgb(255, 242, 240)" + "value": "rgb(243, 244, 255)" }, "light": { - "value": "rgb(59, 11, 4)" + "value": "rgb(31, 0, 98)" } }, - "negative-color-1600": { - "prop": "--spectrum-negative-color-1600", - "ref": "var(--spectrum-red-1600)", + "indigo-1600": { + "prop": "--spectrum-indigo-1600", "dark": { "value": "rgb(255, 255, 255)" }, "light": { - "value": "rgb(29, 5, 2)" + "value": "rgb(17, 0, 54)" } }, - "negative-color-200": { - "prop": "--spectrum-negative-color-200", - "ref": "var(--spectrum-red-200)", + "indigo-200": { + "prop": "--spectrum-indigo-200", "light": { - "value": "rgb(255, 235, 232)" + "value": "rgb(235, 238, 255)" }, "dark": { - "value": "rgb(68, 13, 5)" + "value": "rgb(35, 0, 110)" } }, - "negative-color-300": { - "prop": "--spectrum-negative-color-300", - "ref": "var(--spectrum-red-300)", + "indigo-300": { + "prop": "--spectrum-indigo-300", "light": { - "value": "rgb(255, 214, 209)" + "value": "rgb(216, 222, 255)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(47, 0, 140)" } }, - "negative-color-400": { - "prop": "--spectrum-negative-color-400", - "ref": "var(--spectrum-red-400)", + "indigo-400": { + "prop": "--spectrum-indigo-400", "light": { - "value": "rgb(255, 188, 180)" + "value": "rgb(192, 201, 255)" }, "dark": { - "value": "rgb(115, 24, 11)" + "value": "rgb(62, 12, 174)" } }, - "negative-color-500": { - "prop": "--spectrum-negative-color-500", - "ref": "var(--spectrum-red-500)", + "indigo-500": { + "prop": "--spectrum-indigo-500", "light": { - "value": "rgb(255, 157, 145)" + "value": "rgb(167, 178, 255)" }, "dark": { - "value": "rgb(147, 31, 17)" + "value": "rgb(79, 30, 209)" } }, - "negative-color-600": { - "prop": "--spectrum-negative-color-600", - "ref": "var(--spectrum-red-600)", + "indigo-600": { + "prop": "--spectrum-indigo-600", "light": { - "value": "rgb(255, 118, 101)" + "value": "rgb(145, 151, 254)" }, "dark": { - "value": "rgb(177, 38, 23)" + "value": "rgb(95, 52, 235)" } }, - "negative-color-700": { - "prop": "--spectrum-negative-color-700", - "ref": "var(--spectrum-red-700)", + "indigo-700": { + "prop": "--spectrum-indigo-700", "light": { - "value": "rgb(255, 81, 61)" + "value": "rgb(132, 128, 254)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(109, 75, 248)" } }, - "negative-color-800": { - "prop": "--spectrum-negative-color-800", - "ref": "var(--spectrum-red-800)", + "indigo-800": { + "prop": "--spectrum-indigo-800", "light": { - "value": "rgb(240, 56, 35)" + "value": "rgb(122, 106, 253)" }, "dark": { - "value": "rgb(223, 52, 34)" + "value": "rgb(116, 91, 252)" } }, - "negative-color-900": { - "prop": "--spectrum-negative-color-900", - "ref": "var(--spectrum-red-900)", + "indigo-900": { + "prop": "--spectrum-indigo-900", "light": { - "value": "rgb(215, 50, 32)" + "value": "rgb(113, 85, 250)" }, "dark": { - "value": "rgb(252, 67, 46)" + "value": "rgb(128, 119, 254)" } }, - "negative-content-color-default": { - "prop": "--spectrum-negative-content-color-default", - "ref": "var(--spectrum-negative-color-900)", + "indigo-background-color-default": { + "prop": "--spectrum-indigo-background-color-default", + "ref": "var(--spectrum-indigo-800)", "light": { - "value": "rgb(215, 50, 32)" + "value": "rgb(113, 85, 250)" }, "dark": { - "value": "rgb(252, 67, 46)" + "value": "rgb(116, 91, 252)" } }, - "negative-content-color-down": { - "prop": "--spectrum-negative-content-color-down", - "ref": "var(--spectrum-negative-color-1000)", + "indigo-subtle-background-color-default": { + "prop": "--spectrum-indigo-subtle-background-color-default", + "ref": "var(--spectrum-indigo-300)", "light": { - "value": "rgb(183, 40, 24)" + "value": "rgb(235, 238, 255)" }, "dark": { - "value": "rgb(255, 103, 86)" + "value": "rgb(47, 0, 140)" } }, - "negative-content-color-hover": { - "prop": "--spectrum-negative-content-color-hover", - "ref": "var(--spectrum-negative-color-1000)", + "indigo-visual-color": { + "prop": "--spectrum-indigo-visual-color", + "ref": "var(--spectrum-indigo-900)", "light": { - "value": "rgb(183, 40, 24)" + "value": "rgb(122, 106, 253)" }, "dark": { - "value": "rgb(255, 103, 86)" + "value": "rgb(128, 119, 254)" } }, - "negative-content-color-key-focus": { - "prop": "--spectrum-negative-content-color-key-focus", - "ref": "var(--spectrum-negative-color-1000)", + "informative-background-color-default": { + "prop": "--spectrum-informative-background-color-default", + "ref": "var(--spectrum-informative-color-800)", "light": { - "value": "rgb(183, 40, 24)" + "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(255, 103, 86)" + "value": "rgb(64, 105, 253)" } }, - "negative-subdued-background-color-default": { - "prop": "--spectrum-negative-subdued-background-color-default", - "ref": "var(--spectrum-negative-color-300)", + "informative-background-color-down": { + "prop": "--spectrum-informative-background-color-down", + "ref": "var(--spectrum-informative-color-700)", "light": { - "value": "rgb(255, 235, 232)" + "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(52, 91, 248)" } }, - "negative-subdued-background-color-down": { - "prop": "--spectrum-negative-subdued-background-color-down", - "ref": "var(--spectrum-negative-color-300)", + "informative-background-color-hover": { + "prop": "--spectrum-informative-background-color-hover", + "ref": "var(--spectrum-informative-color-700)", "light": { - "value": "rgb(255, 214, 209)" + "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(52, 91, 248)" } }, - "negative-subdued-background-color-hover": { - "prop": "--spectrum-negative-subdued-background-color-hover", - "ref": "var(--spectrum-negative-color-300)", + "informative-background-color-key-focus": { + "prop": "--spectrum-informative-background-color-key-focus", + "ref": "var(--spectrum-informative-color-700)", "light": { - "value": "rgb(255, 214, 209)" + "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(52, 91, 248)" } }, - "negative-subdued-background-color-key-focus": { - "prop": "--spectrum-negative-subdued-background-color-key-focus", - "ref": "var(--spectrum-negative-color-300)", + "informative-color-100": { + "prop": "--spectrum-informative-color-100", + "ref": "var(--spectrum-blue-100)", "light": { - "value": "rgb(255, 214, 209)" + "value": "rgb(245, 249, 255)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(14, 23, 63)" } }, - "negative-subtle-background-color-default": { - "prop": "--spectrum-negative-subtle-background-color-default", - "ref": "var(--spectrum-negative-color-300)", + "informative-color-1000": { + "prop": "--spectrum-informative-color-1000", + "ref": "var(--spectrum-blue-1000)", "light": { - "value": "rgb(255, 235, 232)" + "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(105, 149, 254)" } }, - "negative-visual-color": { - "prop": "--spectrum-negative-visual-color", - "ref": "var(--spectrum-negative-color-900)", + "informative-color-1100": { + "prop": "--spectrum-informative-color-1100", + "ref": "var(--spectrum-blue-1100)", "light": { - "value": "rgb(240, 56, 35)" + "value": "rgb(29, 62, 207)" }, "dark": { - "value": "rgb(252, 67, 46)" + "value": "rgb(124, 169, 252)" } }, - "neutral-background-color-default": { - "prop": "--spectrum-neutral-background-color-default", - "ref": "var(--spectrum-gray-800)", + "informative-color-1200": { + "prop": "--spectrum-informative-color-1200", + "ref": "var(--spectrum-blue-1200)", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(21, 50, 173)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(152, 192, 252)" } }, - "neutral-background-color-down": { - "prop": "--spectrum-neutral-background-color-down", - "ref": "var(--spectrum-gray-900)", + "informative-color-1300": { + "prop": "--spectrum-informative-color-1300", + "ref": "var(--spectrum-blue-1300)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(16, 40, 140)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(181, 213, 253)" } }, - "neutral-background-color-hover": { - "prop": "--spectrum-neutral-background-color-hover", - "ref": "var(--spectrum-gray-900)", + "informative-color-1400": { + "prop": "--spectrum-informative-color-1400", + "ref": "var(--spectrum-blue-1400)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(12, 31, 105)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(213, 231, 254)" } }, - "neutral-background-color-key-focus": { - "prop": "--spectrum-neutral-background-color-key-focus", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, + "informative-color-1500": { + "prop": "--spectrum-informative-color-1500", + "ref": "var(--spectrum-blue-1500)", "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(238, 245, 255)" + }, + "light": { + "value": "rgb(14, 24, 67)" } }, - "neutral-background-color-selected-default": { - "prop": "--spectrum-neutral-background-color-selected-default", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, + "informative-color-1600": { + "prop": "--spectrum-informative-color-1600", + "ref": "var(--spectrum-blue-1600)", "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(7, 11, 30)" } }, - "neutral-background-color-selected-down": { - "prop": "--spectrum-neutral-background-color-selected-down", - "ref": "var(--spectrum-gray-900)", + "informative-color-200": { + "prop": "--spectrum-informative-color-200", + "ref": "var(--spectrum-blue-200)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(229, 240, 254)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(15, 28, 82)" } }, - "neutral-background-color-selected-hover": { - "prop": "--spectrum-neutral-background-color-selected-hover", - "ref": "var(--spectrum-gray-900)", + "informative-color-300": { + "prop": "--spectrum-informative-color-300", + "ref": "var(--spectrum-blue-300)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(203, 226, 254)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(12, 33, 117)" } }, - "neutral-background-color-selected-key-focus": { - "prop": "--spectrum-neutral-background-color-selected-key-focus", - "ref": "var(--spectrum-gray-900)", + "informative-color-400": { + "prop": "--spectrum-informative-color-400", + "ref": "var(--spectrum-blue-400)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(172, 207, 253)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(18, 45, 154)" } }, - "neutral-content-color-default": { - "prop": "--spectrum-neutral-content-color-default", - "ref": "var(--spectrum-gray-800)", + "informative-color-500": { + "prop": "--spectrum-informative-color-500", + "ref": "var(--spectrum-blue-500)", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(142, 185, 252)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(26, 58, 195)" } }, - "neutral-content-color-down": { - "prop": "--spectrum-neutral-content-color-down", - "ref": "var(--spectrum-gray-900)", + "informative-color-600": { + "prop": "--spectrum-informative-color-600", + "ref": "var(--spectrum-blue-600)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(114, 158, 253)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(37, 73, 229)" } }, - "neutral-content-color-focus": { - "prop": "--spectrum-neutral-content-color-focus", - "ref": "var(--spectrum-neutral-content-color-down)", + "informative-color-700": { + "prop": "--spectrum-informative-color-700", + "ref": "var(--spectrum-blue-700)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(93, 137, 255)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(52, 91, 248)" } }, - "neutral-content-color-focus-hover": { - "prop": "--spectrum-neutral-content-color-focus-hover", - "ref": "var(--spectrum-neutral-content-color-down)", + "informative-color-800": { + "prop": "--spectrum-informative-color-800", + "ref": "var(--spectrum-blue-800)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(64, 105, 253)" } }, - "neutral-content-color-hover": { - "prop": "--spectrum-neutral-content-color-hover", - "ref": "var(--spectrum-gray-900)", + "informative-color-900": { + "prop": "--spectrum-informative-color-900", + "ref": "var(--spectrum-blue-900)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(86, 129, 255)" } }, - "neutral-content-color-key-focus": { - "prop": "--spectrum-neutral-content-color-key-focus", - "ref": "var(--spectrum-gray-900)", + "informative-subtle-background-color-default": { + "prop": "--spectrum-informative-subtle-background-color-default", + "ref": "var(--spectrum-informative-color-300)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(229, 240, 254)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(12, 33, 117)" } }, - "neutral-subdued-background-color-default": { - "prop": "--spectrum-neutral-subdued-background-color-default", - "ref": "var(--spectrum-gray-500)", + "informative-visual-color": { + "prop": "--spectrum-informative-visual-color", + "ref": "var(--spectrum-informative-color-900)", "light": { - "value": "rgb(80, 80, 80)" + "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(109, 109, 109)" + "value": "rgb(86, 129, 255)" } }, - "neutral-subdued-background-color-down": { - "prop": "--spectrum-neutral-subdued-background-color-down", - "ref": "var(--spectrum-gray-400)", - "light": { - "value": "rgb(41, 41, 41)" + "italic-font-style": { + "prop": "--spectrum-italic-font-style", + "value": "italic" + }, + "letter-spacing": { + "prop": "--spectrum-letter-spacing", + "value": "0em" + }, + "light-font-weight": { + "prop": "--spectrum-light-font-weight", + "ref": "light", + "value": "300" + }, + "line-height-100": { + "prop": "--spectrum-line-height-100", + "value": 1.3 + }, + "line-height-200": { + "prop": "--spectrum-line-height-200", + "value": 1.5 + }, + "link-out-icon-size-100": { + "prop": "--spectrum-link-out-icon-size-100", + "desktop": { + "value": "12px" }, - "dark": { - "value": "rgb(68, 68, 68)" + "mobile": { + "value": "14px" } }, - "neutral-subdued-background-color-hover": { - "prop": "--spectrum-neutral-subdued-background-color-hover", - "ref": "var(--spectrum-gray-400)", - "light": { - "value": "rgb(41, 41, 41)" + "link-out-icon-size-200": { + "prop": "--spectrum-link-out-icon-size-200", + "desktop": { + "value": "14px" }, - "dark": { - "value": "rgb(68, 68, 68)" + "mobile": { + "value": "16px" } }, - "neutral-subdued-background-color-key-focus": { - "prop": "--spectrum-neutral-subdued-background-color-key-focus", - "ref": "var(--spectrum-gray-400)", - "light": { - "value": "rgb(41, 41, 41)" + "link-out-icon-size-75": { + "prop": "--spectrum-link-out-icon-size-75", + "desktop": { + "value": "10px" }, - "dark": { - "value": "rgb(68, 68, 68)" + "mobile": { + "value": "12px" } }, - "neutral-subdued-content-color-default": { - "prop": "--spectrum-neutral-subdued-content-color-default", - "ref": "var(--spectrum-gray-700)", + "magenta-100": { + "prop": "--spectrum-magenta-100", "light": { - "value": "rgb(80, 80, 80)" + "value": "rgb(255, 245, 248)" }, "dark": { - "value": "rgb(175, 175, 175)" + "value": "rgb(59, 0, 22)" } }, - "neutral-subdued-content-color-down": { - "prop": "--spectrum-neutral-subdued-content-color-down", - "ref": "var(--spectrum-gray-800)", + "magenta-1000": { + "prop": "--spectrum-magenta-1000", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(186, 22, 80)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(255, 96, 149)" } }, - "neutral-subdued-content-color-hover": { - "prop": "--spectrum-neutral-subdued-content-color-hover", - "ref": "var(--spectrum-gray-800)", + "magenta-1100": { + "prop": "--spectrum-magenta-1100", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(163, 5, 62)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(255, 128, 171)" } }, - "neutral-subdued-content-color-key-focus": { - "prop": "--spectrum-neutral-subdued-content-color-key-focus", - "ref": "var(--spectrum-gray-800)", + "magenta-1200": { + "prop": "--spectrum-magenta-1200", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(136, 0, 51)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(255, 163, 194)" } }, - "neutral-subdued-content-color-selected": { - "prop": "--spectrum-neutral-subdued-content-color-selected", - "ref": "var(--spectrum-neutral-subdued-content-color-down)", + "magenta-1300": { + "prop": "--spectrum-magenta-1300", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(111, 0, 40)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(255, 193, 214)" } }, - "neutral-subtle-background-color-default": { - "prop": "--spectrum-neutral-subtle-background-color-default", - "ref": "var(--spectrum-gray-300)", + "magenta-1400": { + "prop": "--spectrum-magenta-1400", "light": { - "value": "rgb(233, 233, 233)" + "value": "rgb(86, 0, 30)" }, "dark": { - "value": "rgb(57, 57, 57)" + "value": "rgb(255, 220, 232)" } }, - "neutral-visual-color": { - "prop": "--spectrum-neutral-visual-color", - "ref": "var(--spectrum-gray-600)", - "light": { - "value": "rgb(143, 143, 143)" - }, + "magenta-1500": { + "prop": "--spectrum-magenta-1500", "dark": { - "value": "rgb(138, 138, 138)" + "value": "rgb(255, 241, 246)" + }, + "light": { + "value": "rgb(64, 0, 22)" } }, - "notice-background-color-default": { - "prop": "--spectrum-notice-background-color-default", - "ref": "var(--spectrum-notice-color-600)", + "magenta-1600": { + "prop": "--spectrum-magenta-1600", "dark": { - "value": "rgb(224, 100, 0)" + "value": "rgb(255, 255, 255)" }, "light": { - "value": "rgb(252, 125, 0)" + "value": "rgb(35, 0, 12)" } }, - "notice-color-100": { - "prop": "--spectrum-notice-color-100", - "ref": "var(--spectrum-orange-100)", + "magenta-200": { + "prop": "--spectrum-magenta-200", "light": { - "value": "rgb(255, 246, 231)" + "value": "rgb(255, 232, 240)" }, "dark": { - "value": "rgb(49, 16, 0)" + "value": "rgb(74, 0, 27)" } }, - "notice-color-1000": { - "prop": "--spectrum-notice-color-1000", - "ref": "var(--spectrum-orange-1000)", + "magenta-300": { + "prop": "--spectrum-magenta-300", "light": { - "value": "rgb(167, 62, 0)" + "value": "rgb(255, 213, 227)" }, "dark": { - "value": "rgb(243, 117, 0)" + "value": "rgb(93, 0, 34)" } }, - "notice-color-1100": { - "prop": "--spectrum-notice-color-1100", - "ref": "var(--spectrum-orange-1100)", + "magenta-400": { + "prop": "--spectrum-magenta-400", "light": { - "value": "rgb(144, 51, 0)" + "value": "rgb(255, 185, 208)" }, "dark": { - "value": "rgb(255, 137, 0)" + "value": "rgb(123, 0, 45)" } }, - "notice-color-1200": { - "prop": "--spectrum-notice-color-1200", - "ref": "var(--spectrum-orange-1200)", + "magenta-500": { + "prop": "--spectrum-magenta-500", "light": { - "value": "rgb(118, 41, 0)" + "value": "rgb(255, 152, 187)" }, "dark": { - "value": "rgb(255, 173, 45)" + "value": "rgb(152, 7, 60)" } }, - "notice-color-1300": { - "prop": "--spectrum-notice-color-1300", - "ref": "var(--spectrum-orange-1300)", + "magenta-600": { + "prop": "--spectrum-magenta-600", "light": { - "value": "rgb(95, 32, 0)" + "value": "rgb(255, 112, 159)" }, "dark": { - "value": "rgb(255, 201, 116)" + "value": "rgb(181, 19, 76)" } }, - "notice-color-1400": { - "prop": "--spectrum-notice-color-1400", - "ref": "var(--spectrum-orange-1400)", + "magenta-700": { + "prop": "--spectrum-magenta-700", "light": { - "value": "rgb(73, 24, 0)" + "value": "rgb(255, 72, 133)" }, "dark": { - "value": "rgb(255, 225, 178)" + "value": "rgb(207, 31, 92)" } }, - "notice-color-1500": { - "prop": "--spectrum-notice-color-1500", - "ref": "var(--spectrum-orange-1500)", - "dark": { - "value": "rgb(255, 243, 225)" - }, + "magenta-800": { + "prop": "--spectrum-magenta-800", "light": { - "value": "rgb(52, 18, 0)" + "value": "rgb(240, 45, 110)" + }, + "dark": { + "value": "rgb(224, 38, 101)" } }, - "notice-color-1600": { - "prop": "--spectrum-notice-color-1600", - "ref": "var(--spectrum-orange-1600)", - "dark": { - "value": "rgb(255, 255, 255)" - }, + "magenta-900": { + "prop": "--spectrum-magenta-900", "light": { - "value": "rgb(25, 8, 0)" + "value": "rgb(217, 35, 97)" + }, + "dark": { + "value": "rgb(255, 51, 119)" } }, - "notice-color-200": { - "prop": "--spectrum-notice-color-200", - "ref": "var(--spectrum-orange-200)", + "magenta-background-color-default": { + "prop": "--spectrum-magenta-background-color-default", + "ref": "var(--spectrum-magenta-800)", "light": { - "value": "rgb(255, 236, 207)" + "value": "rgb(217, 35, 97)" }, "dark": { - "value": "rgb(61, 21, 0)" + "value": "rgb(224, 38, 101)" } }, - "notice-color-300": { - "prop": "--spectrum-notice-color-300", - "ref": "var(--spectrum-orange-300)", + "magenta-subtle-background-color-default": { + "prop": "--spectrum-magenta-subtle-background-color-default", + "ref": "var(--spectrum-magenta-300)", "light": { - "value": "rgb(255, 218, 158)" + "value": "rgb(255, 232, 240)" }, "dark": { - "value": "rgb(80, 27, 0)" + "value": "rgb(93, 0, 34)" } }, - "notice-color-400": { - "prop": "--spectrum-notice-color-400", - "ref": "var(--spectrum-orange-400)", + "magenta-visual-color": { + "prop": "--spectrum-magenta-visual-color", + "ref": "var(--spectrum-magenta-900)", "light": { - "value": "rgb(255, 193, 94)" + "value": "rgb(240, 45, 110)" }, "dark": { - "value": "rgb(106, 36, 0)" + "value": "rgb(255, 51, 119)" } }, - "notice-color-500": { - "prop": "--spectrum-notice-color-500", - "ref": "var(--spectrum-orange-500)", - "light": { - "value": "rgb(255, 162, 19)" - }, - "dark": { - "value": "rgb(135, 47, 0)" - } + "medium-font-weight": { + "prop": "--spectrum-medium-font-weight", + "ref": "medium", + "value": "500" }, - "notice-color-600": { - "prop": "--spectrum-notice-color-600", - "ref": "var(--spectrum-orange-600)", + "menu-item-background-color-default": { + "prop": "--spectrum-menu-item-background-color-default", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(252, 125, 0)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(162, 59, 0)" + "value": "rgb(50, 50, 50)" } }, - "notice-color-700": { - "prop": "--spectrum-notice-color-700", - "ref": "var(--spectrum-orange-700)", + "menu-item-background-color-disabled": { + "prop": "--spectrum-menu-item-background-color-disabled", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(232, 106, 0)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(185, 73, 0)" + "value": "rgb(50, 50, 50)" } }, - "notice-color-800": { - "prop": "--spectrum-notice-color-800", - "ref": "var(--spectrum-orange-800)", + "menu-item-background-color-down": { + "prop": "--spectrum-menu-item-background-color-down", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(212, 91, 0)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(199, 82, 0)" + "value": "rgb(50, 50, 50)" } }, - "notice-color-900": { - "prop": "--spectrum-notice-color-900", - "ref": "var(--spectrum-orange-900)", + "menu-item-background-color-hover": { + "prop": "--spectrum-menu-item-background-color-hover", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(194, 78, 0)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(224, 100, 0)" + "value": "rgb(50, 50, 50)" } }, - "notice-subtle-background-color-default": { - "prop": "--spectrum-notice-subtle-background-color-default", - "ref": "var(--spectrum-notice-color-300)", + "menu-item-background-color-keyboard-focus": { + "prop": "--spectrum-menu-item-background-color-keyboard-focus", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(255, 236, 207)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(80, 27, 0)" + "value": "rgb(50, 50, 50)" } }, - "notice-visual-color": { - "prop": "--spectrum-notice-visual-color", - "ref": "var(--spectrum-notice-color-900)", - "light": { - "value": "rgb(212, 91, 0)" + "menu-item-background-opacity": { + "prop": "--spectrum-menu-item-background-opacity", + "value": "0" + }, + "menu-item-edge-to-content-not-selected-extra-large": { + "prop": "--spectrum-menu-item-edge-to-content-not-selected-extra-large", + "desktop": { + "value": "45px" }, - "dark": { - "value": "rgb(224, 100, 0)" + "mobile": { + "value": "54px" } }, - "opacity-checkerboard-square-dark": { - "prop": "--spectrum-opacity-checkerboard-square-dark", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(225, 225, 225)" + "menu-item-edge-to-content-not-selected-large": { + "prop": "--spectrum-menu-item-edge-to-content-not-selected-large", + "desktop": { + "value": "38px" }, - "dark": { - "value": "rgb(219, 219, 219)" + "mobile": { + "value": "47px" } }, - "opacity-checkerboard-square-light": { - "prop": "--spectrum-opacity-checkerboard-square-light", - "ref": "var(--spectrum-white)", - "light": { - "value": "rgb(255, 255, 255)" + "menu-item-edge-to-content-not-selected-medium": { + "prop": "--spectrum-menu-item-edge-to-content-not-selected-medium", + "desktop": { + "value": "32px" }, - "dark": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "42px" } }, - "opacity-checkerboard-square-size": { - "prop": "--spectrum-opacity-checkerboard-square-size", + "menu-item-edge-to-content-not-selected-small": { + "prop": "--spectrum-menu-item-edge-to-content-not-selected-small", "desktop": { - "value": "8px" + "value": "28px" }, "mobile": { - "value": "10px" + "value": "24px" } }, - "opacity-disabled": { - "prop": "--spectrum-opacity-disabled", - "value": "0.3" + "menu-item-label-to-description": { + "prop": "--spectrum-menu-item-label-to-description", + "ref": "var(--spectrum-menu-item-label-to-description-medium)", + "value": "1px" }, - "orange-100": { - "prop": "--spectrum-orange-100", - "light": { - "value": "rgb(255, 246, 231)" + "menu-item-label-to-description-extra-large": { + "prop": "--spectrum-menu-item-label-to-description-extra-large", + "value": "2px" + }, + "menu-item-label-to-description-large": { + "prop": "--spectrum-menu-item-label-to-description-large", + "value": "2px" + }, + "menu-item-label-to-description-medium": { + "prop": "--spectrum-menu-item-label-to-description-medium", + "value": "1px" + }, + "menu-item-label-to-description-small": { + "prop": "--spectrum-menu-item-label-to-description-small", + "value": "1px" + }, + "menu-item-section-divider-height": { + "prop": "--spectrum-menu-item-section-divider-height", + "value": "12px" + }, + "menu-item-top-to-disclosure-icon-extra-large": { + "prop": "--spectrum-menu-item-top-to-disclosure-icon-extra-large", + "desktop": { + "value": "17px" }, - "dark": { - "value": "rgb(49, 16, 0)" + "mobile": { + "value": "22px" } }, - "orange-1000": { - "prop": "--spectrum-orange-1000", - "light": { - "value": "rgb(167, 62, 0)" + "menu-item-top-to-disclosure-icon-large": { + "prop": "--spectrum-menu-item-top-to-disclosure-icon-large", + "desktop": { + "value": "14px" }, - "dark": { - "value": "rgb(243, 117, 0)" + "mobile": { + "value": "17px" } }, - "orange-1100": { - "prop": "--spectrum-orange-1100", - "light": { - "value": "rgb(144, 51, 0)" + "menu-item-top-to-disclosure-icon-medium": { + "prop": "--spectrum-menu-item-top-to-disclosure-icon-medium", + "desktop": { + "value": "11px" }, - "dark": { - "value": "rgb(255, 137, 0)" + "mobile": { + "value": "13px" } }, - "orange-1200": { - "prop": "--spectrum-orange-1200", - "light": { - "value": "rgb(118, 41, 0)" + "menu-item-top-to-disclosure-icon-small": { + "prop": "--spectrum-menu-item-top-to-disclosure-icon-small", + "desktop": { + "value": "7px" }, - "dark": { - "value": "rgb(255, 173, 45)" + "mobile": { + "value": "9px" } }, - "orange-1300": { - "prop": "--spectrum-orange-1300", - "light": { - "value": "rgb(95, 32, 0)" + "menu-item-top-to-selected-icon-extra-large": { + "prop": "--spectrum-menu-item-top-to-selected-icon-extra-large", + "desktop": { + "value": "17px" }, - "dark": { - "value": "rgb(255, 201, 116)" + "mobile": { + "value": "22px" } }, - "orange-1400": { - "prop": "--spectrum-orange-1400", - "light": { - "value": "rgb(73, 24, 0)" + "menu-item-top-to-selected-icon-large": { + "prop": "--spectrum-menu-item-top-to-selected-icon-large", + "desktop": { + "value": "14px" }, - "dark": { - "value": "rgb(255, 225, 178)" + "mobile": { + "value": "17px" } }, - "orange-1500": { - "prop": "--spectrum-orange-1500", - "dark": { - "value": "rgb(255, 243, 225)" + "menu-item-top-to-selected-icon-medium": { + "prop": "--spectrum-menu-item-top-to-selected-icon-medium", + "desktop": { + "value": "11px" }, - "light": { - "value": "rgb(52, 18, 0)" + "mobile": { + "value": "13px" } }, - "orange-1600": { - "prop": "--spectrum-orange-1600", - "dark": { - "value": "rgb(255, 255, 255)" + "menu-item-top-to-selected-icon-small": { + "prop": "--spectrum-menu-item-top-to-selected-icon-small", + "desktop": { + "value": "7px" }, - "light": { - "value": "rgb(25, 8, 0)" + "mobile": { + "value": "9px" } }, - "orange-200": { - "prop": "--spectrum-orange-200", - "light": { - "value": "rgb(255, 236, 207)" + "menu-item-top-to-thumbnail-extra-large": { + "prop": "--spectrum-menu-item-top-to-thumbnail-extra-large", + "desktop": { + "value": "11px" }, - "dark": { - "value": "rgb(61, 21, 0)" + "mobile": { + "value": "13px" } }, - "orange-300": { - "prop": "--spectrum-orange-300", - "light": { - "value": "rgb(255, 218, 158)" + "menu-item-top-to-thumbnail-large": { + "prop": "--spectrum-menu-item-top-to-thumbnail-large", + "desktop": { + "value": "10px" }, - "dark": { - "value": "rgb(80, 27, 0)" + "mobile": { + "value": "12px" } }, - "orange-400": { - "prop": "--spectrum-orange-400", - "light": { - "value": "rgb(255, 193, 94)" + "menu-item-top-to-thumbnail-medium": { + "prop": "--spectrum-menu-item-top-to-thumbnail-medium", + "desktop": { + "value": "9px" }, - "dark": { - "value": "rgb(106, 36, 0)" + "mobile": { + "value": "11px" } }, - "orange-500": { - "prop": "--spectrum-orange-500", - "light": { - "value": "rgb(255, 162, 19)" + "menu-item-top-to-thumbnail-small": { + "prop": "--spectrum-menu-item-top-to-thumbnail-small", + "desktop": { + "value": "8px" }, - "dark": { - "value": "rgb(135, 47, 0)" + "mobile": { + "value": "10px" } }, - "orange-600": { - "prop": "--spectrum-orange-600", - "light": { - "value": "rgb(252, 125, 0)" - }, - "dark": { - "value": "rgb(162, 59, 0)" - } + "menu-section-header-to-description-extra-large": { + "prop": "--spectrum-menu-section-header-to-description-extra-large", + "value": "2px" }, - "orange-700": { - "prop": "--spectrum-orange-700", - "light": { - "value": "rgb(232, 106, 0)" - }, - "dark": { - "value": "rgb(185, 73, 0)" - } + "menu-section-header-to-description-large": { + "prop": "--spectrum-menu-section-header-to-description-large", + "value": "2px" }, - "orange-800": { - "prop": "--spectrum-orange-800", - "light": { - "value": "rgb(212, 91, 0)" + "menu-section-header-to-description-medium": { + "prop": "--spectrum-menu-section-header-to-description-medium", + "value": "1px" + }, + "menu-section-header-to-description-small": { + "prop": "--spectrum-menu-section-header-to-description-small", + "value": "1px" + }, + "meter-default-width": { + "prop": "--spectrum-meter-default-width", + "ref": "var(--spectrum-meter-width)", + "desktop": { + "value": "192px" }, - "dark": { - "value": "rgb(199, 82, 0)" + "mobile": { + "value": "240px" } }, - "orange-900": { - "prop": "--spectrum-orange-900", - "light": { - "value": "rgb(194, 78, 0)" + "meter-maximum-width": { + "prop": "--spectrum-meter-maximum-width", + "value": "768px" + }, + "meter-minimum-width": { + "prop": "--spectrum-meter-minimum-width", + "value": "48px" + }, + "meter-thickness-extra-large": { + "prop": "--spectrum-meter-thickness-extra-large", + "desktop": { + "value": "10px" }, - "dark": { - "value": "rgb(224, 100, 0)" + "mobile": { + "value": "13px" } }, - "orange-background-color-default": { - "prop": "--spectrum-orange-background-color-default", - "ref": "var(--spectrum-orange-900)", - "light": { - "value": "rgb(252, 125, 0)" + "meter-thickness-large": { + "prop": "--spectrum-meter-thickness-large", + "desktop": { + "value": "8px" }, - "dark": { - "value": "rgb(224, 100, 0)" + "mobile": { + "value": "10px" } }, - "orange-subtle-background-color-default": { - "prop": "--spectrum-orange-subtle-background-color-default", - "ref": "var(--spectrum-orange-300)", - "light": { - "value": "rgb(255, 236, 207)" + "meter-thickness-medium": { + "prop": "--spectrum-meter-thickness-medium", + "desktop": { + "value": "6px" }, - "dark": { - "value": "rgb(80, 27, 0)" + "mobile": { + "value": "8px" } }, - "orange-visual-color": { - "prop": "--spectrum-orange-visual-color", - "ref": "var(--spectrum-orange-900)", - "light": { - "value": "rgb(232, 106, 0)" + "meter-thickness-small": { + "prop": "--spectrum-meter-thickness-small", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgb(224, 100, 0)" + "mobile": { + "value": "5px" } }, - "overlay-color": { - "prop": "--spectrum-overlay-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "overlay-opacity": { - "prop": "--spectrum-overlay-opacity", - "light": { - "value": "0.4" + "meter-width": { + "prop": "--spectrum-meter-width", + "desktop": { + "value": "192px" }, - "dark": { - "value": "0.6" + "mobile": { + "value": "240px" } }, - "picker-border-width": { - "prop": "--spectrum-picker-border-width", - "ref": "var(--spectrum-border-width-100)", - "value": "1px" - }, - "picker-end-edge-to-disclosure-icon-quiet": { - "prop": "--spectrum-picker-end-edge-to-disclosure-icon-quiet", - "value": "0px" - }, - "picker-end-edge-to-disclousure-icon-quiet": { - "prop": "--spectrum-picker-end-edge-to-disclousure-icon-quiet", - "ref": "var(--spectrum-picker-end-edge-to-disclosure-icon-quiet)", - "value": "0px" - }, - "picker-minimum-width-multiplier": { - "prop": "--spectrum-picker-minimum-width-multiplier", - "value": "2" - }, - "picker-visual-to-disclosure-icon-extra-large": { - "prop": "--spectrum-picker-visual-to-disclosure-icon-extra-large", + "navigational-indicator-top-to-back-icon-extra-large": { + "prop": "--spectrum-navigational-indicator-top-to-back-icon-extra-large", "desktop": { - "value": "10px" + "value": "15px" }, "mobile": { - "value": "13px" + "value": "19px" } }, - "picker-visual-to-disclosure-icon-large": { - "prop": "--spectrum-picker-visual-to-disclosure-icon-large", + "navigational-indicator-top-to-back-icon-large": { + "prop": "--spectrum-navigational-indicator-top-to-back-icon-large", "desktop": { - "value": "9px" + "value": "12px" }, "mobile": { - "value": "11px" + "value": "16px" } }, - "picker-visual-to-disclosure-icon-medium": { - "prop": "--spectrum-picker-visual-to-disclosure-icon-medium", + "navigational-indicator-top-to-back-icon-medium": { + "prop": "--spectrum-navigational-indicator-top-to-back-icon-medium", "desktop": { - "value": "8px" + "value": "9px" }, "mobile": { - "value": "10px" + "value": "12px" } }, - "picker-visual-to-disclosure-icon-small": { - "prop": "--spectrum-picker-visual-to-disclosure-icon-small", + "navigational-indicator-top-to-back-icon-small": { + "prop": "--spectrum-navigational-indicator-top-to-back-icon-small", "desktop": { - "value": "7px" + "value": "6px" }, "mobile": { - "value": "9px" + "value": "7px" } }, - "pink-100": { - "prop": "--spectrum-pink-100", - "dark": { - "value": "rgb(58, 0, 37)" - }, + "negative-background-color-default": { + "prop": "--spectrum-negative-background-color-default", + "ref": "var(--spectrum-negative-color-800)", "light": { - "value": "rgb(255, 246, 252)" + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(223, 52, 34)" } }, - "pink-1000": { - "prop": "--spectrum-pink-1000", - "dark": { - "value": "rgb(251, 90, 196)" - }, + "negative-background-color-down": { + "prop": "--spectrum-negative-background-color-down", + "ref": "var(--spectrum-negative-color-700)", "light": { - "value": "rgb(176, 31, 123)" + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(205, 46, 29)" } }, - "pink-1100": { - "prop": "--spectrum-pink-1100", - "dark": { - "value": "rgb(255, 122, 210)" - }, + "negative-background-color-hover": { + "prop": "--spectrum-negative-background-color-hover", + "ref": "var(--spectrum-negative-color-700)", "light": { - "value": "rgb(152, 22, 104)" + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(205, 46, 29)" } }, - "pink-1200": { - "prop": "--spectrum-pink-1200", - "dark": { - "value": "rgb(255, 159, 223)" - }, + "negative-background-color-key-focus": { + "prop": "--spectrum-negative-background-color-key-focus", + "ref": "var(--spectrum-negative-color-700)", "light": { - "value": "rgb(128, 12, 85)" + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(205, 46, 29)" } }, - "pink-1300": { - "prop": "--spectrum-pink-1300", - "dark": { - "value": "rgb(255, 191, 234)" - }, + "negative-border-color-default": { + "prop": "--spectrum-negative-border-color-default", + "ref": "var(--spectrum-negative-color-900)", "light": { - "value": "rgb(105, 3, 68)" + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(252, 67, 46)" } }, - "pink-1400": { - "prop": "--spectrum-pink-1400", - "dark": { - "value": "rgb(255, 219, 243)" - }, + "negative-border-color-down": { + "prop": "--spectrum-negative-border-color-down", + "ref": "var(--spectrum-negative-color-1100)", "light": { - "value": "rgb(83, 0, 53)" + "value": "rgb(156, 33, 19)" + }, + "dark": { + "value": "rgb(255, 134, 120)" } }, - "pink-1500": { - "prop": "--spectrum-pink-1500", - "dark": { - "value": "rgb(255, 241, 250)" - }, + "negative-border-color-focus": { + "prop": "--spectrum-negative-border-color-focus", + "ref": "var(--spectrum-negative-color-1000)", "light": { - "value": "rgb(62, 0, 39)" + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(255, 103, 86)" } }, - "pink-1600": { - "prop": "--spectrum-pink-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, + "negative-border-color-focus-hover": { + "prop": "--spectrum-negative-border-color-focus-hover", + "ref": "var(--spectrum-negative-border-color-down)", "light": { - "value": "rgb(33, 0, 21)" + "value": "rgb(156, 33, 19)" + }, + "dark": { + "value": "rgb(255, 134, 120)" } }, - "pink-200": { - "prop": "--spectrum-pink-200", - "dark": { - "value": "rgb(71, 0, 44)" - }, + "negative-border-color-hover": { + "prop": "--spectrum-negative-border-color-hover", + "ref": "var(--spectrum-negative-color-1000)", "light": { - "value": "rgb(255, 232, 247)" + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(255, 103, 86)" } }, - "pink-300": { - "prop": "--spectrum-pink-300", - "dark": { - "value": "rgb(90, 0, 57)" - }, + "negative-border-color-key-focus": { + "prop": "--spectrum-negative-border-color-key-focus", + "ref": "var(--spectrum-negative-color-1000)", "light": { - "value": "rgb(255, 211, 240)" + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(255, 103, 86)" } }, - "pink-400": { - "prop": "--spectrum-pink-400", - "dark": { - "value": "rgb(115, 7, 75)" - }, + "negative-color-100": { + "prop": "--spectrum-negative-color-100", + "ref": "var(--spectrum-red-100)", "light": { - "value": "rgb(255, 181, 230)" + "value": "rgb(255, 246, 245)" + }, + "dark": { + "value": "rgb(54, 10, 3)" } }, - "pink-500": { - "prop": "--spectrum-pink-500", - "dark": { - "value": "rgb(143, 18, 97)" - }, + "negative-color-1000": { + "prop": "--spectrum-negative-color-1000", + "ref": "var(--spectrum-red-1000)", "light": { - "value": "rgb(255, 148, 219)" + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(255, 103, 86)" } }, - "pink-600": { - "prop": "--spectrum-pink-600", - "dark": { - "value": "rgb(171, 29, 119)" - }, + "negative-color-1100": { + "prop": "--spectrum-negative-color-1100", + "ref": "var(--spectrum-red-1100)", "light": { - "value": "rgb(255, 103, 204)" + "value": "rgb(156, 33, 19)" + }, + "dark": { + "value": "rgb(255, 134, 120)" } }, - "pink-700": { - "prop": "--spectrum-pink-700", + "negative-color-1200": { + "prop": "--spectrum-negative-color-1200", + "ref": "var(--spectrum-red-1200)", + "light": { + "value": "rgb(129, 27, 14)" + }, "dark": { - "value": "rgb(196, 39, 138)" + "value": "rgb(255, 167, 157)" + } + }, + "negative-color-1300": { + "prop": "--spectrum-negative-color-1300", + "ref": "var(--spectrum-red-1300)", + "light": { + "value": "rgb(104, 21, 10)" }, + "dark": { + "value": "rgb(255, 196, 189)" + } + }, + "negative-color-1400": { + "prop": "--spectrum-negative-color-1400", + "ref": "var(--spectrum-red-1400)", "light": { - "value": "rgb(242, 76, 184)" + "value": "rgb(80, 16, 6)" + }, + "dark": { + "value": "rgb(255, 222, 219)" } }, - "pink-800": { - "prop": "--spectrum-pink-800", + "negative-color-1500": { + "prop": "--spectrum-negative-color-1500", + "ref": "var(--spectrum-red-1500)", "dark": { - "value": "rgb(213, 45, 151)" + "value": "rgb(255, 242, 240)" }, "light": { - "value": "rgb(228, 52, 163)" + "value": "rgb(59, 11, 4)" } }, - "pink-900": { - "prop": "--spectrum-pink-900", + "negative-color-1600": { + "prop": "--spectrum-negative-color-1600", + "ref": "var(--spectrum-red-1600)", "dark": { - "value": "rgb(236, 67, 175)" + "value": "rgb(255, 255, 255)" }, "light": { - "value": "rgb(206, 42, 146)" + "value": "rgb(29, 5, 2)" } }, - "pink-background-color-default": { - "prop": "--spectrum-pink-background-color-default", - "ref": "var(--spectrum-pink-800)", + "negative-color-200": { + "prop": "--spectrum-negative-color-200", + "ref": "var(--spectrum-red-200)", "light": { - "value": "rgb(206, 42, 146)" + "value": "rgb(255, 235, 232)" }, "dark": { - "value": "rgb(213, 45, 151)" + "value": "rgb(68, 13, 5)" } }, - "pink-subtle-background-color-default": { - "prop": "--spectrum-pink-subtle-background-color-default", - "ref": "var(--spectrum-pink-300)", + "negative-color-300": { + "prop": "--spectrum-negative-color-300", + "ref": "var(--spectrum-red-300)", "light": { - "value": "rgb(255, 232, 247)" + "value": "rgb(255, 214, 209)" }, "dark": { - "value": "rgb(90, 0, 57)" + "value": "rgb(87, 17, 7)" } }, - "pink-visual-color": { - "prop": "--spectrum-pink-visual-color", - "ref": "var(--spectrum-pink-900)", + "negative-color-400": { + "prop": "--spectrum-negative-color-400", + "ref": "var(--spectrum-red-400)", "light": { - "value": "rgb(228, 52, 163)" + "value": "rgb(255, 188, 180)" }, "dark": { - "value": "rgb(236, 67, 175)" - } - }, - "popover-tip-height": { - "prop": "--spectrum-popover-tip-height", - "value": "8px" - }, - "popover-tip-width": { - "prop": "--spectrum-popover-tip-width", - "value": "16px" - }, - "popover-top-to-content-area": { - "prop": "--spectrum-popover-top-to-content-area", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" + "value": "rgb(115, 24, 11)" } }, - "positive-background-color-default": { - "prop": "--spectrum-positive-background-color-default", - "ref": "var(--spectrum-positive-color-800)", + "negative-color-500": { + "prop": "--spectrum-negative-color-500", + "ref": "var(--spectrum-red-500)", "light": { - "value": "rgb(5, 131, 78)" + "value": "rgb(255, 157, 145)" }, "dark": { - "value": "rgb(6, 136, 80)" + "value": "rgb(147, 31, 17)" } }, - "positive-background-color-down": { - "prop": "--spectrum-positive-background-color-down", - "ref": "var(--spectrum-positive-color-700)", + "negative-color-600": { + "prop": "--spectrum-negative-color-600", + "ref": "var(--spectrum-red-600)", "light": { - "value": "rgb(3, 110, 69)" + "value": "rgb(255, 118, 101)" }, "dark": { - "value": "rgb(4, 124, 75)" + "value": "rgb(177, 38, 23)" } }, - "positive-background-color-hover": { - "prop": "--spectrum-positive-background-color-hover", - "ref": "var(--spectrum-positive-color-700)", + "negative-color-700": { + "prop": "--spectrum-negative-color-700", + "ref": "var(--spectrum-red-700)", "light": { - "value": "rgb(3, 110, 69)" + "value": "rgb(255, 81, 61)" }, "dark": { - "value": "rgb(4, 124, 75)" + "value": "rgb(205, 46, 29)" } }, - "positive-background-color-key-focus": { - "prop": "--spectrum-positive-background-color-key-focus", - "ref": "var(--spectrum-positive-color-700)", + "negative-color-800": { + "prop": "--spectrum-negative-color-800", + "ref": "var(--spectrum-red-800)", "light": { - "value": "rgb(3, 110, 69)" + "value": "rgb(240, 56, 35)" }, "dark": { - "value": "rgb(4, 124, 75)" + "value": "rgb(223, 52, 34)" } }, - "positive-color-100": { - "prop": "--spectrum-positive-color-100", - "ref": "var(--spectrum-green-100)", + "negative-color-900": { + "prop": "--spectrum-negative-color-900", + "ref": "var(--spectrum-red-900)", "light": { - "value": "rgb(237, 252, 241)" + "value": "rgb(215, 50, 32)" }, "dark": { - "value": "rgb(0, 30, 23)" + "value": "rgb(252, 67, 46)" } }, - "positive-color-1000": { - "prop": "--spectrum-positive-color-1000", - "ref": "var(--spectrum-green-1000)", + "negative-content-color-default": { + "prop": "--spectrum-negative-content-color-default", + "ref": "var(--spectrum-negative-color-900)", "light": { - "value": "rgb(3, 110, 69)" + "value": "rgb(215, 50, 32)" }, "dark": { - "value": "rgb(14, 175, 98)" + "value": "rgb(252, 67, 46)" } }, - "positive-color-1100": { - "prop": "--spectrum-positive-color-1100", - "ref": "var(--spectrum-green-1100)", + "negative-content-color-down": { + "prop": "--spectrum-negative-content-color-down", + "ref": "var(--spectrum-negative-color-1000)", "light": { - "value": "rgb(2, 93, 60)" + "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(24, 193, 110)" + "value": "rgb(255, 103, 86)" } }, - "positive-color-1200": { - "prop": "--spectrum-positive-color-1200", - "ref": "var(--spectrum-green-1200)", + "negative-content-color-hover": { + "prop": "--spectrum-negative-content-color-hover", + "ref": "var(--spectrum-negative-color-1000)", "light": { - "value": "rgb(1, 76, 52)" + "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(57, 215, 134)" + "value": "rgb(255, 103, 86)" } }, - "positive-color-1300": { - "prop": "--spectrum-positive-color-1300", - "ref": "var(--spectrum-green-1300)", + "negative-content-color-key-focus": { + "prop": "--spectrum-negative-content-color-key-focus", + "ref": "var(--spectrum-negative-color-1000)", "light": { - "value": "rgb(0, 61, 44)" + "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(126, 231, 172)" + "value": "rgb(255, 103, 86)" } }, - "positive-color-1400": { - "prop": "--spectrum-positive-color-1400", - "ref": "var(--spectrum-green-1400)", + "negative-subdued-background-color-default": { + "prop": "--spectrum-negative-subdued-background-color-default", + "ref": "var(--spectrum-negative-color-300)", "light": { - "value": "rgb(0, 46, 34)" + "value": "rgb(255, 235, 232)" }, "dark": { - "value": "rgb(189, 241, 208)" + "value": "rgb(87, 17, 7)" } }, - "positive-color-1500": { - "prop": "--spectrum-positive-color-1500", - "ref": "var(--spectrum-green-1500)", - "dark": { - "value": "rgb(229, 250, 236)" - }, + "negative-subdued-background-color-down": { + "prop": "--spectrum-negative-subdued-background-color-down", + "ref": "var(--spectrum-negative-color-300)", "light": { - "value": "rgb(0, 33, 25)" + "value": "rgb(255, 214, 209)" + }, + "dark": { + "value": "rgb(87, 17, 7)" } }, - "positive-color-1600": { - "prop": "--spectrum-positive-color-1600", - "ref": "var(--spectrum-green-1600)", - "dark": { - "value": "rgb(255, 255, 255)" - }, + "negative-subdued-background-color-hover": { + "prop": "--spectrum-negative-subdued-background-color-hover", + "ref": "var(--spectrum-negative-color-300)", "light": { - "value": "rgb(0, 15, 12)" + "value": "rgb(255, 214, 209)" + }, + "dark": { + "value": "rgb(87, 17, 7)" } }, - "positive-color-200": { - "prop": "--spectrum-positive-color-200", - "ref": "var(--spectrum-green-200)", + "negative-subdued-background-color-key-focus": { + "prop": "--spectrum-negative-subdued-background-color-key-focus", + "ref": "var(--spectrum-negative-color-300)", "light": { - "value": "rgb(215, 247, 225)" + "value": "rgb(255, 214, 209)" }, "dark": { - "value": "rgb(0, 38, 29)" + "value": "rgb(87, 17, 7)" } }, - "positive-color-300": { - "prop": "--spectrum-positive-color-300", - "ref": "var(--spectrum-green-300)", + "negative-subtle-background-color-default": { + "prop": "--spectrum-negative-subtle-background-color-default", + "ref": "var(--spectrum-negative-color-300)", "light": { - "value": "rgb(173, 238, 197)" + "value": "rgb(255, 235, 232)" }, "dark": { - "value": "rgb(0, 51, 38)" + "value": "rgb(87, 17, 7)" } }, - "positive-color-400": { - "prop": "--spectrum-positive-color-400", - "ref": "var(--spectrum-green-400)", + "negative-visual-color": { + "prop": "--spectrum-negative-visual-color", + "ref": "var(--spectrum-negative-color-900)", "light": { - "value": "rgb(107, 227, 162)" + "value": "rgb(240, 56, 35)" }, "dark": { - "value": "rgb(0, 68, 48)" + "value": "rgb(252, 67, 46)" } }, - "positive-color-500": { - "prop": "--spectrum-positive-color-500", - "ref": "var(--spectrum-green-500)", + "neutral-background-color-default": { + "prop": "--spectrum-neutral-background-color-default", + "ref": "var(--spectrum-gray-800)", "light": { - "value": "rgb(43, 209, 125)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(2, 87, 58)" + "value": "rgb(219, 219, 219)" } }, - "positive-color-600": { - "prop": "--spectrum-positive-color-600", - "ref": "var(--spectrum-green-600)", + "neutral-background-color-down": { + "prop": "--spectrum-neutral-background-color-down", + "ref": "var(--spectrum-gray-900)", "light": { - "value": "rgb(18, 184, 103)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(3, 106, 67)" + "value": "rgb(242, 242, 242)" } }, - "positive-color-700": { - "prop": "--spectrum-positive-color-700", - "ref": "var(--spectrum-green-700)", + "neutral-background-color-hover": { + "prop": "--spectrum-neutral-background-color-hover", + "ref": "var(--spectrum-gray-900)", "light": { - "value": "rgb(11, 164, 93)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(4, 124, 75)" + "value": "rgb(242, 242, 242)" } }, - "positive-color-800": { - "prop": "--spectrum-positive-color-800", - "ref": "var(--spectrum-green-800)", + "neutral-background-color-key-focus": { + "prop": "--spectrum-neutral-background-color-key-focus", + "ref": "var(--spectrum-gray-900)", "light": { - "value": "rgb(7, 147, 85)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(6, 136, 80)" + "value": "rgb(242, 242, 242)" } }, - "positive-color-900": { - "prop": "--spectrum-positive-color-900", - "ref": "var(--spectrum-green-900)", + "neutral-background-color-selected-default": { + "prop": "--spectrum-neutral-background-color-selected-default", + "ref": "var(--spectrum-gray-800)", "light": { - "value": "rgb(5, 131, 78)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(9, 157, 89)" + "value": "rgb(219, 219, 219)" } }, - "positive-subtle-background-color-default": { - "prop": "--spectrum-positive-subtle-background-color-default", - "ref": "var(--spectrum-positive-color-300)", + "neutral-background-color-selected-down": { + "prop": "--spectrum-neutral-background-color-selected-down", + "ref": "var(--spectrum-gray-900)", "light": { - "value": "rgb(215, 247, 225)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(0, 51, 38)" + "value": "rgb(242, 242, 242)" } }, - "positive-visual-color": { - "prop": "--spectrum-positive-visual-color", - "ref": "var(--spectrum-positive-color-900)", + "neutral-background-color-selected-hover": { + "prop": "--spectrum-neutral-background-color-selected-hover", + "ref": "var(--spectrum-gray-900)", "light": { - "value": "rgb(7, 147, 85)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(9, 157, 89)" + "value": "rgb(242, 242, 242)" } }, - "progress-bar-maximum-width": { - "prop": "--spectrum-progress-bar-maximum-width", - "value": "768px" - }, - "progress-bar-minimum-width": { - "prop": "--spectrum-progress-bar-minimum-width", - "value": "48px" - }, - "progress-bar-thickness-extra-large": { - "prop": "--spectrum-progress-bar-thickness-extra-large", - "desktop": { - "value": "10px" + "neutral-background-color-selected-key-focus": { + "prop": "--spectrum-neutral-background-color-selected-key-focus", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" }, - "mobile": { - "value": "13px" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "progress-bar-thickness-large": { - "prop": "--spectrum-progress-bar-thickness-large", - "desktop": { - "value": "8px" + "neutral-content-color-default": { + "prop": "--spectrum-neutral-content-color-default", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" }, - "mobile": { - "value": "10px" + "dark": { + "value": "rgb(219, 219, 219)" } }, - "progress-bar-thickness-medium": { - "prop": "--spectrum-progress-bar-thickness-medium", - "desktop": { - "value": "6px" + "neutral-content-color-down": { + "prop": "--spectrum-neutral-content-color-down", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" }, - "mobile": { - "value": "8px" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "progress-bar-thickness-small": { - "prop": "--spectrum-progress-bar-thickness-small", - "desktop": { - "value": "4px" + "neutral-content-color-focus": { + "prop": "--spectrum-neutral-content-color-focus", + "ref": "var(--spectrum-neutral-content-color-down)", + "light": { + "value": "rgb(19, 19, 19)" }, - "mobile": { - "value": "5px" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "progress-circle-size-large": { - "prop": "--spectrum-progress-circle-size-large", - "desktop": { - "value": "64px" + "neutral-content-color-focus-hover": { + "prop": "--spectrum-neutral-content-color-focus-hover", + "ref": "var(--spectrum-neutral-content-color-down)", + "light": { + "value": "rgb(19, 19, 19)" }, - "mobile": { - "value": "80px" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "progress-circle-size-medium": { - "prop": "--spectrum-progress-circle-size-medium", - "desktop": { - "value": "32px" + "neutral-content-color-hover": { + "prop": "--spectrum-neutral-content-color-hover", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" }, - "mobile": { - "value": "40px" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "progress-circle-size-small": { - "prop": "--spectrum-progress-circle-size-small", - "desktop": { - "value": "16px" + "neutral-content-color-key-focus": { + "prop": "--spectrum-neutral-content-color-key-focus", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" }, - "mobile": { - "value": "20px" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "progress-circle-thickness-large": { - "prop": "--spectrum-progress-circle-thickness-large", - "desktop": { - "value": "4px" + "neutral-subdued-background-color-default": { + "prop": "--spectrum-neutral-subdued-background-color-default", + "ref": "var(--spectrum-gray-500)", + "light": { + "value": "rgb(80, 80, 80)" }, - "mobile": { - "value": "5px" + "dark": { + "value": "rgb(109, 109, 109)" } }, - "progress-circle-thickness-medium": { - "prop": "--spectrum-progress-circle-thickness-medium", - "desktop": { - "value": "3px" + "neutral-subdued-background-color-down": { + "prop": "--spectrum-neutral-subdued-background-color-down", + "ref": "var(--spectrum-gray-400)", + "light": { + "value": "rgb(41, 41, 41)" }, - "mobile": { - "value": "4px" + "dark": { + "value": "rgb(68, 68, 68)" } }, - "progress-circle-thickness-small": { - "prop": "--spectrum-progress-circle-thickness-small", - "desktop": { - "value": "2px" + "neutral-subdued-background-color-hover": { + "prop": "--spectrum-neutral-subdued-background-color-hover", + "ref": "var(--spectrum-gray-400)", + "light": { + "value": "rgb(41, 41, 41)" }, - "mobile": { - "value": "3px" + "dark": { + "value": "rgb(68, 68, 68)" } }, - "purple-100": { - "prop": "--spectrum-purple-100", + "neutral-subdued-background-color-key-focus": { + "prop": "--spectrum-neutral-subdued-background-color-key-focus", + "ref": "var(--spectrum-gray-400)", "light": { - "value": "rgb(251, 247, 254)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(41, 0, 79)" + "value": "rgb(68, 68, 68)" } }, - "purple-1000": { - "prop": "--spectrum-purple-1000", + "neutral-subdued-content-color-default": { + "prop": "--spectrum-neutral-subdued-content-color-default", + "ref": "var(--spectrum-gray-700)", "light": { - "value": "rgb(134, 40, 217)" + "value": "rgb(80, 80, 80)" }, "dark": { - "value": "rgb(186, 127, 237)" + "value": "rgb(175, 175, 175)" } }, - "purple-1100": { - "prop": "--spectrum-purple-1100", + "neutral-subdued-content-color-down": { + "prop": "--spectrum-neutral-subdued-content-color-down", + "ref": "var(--spectrum-gray-800)", "light": { - "value": "rgb(115, 13, 204)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(197, 149, 240)" + "value": "rgb(219, 219, 219)" } }, - "purple-1200": { - "prop": "--spectrum-purple-1200", + "neutral-subdued-content-color-hover": { + "prop": "--spectrum-neutral-subdued-content-color-hover", + "ref": "var(--spectrum-gray-800)", "light": { - "value": "rgb(93, 0, 177)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(212, 176, 244)" + "value": "rgb(219, 219, 219)" } }, - "purple-1300": { - "prop": "--spectrum-purple-1300", + "neutral-subdued-content-color-key-focus": { + "prop": "--spectrum-neutral-subdued-content-color-key-focus", + "ref": "var(--spectrum-gray-800)", "light": { - "value": "rgb(75, 0, 144)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(225, 201, 247)" + "value": "rgb(219, 219, 219)" } }, - "purple-1400": { - "prop": "--spectrum-purple-1400", + "neutral-subdued-content-color-selected": { + "prop": "--spectrum-neutral-subdued-content-color-selected", + "ref": "var(--spectrum-neutral-subdued-content-color-down)", "light": { - "value": "rgb(59, 0, 111)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(238, 224, 250)" + "value": "rgb(219, 219, 219)" } }, - "purple-1500": { - "prop": "--spectrum-purple-1500", - "dark": { - "value": "rgb(248, 243, 253)" + "neutral-subtle-background-color-default": { + "prop": "--spectrum-neutral-subtle-background-color-default", + "ref": "var(--spectrum-gray-300)", + "light": { + "value": "rgb(233, 233, 233)" }, + "dark": { + "value": "rgb(57, 57, 57)" + } + }, + "neutral-visual-color": { + "prop": "--spectrum-neutral-visual-color", + "ref": "var(--spectrum-gray-600)", "light": { - "value": "rgb(44, 0, 84)" + "value": "rgb(143, 143, 143)" + }, + "dark": { + "value": "rgb(138, 138, 138)" } }, - "purple-1600": { - "prop": "--spectrum-purple-1600", + "notice-background-color-default": { + "prop": "--spectrum-notice-background-color-default", + "ref": "var(--spectrum-notice-color-600)", "dark": { - "value": "rgb(255, 255, 255)" + "value": "rgb(224, 100, 0)" }, "light": { - "value": "rgb(23, 0, 45)" + "value": "rgb(252, 125, 0)" } }, - "purple-200": { - "prop": "--spectrum-purple-200", + "notice-color-100": { + "prop": "--spectrum-notice-color-100", + "ref": "var(--spectrum-orange-100)", "light": { - "value": "rgb(244, 235, 252)" + "value": "rgb(255, 246, 231)" }, "dark": { - "value": "rgb(50, 0, 96)" + "value": "rgb(49, 16, 0)" } }, - "purple-300": { - "prop": "--spectrum-purple-300", + "notice-color-1000": { + "prop": "--spectrum-notice-color-1000", + "ref": "var(--spectrum-orange-1000)", "light": { - "value": "rgb(235, 218, 249)" + "value": "rgb(167, 62, 0)" }, "dark": { - "value": "rgb(64, 0, 122)" + "value": "rgb(243, 117, 0)" } }, - "purple-400": { - "prop": "--spectrum-purple-400", + "notice-color-1100": { + "prop": "--spectrum-notice-color-1100", + "ref": "var(--spectrum-orange-1100)", "light": { - "value": "rgb(221, 193, 246)" + "value": "rgb(144, 51, 0)" }, "dark": { - "value": "rgb(83, 0, 159)" + "value": "rgb(255, 137, 0)" } }, - "purple-500": { - "prop": "--spectrum-purple-500", + "notice-color-1200": { + "prop": "--spectrum-notice-color-1200", + "ref": "var(--spectrum-orange-1200)", "light": { - "value": "rgb(208, 167, 243)" + "value": "rgb(118, 41, 0)" }, "dark": { - "value": "rgb(107, 6, 195)" + "value": "rgb(255, 173, 45)" } }, - "purple-600": { - "prop": "--spectrum-purple-600", + "notice-color-1300": { + "prop": "--spectrum-notice-color-1300", + "ref": "var(--spectrum-orange-1300)", "light": { - "value": "rgb(191, 138, 238)" + "value": "rgb(95, 32, 0)" }, "dark": { - "value": "rgb(130, 34, 215)" + "value": "rgb(255, 201, 116)" } }, - "purple-700": { - "prop": "--spectrum-purple-700", + "notice-color-1400": { + "prop": "--spectrum-notice-color-1400", + "ref": "var(--spectrum-orange-1400)", "light": { - "value": "rgb(178, 114, 235)" + "value": "rgb(73, 24, 0)" }, "dark": { - "value": "rgb(148, 62, 224)" + "value": "rgb(255, 225, 178)" } }, - "purple-800": { - "prop": "--spectrum-purple-800", + "notice-color-1500": { + "prop": "--spectrum-notice-color-1500", + "ref": "var(--spectrum-orange-1500)", + "dark": { + "value": "rgb(255, 243, 225)" + }, "light": { - "value": "rgb(166, 92, 231)" + "value": "rgb(52, 18, 0)" + } + }, + "notice-color-1600": { + "prop": "--spectrum-notice-color-1600", + "ref": "var(--spectrum-orange-1600)", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(25, 8, 0)" + } + }, + "notice-color-200": { + "prop": "--spectrum-notice-color-200", + "ref": "var(--spectrum-orange-200)", + "light": { + "value": "rgb(255, 236, 207)" }, "dark": { - "value": "rgb(157, 78, 228)" + "value": "rgb(61, 21, 0)" } }, - "purple-900": { - "prop": "--spectrum-purple-900", + "notice-color-300": { + "prop": "--spectrum-notice-color-300", + "ref": "var(--spectrum-orange-300)", "light": { - "value": "rgb(154, 71, 226)" + "value": "rgb(255, 218, 158)" }, "dark": { - "value": "rgb(173, 105, 233)" + "value": "rgb(80, 27, 0)" } }, - "purple-background-color-default": { - "prop": "--spectrum-purple-background-color-default", - "ref": "var(--spectrum-purple-800)", + "notice-color-400": { + "prop": "--spectrum-notice-color-400", + "ref": "var(--spectrum-orange-400)", "light": { - "value": "rgb(154, 71, 226)" + "value": "rgb(255, 193, 94)" }, "dark": { - "value": "rgb(157, 78, 228)" + "value": "rgb(106, 36, 0)" } }, - "purple-subtle-background-color-default": { - "prop": "--spectrum-purple-subtle-background-color-default", - "ref": "var(--spectrum-purple-300)", + "notice-color-500": { + "prop": "--spectrum-notice-color-500", + "ref": "var(--spectrum-orange-500)", "light": { - "value": "rgb(244, 235, 252)" + "value": "rgb(255, 162, 19)" }, "dark": { - "value": "rgb(64, 0, 122)" + "value": "rgb(135, 47, 0)" } }, - "purple-visual-color": { - "prop": "--spectrum-purple-visual-color", - "ref": "var(--spectrum-purple-900)", + "notice-color-600": { + "prop": "--spectrum-notice-color-600", + "ref": "var(--spectrum-orange-600)", "light": { - "value": "rgb(166, 92, 231)" + "value": "rgb(252, 125, 0)" }, "dark": { - "value": "rgb(173, 105, 233)" + "value": "rgb(162, 59, 0)" } }, - "radio-button-control-size-extra-large": { - "prop": "--spectrum-radio-button-control-size-extra-large", - "desktop": { - "value": "18px" + "notice-color-700": { + "prop": "--spectrum-notice-color-700", + "ref": "var(--spectrum-orange-700)", + "light": { + "value": "rgb(232, 106, 0)" }, - "mobile": { - "value": "22px" + "dark": { + "value": "rgb(185, 73, 0)" } }, - "radio-button-control-size-large": { - "prop": "--spectrum-radio-button-control-size-large", - "desktop": { - "value": "16px" + "notice-color-800": { + "prop": "--spectrum-notice-color-800", + "ref": "var(--spectrum-orange-800)", + "light": { + "value": "rgb(212, 91, 0)" }, - "mobile": { - "value": "20px" + "dark": { + "value": "rgb(199, 82, 0)" } }, - "radio-button-control-size-medium": { - "prop": "--spectrum-radio-button-control-size-medium", - "desktop": { - "value": "14px" + "notice-color-900": { + "prop": "--spectrum-notice-color-900", + "ref": "var(--spectrum-orange-900)", + "light": { + "value": "rgb(194, 78, 0)" }, - "mobile": { - "value": "18px" + "dark": { + "value": "rgb(224, 100, 0)" } }, - "radio-button-control-size-small": { - "prop": "--spectrum-radio-button-control-size-small", + "notice-subtle-background-color-default": { + "prop": "--spectrum-notice-subtle-background-color-default", + "ref": "var(--spectrum-notice-color-300)", + "light": { + "value": "rgb(255, 236, 207)" + }, + "dark": { + "value": "rgb(80, 27, 0)" + } + }, + "notice-visual-color": { + "prop": "--spectrum-notice-visual-color", + "ref": "var(--spectrum-notice-color-900)", + "light": { + "value": "rgb(212, 91, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" + } + }, + "number-field-minimum-width-multiplier": { + "prop": "--spectrum-number-field-minimum-width-multiplier", + "value": 1.25 + }, + "number-field-visual-to-in-field-stepper-extra-large": { + "prop": "--spectrum-number-field-visual-to-in-field-stepper-extra-large", "desktop": { - "value": "12px" + "value": "8px" }, "mobile": { - "value": "16px" + "value": "10px" } }, - "radio-button-selection-indicator": { - "prop": "--spectrum-radio-button-selection-indicator", - "value": "4px" + "number-field-visual-to-in-field-stepper-large": { + "prop": "--spectrum-number-field-visual-to-in-field-stepper-large", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } }, - "radio-button-top-to-control-extra-large": { - "prop": "--spectrum-radio-button-top-to-control-extra-large", + "number-field-visual-to-in-field-stepper-medium": { + "prop": "--spectrum-number-field-visual-to-in-field-stepper-medium", "desktop": { - "value": "15px" + "value": "6px" }, "mobile": { - "value": "19px" + "value": "8px" } }, - "radio-button-top-to-control-large": { - "prop": "--spectrum-radio-button-top-to-control-large", + "number-field-visual-to-in-field-stepper-small": { + "prop": "--spectrum-number-field-visual-to-in-field-stepper-small", "desktop": { - "value": "12px" + "value": "5px" }, "mobile": { - "value": "15px" + "value": "7px" } }, - "radio-button-top-to-control-medium": { - "prop": "--spectrum-radio-button-top-to-control-medium", + "number-field-with-stepper-minimum-width-extra-large": { + "prop": "--spectrum-number-field-with-stepper-minimum-width-extra-large", "desktop": { - "value": "9px" + "value": "168px" }, "mobile": { - "value": "11px" + "value": "198px" } }, - "radio-button-top-to-control-small": { - "prop": "--spectrum-radio-button-top-to-control-small", + "number-field-with-stepper-minimum-width-large": { + "prop": "--spectrum-number-field-with-stepper-minimum-width-large", "desktop": { - "value": "6px" + "value": "144px" }, "mobile": { - "value": "7px" + "value": "174px" } }, - "rating-indicator-to-icon": { - "prop": "--spectrum-rating-indicator-to-icon", + "number-field-with-stepper-minimum-width-medium": { + "prop": "--spectrum-number-field-with-stepper-minimum-width-medium", "desktop": { - "value": "4px" + "value": "120px" }, "mobile": { - "value": "5px" + "value": "150px" } }, - "rating-indicator-width": { - "prop": "--spectrum-rating-indicator-width", + "number-field-with-stepper-minimum-width-small": { + "prop": "--spectrum-number-field-with-stepper-minimum-width-small", "desktop": { - "value": "18px" + "value": "104px" }, "mobile": { - "value": "22px" + "value": "126px" } }, - "red-100": { - "prop": "--spectrum-red-100", + "opacity-checkerboard-square-dark": { + "prop": "--spectrum-opacity-checkerboard-square-dark", + "ref": "var(--spectrum-gray-800)", "light": { - "value": "rgb(255, 246, 245)" + "value": "rgb(225, 225, 225)" }, "dark": { - "value": "rgb(54, 10, 3)" + "value": "rgb(219, 219, 219)" } }, - "red-1000": { - "prop": "--spectrum-red-1000", + "opacity-checkerboard-square-light": { + "prop": "--spectrum-opacity-checkerboard-square-light", + "ref": "var(--spectrum-white)", + "value": "rgb(255, 255, 255)" + }, + "opacity-checkerboard-square-size": { + "prop": "--spectrum-opacity-checkerboard-square-size", + "ref": "var(--spectrum-opacity-checkerboard-square-size-medium)", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "opacity-checkerboard-square-size-medium": { + "prop": "--spectrum-opacity-checkerboard-square-size-medium", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "opacity-checkerboard-square-size-small": { + "prop": "--spectrum-opacity-checkerboard-square-size-small", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "opacity-disabled": { + "prop": "--spectrum-opacity-disabled", + "value": "0.3" + }, + "orange-100": { + "prop": "--spectrum-orange-100", "light": { - "value": "rgb(183, 40, 24)" + "value": "rgb(255, 246, 231)" }, "dark": { - "value": "rgb(255, 103, 86)" + "value": "rgb(49, 16, 0)" } }, - "red-1100": { - "prop": "--spectrum-red-1100", + "orange-1000": { + "prop": "--spectrum-orange-1000", "light": { - "value": "rgb(156, 33, 19)" + "value": "rgb(167, 62, 0)" }, "dark": { - "value": "rgb(255, 134, 120)" + "value": "rgb(243, 117, 0)" } }, - "red-1200": { - "prop": "--spectrum-red-1200", + "orange-1100": { + "prop": "--spectrum-orange-1100", "light": { - "value": "rgb(129, 27, 14)" + "value": "rgb(144, 51, 0)" }, "dark": { - "value": "rgb(255, 167, 157)" + "value": "rgb(255, 137, 0)" } }, - "red-1300": { - "prop": "--spectrum-red-1300", + "orange-1200": { + "prop": "--spectrum-orange-1200", "light": { - "value": "rgb(104, 21, 10)" + "value": "rgb(118, 41, 0)" }, "dark": { - "value": "rgb(255, 196, 189)" + "value": "rgb(255, 173, 45)" } }, - "red-1400": { - "prop": "--spectrum-red-1400", + "orange-1300": { + "prop": "--spectrum-orange-1300", "light": { - "value": "rgb(80, 16, 6)" + "value": "rgb(95, 32, 0)" }, "dark": { - "value": "rgb(255, 222, 219)" + "value": "rgb(255, 201, 116)" } }, - "red-1500": { - "prop": "--spectrum-red-1500", + "orange-1400": { + "prop": "--spectrum-orange-1400", + "light": { + "value": "rgb(73, 24, 0)" + }, "dark": { - "value": "rgb(255, 242, 240)" + "value": "rgb(255, 225, 178)" + } + }, + "orange-1500": { + "prop": "--spectrum-orange-1500", + "dark": { + "value": "rgb(255, 243, 225)" }, "light": { - "value": "rgb(59, 11, 4)" + "value": "rgb(52, 18, 0)" } }, - "red-1600": { - "prop": "--spectrum-red-1600", + "orange-1600": { + "prop": "--spectrum-orange-1600", "dark": { "value": "rgb(255, 255, 255)" }, "light": { - "value": "rgb(29, 5, 2)" + "value": "rgb(25, 8, 0)" } }, - "red-200": { - "prop": "--spectrum-red-200", + "orange-200": { + "prop": "--spectrum-orange-200", "light": { - "value": "rgb(255, 235, 232)" + "value": "rgb(255, 236, 207)" }, "dark": { - "value": "rgb(68, 13, 5)" + "value": "rgb(61, 21, 0)" } }, - "red-300": { - "prop": "--spectrum-red-300", + "orange-300": { + "prop": "--spectrum-orange-300", "light": { - "value": "rgb(255, 214, 209)" + "value": "rgb(255, 218, 158)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(80, 27, 0)" } }, - "red-400": { - "prop": "--spectrum-red-400", + "orange-400": { + "prop": "--spectrum-orange-400", "light": { - "value": "rgb(255, 188, 180)" + "value": "rgb(255, 193, 94)" }, "dark": { - "value": "rgb(115, 24, 11)" + "value": "rgb(106, 36, 0)" } }, - "red-500": { - "prop": "--spectrum-red-500", + "orange-500": { + "prop": "--spectrum-orange-500", "light": { - "value": "rgb(255, 157, 145)" + "value": "rgb(255, 162, 19)" }, "dark": { - "value": "rgb(147, 31, 17)" + "value": "rgb(135, 47, 0)" } }, - "red-600": { - "prop": "--spectrum-red-600", + "orange-600": { + "prop": "--spectrum-orange-600", "light": { - "value": "rgb(255, 118, 101)" + "value": "rgb(252, 125, 0)" }, "dark": { - "value": "rgb(177, 38, 23)" + "value": "rgb(162, 59, 0)" } }, - "red-700": { - "prop": "--spectrum-red-700", + "orange-700": { + "prop": "--spectrum-orange-700", "light": { - "value": "rgb(255, 81, 61)" + "value": "rgb(232, 106, 0)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(185, 73, 0)" } }, - "red-800": { - "prop": "--spectrum-red-800", + "orange-800": { + "prop": "--spectrum-orange-800", "light": { - "value": "rgb(240, 56, 35)" + "value": "rgb(212, 91, 0)" }, "dark": { - "value": "rgb(223, 52, 34)" + "value": "rgb(199, 82, 0)" } }, - "red-900": { - "prop": "--spectrum-red-900", + "orange-900": { + "prop": "--spectrum-orange-900", "light": { - "value": "rgb(215, 50, 32)" + "value": "rgb(194, 78, 0)" }, "dark": { - "value": "rgb(252, 67, 46)" + "value": "rgb(224, 100, 0)" } }, - "red-background-color-default": { - "prop": "--spectrum-red-background-color-default", - "ref": "var(--spectrum-red-800)", + "orange-background-color-default": { + "prop": "--spectrum-orange-background-color-default", + "ref": "var(--spectrum-orange-900)", "light": { - "value": "rgb(215, 50, 32)" + "value": "rgb(252, 125, 0)" }, "dark": { - "value": "rgb(223, 52, 34)" + "value": "rgb(224, 100, 0)" } }, - "red-subtle-background-color-default": { - "prop": "--spectrum-red-subtle-background-color-default", - "ref": "var(--spectrum-red-300)", + "orange-subtle-background-color-default": { + "prop": "--spectrum-orange-subtle-background-color-default", + "ref": "var(--spectrum-orange-300)", "light": { - "value": "rgb(255, 235, 232)" + "value": "rgb(255, 236, 207)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(80, 27, 0)" } }, - "red-visual-color": { - "prop": "--spectrum-red-visual-color", - "ref": "var(--spectrum-red-700)", - "light": { - "value": "rgb(240, 56, 35)" + "orange-visual-color": { + "prop": "--spectrum-orange-visual-color", + "ref": "var(--spectrum-orange-900)", + "light": { + "value": "rgb(232, 106, 0)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(224, 100, 0)" } }, - "regular-font-weight": { - "prop": "--spectrum-regular-font-weight", - "ref": "regular", - "value": "400" - }, - "sans-serif-font-family": { - "prop": "--spectrum-sans-serif-font-family", - "value": "Adobe Clean" + "overlay-color": { + "prop": "--spectrum-overlay-color", + "ref": "var(--spectrum-black)", + "value": "rgb(0, 0, 0)" }, - "seafoam-100": { - "prop": "--spectrum-seafoam-100", + "overlay-opacity": { + "prop": "--spectrum-overlay-opacity", "light": { - "value": "rgb(235, 251, 246)" + "value": "0.4" }, "dark": { - "value": "rgb(0, 30, 27)" + "value": "0.6" } }, - "seafoam-1000": { - "prop": "--spectrum-seafoam-1000", + "picker-border-width": { + "prop": "--spectrum-picker-border-width", + "ref": "var(--spectrum-border-width-100)", + "value": "1px" + }, + "picker-end-edge-to-disclosure-icon-quiet": { + "prop": "--spectrum-picker-end-edge-to-disclosure-icon-quiet", + "value": "0px" + }, + "picker-end-edge-to-disclousure-icon-quiet": { + "prop": "--spectrum-picker-end-edge-to-disclousure-icon-quiet", + "ref": "var(--spectrum-picker-end-edge-to-disclosure-icon-quiet)", + "value": "0px" + }, + "picker-minimum-width-multiplier": { + "prop": "--spectrum-picker-minimum-width-multiplier", + "value": 2 + }, + "picker-visual-to-disclosure-icon-extra-large": { + "prop": "--spectrum-picker-visual-to-disclosure-icon-extra-large", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "13px" + } + }, + "picker-visual-to-disclosure-icon-large": { + "prop": "--spectrum-picker-visual-to-disclosure-icon-large", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "picker-visual-to-disclosure-icon-medium": { + "prop": "--spectrum-picker-visual-to-disclosure-icon-medium", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "picker-visual-to-disclosure-icon-small": { + "prop": "--spectrum-picker-visual-to-disclosure-icon-small", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + }, + "pink-100": { + "prop": "--spectrum-pink-100", + "dark": { + "value": "rgb(58, 0, 37)" + }, "light": { - "value": "rgb(5, 108, 92)" + "value": "rgb(255, 246, 252)" + } + }, + "pink-1000": { + "prop": "--spectrum-pink-1000", + "dark": { + "value": "rgb(251, 90, 196)" }, + "light": { + "value": "rgb(176, 31, 123)" + } + }, + "pink-1100": { + "prop": "--spectrum-pink-1100", "dark": { - "value": "rgb(12, 173, 142)" + "value": "rgb(255, 122, 210)" + }, + "light": { + "value": "rgb(152, 22, 104)" } }, - "seafoam-1100": { - "prop": "--spectrum-seafoam-1100", + "pink-1200": { + "prop": "--spectrum-pink-1200", + "dark": { + "value": "rgb(255, 159, 223)" + }, "light": { - "value": "rgb(3, 92, 80)" + "value": "rgb(128, 12, 85)" + } + }, + "pink-1300": { + "prop": "--spectrum-pink-1300", + "dark": { + "value": "rgb(255, 191, 234)" }, + "light": { + "value": "rgb(105, 3, 68)" + } + }, + "pink-1400": { + "prop": "--spectrum-pink-1400", "dark": { - "value": "rgb(14, 190, 156)" + "value": "rgb(255, 219, 243)" + }, + "light": { + "value": "rgb(83, 0, 53)" } }, - "seafoam-1200": { - "prop": "--spectrum-seafoam-1200", + "pink-1500": { + "prop": "--spectrum-pink-1500", + "dark": { + "value": "rgb(255, 241, 250)" + }, "light": { - "value": "rgb(1, 75, 67)" + "value": "rgb(62, 0, 39)" + } + }, + "pink-1600": { + "prop": "--spectrum-pink-1600", + "dark": { + "value": "rgb(255, 255, 255)" }, + "light": { + "value": "rgb(33, 0, 21)" + } + }, + "pink-200": { + "prop": "--spectrum-pink-200", "dark": { - "value": "rgb(29, 214, 176)" + "value": "rgb(71, 0, 44)" + }, + "light": { + "value": "rgb(255, 232, 247)" } }, - "seafoam-1300": { - "prop": "--spectrum-seafoam-1300", + "pink-300": { + "prop": "--spectrum-pink-300", + "dark": { + "value": "rgb(90, 0, 57)" + }, "light": { - "value": "rgb(0, 60, 54)" + "value": "rgb(255, 211, 240)" + } + }, + "pink-400": { + "prop": "--spectrum-pink-400", + "dark": { + "value": "rgb(115, 7, 75)" }, + "light": { + "value": "rgb(255, 181, 230)" + } + }, + "pink-500": { + "prop": "--spectrum-pink-500", "dark": { - "value": "rgb(122, 229, 203)" + "value": "rgb(143, 18, 97)" + }, + "light": { + "value": "rgb(255, 148, 219)" } }, - "seafoam-1400": { - "prop": "--spectrum-seafoam-1400", + "pink-600": { + "prop": "--spectrum-pink-600", + "dark": { + "value": "rgb(171, 29, 119)" + }, "light": { - "value": "rgb(0, 46, 40)" + "value": "rgb(255, 103, 204)" + } + }, + "pink-700": { + "prop": "--spectrum-pink-700", + "dark": { + "value": "rgb(196, 39, 138)" }, + "light": { + "value": "rgb(242, 76, 184)" + } + }, + "pink-800": { + "prop": "--spectrum-pink-800", "dark": { - "value": "rgb(186, 241, 222)" + "value": "rgb(213, 45, 151)" + }, + "light": { + "value": "rgb(228, 52, 163)" } }, - "seafoam-1500": { - "prop": "--spectrum-seafoam-1500", + "pink-900": { + "prop": "--spectrum-pink-900", "dark": { - "value": "rgb(229, 249, 243)" + "value": "rgb(236, 67, 175)" }, "light": { - "value": "rgb(0, 33, 29)" + "value": "rgb(206, 42, 146)" } }, - "seafoam-1600": { - "prop": "--spectrum-seafoam-1600", + "pink-background-color-default": { + "prop": "--spectrum-pink-background-color-default", + "ref": "var(--spectrum-pink-800)", + "light": { + "value": "rgb(206, 42, 146)" + }, "dark": { - "value": "rgb(255, 255, 255)" + "value": "rgb(213, 45, 151)" + } + }, + "pink-subtle-background-color-default": { + "prop": "--spectrum-pink-subtle-background-color-default", + "ref": "var(--spectrum-pink-300)", + "light": { + "value": "rgb(255, 232, 247)" }, + "dark": { + "value": "rgb(90, 0, 57)" + } + }, + "pink-visual-color": { + "prop": "--spectrum-pink-visual-color", + "ref": "var(--spectrum-pink-900)", "light": { - "value": "rgb(0, 15, 14)" + "value": "rgb(228, 52, 163)" + }, + "dark": { + "value": "rgb(236, 67, 175)" } }, - "seafoam-200": { - "prop": "--spectrum-seafoam-200", + "popover-border-color": { + "prop": "--spectrum-popover-border-color", "light": { - "value": "rgb(211, 246, 234)" + "ref": "var(--spectrum-transparent-white-25)", + "value": "rgba(255, 255, 255, 0)" }, + "ref": "var(--spectrum-gray-400)", "dark": { - "value": "rgb(0, 39, 35)" + "value": "rgb(68, 68, 68)" } }, - "seafoam-300": { - "prop": "--spectrum-seafoam-300", - "light": { - "value": "rgb(169, 237, 216)" - }, - "dark": { - "value": "rgb(0, 50, 44)" - } + "popover-border-opacity": { + "prop": "--spectrum-popover-border-opacity", + "light": { + "value": "0" + }, + "dark": { + "value": "1.0" + } + }, + "popover-edge-to-content-area": { + "prop": "--spectrum-popover-edge-to-content-area", + "ref": "var(--spectrum-spacing-100)", + "value": "8px" + }, + "popover-tip-height": { + "prop": "--spectrum-popover-tip-height", + "value": "8px" + }, + "popover-tip-width": { + "prop": "--spectrum-popover-tip-width", + "value": "16px" + }, + "popover-top-to-content-area": { + "prop": "--spectrum-popover-top-to-content-area", + "ref": "var(--spectrum-popover-edge-to-content-area)", + "value": "8px" + }, + "positive-background-color-default": { + "prop": "--spectrum-positive-background-color-default", + "ref": "var(--spectrum-positive-color-800)", + "light": { + "value": "rgb(5, 131, 78)" + }, + "dark": { + "value": "rgb(6, 136, 80)" + } + }, + "positive-background-color-down": { + "prop": "--spectrum-positive-background-color-down", + "ref": "var(--spectrum-positive-color-700)", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(4, 124, 75)" + } + }, + "positive-background-color-hover": { + "prop": "--spectrum-positive-background-color-hover", + "ref": "var(--spectrum-positive-color-700)", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(4, 124, 75)" + } + }, + "positive-background-color-key-focus": { + "prop": "--spectrum-positive-background-color-key-focus", + "ref": "var(--spectrum-positive-color-700)", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(4, 124, 75)" + } + }, + "positive-color-100": { + "prop": "--spectrum-positive-color-100", + "ref": "var(--spectrum-green-100)", + "light": { + "value": "rgb(237, 252, 241)" + }, + "dark": { + "value": "rgb(0, 30, 23)" + } + }, + "positive-color-1000": { + "prop": "--spectrum-positive-color-1000", + "ref": "var(--spectrum-green-1000)", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(14, 175, 98)" + } + }, + "positive-color-1100": { + "prop": "--spectrum-positive-color-1100", + "ref": "var(--spectrum-green-1100)", + "light": { + "value": "rgb(2, 93, 60)" + }, + "dark": { + "value": "rgb(24, 193, 110)" + } + }, + "positive-color-1200": { + "prop": "--spectrum-positive-color-1200", + "ref": "var(--spectrum-green-1200)", + "light": { + "value": "rgb(1, 76, 52)" + }, + "dark": { + "value": "rgb(57, 215, 134)" + } + }, + "positive-color-1300": { + "prop": "--spectrum-positive-color-1300", + "ref": "var(--spectrum-green-1300)", + "light": { + "value": "rgb(0, 61, 44)" + }, + "dark": { + "value": "rgb(126, 231, 172)" + } + }, + "positive-color-1400": { + "prop": "--spectrum-positive-color-1400", + "ref": "var(--spectrum-green-1400)", + "light": { + "value": "rgb(0, 46, 34)" + }, + "dark": { + "value": "rgb(189, 241, 208)" + } + }, + "positive-color-1500": { + "prop": "--spectrum-positive-color-1500", + "ref": "var(--spectrum-green-1500)", + "dark": { + "value": "rgb(229, 250, 236)" + }, + "light": { + "value": "rgb(0, 33, 25)" + } + }, + "positive-color-1600": { + "prop": "--spectrum-positive-color-1600", + "ref": "var(--spectrum-green-1600)", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 15, 12)" + } + }, + "positive-color-200": { + "prop": "--spectrum-positive-color-200", + "ref": "var(--spectrum-green-200)", + "light": { + "value": "rgb(215, 247, 225)" + }, + "dark": { + "value": "rgb(0, 38, 29)" + } + }, + "positive-color-300": { + "prop": "--spectrum-positive-color-300", + "ref": "var(--spectrum-green-300)", + "light": { + "value": "rgb(173, 238, 197)" + }, + "dark": { + "value": "rgb(0, 51, 38)" + } + }, + "positive-color-400": { + "prop": "--spectrum-positive-color-400", + "ref": "var(--spectrum-green-400)", + "light": { + "value": "rgb(107, 227, 162)" + }, + "dark": { + "value": "rgb(0, 68, 48)" + } + }, + "positive-color-500": { + "prop": "--spectrum-positive-color-500", + "ref": "var(--spectrum-green-500)", + "light": { + "value": "rgb(43, 209, 125)" + }, + "dark": { + "value": "rgb(2, 87, 58)" + } + }, + "positive-color-600": { + "prop": "--spectrum-positive-color-600", + "ref": "var(--spectrum-green-600)", + "light": { + "value": "rgb(18, 184, 103)" + }, + "dark": { + "value": "rgb(3, 106, 67)" + } + }, + "positive-color-700": { + "prop": "--spectrum-positive-color-700", + "ref": "var(--spectrum-green-700)", + "light": { + "value": "rgb(11, 164, 93)" + }, + "dark": { + "value": "rgb(4, 124, 75)" + } + }, + "positive-color-800": { + "prop": "--spectrum-positive-color-800", + "ref": "var(--spectrum-green-800)", + "light": { + "value": "rgb(7, 147, 85)" + }, + "dark": { + "value": "rgb(6, 136, 80)" + } + }, + "positive-color-900": { + "prop": "--spectrum-positive-color-900", + "ref": "var(--spectrum-green-900)", + "light": { + "value": "rgb(5, 131, 78)" + }, + "dark": { + "value": "rgb(9, 157, 89)" + } + }, + "positive-subtle-background-color-default": { + "prop": "--spectrum-positive-subtle-background-color-default", + "ref": "var(--spectrum-positive-color-300)", + "light": { + "value": "rgb(215, 247, 225)" + }, + "dark": { + "value": "rgb(0, 51, 38)" + } + }, + "positive-visual-color": { + "prop": "--spectrum-positive-visual-color", + "ref": "var(--spectrum-positive-color-900)", + "light": { + "value": "rgb(7, 147, 85)" + }, + "dark": { + "value": "rgb(9, 157, 89)" + } + }, + "progress-bar-maximum-width": { + "prop": "--spectrum-progress-bar-maximum-width", + "value": "768px" + }, + "progress-bar-minimum-width": { + "prop": "--spectrum-progress-bar-minimum-width", + "value": "48px" + }, + "progress-bar-thickness-extra-large": { + "prop": "--spectrum-progress-bar-thickness-extra-large", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "13px" + } + }, + "progress-bar-thickness-large": { + "prop": "--spectrum-progress-bar-thickness-large", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "progress-bar-thickness-medium": { + "prop": "--spectrum-progress-bar-thickness-medium", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "progress-bar-thickness-small": { + "prop": "--spectrum-progress-bar-thickness-small", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "progress-circle-size-large": { + "prop": "--spectrum-progress-circle-size-large", + "desktop": { + "value": "64px" + }, + "mobile": { + "value": "80px" + } + }, + "progress-circle-size-medium": { + "prop": "--spectrum-progress-circle-size-medium", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, + "progress-circle-size-small": { + "prop": "--spectrum-progress-circle-size-small", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "progress-circle-thickness-large": { + "prop": "--spectrum-progress-circle-thickness-large", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "progress-circle-thickness-medium": { + "prop": "--spectrum-progress-circle-thickness-medium", + "desktop": { + "value": "3px" + }, + "mobile": { + "value": "4px" + } + }, + "progress-circle-thickness-small": { + "prop": "--spectrum-progress-circle-thickness-small", + "desktop": { + "value": "2px" + }, + "mobile": { + "value": "3px" + } + }, + "purple-100": { + "prop": "--spectrum-purple-100", + "light": { + "value": "rgb(251, 247, 254)" + }, + "dark": { + "value": "rgb(41, 0, 79)" + } + }, + "purple-1000": { + "prop": "--spectrum-purple-1000", + "light": { + "value": "rgb(134, 40, 217)" + }, + "dark": { + "value": "rgb(186, 127, 237)" + } + }, + "purple-1100": { + "prop": "--spectrum-purple-1100", + "light": { + "value": "rgb(115, 13, 204)" + }, + "dark": { + "value": "rgb(197, 149, 240)" + } + }, + "purple-1200": { + "prop": "--spectrum-purple-1200", + "light": { + "value": "rgb(93, 0, 177)" + }, + "dark": { + "value": "rgb(212, 176, 244)" + } + }, + "purple-1300": { + "prop": "--spectrum-purple-1300", + "light": { + "value": "rgb(75, 0, 144)" + }, + "dark": { + "value": "rgb(225, 201, 247)" + } + }, + "purple-1400": { + "prop": "--spectrum-purple-1400", + "light": { + "value": "rgb(59, 0, 111)" + }, + "dark": { + "value": "rgb(238, 224, 250)" + } + }, + "purple-1500": { + "prop": "--spectrum-purple-1500", + "dark": { + "value": "rgb(248, 243, 253)" + }, + "light": { + "value": "rgb(44, 0, 84)" + } + }, + "purple-1600": { + "prop": "--spectrum-purple-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(23, 0, 45)" + } + }, + "purple-200": { + "prop": "--spectrum-purple-200", + "light": { + "value": "rgb(244, 235, 252)" + }, + "dark": { + "value": "rgb(50, 0, 96)" + } + }, + "purple-300": { + "prop": "--spectrum-purple-300", + "light": { + "value": "rgb(235, 218, 249)" + }, + "dark": { + "value": "rgb(64, 0, 122)" + } + }, + "purple-400": { + "prop": "--spectrum-purple-400", + "light": { + "value": "rgb(221, 193, 246)" + }, + "dark": { + "value": "rgb(83, 0, 159)" + } + }, + "purple-500": { + "prop": "--spectrum-purple-500", + "light": { + "value": "rgb(208, 167, 243)" + }, + "dark": { + "value": "rgb(107, 6, 195)" + } + }, + "purple-600": { + "prop": "--spectrum-purple-600", + "light": { + "value": "rgb(191, 138, 238)" + }, + "dark": { + "value": "rgb(130, 34, 215)" + } + }, + "purple-700": { + "prop": "--spectrum-purple-700", + "light": { + "value": "rgb(178, 114, 235)" + }, + "dark": { + "value": "rgb(148, 62, 224)" + } + }, + "purple-800": { + "prop": "--spectrum-purple-800", + "light": { + "value": "rgb(166, 92, 231)" + }, + "dark": { + "value": "rgb(157, 78, 228)" + } + }, + "purple-900": { + "prop": "--spectrum-purple-900", + "light": { + "value": "rgb(154, 71, 226)" + }, + "dark": { + "value": "rgb(173, 105, 233)" + } + }, + "purple-background-color-default": { + "prop": "--spectrum-purple-background-color-default", + "ref": "var(--spectrum-purple-800)", + "light": { + "value": "rgb(154, 71, 226)" + }, + "dark": { + "value": "rgb(157, 78, 228)" + } + }, + "purple-subtle-background-color-default": { + "prop": "--spectrum-purple-subtle-background-color-default", + "ref": "var(--spectrum-purple-300)", + "light": { + "value": "rgb(244, 235, 252)" + }, + "dark": { + "value": "rgb(64, 0, 122)" + } + }, + "purple-visual-color": { + "prop": "--spectrum-purple-visual-color", + "ref": "var(--spectrum-purple-900)", + "light": { + "value": "rgb(166, 92, 231)" + }, + "dark": { + "value": "rgb(173, 105, 233)" + } + }, + "radio-button-control-size-extra-large": { + "prop": "--spectrum-radio-button-control-size-extra-large", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "radio-button-control-size-large": { + "prop": "--spectrum-radio-button-control-size-large", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "radio-button-control-size-medium": { + "prop": "--spectrum-radio-button-control-size-medium", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "18px" + } + }, + "radio-button-control-size-small": { + "prop": "--spectrum-radio-button-control-size-small", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "16px" + } + }, + "radio-button-selection-indicator": { + "prop": "--spectrum-radio-button-selection-indicator", + "value": "4px" + }, + "radio-button-top-to-control-extra-large": { + "prop": "--spectrum-radio-button-top-to-control-extra-large", + "desktop": { + "value": "15px" + }, + "mobile": { + "value": "19px" + } + }, + "radio-button-top-to-control-large": { + "prop": "--spectrum-radio-button-top-to-control-large", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "radio-button-top-to-control-medium": { + "prop": "--spectrum-radio-button-top-to-control-medium", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "radio-button-top-to-control-small": { + "prop": "--spectrum-radio-button-top-to-control-small", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "7px" + } + }, + "rating-bottom-to-content-area-medium": { + "prop": "--spectrum-rating-bottom-to-content-area-medium", + "value": "6px" + }, + "rating-bottom-to-content-area-small": { + "prop": "--spectrum-rating-bottom-to-content-area-small", + "ref": "var(--spectrum-spacing-75)", + "value": "4px" + }, + "rating-edge-to-content-area-medium": { + "prop": "--spectrum-rating-edge-to-content-area-medium", + "value": "6px" + }, + "rating-edge-to-content-area-small": { + "prop": "--spectrum-rating-edge-to-content-area-small", + "ref": "var(--spectrum-spacing-75)", + "value": "4px" + }, + "rating-height-medium": { + "prop": "--spectrum-rating-height-medium", + "ref": "var(--spectrum-component-height-100)", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, + "rating-height-small": { + "prop": "--spectrum-rating-height-small", + "ref": "var(--spectrum-component-height-75)", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "rating-indicator-to-icon": { + "prop": "--spectrum-rating-indicator-to-icon", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "rating-indicator-width": { + "prop": "--spectrum-rating-indicator-width", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "rating-top-to-content-area-medium": { + "prop": "--spectrum-rating-top-to-content-area-medium", + "value": "6px" + }, + "rating-top-to-content-area-small": { + "prop": "--spectrum-rating-top-to-content-area-small", + "ref": "var(--spectrum-spacing-75)", + "value": "4px" + }, + "rating-width-medium": { + "prop": "--spectrum-rating-width-medium", + "value": "128px" + }, + "rating-width-small": { + "prop": "--spectrum-rating-width-small", + "value": "104px" + }, + "red-100": { + "prop": "--spectrum-red-100", + "light": { + "value": "rgb(255, 246, 245)" + }, + "dark": { + "value": "rgb(54, 10, 3)" + } + }, + "red-1000": { + "prop": "--spectrum-red-1000", + "light": { + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(255, 103, 86)" + } + }, + "red-1100": { + "prop": "--spectrum-red-1100", + "light": { + "value": "rgb(156, 33, 19)" + }, + "dark": { + "value": "rgb(255, 134, 120)" + } + }, + "red-1200": { + "prop": "--spectrum-red-1200", + "light": { + "value": "rgb(129, 27, 14)" + }, + "dark": { + "value": "rgb(255, 167, 157)" + } + }, + "red-1300": { + "prop": "--spectrum-red-1300", + "light": { + "value": "rgb(104, 21, 10)" + }, + "dark": { + "value": "rgb(255, 196, 189)" + } + }, + "red-1400": { + "prop": "--spectrum-red-1400", + "light": { + "value": "rgb(80, 16, 6)" + }, + "dark": { + "value": "rgb(255, 222, 219)" + } + }, + "red-1500": { + "prop": "--spectrum-red-1500", + "dark": { + "value": "rgb(255, 242, 240)" + }, + "light": { + "value": "rgb(59, 11, 4)" + } + }, + "red-1600": { + "prop": "--spectrum-red-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(29, 5, 2)" + } + }, + "red-200": { + "prop": "--spectrum-red-200", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(68, 13, 5)" + } + }, + "red-300": { + "prop": "--spectrum-red-300", + "light": { + "value": "rgb(255, 214, 209)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, + "red-400": { + "prop": "--spectrum-red-400", + "light": { + "value": "rgb(255, 188, 180)" + }, + "dark": { + "value": "rgb(115, 24, 11)" + } + }, + "red-500": { + "prop": "--spectrum-red-500", + "light": { + "value": "rgb(255, 157, 145)" + }, + "dark": { + "value": "rgb(147, 31, 17)" + } + }, + "red-600": { + "prop": "--spectrum-red-600", + "light": { + "value": "rgb(255, 118, 101)" + }, + "dark": { + "value": "rgb(177, 38, 23)" + } + }, + "red-700": { + "prop": "--spectrum-red-700", + "light": { + "value": "rgb(255, 81, 61)" + }, + "dark": { + "value": "rgb(205, 46, 29)" + } + }, + "red-800": { + "prop": "--spectrum-red-800", + "light": { + "value": "rgb(240, 56, 35)" + }, + "dark": { + "value": "rgb(223, 52, 34)" + } + }, + "red-900": { + "prop": "--spectrum-red-900", + "light": { + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(252, 67, 46)" + } + }, + "red-background-color-default": { + "prop": "--spectrum-red-background-color-default", + "ref": "var(--spectrum-red-800)", + "light": { + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(223, 52, 34)" + } + }, + "red-subtle-background-color-default": { + "prop": "--spectrum-red-subtle-background-color-default", + "ref": "var(--spectrum-red-300)", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, + "red-visual-color": { + "prop": "--spectrum-red-visual-color", + "ref": "var(--spectrum-red-700)", + "light": { + "value": "rgb(240, 56, 35)" + }, + "dark": { + "value": "rgb(205, 46, 29)" + } + }, + "regular-font-weight": { + "prop": "--spectrum-regular-font-weight", + "ref": "regular", + "value": "400" + }, + "sans-serif-font-family": { + "prop": "--spectrum-sans-serif-font-family", + "value": "Adobe Clean" + }, + "seafoam-100": { + "prop": "--spectrum-seafoam-100", + "light": { + "value": "rgb(235, 251, 246)" + }, + "dark": { + "value": "rgb(0, 30, 27)" + } + }, + "seafoam-1000": { + "prop": "--spectrum-seafoam-1000", + "light": { + "value": "rgb(5, 108, 92)" + }, + "dark": { + "value": "rgb(12, 173, 142)" + } + }, + "seafoam-1100": { + "prop": "--spectrum-seafoam-1100", + "light": { + "value": "rgb(3, 92, 80)" + }, + "dark": { + "value": "rgb(14, 190, 156)" + } + }, + "seafoam-1200": { + "prop": "--spectrum-seafoam-1200", + "light": { + "value": "rgb(1, 75, 67)" + }, + "dark": { + "value": "rgb(29, 214, 176)" + } + }, + "seafoam-1300": { + "prop": "--spectrum-seafoam-1300", + "light": { + "value": "rgb(0, 60, 54)" + }, + "dark": { + "value": "rgb(122, 229, 203)" + } + }, + "seafoam-1400": { + "prop": "--spectrum-seafoam-1400", + "light": { + "value": "rgb(0, 46, 40)" + }, + "dark": { + "value": "rgb(186, 241, 222)" + } + }, + "seafoam-1500": { + "prop": "--spectrum-seafoam-1500", + "dark": { + "value": "rgb(229, 249, 243)" + }, + "light": { + "value": "rgb(0, 33, 29)" + } + }, + "seafoam-1600": { + "prop": "--spectrum-seafoam-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 15, 14)" + } + }, + "seafoam-200": { + "prop": "--spectrum-seafoam-200", + "light": { + "value": "rgb(211, 246, 234)" + }, + "dark": { + "value": "rgb(0, 39, 35)" + } + }, + "seafoam-300": { + "prop": "--spectrum-seafoam-300", + "light": { + "value": "rgb(169, 237, 216)" + }, + "dark": { + "value": "rgb(0, 50, 44)" + } + }, + "seafoam-400": { + "prop": "--spectrum-seafoam-400", + "light": { + "value": "rgb(92, 225, 194)" + }, + "dark": { + "value": "rgb(0, 67, 59)" + } + }, + "seafoam-500": { + "prop": "--spectrum-seafoam-500", + "light": { + "value": "rgb(16, 207, 169)" + }, + "dark": { + "value": "rgb(2, 86, 75)" + } + }, + "seafoam-600": { + "prop": "--spectrum-seafoam-600", + "light": { + "value": "rgb(13, 181, 149)" + }, + "dark": { + "value": "rgb(4, 105, 89)" + } + }, + "seafoam-700": { + "prop": "--spectrum-seafoam-700", + "light": { + "value": "rgb(11, 162, 134)" + }, + "dark": { + "value": "rgb(6, 122, 103)" + } + }, + "seafoam-800": { + "prop": "--spectrum-seafoam-800", + "light": { + "value": "rgb(9, 144, 120)" + }, + "dark": { + "value": "rgb(8, 134, 112)" + } + }, + "seafoam-900": { + "prop": "--spectrum-seafoam-900", + "light": { + "value": "rgb(7, 129, 109)" + }, + "dark": { + "value": "rgb(10, 154, 128)" + } + }, + "seafoam-background-color-default": { + "prop": "--spectrum-seafoam-background-color-default", + "ref": "var(--spectrum-seafoam-800)", + "light": { + "value": "rgb(7, 129, 109)" + }, + "dark": { + "value": "rgb(8, 134, 112)" + } + }, + "seafoam-subtle-background-color-default": { + "prop": "--spectrum-seafoam-subtle-background-color-default", + "ref": "var(--spectrum-seafoam-300)", + "light": { + "value": "rgb(211, 246, 234)" + }, + "dark": { + "value": "rgb(0, 50, 44)" + } + }, + "seafoam-visual-color": { + "prop": "--spectrum-seafoam-visual-color", + "ref": "var(--spectrum-seafoam-800)", + "light": { + "value": "rgb(11, 162, 134)" + }, + "dark": { + "value": "rgb(8, 134, 112)" + } + }, + "search-field-minimum-width-multiplier": { + "prop": "--spectrum-search-field-minimum-width-multiplier", + "value": 4 + }, + "segmented-control-item-height": { + "prop": "--spectrum-segmented-control-item-height", + "ref": "var(--spectrum-component-height-100)", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, + "segmented-control-selection-border-width": { + "prop": "--spectrum-segmented-control-selection-border-width", + "ref": "var(--spectrum-border-width-200)", + "value": "2px" + }, + "select-box-edge-to-checkbox": { + "prop": "--spectrum-select-box-edge-to-checkbox", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "select-box-horizontal-end-to-content": { + "prop": "--spectrum-select-box-horizontal-end-to-content", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, + "select-box-horizontal-illustration-to-label": { + "prop": "--spectrum-select-box-horizontal-illustration-to-label", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "select-box-horizontal-label-to-description": { + "prop": "--spectrum-select-box-horizontal-label-to-description", + "desktop": { + "value": "2px" + }, + "mobile": { + "value": "3px" + } + }, + "select-box-horizontal-minimum-height": { + "prop": "--spectrum-select-box-horizontal-minimum-height", + "desktop": { + "value": "80px" + }, + "mobile": { + "value": "100px" + } + }, + "select-box-horizontal-start-to-content": { + "prop": "--spectrum-select-box-horizontal-start-to-content", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "select-box-horizontal-top-to-content": { + "prop": "--spectrum-select-box-horizontal-top-to-content", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "select-box-horizontal-width": { + "prop": "--spectrum-select-box-horizontal-width", + "desktop": { + "value": "368px" + }, + "mobile": { + "value": "460px" + } + }, + "select-box-selected-border-color": { + "prop": "--spectrum-select-box-selected-border-color", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "select-box-top-to-checkbox": { + "prop": "--spectrum-select-box-top-to-checkbox", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "select-box-vertical-edge-to-content": { + "prop": "--spectrum-select-box-vertical-edge-to-content", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "select-box-vertical-height": { + "prop": "--spectrum-select-box-vertical-height", + "desktop": { + "value": "170px" + }, + "mobile": { + "value": "212px" + } + }, + "select-box-vertical-illustration-to-label": { + "prop": "--spectrum-select-box-vertical-illustration-to-label", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "serif-font-family": { + "prop": "--spectrum-serif-font-family", + "value": "Adobe Clean Serif" + }, + "side-focus-indicator": { + "prop": "--spectrum-side-focus-indicator", + "value": "4px" + }, + "side-label-character-count-to-field": { + "prop": "--spectrum-side-label-character-count-to-field", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "side-label-character-count-top-margin-extra-large": { + "prop": "--spectrum-side-label-character-count-top-margin-extra-large", + "value": "0px" + }, + "side-label-character-count-top-margin-large": { + "prop": "--spectrum-side-label-character-count-top-margin-large", + "value": "0px" + }, + "side-label-character-count-top-margin-medium": { + "prop": "--spectrum-side-label-character-count-top-margin-medium", + "value": "0px" + }, + "side-label-character-count-top-margin-small": { + "prop": "--spectrum-side-label-character-count-top-margin-small", + "value": "0px" + }, + "side-navigation-bottom-to-text": { + "prop": "--spectrum-side-navigation-bottom-to-text", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "side-navigation-header-to-item": { + "prop": "--spectrum-side-navigation-header-to-item", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "side-navigation-item-to-header": { + "prop": "--spectrum-side-navigation-item-to-header", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "side-navigation-item-to-item": { + "prop": "--spectrum-side-navigation-item-to-item", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "side-navigation-maximum-width": { + "prop": "--spectrum-side-navigation-maximum-width", + "desktop": { + "value": "240px" + }, + "mobile": { + "value": "300px" + } + }, + "side-navigation-minimum-width": { + "prop": "--spectrum-side-navigation-minimum-width", + "desktop": { + "value": "160px" + }, + "mobile": { + "value": "200px" + } + }, + "side-navigation-second-level-edge-to-text": { + "prop": "--spectrum-side-navigation-second-level-edge-to-text", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "side-navigation-third-level-edge-to-text": { + "prop": "--spectrum-side-navigation-third-level-edge-to-text", + "desktop": { + "value": "36px" + }, + "mobile": { + "value": "45px" + } + }, + "side-navigation-width": { + "prop": "--spectrum-side-navigation-width", + "desktop": { + "value": "192px" + }, + "mobile": { + "value": "240px" + } + }, + "side-navigation-with-icon-second-level-edge-to-text": { + "prop": "--spectrum-side-navigation-with-icon-second-level-edge-to-text", + "desktop": { + "value": "50px" + }, + "mobile": { + "value": "62px" + } + }, + "side-navigation-with-icon-third-level-edge-to-text": { + "prop": "--spectrum-side-navigation-with-icon-third-level-edge-to-text", + "desktop": { + "value": "62px" + }, + "mobile": { + "value": "77px" + } + }, + "silver-100": { + "prop": "--spectrum-silver-100", + "dark": { + "value": "rgb(26, 26, 26)" + }, + "light": { + "value": "rgb(247, 247, 247)" + } + }, + "silver-1000": { + "prop": "--spectrum-silver-1000", + "dark": { + "value": "rgb(152, 152, 152)" + }, + "light": { + "value": "rgb(96, 96, 96)" + } + }, + "silver-1100": { + "prop": "--spectrum-silver-1100", + "dark": { + "value": "rgb(169, 169, 169)" + }, + "light": { + "value": "rgb(81, 81, 81)" + } + }, + "silver-1200": { + "prop": "--spectrum-silver-1200", + "dark": { + "value": "rgb(190, 190, 190)" + }, + "light": { + "value": "rgb(66, 66, 66)" + } + }, + "silver-1300": { + "prop": "--spectrum-silver-1300", + "dark": { + "value": "rgb(211, 211, 211)" + }, + "light": { + "value": "rgb(52, 52, 52)" + } + }, + "silver-1400": { + "prop": "--spectrum-silver-1400", + "dark": { + "value": "rgb(229, 229, 229)" + }, + "light": { + "value": "rgb(39, 39, 39)" + } + }, + "silver-1500": { + "prop": "--spectrum-silver-1500", + "dark": { + "value": "rgb(244, 244, 244)" + }, + "light": { + "value": "rgb(28, 28, 28)" + } + }, + "silver-1600": { + "prop": "--spectrum-silver-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(12, 12, 12)" + } + }, + "silver-200": { + "prop": "--spectrum-silver-200", + "dark": { + "value": "rgb(33, 33, 33)" + }, + "light": { + "value": "rgb(239, 239, 239)" + } + }, + "silver-300": { + "prop": "--spectrum-silver-300", + "dark": { + "value": "rgb(44, 44, 44)" + }, + "light": { + "value": "rgb(223, 223, 223)" + } + }, + "silver-400": { + "prop": "--spectrum-silver-400", + "dark": { + "value": "rgb(59, 59, 59)" + }, + "light": { + "value": "rgb(204, 204, 204)" + } + }, + "silver-500": { + "prop": "--spectrum-silver-500", + "dark": { + "value": "rgb(76, 76, 76)" + }, + "light": { + "value": "rgb(183, 183, 183)" + } + }, + "silver-600": { + "prop": "--spectrum-silver-600", + "dark": { + "value": "rgb(92, 92, 92)" + }, + "light": { + "value": "rgb(160, 160, 160)" + } + }, + "silver-700": { + "prop": "--spectrum-silver-700", + "dark": { + "value": "rgb(108, 108, 108)" + }, + "light": { + "value": "rgb(143, 143, 143)" + } + }, + "silver-800": { + "prop": "--spectrum-silver-800", + "dark": { + "value": "rgb(118, 118, 118)" + }, + "light": { + "value": "rgb(128, 128, 128)" + } + }, + "silver-900": { + "prop": "--spectrum-silver-900", + "dark": { + "value": "rgb(137, 137, 137)" + }, + "light": { + "value": "rgb(114, 114, 114)" + } + }, + "silver-background-color-default": { + "prop": "--spectrum-silver-background-color-default", + "ref": "var(--spectrum-silver-800)", + "light": { + "value": "rgb(114, 114, 114)" + }, + "dark": { + "value": "rgb(118, 118, 118)" + } + }, + "silver-subtle-background-color-default": { + "prop": "--spectrum-silver-subtle-background-color-default", + "ref": "var(--spectrum-silver-300)", + "light": { + "value": "rgb(239, 239, 239)" + }, + "dark": { + "value": "rgb(44, 44, 44)" + } + }, + "silver-visual-color": { + "prop": "--spectrum-silver-visual-color", + "ref": "var(--spectrum-silver-900)", + "light": { + "value": "rgb(128, 128, 128)" + }, + "dark": { + "value": "rgb(137, 137, 137)" + } + }, + "slider-bottom-to-handle-extra-large": { + "prop": "--spectrum-slider-bottom-to-handle-extra-large", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "slider-bottom-to-handle-large": { + "prop": "--spectrum-slider-bottom-to-handle-large", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "14px" + } + }, + "slider-bottom-to-handle-medium": { + "prop": "--spectrum-slider-bottom-to-handle-medium", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "slider-bottom-to-handle-small": { + "prop": "--spectrum-slider-bottom-to-handle-small", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "6px" + } + }, + "slider-control-height-extra-large": { + "prop": "--spectrum-slider-control-height-extra-large", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "26px" + } + }, + "slider-control-height-large": { + "prop": "--spectrum-slider-control-height-large", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "slider-control-height-medium": { + "prop": "--spectrum-slider-control-height-medium", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-control-height-small": { + "prop": "--spectrum-slider-control-height-small", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "18px" + } + }, + "slider-control-to-field-label-editable-extra-large": { + "prop": "--spectrum-slider-control-to-field-label-editable-extra-large", + "desktop": { + "value": "-20px" + }, + "mobile": { + "value": "-24px" + } + }, + "slider-control-to-field-label-editable-large": { + "prop": "--spectrum-slider-control-to-field-label-editable-large", + "desktop": { + "value": "-16px" + }, + "mobile": { + "value": "-20px" + } + }, + "slider-control-to-field-label-editable-medium": { + "prop": "--spectrum-slider-control-to-field-label-editable-medium", + "desktop": { + "value": "-12px" + }, + "mobile": { + "value": "-16px" + } + }, + "slider-control-to-field-label-editable-small": { + "prop": "--spectrum-slider-control-to-field-label-editable-small", + "desktop": { + "value": "-4px" + }, + "mobile": { + "value": "-8px" + } + }, + "slider-control-to-field-label-extra-large": { + "prop": "--spectrum-slider-control-to-field-label-extra-large", + "desktop": { + "value": "-20px" + }, + "mobile": { + "value": "-28px" + } + }, + "slider-control-to-field-label-large": { + "prop": "--spectrum-slider-control-to-field-label-large", + "desktop": { + "value": "-16px" + }, + "mobile": { + "value": "-20px" + } + }, + "slider-control-to-field-label-medium": { + "prop": "--spectrum-slider-control-to-field-label-medium", + "desktop": { + "value": "-12px" + }, + "mobile": { + "value": "-16px" + } + }, + "slider-control-to-field-label-side-extra-large": { + "prop": "--spectrum-slider-control-to-field-label-side-extra-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "28px" + } + }, + "slider-control-to-field-label-side-large": { + "prop": "--spectrum-slider-control-to-field-label-side-large", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "slider-control-to-field-label-side-medium": { + "prop": "--spectrum-slider-control-to-field-label-side-medium", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-control-to-field-label-side-small": { + "prop": "--spectrum-slider-control-to-field-label-side-small", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-control-to-field-label-small": { + "prop": "--spectrum-slider-control-to-field-label-small", + "desktop": { + "value": "-4px" + }, + "mobile": { + "value": "-8px" + } + }, + "slider-control-to-text-field-extra-large": { + "prop": "--spectrum-slider-control-to-text-field-extra-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "28px" + } + }, + "slider-control-to-text-field-large": { + "prop": "--spectrum-slider-control-to-text-field-large", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "slider-control-to-text-field-medium": { + "prop": "--spectrum-slider-control-to-text-field-medium", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-control-to-text-field-small": { + "prop": "--spectrum-slider-control-to-text-field-small", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-handle-border-width-down-extra-large": { + "prop": "--spectrum-slider-handle-border-width-down-extra-large", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "11px" + } + }, + "slider-handle-border-width-down-large": { + "prop": "--spectrum-slider-handle-border-width-down-large", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + }, + "slider-handle-border-width-down-medium": { + "prop": "--spectrum-slider-handle-border-width-down-medium", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "slider-handle-border-width-down-small": { + "prop": "--spectrum-slider-handle-border-width-down-small", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "7px" + } + }, + "slider-handle-extra-large": { + "prop": "--spectrum-slider-handle-extra-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "slider-handle-gap": { + "prop": "--spectrum-slider-handle-gap", + "value": "4px" + }, + "slider-handle-height-precision-extra-large": { + "prop": "--spectrum-slider-handle-height-precision-extra-large", + "desktop": { + "value": "26px" + }, + "mobile": { + "value": "32px" + } + }, + "slider-handle-height-precision-large": { + "prop": "--spectrum-slider-handle-height-precision-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "slider-handle-height-precision-medium": { + "prop": "--spectrum-slider-handle-height-precision-medium", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "26px" + } + }, + "slider-handle-height-precision-small": { + "prop": "--spectrum-slider-handle-height-precision-small", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "slider-handle-large": { + "prop": "--spectrum-slider-handle-large", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "28px" + } + }, + "slider-handle-medium": { + "prop": "--spectrum-slider-handle-medium", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "slider-handle-precision-width": { + "prop": "--spectrum-slider-handle-precision-width", + "value": "6px" + }, + "slider-handle-size-extra-large": { + "prop": "--spectrum-slider-handle-size-extra-large", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "26px" + } + }, + "slider-handle-size-large": { + "prop": "--spectrum-slider-handle-size-large", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "slider-handle-size-medium": { + "prop": "--spectrum-slider-handle-size-medium", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-handle-size-small": { + "prop": "--spectrum-slider-handle-size-small", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "18px" + } + }, + "slider-handle-small": { + "prop": "--spectrum-slider-handle-small", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "slider-track-height-large": { + "prop": "--spectrum-slider-track-height-large", + "value": "16px" + }, + "slider-track-height-medium": { + "prop": "--spectrum-slider-track-height-medium", + "value": "4px" + }, + "slider-track-thickness": { + "prop": "--spectrum-slider-track-thickness", + "value": "2px" + }, + "spacing-100": { + "prop": "--spectrum-spacing-100", + "value": "8px" + }, + "spacing-1000": { + "prop": "--spectrum-spacing-1000", + "value": "96px" + }, + "spacing-200": { + "prop": "--spectrum-spacing-200", + "value": "12px" + }, + "spacing-300": { + "prop": "--spectrum-spacing-300", + "value": "16px" + }, + "spacing-400": { + "prop": "--spectrum-spacing-400", + "value": "24px" + }, + "spacing-50": { + "prop": "--spectrum-spacing-50", + "value": "2px" + }, + "spacing-500": { + "prop": "--spectrum-spacing-500", + "value": "32px" + }, + "spacing-600": { + "prop": "--spectrum-spacing-600", + "value": "40px" + }, + "spacing-700": { + "prop": "--spectrum-spacing-700", + "value": "48px" + }, + "spacing-75": { + "prop": "--spectrum-spacing-75", + "value": "4px" + }, + "spacing-800": { + "prop": "--spectrum-spacing-800", + "value": "64px" + }, + "spacing-900": { + "prop": "--spectrum-spacing-900", + "value": "80px" + }, + "standard-dialog-body-font-size": { + "prop": "--spectrum-standard-dialog-body-font-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, + "standard-dialog-maximum-width-large": { + "prop": "--spectrum-standard-dialog-maximum-width-large", + "value": "640px" + }, + "standard-dialog-maximum-width-medium": { + "prop": "--spectrum-standard-dialog-maximum-width-medium", + "value": "480px" + }, + "standard-dialog-maximum-width-small": { + "prop": "--spectrum-standard-dialog-maximum-width-small", + "value": "400px" + }, + "standard-dialog-minimum-width": { + "prop": "--spectrum-standard-dialog-minimum-width", + "value": "288px" + }, + "standard-dialog-title-font-size": { + "prop": "--spectrum-standard-dialog-title-font-size", + "ref": "var(--spectrum-title-size-xl)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "24px" + } + }, + "standard-panel-edge-to-close-button-compact": { + "prop": "--spectrum-standard-panel-edge-to-close-button-compact", + "value": "3px" + }, + "standard-panel-edge-to-close-button-regular": { + "prop": "--spectrum-standard-panel-edge-to-close-button-regular", + "value": "7px" + }, + "standard-panel-edge-to-close-button-spacious": { + "prop": "--spectrum-standard-panel-edge-to-close-button-spacious", + "value": "15px" + }, + "standard-panel-gripper-color": { + "prop": "--spectrum-standard-panel-gripper-color", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(225, 225, 225)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "standard-panel-gripper-color-drag": { + "prop": "--spectrum-standard-panel-gripper-color-drag", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "standard-panel-maximum-width": { + "prop": "--spectrum-standard-panel-maximum-width", + "value": "400px" + }, + "standard-panel-minimum-width": { + "prop": "--spectrum-standard-panel-minimum-width", + "value": "200px" + }, + "standard-panel-title-font-size": { + "prop": "--spectrum-standard-panel-title-font-size", + "ref": "var(--spectrum-title-size-s)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "standard-panel-top-to-close-button-compact": { + "prop": "--spectrum-standard-panel-top-to-close-button-compact", + "value": "5px" + }, + "standard-panel-top-to-close-button-regular": { + "prop": "--spectrum-standard-panel-top-to-close-button-regular", + "value": "9px" + }, + "standard-panel-top-to-close-button-spacious": { + "prop": "--spectrum-standard-panel-top-to-close-button-spacious", + "value": "17px" + }, + "standard-panel-width": { + "prop": "--spectrum-standard-panel-width", + "value": "260px" + }, + "static-black-focus-indicator-color": { + "prop": "--spectrum-static-black-focus-indicator-color", + "ref": "var(--spectrum-black)", + "value": "rgb(0, 0, 0)" + }, + "static-black-text-color": { + "prop": "--spectrum-static-black-text-color", + "ref": "var(--spectrum-black)", + "value": "rgb(0, 0, 0)" + }, + "static-black-track-color": { + "prop": "--spectrum-static-black-track-color", + "ref": "var(--spectrum-transparent-black-300)", + "value": "rgba(0, 0, 0, 0.15)" + }, + "static-black-track-indicator-color": { + "prop": "--spectrum-static-black-track-indicator-color", + "ref": "var(--spectrum-transparent-black-900)", + "value": "rgba(0, 0, 0, 0.93)" + }, + "static-blue-1000": { + "prop": "--spectrum-static-blue-1000", + "value": "rgb(39, 77, 234)" + }, + "static-blue-900": { + "prop": "--spectrum-static-blue-900", + "value": "rgb(59, 99, 251)" + }, + "static-fuchsia-1000": { + "prop": "--spectrum-static-fuchsia-1000", + "value": "rgb(156, 40, 175)" + }, + "static-fuchsia-900": { + "prop": "--spectrum-static-fuchsia-900", + "value": "rgb(181, 57, 200)" + }, + "static-indigo-1000": { + "prop": "--spectrum-static-indigo-1000", + "value": "rgb(99, 56, 238)" + }, + "static-indigo-900": { + "prop": "--spectrum-static-indigo-900", + "value": "rgb(113, 85, 250)" + }, + "static-magenta-1000": { + "prop": "--spectrum-static-magenta-1000", + "value": "rgb(186, 22, 80)" + }, + "static-magenta-900": { + "prop": "--spectrum-static-magenta-900", + "value": "rgb(217, 35, 97)" + }, + "static-red-1000": { + "prop": "--spectrum-static-red-1000", + "value": "rgb(183, 40, 24)" + }, + "static-red-900": { + "prop": "--spectrum-static-red-900", + "value": "rgb(215, 50, 32)" + }, + "static-white-focus-indicator-color": { + "prop": "--spectrum-static-white-focus-indicator-color", + "ref": "var(--spectrum-white)", + "value": "rgb(255, 255, 255)" + }, + "static-white-text-color": { + "prop": "--spectrum-static-white-text-color", + "ref": "var(--spectrum-white)", + "value": "rgb(255, 255, 255)" + }, + "static-white-track-color": { + "prop": "--spectrum-static-white-track-color", + "ref": "var(--spectrum-transparent-white-300)", + "value": "rgba(255, 255, 255, 0.17)" }, - "seafoam-400": { - "prop": "--spectrum-seafoam-400", - "light": { - "value": "rgb(92, 225, 194)" - }, - "dark": { - "value": "rgb(0, 67, 59)" - } + "static-white-track-indicator-color": { + "prop": "--spectrum-static-white-track-indicator-color", + "ref": "var(--spectrum-transparent-white-900)", + "value": "rgba(255, 255, 255, 0.94)" }, - "seafoam-500": { - "prop": "--spectrum-seafoam-500", - "light": { - "value": "rgb(16, 207, 169)" + "status-light-dot-size-extra-large": { + "prop": "--spectrum-status-light-dot-size-extra-large", + "desktop": { + "value": "14px" }, - "dark": { - "value": "rgb(2, 86, 75)" + "mobile": { + "value": "16px" } }, - "seafoam-600": { - "prop": "--spectrum-seafoam-600", - "light": { - "value": "rgb(13, 181, 149)" + "status-light-dot-size-large": { + "prop": "--spectrum-status-light-dot-size-large", + "desktop": { + "value": "12px" }, - "dark": { - "value": "rgb(4, 105, 89)" + "mobile": { + "value": "14px" } }, - "seafoam-700": { - "prop": "--spectrum-seafoam-700", - "light": { - "value": "rgb(11, 162, 134)" + "status-light-dot-size-medium": { + "prop": "--spectrum-status-light-dot-size-medium", + "desktop": { + "value": "10px" }, - "dark": { - "value": "rgb(6, 122, 103)" + "mobile": { + "value": "12px" } }, - "seafoam-800": { - "prop": "--spectrum-seafoam-800", - "light": { - "value": "rgb(9, 144, 120)" + "status-light-dot-size-small": { + "prop": "--spectrum-status-light-dot-size-small", + "desktop": { + "value": "8px" }, - "dark": { - "value": "rgb(8, 134, 112)" + "mobile": { + "value": "10px" } }, - "seafoam-900": { - "prop": "--spectrum-seafoam-900", - "light": { - "value": "rgb(7, 129, 109)" + "status-light-text-to-visual-100": { + "prop": "--spectrum-status-light-text-to-visual-100", + "ref": "var(--spectrum-text-to-visual-100)", + "desktop": { + "value": "6px" }, - "dark": { - "value": "rgb(10, 154, 128)" + "mobile": { + "value": "8px" } }, - "seafoam-background-color-default": { - "prop": "--spectrum-seafoam-background-color-default", - "ref": "var(--spectrum-seafoam-800)", - "light": { - "value": "rgb(7, 129, 109)" + "status-light-text-to-visual-200": { + "prop": "--spectrum-status-light-text-to-visual-200", + "ref": "var(--spectrum-text-to-visual-200)", + "desktop": { + "value": "7px" }, - "dark": { - "value": "rgb(8, 134, 112)" + "mobile": { + "value": "9px" } }, - "seafoam-subtle-background-color-default": { - "prop": "--spectrum-seafoam-subtle-background-color-default", - "ref": "var(--spectrum-seafoam-300)", - "light": { - "value": "rgb(211, 246, 234)" + "status-light-text-to-visual-300": { + "prop": "--spectrum-status-light-text-to-visual-300", + "ref": "var(--spectrum-text-to-visual-300)", + "desktop": { + "value": "8px" }, - "dark": { - "value": "rgb(0, 50, 44)" + "mobile": { + "value": "10px" } }, - "seafoam-visual-color": { - "prop": "--spectrum-seafoam-visual-color", - "ref": "var(--spectrum-seafoam-800)", - "light": { - "value": "rgb(11, 162, 134)" + "status-light-text-to-visual-75": { + "prop": "--spectrum-status-light-text-to-visual-75", + "ref": "var(--spectrum-text-to-visual-75)", + "desktop": { + "value": "5px" }, - "dark": { - "value": "rgb(8, 134, 112)" + "mobile": { + "value": "7px" } }, - "search-field-minimum-width-multiplier": { - "prop": "--spectrum-search-field-minimum-width-multiplier", - "value": "3" - }, - "serif-font-family": { - "prop": "--spectrum-serif-font-family", - "value": "Adobe Clean Serif" - }, - "side-label-character-count-to-field": { - "prop": "--spectrum-side-label-character-count-to-field", + "status-light-top-to-dot-extra-large": { + "prop": "--spectrum-status-light-top-to-dot-extra-large", "desktop": { - "value": "12px" + "value": "17px" }, "mobile": { - "value": "15px" + "value": "22px" } }, - "side-label-character-count-top-margin-extra-large": { - "prop": "--spectrum-side-label-character-count-top-margin-extra-large", + "status-light-top-to-dot-large": { + "prop": "--spectrum-status-light-top-to-dot-large", "desktop": { "value": "14px" }, @@ -9729,8 +13180,8 @@ "value": "18px" } }, - "side-label-character-count-top-margin-large": { - "prop": "--spectrum-side-label-character-count-top-margin-large", + "status-light-top-to-dot-medium": { + "prop": "--spectrum-status-light-top-to-dot-medium", "desktop": { "value": "11px" }, @@ -9738,8 +13189,8 @@ "value": "14px" } }, - "side-label-character-count-top-margin-medium": { - "prop": "--spectrum-side-label-character-count-top-margin-medium", + "status-light-top-to-dot-small": { + "prop": "--spectrum-status-light-top-to-dot-small", "desktop": { "value": "8px" }, @@ -9747,35 +13198,80 @@ "value": "10px" } }, - "side-label-character-count-top-margin-small": { - "prop": "--spectrum-side-label-character-count-top-margin-small", + "swatch-border-color": { + "prop": "--spectrum-swatch-border-color", + "ref": "var(--spectrum-gray-1000)", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" + } + }, + "swatch-border-opacity": { + "prop": "--spectrum-swatch-border-opacity", + "value": "0.42" + }, + "swatch-disabled-icon-border-color": { + "prop": "--spectrum-swatch-disabled-icon-border-color", + "ref": "var(--spectrum-black)", + "value": "rgb(0, 0, 0)" + }, + "swatch-disabled-icon-border-opacity": { + "prop": "--spectrum-swatch-disabled-icon-border-opacity", + "value": "0.42" + }, + "swatch-group-border-color": { + "prop": "--spectrum-swatch-group-border-color", + "ref": "var(--spectrum-gray-1000)", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" + } + }, + "swatch-group-border-opacity": { + "prop": "--spectrum-swatch-group-border-opacity", + "value": "0.2" + }, + "swatch-group-spacing-spacious": { + "prop": "--spectrum-swatch-group-spacing-spacious", + "value": "6px" + }, + "swatch-rectangle-width-multiplier": { + "prop": "--spectrum-swatch-rectangle-width-multiplier", + "value": 2 + }, + "swatch-size-extra-small": { + "prop": "--spectrum-swatch-size-extra-small", "desktop": { - "value": "4px" + "value": "16px" }, "mobile": { - "value": "5px" + "value": "20px" } }, - "side-navigation-bottom-to-text": { - "prop": "--spectrum-side-navigation-bottom-to-text", + "swatch-size-large": { + "prop": "--spectrum-swatch-size-large", "desktop": { - "value": "8px" + "value": "40px" }, "mobile": { - "value": "10px" + "value": "50px" } }, - "side-navigation-header-to-item": { - "prop": "--spectrum-side-navigation-header-to-item", + "swatch-size-medium": { + "prop": "--spectrum-swatch-size-medium", "desktop": { - "value": "8px" + "value": "32px" }, "mobile": { - "value": "10px" + "value": "40px" } }, - "side-navigation-item-to-header": { - "prop": "--spectrum-side-navigation-item-to-header", + "swatch-size-small": { + "prop": "--spectrum-swatch-size-small", "desktop": { "value": "24px" }, @@ -9783,560 +13279,513 @@ "value": "30px" } }, - "side-navigation-item-to-item": { - "prop": "--spectrum-side-navigation-item-to-item", + "swatch-slash-thickness-extra-small": { + "prop": "--spectrum-swatch-slash-thickness-extra-small", + "value": "2px" + }, + "swatch-slash-thickness-large": { + "prop": "--spectrum-swatch-slash-thickness-large", + "value": "5px" + }, + "swatch-slash-thickness-medium": { + "prop": "--spectrum-swatch-slash-thickness-medium", + "value": "4px" + }, + "swatch-slash-thickness-small": { + "prop": "--spectrum-swatch-slash-thickness-small", + "value": "3px" + }, + "switch-control-height-extra-large": { + "prop": "--spectrum-switch-control-height-extra-large", "desktop": { - "value": "4px" + "value": "20px" }, "mobile": { - "value": "5px" + "value": "26px" } }, - "side-navigation-maximum-width": { - "prop": "--spectrum-side-navigation-maximum-width", + "switch-control-height-large": { + "prop": "--spectrum-switch-control-height-large", "desktop": { - "value": "240px" + "value": "18px" }, "mobile": { - "value": "300px" + "value": "22px" } }, - "side-navigation-minimum-width": { - "prop": "--spectrum-side-navigation-minimum-width", + "switch-control-height-medium": { + "prop": "--spectrum-switch-control-height-medium", "desktop": { - "value": "160px" + "value": "16px" }, "mobile": { - "value": "200px" + "value": "20px" } }, - "side-navigation-second-level-edge-to-text": { - "prop": "--spectrum-side-navigation-second-level-edge-to-text", + "switch-control-height-small": { + "prop": "--spectrum-switch-control-height-small", "desktop": { - "value": "24px" + "value": "14px" }, "mobile": { - "value": "30px" + "value": "18px" } }, - "side-navigation-third-level-edge-to-text": { - "prop": "--spectrum-side-navigation-third-level-edge-to-text", + "switch-control-width-extra-large": { + "prop": "--spectrum-switch-control-width-extra-large", "desktop": { - "value": "36px" + "value": "34px" }, "mobile": { - "value": "45px" + "value": "46px" } }, - "side-navigation-width": { - "prop": "--spectrum-side-navigation-width", + "switch-control-width-large": { + "prop": "--spectrum-switch-control-width-large", "desktop": { - "value": "192px" + "value": "30px" }, "mobile": { - "value": "240px" + "value": "38px" } }, - "side-navigation-with-icon-second-level-edge-to-text": { - "prop": "--spectrum-side-navigation-with-icon-second-level-edge-to-text", + "switch-control-width-medium": { + "prop": "--spectrum-switch-control-width-medium", "desktop": { - "value": "50px" + "value": "26px" }, "mobile": { - "value": "62px" + "value": "34px" } }, - "side-navigation-with-icon-third-level-edge-to-text": { - "prop": "--spectrum-side-navigation-with-icon-third-level-edge-to-text", + "switch-control-width-small": { + "prop": "--spectrum-switch-control-width-small", "desktop": { - "value": "62px" + "value": "22px" }, "mobile": { - "value": "77px" + "value": "30px" } }, - "silver-100": { - "prop": "--spectrum-silver-100", - "dark": { - "value": "rgb(26, 26, 26)" + "switch-handle-selected-size-extra-large": { + "prop": "--spectrum-switch-handle-selected-size-extra-large", + "desktop": { + "value": "14px" }, - "light": { - "value": "rgb(247, 247, 247)" + "mobile": { + "value": "20px" } }, - "silver-1000": { - "prop": "--spectrum-silver-1000", - "dark": { - "value": "rgb(152, 152, 152)" + "switch-handle-selected-size-large": { + "prop": "--spectrum-switch-handle-selected-size-large", + "desktop": { + "value": "12px" }, - "light": { - "value": "rgb(96, 96, 96)" + "mobile": { + "value": "16px" } }, - "silver-1100": { - "prop": "--spectrum-silver-1100", - "dark": { - "value": "rgb(169, 169, 169)" + "switch-handle-selected-size-medium": { + "prop": "--spectrum-switch-handle-selected-size-medium", + "desktop": { + "value": "10px" }, - "light": { - "value": "rgb(81, 81, 81)" + "mobile": { + "value": "14px" } }, - "silver-1200": { - "prop": "--spectrum-silver-1200", - "dark": { - "value": "rgb(190, 190, 190)" + "switch-handle-selected-size-small": { + "prop": "--spectrum-switch-handle-selected-size-small", + "desktop": { + "value": "8px" }, - "light": { - "value": "rgb(66, 66, 66)" + "mobile": { + "value": "12px" } }, - "silver-1300": { - "prop": "--spectrum-silver-1300", - "dark": { - "value": "rgb(211, 211, 211)" + "switch-handle-size-extra-large": { + "prop": "--spectrum-switch-handle-size-extra-large", + "desktop": { + "value": "12px" }, - "light": { - "value": "rgb(52, 52, 52)" + "mobile": { + "value": "18px" } }, - "silver-1400": { - "prop": "--spectrum-silver-1400", - "dark": { - "value": "rgb(229, 229, 229)" + "switch-handle-size-large": { + "prop": "--spectrum-switch-handle-size-large", + "desktop": { + "value": "10px" }, - "light": { - "value": "rgb(39, 39, 39)" + "mobile": { + "value": "14px" } }, - "silver-1500": { - "prop": "--spectrum-silver-1500", - "dark": { - "value": "rgb(244, 244, 244)" + "switch-handle-size-medium": { + "prop": "--spectrum-switch-handle-size-medium", + "desktop": { + "value": "8px" }, - "light": { - "value": "rgb(28, 28, 28)" + "mobile": { + "value": "12px" } }, - "silver-1600": { - "prop": "--spectrum-silver-1600", - "dark": { - "value": "rgb(255, 255, 255)" + "switch-handle-size-small": { + "prop": "--spectrum-switch-handle-size-small", + "desktop": { + "value": "6px" }, - "light": { - "value": "rgb(12, 12, 12)" + "mobile": { + "value": "10px" } }, - "silver-200": { - "prop": "--spectrum-silver-200", - "dark": { - "value": "rgb(33, 33, 33)" + "switch-top-to-control-extra-large": { + "prop": "--spectrum-switch-top-to-control-extra-large", + "desktop": { + "value": "15px" }, - "light": { - "value": "rgb(239, 239, 239)" + "mobile": { + "value": "19px" } }, - "silver-300": { - "prop": "--spectrum-silver-300", - "dark": { - "value": "rgb(44, 44, 44)" + "switch-top-to-control-large": { + "prop": "--spectrum-switch-top-to-control-large", + "desktop": { + "value": "12px" }, - "light": { - "value": "rgb(223, 223, 223)" + "mobile": { + "value": "15px" } }, - "silver-400": { - "prop": "--spectrum-silver-400", - "dark": { - "value": "rgb(59, 59, 59)" + "switch-top-to-control-medium": { + "prop": "--spectrum-switch-top-to-control-medium", + "desktop": { + "value": "9px" }, - "light": { - "value": "rgb(204, 204, 204)" + "mobile": { + "value": "11px" } }, - "silver-500": { - "prop": "--spectrum-silver-500", - "dark": { - "value": "rgb(76, 76, 76)" + "switch-top-to-control-small": { + "prop": "--spectrum-switch-top-to-control-small", + "desktop": { + "value": "6px" }, - "light": { - "value": "rgb(183, 183, 183)" + "mobile": { + "value": "7px" } }, - "silver-600": { - "prop": "--spectrum-silver-600", - "dark": { - "value": "rgb(92, 92, 92)" + "tab-item-bottom-to-text-compact-extra-large": { + "prop": "--spectrum-tab-item-bottom-to-text-compact-extra-large", + "desktop": { + "value": "13px" }, - "light": { - "value": "rgb(160, 160, 160)" + "mobile": { + "value": "17px" } }, - "silver-700": { - "prop": "--spectrum-silver-700", - "dark": { - "value": "rgb(108, 108, 108)" + "tab-item-bottom-to-text-compact-large": { + "prop": "--spectrum-tab-item-bottom-to-text-compact-large", + "desktop": { + "value": "12px" }, - "light": { - "value": "rgb(143, 143, 143)" + "mobile": { + "value": "14px" } }, - "silver-800": { - "prop": "--spectrum-silver-800", - "dark": { - "value": "rgb(118, 118, 118)" + "tab-item-bottom-to-text-compact-medium": { + "prop": "--spectrum-tab-item-bottom-to-text-compact-medium", + "desktop": { + "value": "8px" }, - "light": { - "value": "rgb(128, 128, 128)" + "mobile": { + "value": "10px" } }, - "silver-900": { - "prop": "--spectrum-silver-900", - "dark": { - "value": "rgb(137, 137, 137)" + "tab-item-bottom-to-text-compact-small": { + "prop": "--spectrum-tab-item-bottom-to-text-compact-small", + "desktop": { + "value": "5px" }, - "light": { - "value": "rgb(114, 114, 114)" + "mobile": { + "value": "6px" } }, - "silver-background-color-default": { - "prop": "--spectrum-silver-background-color-default", - "ref": "var(--spectrum-silver-800)", - "light": { - "value": "rgb(114, 114, 114)" + "tab-item-bottom-to-text-extra-large": { + "prop": "--spectrum-tab-item-bottom-to-text-extra-large", + "desktop": { + "value": "20px" }, - "dark": { - "value": "rgb(118, 118, 118)" + "mobile": { + "value": "25px" } }, - "silver-subtle-background-color-default": { - "prop": "--spectrum-silver-subtle-background-color-default", - "ref": "var(--spectrum-silver-300)", - "light": { - "value": "rgb(239, 239, 239)" + "tab-item-bottom-to-text-large": { + "prop": "--spectrum-tab-item-bottom-to-text-large", + "desktop": { + "value": "18px" }, - "dark": { - "value": "rgb(44, 44, 44)" + "mobile": { + "value": "22px" } }, - "silver-visual-color": { - "prop": "--spectrum-silver-visual-color", - "ref": "var(--spectrum-silver-900)", - "light": { - "value": "rgb(128, 128, 128)" + "tab-item-bottom-to-text-medium": { + "prop": "--spectrum-tab-item-bottom-to-text-medium", + "desktop": { + "value": "14px" }, - "dark": { - "value": "rgb(137, 137, 137)" + "mobile": { + "value": "19px" } }, - "slider-bottom-to-handle-extra-large": { - "prop": "--spectrum-slider-bottom-to-handle-extra-large", + "tab-item-bottom-to-text-small": { + "prop": "--spectrum-tab-item-bottom-to-text-small", "desktop": { - "value": "14px" + "value": "12px" }, "mobile": { - "value": "17px" + "value": "15px" } }, - "slider-bottom-to-handle-large": { - "prop": "--spectrum-slider-bottom-to-handle-large", + "tab-item-compact-height-extra-large": { + "prop": "--spectrum-tab-item-compact-height-extra-large", + "ref": "var(--spectrum-component-height-300)", "desktop": { - "value": "11px" + "value": "48px" }, "mobile": { - "value": "14px" + "value": "60px" } }, - "slider-bottom-to-handle-medium": { - "prop": "--spectrum-slider-bottom-to-handle-medium", + "tab-item-compact-height-large": { + "prop": "--spectrum-tab-item-compact-height-large", + "ref": "var(--spectrum-component-height-200)", "desktop": { - "value": "8px" + "value": "40px" }, "mobile": { - "value": "10px" + "value": "50px" } }, - "slider-bottom-to-handle-small": { - "prop": "--spectrum-slider-bottom-to-handle-small", + "tab-item-compact-height-medium": { + "prop": "--spectrum-tab-item-compact-height-medium", + "ref": "var(--spectrum-component-height-100)", "desktop": { - "value": "5px" + "value": "32px" }, "mobile": { - "value": "6px" + "value": "40px" } }, - "slider-control-height-extra-large": { - "prop": "--spectrum-slider-control-height-extra-large", + "tab-item-compact-height-small": { + "prop": "--spectrum-tab-item-compact-height-small", + "ref": "var(--spectrum-component-height-75)", "desktop": { - "value": "20px" + "value": "24px" }, "mobile": { - "value": "26px" + "value": "30px" } }, - "slider-control-height-large": { - "prop": "--spectrum-slider-control-height-large", + "tab-item-focus-indicator-gap-extra-large": { + "prop": "--spectrum-tab-item-focus-indicator-gap-extra-large", "desktop": { - "value": "18px" + "value": "10px" }, "mobile": { - "value": "22px" + "value": "12px" } }, - "slider-control-height-medium": { - "prop": "--spectrum-slider-control-height-medium", + "tab-item-focus-indicator-gap-large": { + "prop": "--spectrum-tab-item-focus-indicator-gap-large", "desktop": { - "value": "16px" + "value": "9px" }, "mobile": { - "value": "20px" + "value": "11px" } }, - "slider-control-height-small": { - "prop": "--spectrum-slider-control-height-small", + "tab-item-focus-indicator-gap-medium": { + "prop": "--spectrum-tab-item-focus-indicator-gap-medium", "desktop": { - "value": "14px" + "value": "8px" }, "mobile": { - "value": "18px" + "value": "10px" } }, - "slider-control-to-field-label-extra-large": { - "prop": "--spectrum-slider-control-to-field-label-extra-large", + "tab-item-focus-indicator-gap-small": { + "prop": "--spectrum-tab-item-focus-indicator-gap-small", "desktop": { - "value": "14px" + "value": "7px" }, "mobile": { - "value": "17px" + "value": "9px" } }, - "slider-control-to-field-label-large": { - "prop": "--spectrum-slider-control-to-field-label-large", + "tab-item-height-extra-large": { + "prop": "--spectrum-tab-item-height-extra-large", + "ref": "var(--spectrum-component-height-500)", "desktop": { - "value": "11px" + "value": "64px" }, "mobile": { - "value": "14px" + "value": "80px" } }, - "slider-control-to-field-label-medium": { - "prop": "--spectrum-slider-control-to-field-label-medium", + "tab-item-height-large": { + "prop": "--spectrum-tab-item-height-large", + "ref": "var(--spectrum-component-height-400)", "desktop": { - "value": "8px" + "value": "56px" }, "mobile": { - "value": "10px" + "value": "70px" } }, - "slider-control-to-field-label-small": { - "prop": "--spectrum-slider-control-to-field-label-small", + "tab-item-height-medium": { + "prop": "--spectrum-tab-item-height-medium", + "ref": "var(--spectrum-component-height-300)", "desktop": { - "value": "5px" + "value": "48px" }, "mobile": { - "value": "6px" + "value": "60px" } }, - "slider-handle-border-width-down-extra-large": { - "prop": "--spectrum-slider-handle-border-width-down-extra-large", + "tab-item-height-small": { + "prop": "--spectrum-tab-item-height-small", + "ref": "var(--spectrum-component-height-200)", "desktop": { - "value": "8px" + "value": "40px" }, "mobile": { - "value": "11px" + "value": "50px" } }, - "slider-handle-border-width-down-large": { - "prop": "--spectrum-slider-handle-border-width-down-large", + "tab-item-start-to-edge-extra-large": { + "prop": "--spectrum-tab-item-start-to-edge-extra-large", "desktop": { - "value": "7px" + "value": "13px" }, "mobile": { - "value": "9px" + "value": "19px" } }, - "slider-handle-border-width-down-medium": { - "prop": "--spectrum-slider-handle-border-width-down-medium", + "tab-item-start-to-edge-large": { + "prop": "--spectrum-tab-item-start-to-edge-large", "desktop": { - "value": "6px" + "value": "13px" }, "mobile": { - "value": "8px" + "value": "17px" } }, - "slider-handle-border-width-down-small": { - "prop": "--spectrum-slider-handle-border-width-down-small", + "tab-item-start-to-edge-medium": { + "prop": "--spectrum-tab-item-start-to-edge-medium", "desktop": { - "value": "5px" + "value": "12px" }, "mobile": { - "value": "7px" + "value": "15px" } }, - "slider-handle-gap": { - "prop": "--spectrum-slider-handle-gap", - "value": "4px" + "tab-item-start-to-edge-quiet": { + "prop": "--spectrum-tab-item-start-to-edge-quiet", + "value": "0px" }, - "slider-handle-size-extra-large": { - "prop": "--spectrum-slider-handle-size-extra-large", + "tab-item-start-to-edge-small": { + "prop": "--spectrum-tab-item-start-to-edge-small", "desktop": { - "value": "20px" + "value": "12px" }, "mobile": { - "value": "26px" + "value": "13px" } }, - "slider-handle-size-large": { - "prop": "--spectrum-slider-handle-size-large", + "tab-item-to-tab-item-horizontal-extra-large": { + "prop": "--spectrum-tab-item-to-tab-item-horizontal-extra-large", "desktop": { - "value": "18px" + "value": "30px" }, "mobile": { - "value": "22px" + "value": "36px" } }, - "slider-handle-size-medium": { - "prop": "--spectrum-slider-handle-size-medium", + "tab-item-to-tab-item-horizontal-large": { + "prop": "--spectrum-tab-item-to-tab-item-horizontal-large", "desktop": { - "value": "16px" + "value": "27px" }, "mobile": { - "value": "20px" + "value": "33px" } }, - "slider-handle-size-small": { - "prop": "--spectrum-slider-handle-size-small", + "tab-item-to-tab-item-horizontal-medium": { + "prop": "--spectrum-tab-item-to-tab-item-horizontal-medium", "desktop": { - "value": "14px" + "value": "24px" }, "mobile": { - "value": "18px" + "value": "30px" } }, - "slider-track-thickness": { - "prop": "--spectrum-slider-track-thickness", - "value": "2px" - }, - "spacing-100": { - "prop": "--spectrum-spacing-100", - "value": "8px" - }, - "spacing-1000": { - "prop": "--spectrum-spacing-1000", - "value": "96px" - }, - "spacing-200": { - "prop": "--spectrum-spacing-200", - "value": "12px" - }, - "spacing-300": { - "prop": "--spectrum-spacing-300", - "value": "16px" - }, - "spacing-400": { - "prop": "--spectrum-spacing-400", - "value": "24px" - }, - "spacing-50": { - "prop": "--spectrum-spacing-50", - "value": "2px" - }, - "spacing-500": { - "prop": "--spectrum-spacing-500", - "value": "32px" - }, - "spacing-600": { - "prop": "--spectrum-spacing-600", - "value": "40px" - }, - "spacing-700": { - "prop": "--spectrum-spacing-700", - "value": "48px" - }, - "spacing-75": { - "prop": "--spectrum-spacing-75", - "value": "4px" - }, - "spacing-800": { - "prop": "--spectrum-spacing-800", - "value": "64px" - }, - "spacing-900": { - "prop": "--spectrum-spacing-900", - "value": "80px" - }, - "static-black-focus-indicator-color": { - "prop": "--spectrum-static-black-focus-indicator-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "static-black-text-color": { - "prop": "--spectrum-static-black-text-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "static-black-track-color": { - "prop": "--spectrum-static-black-track-color", - "ref": "var(--spectrum-transparent-black-300)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" + "tab-item-to-tab-item-horizontal-small": { + "prop": "--spectrum-tab-item-to-tab-item-horizontal-small", + "desktop": { + "value": "21px" }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" + "mobile": { + "value": "27px" } }, - "static-black-track-indicator-color": { - "prop": "--spectrum-static-black-track-indicator-color", - "ref": "var(--spectrum-transparent-black-900)", - "light": { - "value": "rgba(0, 0, 0, 0.93)" + "tab-item-to-tab-item-vertical-extra-large": { + "prop": "--spectrum-tab-item-to-tab-item-vertical-extra-large", + "desktop": { + "value": "5px" }, - "dark": { - "value": "rgba(0, 0, 0, 0.93)" + "mobile": { + "value": "6px" } }, - "static-white-focus-indicator-color": { - "prop": "--spectrum-static-white-focus-indicator-color", - "ref": "var(--spectrum-white)", - "light": { - "value": "rgb(255, 255, 255)" + "tab-item-to-tab-item-vertical-large": { + "prop": "--spectrum-tab-item-to-tab-item-vertical-large", + "desktop": { + "value": "5px" }, - "dark": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "6px" } }, - "static-white-text-color": { - "prop": "--spectrum-static-white-text-color", - "ref": "var(--spectrum-white)", - "light": { - "value": "rgb(255, 255, 255)" + "tab-item-to-tab-item-vertical-medium": { + "prop": "--spectrum-tab-item-to-tab-item-vertical-medium", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "5px" } }, - "static-white-track-color": { - "prop": "--spectrum-static-white-track-color", - "ref": "var(--spectrum-transparent-white-300)", - "light": { - "value": "rgba(255, 255, 255, 0.17)" + "tab-item-to-tab-item-vertical-small": { + "prop": "--spectrum-tab-item-to-tab-item-vertical-small", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.17)" + "mobile": { + "value": "5px" } }, - "static-white-track-indicator-color": { - "prop": "--spectrum-static-white-track-indicator-color", - "ref": "var(--spectrum-transparent-white-900)", - "light": { - "value": "rgba(255, 255, 255, 0.94)" + "tab-item-top-to-text-compact-extra-large": { + "prop": "--spectrum-tab-item-top-to-text-compact-extra-large", + "desktop": { + "value": "12px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.94)" + "mobile": { + "value": "15px" } }, - "status-light-dot-size-extra-large": { - "prop": "--spectrum-status-light-dot-size-extra-large", + "tab-item-top-to-text-compact-large": { + "prop": "--spectrum-tab-item-top-to-text-compact-large", "desktop": { "value": "10px" }, @@ -10344,374 +13793,345 @@ "value": "12px" } }, - "status-light-dot-size-large": { - "prop": "--spectrum-status-light-dot-size-large", + "tab-item-top-to-text-compact-medium": { + "prop": "--spectrum-tab-item-top-to-text-compact-medium", "desktop": { - "value": "10px" + "value": "6px" }, "mobile": { - "value": "12px" + "value": "9px" } }, - "status-light-dot-size-medium": { - "prop": "--spectrum-status-light-dot-size-medium", + "tab-item-top-to-text-compact-small": { + "prop": "--spectrum-tab-item-top-to-text-compact-small", "desktop": { - "value": "8px" + "value": "4px" }, "mobile": { - "value": "10px" + "value": "5px" } }, - "status-light-dot-size-small": { - "prop": "--spectrum-status-light-dot-size-small", - "value": "8px" - }, - "status-light-top-to-dot-extra-large": { - "prop": "--spectrum-status-light-top-to-dot-extra-large", + "tab-item-top-to-text-extra-large": { + "prop": "--spectrum-tab-item-top-to-text-extra-large", "desktop": { "value": "19px" }, "mobile": { - "value": "24px" + "value": "25px" } }, - "status-light-top-to-dot-large": { - "prop": "--spectrum-status-light-top-to-dot-large", + "tab-item-top-to-text-large": { + "prop": "--spectrum-tab-item-top-to-text-large", "desktop": { - "value": "15px" + "value": "16px" }, "mobile": { - "value": "19px" + "value": "22px" } }, - "status-light-top-to-dot-medium": { - "prop": "--spectrum-status-light-top-to-dot-medium", + "tab-item-top-to-text-medium": { + "prop": "--spectrum-tab-item-top-to-text-medium", "desktop": { - "value": "12px" + "value": "14px" }, "mobile": { - "value": "15px" + "value": "18px" } }, - "status-light-top-to-dot-small": { - "prop": "--spectrum-status-light-top-to-dot-small", + "tab-item-top-to-text-small": { + "prop": "--spectrum-tab-item-top-to-text-small", "desktop": { - "value": "8px" + "value": "11px" }, "mobile": { - "value": "11px" + "value": "14px" } }, - "swatch-border-color": { - "prop": "--spectrum-swatch-border-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" + "tab-item-top-to-workflow-icon-compact-extra-large": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-extra-large", + "desktop": { + "value": "11px" }, - "dark": { - "value": "rgb(242, 242, 242)" + "mobile": { + "value": "16px" } }, - "swatch-border-opacity": { - "prop": "--spectrum-swatch-border-opacity", - "value": "0.51" - }, - "swatch-disabled-icon-border-color": { - "prop": "--spectrum-swatch-disabled-icon-border-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "swatch-disabled-icon-border-opacity": { - "prop": "--spectrum-swatch-disabled-icon-border-opacity", - "value": "0.51" - }, - "swatch-rectangle-width-multiplier": { - "prop": "--spectrum-swatch-rectangle-width-multiplier", - "value": "2" - }, - "swatch-size-extra-small": { - "prop": "--spectrum-swatch-size-extra-small", + "tab-item-top-to-workflow-icon-compact-large": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-large", "desktop": { - "value": "16px" + "value": "9px" }, "mobile": { - "value": "20px" + "value": "13px" } }, - "swatch-size-large": { - "prop": "--spectrum-swatch-size-large", + "tab-item-top-to-workflow-icon-compact-medium": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-medium", "desktop": { - "value": "40px" + "value": "7px" }, "mobile": { - "value": "50px" + "value": "9px" } }, - "swatch-size-medium": { - "prop": "--spectrum-swatch-size-medium", + "tab-item-top-to-workflow-icon-compact-small": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-small", "desktop": { - "value": "32px" + "value": "3px" }, "mobile": { - "value": "40px" + "value": "5px" } }, - "swatch-size-small": { - "prop": "--spectrum-swatch-size-small", + "tab-item-top-to-workflow-icon-extra-large": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-extra-large", "desktop": { - "value": "24px" + "value": "19px" }, "mobile": { - "value": "30px" + "value": "26px" } }, - "swatch-slash-thickness-extra-small": { - "prop": "--spectrum-swatch-slash-thickness-extra-small", - "value": "2px" - }, - "swatch-slash-thickness-large": { - "prop": "--spectrum-swatch-slash-thickness-large", - "value": "5px" - }, - "swatch-slash-thickness-medium": { - "prop": "--spectrum-swatch-slash-thickness-medium", - "value": "4px" - }, - "swatch-slash-thickness-small": { - "prop": "--spectrum-swatch-slash-thickness-small", - "value": "3px" - }, - "switch-control-height-extra-large": { - "prop": "--spectrum-switch-control-height-extra-large", + "tab-item-top-to-workflow-icon-large": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-large", "desktop": { - "value": "18px" + "value": "17px" }, "mobile": { - "value": "22px" + "value": "23px" } }, - "switch-control-height-large": { - "prop": "--spectrum-switch-control-height-large", + "tab-item-top-to-workflow-icon-medium": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-medium", "desktop": { - "value": "16px" + "value": "15px" }, "mobile": { - "value": "20px" + "value": "19px" } }, - "switch-control-height-medium": { - "prop": "--spectrum-switch-control-height-medium", + "tab-item-top-to-workflow-icon-small": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-small", "desktop": { - "value": "14px" + "value": "13px" }, "mobile": { - "value": "18px" + "value": "15px" } }, - "switch-control-height-small": { - "prop": "--spectrum-switch-control-height-small", + "table-border-divider-width": { + "prop": "--spectrum-table-border-divider-width", + "value": "1px" + }, + "table-checkbox-to-text": { + "prop": "--spectrum-table-checkbox-to-text", "desktop": { - "value": "12px" + "value": "24px" }, "mobile": { - "value": "16px" + "value": "30px" } }, - "switch-control-width-extra-large": { - "prop": "--spectrum-switch-control-width-extra-large", + "table-column-header-row-bottom-to-text-extra-large": { + "prop": "--spectrum-table-column-header-row-bottom-to-text-extra-large", "desktop": { - "value": "33px" + "value": "13px" }, "mobile": { - "value": "46px" + "value": "17px" } }, - "switch-control-width-large": { - "prop": "--spectrum-switch-control-width-large", + "table-column-header-row-bottom-to-text-large": { + "prop": "--spectrum-table-column-header-row-bottom-to-text-large", "desktop": { - "value": "29px" + "value": "10px" }, "mobile": { - "value": "41px" + "value": "13px" } }, - "switch-control-width-medium": { - "prop": "--spectrum-switch-control-width-medium", + "table-column-header-row-bottom-to-text-medium": { + "prop": "--spectrum-table-column-header-row-bottom-to-text-medium", "desktop": { - "value": "26px" + "value": "8px" }, "mobile": { - "value": "36px" + "value": "10px" } }, - "switch-control-width-small": { - "prop": "--spectrum-switch-control-width-small", + "table-column-header-row-bottom-to-text-small": { + "prop": "--spectrum-table-column-header-row-bottom-to-text-small", "desktop": { - "value": "23px" + "value": "9px" }, "mobile": { - "value": "32px" + "value": "11px" } }, - "switch-top-to-control-extra-large": { - "prop": "--spectrum-switch-top-to-control-extra-large", + "table-column-header-row-top-to-text-extra-large": { + "prop": "--spectrum-table-column-header-row-top-to-text-extra-large", "desktop": { - "value": "15px" + "value": "13px" }, "mobile": { - "value": "19px" + "value": "16px" } }, - "switch-top-to-control-large": { - "prop": "--spectrum-switch-top-to-control-large", + "table-column-header-row-top-to-text-large": { + "prop": "--spectrum-table-column-header-row-top-to-text-large", "desktop": { - "value": "12px" + "value": "10px" }, "mobile": { - "value": "15px" + "value": "13px" } }, - "switch-top-to-control-medium": { - "prop": "--spectrum-switch-top-to-control-medium", + "table-column-header-row-top-to-text-medium": { + "prop": "--spectrum-table-column-header-row-top-to-text-medium", "desktop": { - "value": "9px" + "value": "6px" }, "mobile": { - "value": "11px" + "value": "9px" } }, - "switch-top-to-control-small": { - "prop": "--spectrum-switch-top-to-control-small", + "table-column-header-row-top-to-text-small": { + "prop": "--spectrum-table-column-header-row-top-to-text-small", "desktop": { - "value": "6px" + "value": "8px" }, "mobile": { - "value": "7px" + "value": "10px" } }, - "tab-item-bottom-to-text-compact-extra-large": { - "prop": "--spectrum-tab-item-bottom-to-text-compact-extra-large", + "table-edge-to-content": { + "prop": "--spectrum-table-edge-to-content", + "value": "16px" + }, + "table-header-row-checkbox-to-top-extra-large": { + "prop": "--spectrum-table-header-row-checkbox-to-top-extra-large", "desktop": { - "value": "13px" + "value": "15px" }, "mobile": { - "value": "17px" + "value": "21px" } }, - "tab-item-bottom-to-text-compact-large": { - "prop": "--spectrum-tab-item-bottom-to-text-compact-large", + "table-header-row-checkbox-to-top-large": { + "prop": "--spectrum-table-header-row-checkbox-to-top-large", "desktop": { "value": "12px" }, "mobile": { - "value": "14px" + "value": "17px" } }, - "tab-item-bottom-to-text-compact-medium": { - "prop": "--spectrum-tab-item-bottom-to-text-compact-medium", + "table-header-row-checkbox-to-top-medium": { + "prop": "--spectrum-table-header-row-checkbox-to-top-medium", "desktop": { "value": "8px" }, "mobile": { - "value": "10px" + "value": "11px" } }, - "tab-item-bottom-to-text-compact-small": { - "prop": "--spectrum-tab-item-bottom-to-text-compact-small", + "table-header-row-checkbox-to-top-small": { + "prop": "--spectrum-table-header-row-checkbox-to-top-small", "desktop": { - "value": "5px" + "value": "10px" }, "mobile": { - "value": "6px" + "value": "14px" } }, - "tab-item-bottom-to-text-extra-large": { - "prop": "--spectrum-tab-item-bottom-to-text-extra-large", + "table-row-bottom-to-text-extra-large": { + "prop": "--spectrum-table-row-bottom-to-text-extra-large", "desktop": { - "value": "20px" + "value": "17px" }, "mobile": { - "value": "25px" + "value": "22px" } }, - "tab-item-bottom-to-text-large": { - "prop": "--spectrum-tab-item-bottom-to-text-large", + "table-row-bottom-to-text-extra-large-compact": { + "prop": "--spectrum-table-row-bottom-to-text-extra-large-compact", + "ref": "var(--spectrum-component-bottom-to-text-300)", "desktop": { - "value": "18px" + "value": "14px" }, "mobile": { - "value": "22px" + "value": "18px" } }, - "tab-item-bottom-to-text-medium": { - "prop": "--spectrum-tab-item-bottom-to-text-medium", + "table-row-bottom-to-text-extra-large-regular": { + "prop": "--spectrum-table-row-bottom-to-text-extra-large-regular", + "ref": "var(--spectrum-table-row-bottom-to-text-extra-large)", "desktop": { - "value": "14px" + "value": "17px" }, "mobile": { - "value": "19px" + "value": "22px" } }, - "tab-item-bottom-to-text-small": { - "prop": "--spectrum-tab-item-bottom-to-text-small", + "table-row-bottom-to-text-extra-large-spacious": { + "prop": "--spectrum-table-row-bottom-to-text-extra-large-spacious", "desktop": { - "value": "12px" + "value": "21px" }, "mobile": { - "value": "15px" + "value": "27px" } }, - "tab-item-compact-height-extra-large": { - "prop": "--spectrum-tab-item-compact-height-extra-large", - "ref": "var(--spectrum-component-height-300)", + "table-row-bottom-to-text-large": { + "prop": "--spectrum-table-row-bottom-to-text-large", "desktop": { - "value": "48px" + "value": "14px" }, "mobile": { - "value": "60px" + "value": "18px" } }, - "tab-item-compact-height-large": { - "prop": "--spectrum-tab-item-compact-height-large", - "ref": "var(--spectrum-component-height-200)", + "table-row-bottom-to-text-large-compact": { + "prop": "--spectrum-table-row-bottom-to-text-large-compact", + "ref": "var(--spectrum-component-bottom-to-text-200)", "desktop": { - "value": "40px" + "value": "11px" }, "mobile": { - "value": "50px" + "value": "14px" } }, - "tab-item-compact-height-medium": { - "prop": "--spectrum-tab-item-compact-height-medium", - "ref": "var(--spectrum-component-height-100)", + "table-row-bottom-to-text-large-regular": { + "prop": "--spectrum-table-row-bottom-to-text-large-regular", + "ref": "var(--spectrum-table-row-bottom-to-text-large)", "desktop": { - "value": "32px" + "value": "14px" }, "mobile": { - "value": "40px" + "value": "18px" } }, - "tab-item-compact-height-small": { - "prop": "--spectrum-tab-item-compact-height-small", - "ref": "var(--spectrum-component-height-75)", + "table-row-bottom-to-text-large-spacious": { + "prop": "--spectrum-table-row-bottom-to-text-large-spacious", "desktop": { - "value": "24px" + "value": "18px" }, "mobile": { - "value": "30px" + "value": "23px" } }, - "tab-item-focus-indicator-gap-extra-large": { - "prop": "--spectrum-tab-item-focus-indicator-gap-extra-large", + "table-row-bottom-to-text-medium": { + "prop": "--spectrum-table-row-bottom-to-text-medium", "desktop": { - "value": "10px" + "value": "13px" }, "mobile": { - "value": "12px" + "value": "15px" } }, - "tab-item-focus-indicator-gap-large": { - "prop": "--spectrum-tab-item-focus-indicator-gap-large", + "table-row-bottom-to-text-medium-compact": { + "prop": "--spectrum-table-row-bottom-to-text-medium-compact", + "ref": "var(--spectrum-component-bottom-to-text-100)", "desktop": { "value": "9px" }, @@ -10719,326 +14139,341 @@ "value": "11px" } }, - "tab-item-focus-indicator-gap-medium": { - "prop": "--spectrum-tab-item-focus-indicator-gap-medium", + "table-row-bottom-to-text-medium-regular": { + "prop": "--spectrum-table-row-bottom-to-text-medium-regular", + "ref": "var(--spectrum-table-row-bottom-to-text-medium)", "desktop": { - "value": "8px" + "value": "13px" }, "mobile": { - "value": "10px" + "value": "15px" } }, - "tab-item-focus-indicator-gap-small": { - "prop": "--spectrum-tab-item-focus-indicator-gap-small", + "table-row-bottom-to-text-medium-spacious": { + "prop": "--spectrum-table-row-bottom-to-text-medium-spacious", "desktop": { - "value": "7px" + "value": "16px" }, "mobile": { - "value": "9px" + "value": "18px" } }, - "tab-item-height-extra-large": { - "prop": "--spectrum-tab-item-height-extra-large", - "ref": "var(--spectrum-component-height-500)", + "table-row-bottom-to-text-small": { + "prop": "--spectrum-table-row-bottom-to-text-small", "desktop": { - "value": "64px" + "value": "9px" }, "mobile": { - "value": "80px" + "value": "11px" } }, - "tab-item-height-large": { - "prop": "--spectrum-tab-item-height-large", - "ref": "var(--spectrum-component-height-400)", + "table-row-bottom-to-text-small-compact": { + "prop": "--spectrum-table-row-bottom-to-text-small-compact", + "ref": "var(--spectrum-component-bottom-to-text-75)", "desktop": { - "value": "56px" + "value": "5px" }, "mobile": { - "value": "70px" + "value": "6px" } }, - "tab-item-height-medium": { - "prop": "--spectrum-tab-item-height-medium", - "ref": "var(--spectrum-component-height-300)", + "table-row-bottom-to-text-small-regular": { + "prop": "--spectrum-table-row-bottom-to-text-small-regular", + "ref": "var(--spectrum-table-row-bottom-to-text-small)", "desktop": { - "value": "48px" + "value": "9px" }, "mobile": { - "value": "60px" + "value": "11px" } }, - "tab-item-height-small": { - "prop": "--spectrum-tab-item-height-small", - "ref": "var(--spectrum-component-height-200)", + "table-row-bottom-to-text-small-spacious": { + "prop": "--spectrum-table-row-bottom-to-text-small-spacious", "desktop": { - "value": "40px" + "value": "13px" }, "mobile": { - "value": "50px" + "value": "16px" } }, - "tab-item-start-to-edge-extra-large": { - "prop": "--spectrum-tab-item-start-to-edge-extra-large", + "table-row-checkbox-to-top-extra-large": { + "prop": "--spectrum-table-row-checkbox-to-top-extra-large", "desktop": { - "value": "13px" + "value": "19px" }, "mobile": { - "value": "19px" + "value": "26px" } }, - "tab-item-start-to-edge-large": { - "prop": "--spectrum-tab-item-start-to-edge-large", + "table-row-checkbox-to-top-extra-large-compact": { + "prop": "--spectrum-table-row-checkbox-to-top-extra-large-compact", "desktop": { - "value": "13px" + "value": "15px" }, "mobile": { - "value": "17px" + "value": "21px" } }, - "tab-item-start-to-edge-medium": { - "prop": "--spectrum-tab-item-start-to-edge-medium", + "table-row-checkbox-to-top-extra-large-regular": { + "prop": "--spectrum-table-row-checkbox-to-top-extra-large-regular", + "ref": "var(--spectrum-table-row-checkbox-to-top-extra-large)", "desktop": { - "value": "12px" + "value": "19px" }, "mobile": { - "value": "15px" + "value": "26px" } }, - "tab-item-start-to-edge-quiet": { - "prop": "--spectrum-tab-item-start-to-edge-quiet", - "value": "0px" - }, - "tab-item-start-to-edge-small": { - "prop": "--spectrum-tab-item-start-to-edge-small", + "table-row-checkbox-to-top-extra-large-spacious": { + "prop": "--spectrum-table-row-checkbox-to-top-extra-large-spacious", "desktop": { - "value": "12px" + "value": "23px" }, "mobile": { - "value": "13px" + "value": "31px" } }, - "tab-item-to-tab-item-horizontal-extra-large": { - "prop": "--spectrum-tab-item-to-tab-item-horizontal-extra-large", + "table-row-checkbox-to-top-large": { + "prop": "--spectrum-table-row-checkbox-to-top-large", "desktop": { - "value": "30px" + "value": "16px" }, "mobile": { - "value": "36px" + "value": "22px" } }, - "tab-item-to-tab-item-horizontal-large": { - "prop": "--spectrum-tab-item-to-tab-item-horizontal-large", + "table-row-checkbox-to-top-large-compact": { + "prop": "--spectrum-table-row-checkbox-to-top-large-compact", "desktop": { - "value": "27px" + "value": "12px" }, "mobile": { - "value": "33px" + "value": "17px" } }, - "tab-item-to-tab-item-horizontal-medium": { - "prop": "--spectrum-tab-item-to-tab-item-horizontal-medium", + "table-row-checkbox-to-top-large-regular": { + "prop": "--spectrum-table-row-checkbox-to-top-large-regular", + "ref": "var(--spectrum-table-row-checkbox-to-top-large)", "desktop": { - "value": "24px" + "value": "16px" }, "mobile": { - "value": "30px" + "value": "22px" } }, - "tab-item-to-tab-item-horizontal-small": { - "prop": "--spectrum-tab-item-to-tab-item-horizontal-small", + "table-row-checkbox-to-top-large-spacious": { + "prop": "--spectrum-table-row-checkbox-to-top-large-spacious", "desktop": { - "value": "21px" + "value": "20px" }, "mobile": { "value": "27px" } }, - "tab-item-to-tab-item-vertical-extra-large": { - "prop": "--spectrum-tab-item-to-tab-item-vertical-extra-large", + "table-row-checkbox-to-top-medium": { + "prop": "--spectrum-table-row-checkbox-to-top-medium", "desktop": { - "value": "5px" + "value": "12px" }, "mobile": { - "value": "6px" + "value": "16px" } }, - "tab-item-to-tab-item-vertical-large": { - "prop": "--spectrum-tab-item-to-tab-item-vertical-large", + "table-row-checkbox-to-top-medium-compact": { + "prop": "--spectrum-table-row-checkbox-to-top-medium-compact", "desktop": { - "value": "5px" + "value": "8px" }, "mobile": { - "value": "6px" + "value": "11px" + } + }, + "table-row-checkbox-to-top-medium-regular": { + "prop": "--spectrum-table-row-checkbox-to-top-medium-regular", + "ref": "var(--spectrum-table-row-checkbox-to-top-medium)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "16px" } }, - "tab-item-to-tab-item-vertical-medium": { - "prop": "--spectrum-tab-item-to-tab-item-vertical-medium", + "table-row-checkbox-to-top-medium-spacious": { + "prop": "--spectrum-table-row-checkbox-to-top-medium-spacious", "desktop": { - "value": "4px" + "value": "16px" }, "mobile": { - "value": "5px" + "value": "21px" } }, - "tab-item-to-tab-item-vertical-small": { - "prop": "--spectrum-tab-item-to-tab-item-vertical-small", + "table-row-checkbox-to-top-small": { + "prop": "--spectrum-table-row-checkbox-to-top-small", "desktop": { - "value": "4px" + "value": "10px" }, "mobile": { - "value": "5px" + "value": "14px" } }, - "tab-item-top-to-text-compact-extra-large": { - "prop": "--spectrum-tab-item-top-to-text-compact-extra-large", + "table-row-checkbox-to-top-small-compact": { + "prop": "--spectrum-table-row-checkbox-to-top-small-compact", "desktop": { - "value": "12px" + "value": "6px" }, "mobile": { - "value": "15px" + "value": "9px" } }, - "tab-item-top-to-text-compact-large": { - "prop": "--spectrum-tab-item-top-to-text-compact-large", + "table-row-checkbox-to-top-small-regular": { + "prop": "--spectrum-table-row-checkbox-to-top-small-regular", + "ref": "var(--spectrum-table-row-checkbox-to-top-small)", "desktop": { "value": "10px" }, "mobile": { - "value": "12px" + "value": "14px" } }, - "tab-item-top-to-text-compact-medium": { - "prop": "--spectrum-tab-item-top-to-text-compact-medium", + "table-row-checkbox-to-top-small-spacious": { + "prop": "--spectrum-table-row-checkbox-to-top-small-spacious", "desktop": { - "value": "6px" + "value": "14px" }, "mobile": { - "value": "9px" + "value": "19px" } }, - "tab-item-top-to-text-compact-small": { - "prop": "--spectrum-tab-item-top-to-text-compact-small", + "table-row-down-opacity": { + "prop": "--spectrum-table-row-down-opacity", + "value": "0.1" + }, + "table-row-height-extra-large": { + "prop": "--spectrum-table-row-height-extra-large", "desktop": { - "value": "4px" + "value": "56px" }, "mobile": { - "value": "5px" + "value": "70px" } }, - "tab-item-top-to-text-extra-large": { - "prop": "--spectrum-tab-item-top-to-text-extra-large", + "table-row-height-extra-large-compact": { + "prop": "--spectrum-table-row-height-extra-large-compact", + "ref": "var(--spectrum-component-height-300)", "desktop": { - "value": "19px" + "value": "48px" }, "mobile": { - "value": "25px" + "value": "60px" } }, - "tab-item-top-to-text-large": { - "prop": "--spectrum-tab-item-top-to-text-large", + "table-row-height-extra-large-regular": { + "prop": "--spectrum-table-row-height-extra-large-regular", + "ref": "var(--spectrum-table-row-height-extra-large)", "desktop": { - "value": "16px" + "value": "56px" }, "mobile": { - "value": "22px" + "value": "70px" } }, - "tab-item-top-to-text-medium": { - "prop": "--spectrum-tab-item-top-to-text-medium", + "table-row-height-extra-large-spacious": { + "prop": "--spectrum-table-row-height-extra-large-spacious", "desktop": { - "value": "14px" + "value": "64px" }, "mobile": { - "value": "18px" + "value": "80px" } }, - "tab-item-top-to-text-small": { - "prop": "--spectrum-tab-item-top-to-text-small", + "table-row-height-large": { + "prop": "--spectrum-table-row-height-large", "desktop": { - "value": "11px" + "value": "48px" }, "mobile": { - "value": "14px" + "value": "60px" } }, - "tab-item-top-to-workflow-icon-compact-extra-large": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-extra-large", + "table-row-height-large-compact": { + "prop": "--spectrum-table-row-height-large-compact", + "ref": "var(--spectrum-component-height-200)", "desktop": { - "value": "11px" + "value": "40px" }, "mobile": { - "value": "16px" + "value": "50px" } }, - "tab-item-top-to-workflow-icon-compact-large": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-large", + "table-row-height-large-regular": { + "prop": "--spectrum-table-row-height-large-regular", + "ref": "var(--spectrum-table-row-height-large)", "desktop": { - "value": "9px" + "value": "48px" }, "mobile": { - "value": "13px" + "value": "60px" } }, - "tab-item-top-to-workflow-icon-compact-medium": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-medium", + "table-row-height-large-spacious": { + "prop": "--spectrum-table-row-height-large-spacious", "desktop": { - "value": "7px" + "value": "56px" }, "mobile": { - "value": "9px" + "value": "70px" } }, - "tab-item-top-to-workflow-icon-compact-small": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-small", + "table-row-height-medium": { + "prop": "--spectrum-table-row-height-medium", "desktop": { - "value": "3px" + "value": "40px" }, "mobile": { - "value": "5px" + "value": "50px" } }, - "tab-item-top-to-workflow-icon-extra-large": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-extra-large", + "table-row-height-medium-compact": { + "prop": "--spectrum-table-row-height-medium-compact", + "ref": "var(--spectrum-component-height-100)", "desktop": { - "value": "19px" + "value": "32px" }, "mobile": { - "value": "26px" + "value": "40px" } }, - "tab-item-top-to-workflow-icon-large": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-large", + "table-row-height-medium-regular": { + "prop": "--spectrum-table-row-height-medium-regular", + "ref": "var(--spectrum-table-row-height-medium)", "desktop": { - "value": "17px" + "value": "40px" }, "mobile": { - "value": "23px" + "value": "50px" } }, - "tab-item-top-to-workflow-icon-medium": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-medium", + "table-row-height-medium-spacious": { + "prop": "--spectrum-table-row-height-medium-spacious", "desktop": { - "value": "15px" + "value": "48px" }, "mobile": { - "value": "19px" + "value": "60px" } }, - "tab-item-top-to-workflow-icon-small": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-small", + "table-row-height-small": { + "prop": "--spectrum-table-row-height-small", "desktop": { - "value": "13px" + "value": "32px" }, "mobile": { - "value": "15px" + "value": "40px" } }, - "table-border-divider-width": { - "prop": "--spectrum-table-border-divider-width", - "value": "1px" - }, - "table-checkbox-to-text": { - "prop": "--spectrum-table-checkbox-to-text", + "table-row-height-small-compact": { + "prop": "--spectrum-table-row-height-small-compact", + "ref": "var(--spectrum-component-height-75)", "desktop": { "value": "24px" }, @@ -11046,111 +14481,137 @@ "value": "30px" } }, - "table-column-header-row-bottom-to-text-extra-large": { - "prop": "--spectrum-table-column-header-row-bottom-to-text-extra-large", + "table-row-height-small-regular": { + "prop": "--spectrum-table-row-height-small-regular", + "ref": "var(--spectrum-table-row-height-small)", "desktop": { - "value": "13px" + "value": "32px" }, "mobile": { - "value": "17px" + "value": "40px" } }, - "table-column-header-row-bottom-to-text-large": { - "prop": "--spectrum-table-column-header-row-bottom-to-text-large", + "table-row-height-small-spacious": { + "prop": "--spectrum-table-row-height-small-spacious", "desktop": { - "value": "10px" + "value": "40px" }, "mobile": { - "value": "13px" + "value": "50px" } }, - "table-column-header-row-bottom-to-text-medium": { - "prop": "--spectrum-table-column-header-row-bottom-to-text-medium", + "table-row-hover-color": { + "prop": "--spectrum-table-row-hover-color", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "table-row-hover-opacity": { + "prop": "--spectrum-table-row-hover-opacity", + "value": "0.07" + }, + "table-row-top-to-text-extra-large": { + "prop": "--spectrum-table-row-top-to-text-extra-large", "desktop": { - "value": "8px" + "value": "17px" }, "mobile": { - "value": "10px" + "value": "21px" } }, - "table-column-header-row-bottom-to-text-small": { - "prop": "--spectrum-table-column-header-row-bottom-to-text-small", + "table-row-top-to-text-extra-large-compact": { + "prop": "--spectrum-table-row-top-to-text-extra-large-compact", + "ref": "var(--spectrum-component-top-to-text-300)", "desktop": { - "value": "9px" + "value": "12px" }, "mobile": { - "value": "11px" + "value": "15px" } }, - "table-column-header-row-top-to-text-extra-large": { - "prop": "--spectrum-table-column-header-row-top-to-text-extra-large", + "table-row-top-to-text-extra-large-regular": { + "prop": "--spectrum-table-row-top-to-text-extra-large-regular", + "ref": "var(--spectrum-table-row-top-to-text-extra-large)", "desktop": { - "value": "13px" + "value": "17px" }, "mobile": { - "value": "16px" + "value": "21px" } }, - "table-column-header-row-top-to-text-large": { - "prop": "--spectrum-table-column-header-row-top-to-text-large", + "table-row-top-to-text-extra-large-spacious": { + "prop": "--spectrum-table-row-top-to-text-extra-large-spacious", "desktop": { - "value": "10px" + "value": "21px" }, "mobile": { - "value": "13px" + "value": "26px" } }, - "table-column-header-row-top-to-text-medium": { - "prop": "--spectrum-table-column-header-row-top-to-text-medium", + "table-row-top-to-text-large": { + "prop": "--spectrum-table-row-top-to-text-large", "desktop": { - "value": "7px" + "value": "14px" }, "mobile": { - "value": "9px" + "value": "18px" } }, - "table-column-header-row-top-to-text-small": { - "prop": "--spectrum-table-column-header-row-top-to-text-small", + "table-row-top-to-text-large-compact": { + "prop": "--spectrum-table-row-top-to-text-large-compact", + "ref": "var(--spectrum-component-top-to-text-200)", "desktop": { - "value": "8px" + "value": "9px" }, "mobile": { - "value": "10px" + "value": "12px" } }, - "table-edge-to-content": { - "prop": "--spectrum-table-edge-to-content", - "value": "16px" + "table-row-top-to-text-large-regular": { + "prop": "--spectrum-table-row-top-to-text-large-regular", + "ref": "var(--spectrum-table-row-top-to-text-large)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "18px" + } }, - "table-header-row-checkbox-to-top-extra-large": { - "prop": "--spectrum-table-header-row-checkbox-to-top-extra-large", + "table-row-top-to-text-large-spacious": { + "prop": "--spectrum-table-row-top-to-text-large-spacious", "desktop": { - "value": "15px" + "value": "18px" }, "mobile": { - "value": "21px" + "value": "23px" } }, - "table-header-row-checkbox-to-top-large": { - "prop": "--spectrum-table-header-row-checkbox-to-top-large", + "table-row-top-to-text-medium": { + "prop": "--spectrum-table-row-top-to-text-medium", "desktop": { - "value": "12px" + "value": "10px" }, "mobile": { - "value": "17px" + "value": "14px" } }, - "table-header-row-checkbox-to-top-medium": { - "prop": "--spectrum-table-header-row-checkbox-to-top-medium", + "table-row-top-to-text-medium-compact": { + "prop": "--spectrum-table-row-top-to-text-medium-compact", + "ref": "var(--spectrum-component-top-to-text-100)", "desktop": { - "value": "9px" + "value": "6px" }, "mobile": { - "value": "13px" + "value": "8px" } }, - "table-header-row-checkbox-to-top-small": { - "prop": "--spectrum-table-header-row-checkbox-to-top-small", + "table-row-top-to-text-medium-regular": { + "prop": "--spectrum-table-row-top-to-text-medium-regular", + "ref": "var(--spectrum-table-row-top-to-text-medium)", "desktop": { "value": "10px" }, @@ -11158,424 +14619,469 @@ "value": "14px" } }, - "table-row-bottom-to-text-extra-large-compact": { - "prop": "--spectrum-table-row-bottom-to-text-extra-large-compact", - "ref": "var(--spectrum-component-bottom-to-text-300)", + "table-row-top-to-text-medium-spacious": { + "prop": "--spectrum-table-row-top-to-text-medium-spacious", "desktop": { - "value": "14px" + "value": "15px" }, "mobile": { - "value": "18px" + "value": "16px" } }, - "table-row-bottom-to-text-extra-large-regular": { - "prop": "--spectrum-table-row-bottom-to-text-extra-large-regular", + "table-row-top-to-text-small": { + "prop": "--spectrum-table-row-top-to-text-small", "desktop": { - "value": "17px" + "value": "8px" }, "mobile": { - "value": "22px" + "value": "10px" } }, - "table-row-bottom-to-text-extra-large-spacious": { - "prop": "--spectrum-table-row-bottom-to-text-extra-large-spacious", + "table-row-top-to-text-small-compact": { + "prop": "--spectrum-table-row-top-to-text-small-compact", + "ref": "var(--spectrum-component-top-to-text-75)", "desktop": { - "value": "21px" + "value": "4px" }, "mobile": { - "value": "27px" + "value": "5px" } }, - "table-row-bottom-to-text-large-compact": { - "prop": "--spectrum-table-row-bottom-to-text-large-compact", - "ref": "var(--spectrum-component-bottom-to-text-200)", + "table-row-top-to-text-small-regular": { + "prop": "--spectrum-table-row-top-to-text-small-regular", + "ref": "var(--spectrum-table-row-top-to-text-small)", "desktop": { - "value": "11px" + "value": "8px" }, "mobile": { - "value": "14px" + "value": "10px" } }, - "table-row-bottom-to-text-large-regular": { - "prop": "--spectrum-table-row-bottom-to-text-large-regular", + "table-row-top-to-text-small-spacious": { + "prop": "--spectrum-table-row-top-to-text-small-spacious", "desktop": { - "value": "14px" + "value": "12px" }, "mobile": { - "value": "18px" + "value": "15px" } }, - "table-row-bottom-to-text-large-spacious": { - "prop": "--spectrum-table-row-bottom-to-text-large-spacious", + "table-section-header-row-height-extra-large": { + "prop": "--spectrum-table-section-header-row-height-extra-large", "desktop": { - "value": "18px" + "value": "48px" }, "mobile": { - "value": "23px" + "value": "60px" } }, - "table-row-bottom-to-text-medium-compact": { - "prop": "--spectrum-table-row-bottom-to-text-medium-compact", - "ref": "var(--spectrum-component-bottom-to-text-100)", + "table-section-header-row-height-large": { + "prop": "--spectrum-table-section-header-row-height-large", "desktop": { - "value": "9px" + "value": "40px" }, "mobile": { - "value": "11px" + "value": "50px" } }, - "table-row-bottom-to-text-medium-regular": { - "prop": "--spectrum-table-row-bottom-to-text-medium-regular", + "table-section-header-row-height-medium": { + "prop": "--spectrum-table-section-header-row-height-medium", "desktop": { - "value": "12px" + "value": "32px" }, "mobile": { - "value": "15px" + "value": "40px" } }, - "table-row-bottom-to-text-medium-spacious": { - "prop": "--spectrum-table-row-bottom-to-text-medium-spacious", + "table-section-header-row-height-small": { + "prop": "--spectrum-table-section-header-row-height-small", "desktop": { - "value": "16px" + "value": "24px" }, "mobile": { - "value": "18px" + "value": "30px" } }, - "table-row-bottom-to-text-small-compact": { - "prop": "--spectrum-table-row-bottom-to-text-small-compact", - "ref": "var(--spectrum-component-bottom-to-text-75)", - "desktop": { - "value": "5px" + "table-selected-row-background-color": { + "prop": "--spectrum-table-selected-row-background-color", + "ref": "var(--spectrum-informative-color-800)", + "light": { + "value": "rgb(59, 99, 251)" }, - "mobile": { - "value": "6px" + "dark": { + "value": "rgb(64, 105, 253)" } }, - "table-row-bottom-to-text-small-regular": { - "prop": "--spectrum-table-row-bottom-to-text-small-regular", - "desktop": { - "value": "9px" + "table-selected-row-background-color-non-emphasized": { + "prop": "--spectrum-table-selected-row-background-color-non-emphasized", + "ref": "var(--spectrum-neutral-background-color-selected-default)", + "light": { + "value": "rgb(41, 41, 41)" }, - "mobile": { - "value": "11px" + "dark": { + "value": "rgb(219, 219, 219)" } }, - "table-row-bottom-to-text-small-spacious": { - "prop": "--spectrum-table-row-bottom-to-text-small-spacious", + "table-selected-row-background-opacity": { + "prop": "--spectrum-table-selected-row-background-opacity", + "value": "0.1" + }, + "table-selected-row-background-opacity-hover": { + "prop": "--spectrum-table-selected-row-background-opacity-hover", + "value": "0.15" + }, + "table-selected-row-background-opacity-non-emphasized": { + "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized", + "value": "0.1" + }, + "table-selected-row-background-opacity-non-emphasized-hover": { + "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized-hover", + "value": "0.15" + }, + "table-thumbnail-to-top-minimum-extra-large": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large", "desktop": { - "value": "13px" + "value": "8px" }, "mobile": { - "value": "16px" + "value": "10px" } }, - "table-row-checkbox-to-top-extra-large-compact": { - "prop": "--spectrum-table-row-checkbox-to-top-extra-large-compact", + "table-thumbnail-to-top-minimum-extra-large-compact": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-compact", "desktop": { - "value": "15px" + "value": "8px" }, "mobile": { - "value": "21px" + "value": "10px" } }, - "table-row-checkbox-to-top-extra-large-regular": { - "prop": "--spectrum-table-row-checkbox-to-top-extra-large-regular", + "table-thumbnail-to-top-minimum-extra-large-regular": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-regular", + "ref": "var(--spectrum-table-thumbnail-to-top-minimum-extra-large)", "desktop": { - "value": "19px" + "value": "8px" }, "mobile": { - "value": "26px" + "value": "10px" } }, - "table-row-checkbox-to-top-extra-large-spacious": { - "prop": "--spectrum-table-row-checkbox-to-top-extra-large-spacious", + "table-thumbnail-to-top-minimum-extra-large-spacious": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious", "desktop": { - "value": "23px" + "value": "10px" }, "mobile": { - "value": "31px" + "value": "12px" } }, - "table-row-checkbox-to-top-large-compact": { - "prop": "--spectrum-table-row-checkbox-to-top-large-compact", + "table-thumbnail-to-top-minimum-large": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-large", "desktop": { - "value": "12px" + "value": "8px" }, "mobile": { - "value": "17px" + "value": "10px" } }, - "table-row-checkbox-to-top-large-regular": { - "prop": "--spectrum-table-row-checkbox-to-top-large-regular", + "table-thumbnail-to-top-minimum-large-compact": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-large-compact", "desktop": { - "value": "16px" + "value": "7px" }, "mobile": { - "value": "22px" + "value": "9px" } }, - "table-row-checkbox-to-top-large-spacious": { - "prop": "--spectrum-table-row-checkbox-to-top-large-spacious", + "table-thumbnail-to-top-minimum-large-regular": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-large-regular", + "ref": "var(--spectrum-table-thumbnail-to-top-minimum-large)", "desktop": { - "value": "20px" + "value": "8px" }, "mobile": { - "value": "27px" + "value": "10px" } }, - "table-row-checkbox-to-top-medium-compact": { - "prop": "--spectrum-table-row-checkbox-to-top-medium-compact", + "table-thumbnail-to-top-minimum-large-spacious": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-large-spacious", "desktop": { - "value": "9px" + "value": "8px" }, "mobile": { - "value": "13px" + "value": "10px" } }, - "table-row-checkbox-to-top-medium-regular": { - "prop": "--spectrum-table-row-checkbox-to-top-medium-regular", + "table-thumbnail-to-top-minimum-medium": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-medium", "desktop": { - "value": "13px" + "value": "7px" }, "mobile": { - "value": "18px" + "value": "9px" } }, - "table-row-checkbox-to-top-medium-spacious": { - "prop": "--spectrum-table-row-checkbox-to-top-medium-spacious", + "table-thumbnail-to-top-minimum-medium-compact": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-compact", "desktop": { - "value": "17px" + "value": "5px" }, "mobile": { - "value": "23px" + "value": "6px" } }, - "table-row-checkbox-to-top-small-compact": { - "prop": "--spectrum-table-row-checkbox-to-top-small-compact", + "table-thumbnail-to-top-minimum-medium-regular": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-regular", + "ref": "var(--spectrum-table-thumbnail-to-top-minimum-medium)", "desktop": { - "value": "6px" + "value": "7px" }, "mobile": { "value": "9px" } }, - "table-row-checkbox-to-top-small-regular": { - "prop": "--spectrum-table-row-checkbox-to-top-small-regular", + "table-thumbnail-to-top-minimum-medium-spacious": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-spacious", "desktop": { - "value": "10px" + "value": "8px" }, "mobile": { - "value": "14px" + "value": "10px" } }, - "table-row-checkbox-to-top-small-spacious": { - "prop": "--spectrum-table-row-checkbox-to-top-small-spacious", + "table-thumbnail-to-top-minimum-small": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-small", "desktop": { - "value": "14px" + "value": "5px" }, "mobile": { - "value": "19px" + "value": "6px" } }, - "table-row-down-opacity": { - "prop": "--spectrum-table-row-down-opacity", - "value": "0.1" + "table-thumbnail-to-top-minimum-small-compact": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-small-compact", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } }, - "table-row-height-extra-large-compact": { - "prop": "--spectrum-table-row-height-extra-large-compact", - "ref": "var(--spectrum-component-height-300)", + "table-thumbnail-to-top-minimum-small-regular": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-small-regular", + "ref": "var(--spectrum-table-thumbnail-to-top-minimum-small)", "desktop": { - "value": "48px" + "value": "5px" }, "mobile": { - "value": "60px" + "value": "6px" } }, - "table-row-height-extra-large-regular": { - "prop": "--spectrum-table-row-height-extra-large-regular", + "table-thumbnail-to-top-minimum-small-spacious": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-small-spacious", "desktop": { - "value": "56px" + "value": "7px" }, "mobile": { - "value": "70px" + "value": "9px" } }, - "table-row-height-extra-large-spacious": { - "prop": "--spectrum-table-row-height-extra-large-spacious", + "tag-edge-to-clear-icon-large": { + "prop": "--spectrum-tag-edge-to-clear-icon-large", "desktop": { - "value": "64px" + "value": "15px" }, "mobile": { - "value": "80px" + "value": "19px" } }, - "table-row-height-large-compact": { - "prop": "--spectrum-table-row-height-large-compact", - "ref": "var(--spectrum-component-height-200)", + "tag-edge-to-clear-icon-medium": { + "prop": "--spectrum-tag-edge-to-clear-icon-medium", "desktop": { - "value": "40px" + "value": "12px" }, "mobile": { - "value": "50px" + "value": "15px" } }, - "table-row-height-large-regular": { - "prop": "--spectrum-table-row-height-large-regular", + "tag-edge-to-clear-icon-small": { + "prop": "--spectrum-tag-edge-to-clear-icon-small", "desktop": { - "value": "48px" + "value": "8px" }, "mobile": { - "value": "60px" + "value": "10px" } }, - "table-row-height-large-spacious": { - "prop": "--spectrum-table-row-height-large-spacious", + "tag-label-to-clear-icon-large": { + "prop": "--spectrum-tag-label-to-clear-icon-large", "desktop": { - "value": "56px" + "value": "15px" }, "mobile": { - "value": "70px" + "value": "19px" } }, - "table-row-height-medium-compact": { - "prop": "--spectrum-table-row-height-medium-compact", - "ref": "var(--spectrum-component-height-100)", + "tag-label-to-clear-icon-medium": { + "prop": "--spectrum-tag-label-to-clear-icon-medium", "desktop": { - "value": "32px" + "value": "12px" }, "mobile": { - "value": "40px" + "value": "15px" } }, - "table-row-height-medium-regular": { - "prop": "--spectrum-table-row-height-medium-regular", + "tag-label-to-clear-icon-small": { + "prop": "--spectrum-tag-label-to-clear-icon-small", "desktop": { - "value": "40px" + "value": "8px" }, "mobile": { - "value": "50px" + "value": "10px" } }, - "table-row-height-medium-spacious": { - "prop": "--spectrum-table-row-height-medium-spacious", + "tag-maximum-width-multiplier": { + "prop": "--spectrum-tag-maximum-width-multiplier", + "value": 7 + }, + "tag-minimum-width-large": { + "prop": "--spectrum-tag-minimum-width-large", "desktop": { - "value": "48px" + "value": "33px" }, "mobile": { - "value": "60px" + "value": "42px" } }, - "table-row-height-small-compact": { - "prop": "--spectrum-table-row-height-small-compact", - "ref": "var(--spectrum-component-height-75)", + "tag-minimum-width-medium": { + "prop": "--spectrum-tag-minimum-width-medium", "desktop": { - "value": "24px" + "value": "27px" }, "mobile": { - "value": "30px" + "value": "34px" } }, - "table-row-height-small-regular": { - "prop": "--spectrum-table-row-height-small-regular", + "tag-minimum-width-multiplier": { + "prop": "--spectrum-tag-minimum-width-multiplier", + "value": 1 + }, + "tag-minimum-width-small": { + "prop": "--spectrum-tag-minimum-width-small", "desktop": { - "value": "32px" + "value": "21px" }, "mobile": { - "value": "40px" + "value": "25px" } }, - "table-row-height-small-spacious": { - "prop": "--spectrum-table-row-height-small-spacious", + "tag-top-to-avatar-large": { + "prop": "--spectrum-tag-top-to-avatar-large", "desktop": { - "value": "40px" + "value": "9px" }, "mobile": { - "value": "50px" + "value": "11px" } }, - "table-row-hover-color": { - "prop": "--spectrum-table-row-hover-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" + "tag-top-to-avatar-medium": { + "prop": "--spectrum-tag-top-to-avatar-medium", + "desktop": { + "value": "6px" }, - "dark": { - "value": "rgb(242, 242, 242)" + "mobile": { + "value": "7px" } }, - "table-row-hover-opacity": { - "prop": "--spectrum-table-row-hover-opacity", - "value": "0.07" - }, - "table-row-top-to-text-extra-large-compact": { - "prop": "--spectrum-table-row-top-to-text-extra-large-compact", - "ref": "var(--spectrum-component-top-to-text-300)", + "tag-top-to-avatar-small": { + "prop": "--spectrum-tag-top-to-avatar-small", "desktop": { - "value": "12px" + "value": "4px" }, "mobile": { - "value": "15px" + "value": "5px" } }, - "table-row-top-to-text-extra-large-regular": { - "prop": "--spectrum-table-row-top-to-text-extra-large-regular", + "tag-top-to-cross-icon-large": { + "prop": "--spectrum-tag-top-to-cross-icon-large", "desktop": { - "value": "17px" + "value": "15px" }, "mobile": { - "value": "21px" + "value": "19px" } }, - "table-row-top-to-text-extra-large-spacious": { - "prop": "--spectrum-table-row-top-to-text-extra-large-spacious", + "tag-top-to-cross-icon-medium": { + "prop": "--spectrum-tag-top-to-cross-icon-medium", "desktop": { - "value": "21px" + "value": "12px" }, "mobile": { - "value": "26px" + "value": "15px" } }, - "table-row-top-to-text-large-compact": { - "prop": "--spectrum-table-row-top-to-text-large-compact", - "ref": "var(--spectrum-component-top-to-text-200)", + "tag-top-to-cross-icon-small": { + "prop": "--spectrum-tag-top-to-cross-icon-small", "desktop": { - "value": "9px" + "value": "8px" }, "mobile": { - "value": "12px" + "value": "10px" } }, - "table-row-top-to-text-large-regular": { - "prop": "--spectrum-table-row-top-to-text-large-regular", + "takeover-dialog-height": { + "prop": "--spectrum-takeover-dialog-height", + "value": "100%" + }, + "takeover-dialog-width": { + "prop": "--spectrum-takeover-dialog-width", + "value": "100%" + }, + "text-align-center": { + "prop": "--spectrum-text-align-center", + "value": "center" + }, + "text-align-end": { + "prop": "--spectrum-text-align-end", + "value": "end" + }, + "text-align-start": { + "prop": "--spectrum-text-align-start", + "value": "start" + }, + "text-area-minimum-height": { + "prop": "--spectrum-text-area-minimum-height", "desktop": { - "value": "14px" + "value": "56px" }, "mobile": { - "value": "18px" + "value": "70px" } }, - "table-row-top-to-text-large-spacious": { - "prop": "--spectrum-table-row-top-to-text-large-spacious", + "text-area-minimum-width": { + "prop": "--spectrum-text-area-minimum-width", "desktop": { - "value": "18px" + "value": "112px" }, "mobile": { - "value": "23px" + "value": "140px" } }, - "table-row-top-to-text-medium-compact": { - "prop": "--spectrum-table-row-top-to-text-medium-compact", - "ref": "var(--spectrum-component-top-to-text-100)", + "text-field-minimum-width-multiplier": { + "prop": "--spectrum-text-field-minimum-width-multiplier", + "value": 1.5 + }, + "text-to-control-100": { + "prop": "--spectrum-text-to-control-100", "desktop": { - "value": "6px" + "value": "10px" }, "mobile": { - "value": "8px" + "value": "13px" } }, - "table-row-top-to-text-medium-regular": { - "prop": "--spectrum-table-row-top-to-text-medium-regular", + "text-to-control-200": { + "prop": "--spectrum-text-to-control-200", "desktop": { "value": "11px" }, @@ -11583,18 +15089,17 @@ "value": "14px" } }, - "table-row-top-to-text-medium-spacious": { - "prop": "--spectrum-table-row-top-to-text-medium-spacious", + "text-to-control-300": { + "prop": "--spectrum-text-to-control-300", "desktop": { - "value": "15px" + "value": "13px" }, "mobile": { - "value": "18px" + "value": "16px" } }, - "table-row-top-to-text-small-compact": { - "prop": "--spectrum-table-row-top-to-text-small-compact", - "ref": "var(--spectrum-component-top-to-text-75)", + "text-to-control-50": { + "prop": "--spectrum-text-to-control-50", "desktop": { "value": "4px" }, @@ -11602,73 +15107,80 @@ "value": "5px" } }, - "table-row-top-to-text-small-regular": { - "prop": "--spectrum-table-row-top-to-text-small-regular", + "text-to-control-75": { + "prop": "--spectrum-text-to-control-75", "desktop": { - "value": "8px" + "value": "9px" }, "mobile": { - "value": "10px" + "value": "11px" } }, - "table-row-top-to-text-small-spacious": { - "prop": "--spectrum-table-row-top-to-text-small-spacious", + "text-to-visual-100": { + "prop": "--spectrum-text-to-visual-100", "desktop": { - "value": "12px" + "value": "6px" }, "mobile": { - "value": "15px" + "value": "8px" } }, - "table-section-header-row-height-extra-large": { - "prop": "--spectrum-table-section-header-row-height-extra-large", + "text-to-visual-200": { + "prop": "--spectrum-text-to-visual-200", "desktop": { - "value": "48px" + "value": "7px" }, "mobile": { - "value": "60px" + "value": "9px" } }, - "table-section-header-row-height-large": { - "prop": "--spectrum-table-section-header-row-height-large", + "text-to-visual-300": { + "prop": "--spectrum-text-to-visual-300", "desktop": { - "value": "40px" + "value": "8px" }, "mobile": { - "value": "50px" + "value": "10px" } }, - "table-section-header-row-height-medium": { - "prop": "--spectrum-table-section-header-row-height-medium", + "text-to-visual-400": { + "prop": "--spectrum-text-to-visual-400", "desktop": { - "value": "32px" + "value": "9px" }, "mobile": { - "value": "40px" + "value": "11px" } }, - "table-section-header-row-height-small": { - "prop": "--spectrum-table-section-header-row-height-small", + "text-to-visual-50": { + "prop": "--spectrum-text-to-visual-50", "desktop": { - "value": "24px" + "value": "5px" }, "mobile": { - "value": "30px" + "value": "7px" } }, - "table-selected-row-background-color": { - "prop": "--spectrum-table-selected-row-background-color", - "ref": "var(--spectrum-informative-color-800)", - "light": { - "value": "rgb(59, 99, 251)" + "text-to-visual-75": { + "prop": "--spectrum-text-to-visual-75", + "desktop": { + "value": "5px" }, - "dark": { - "value": "rgb(64, 105, 253)" + "mobile": { + "value": "7px" } }, - "table-selected-row-background-color-non-emphasized": { - "prop": "--spectrum-table-selected-row-background-color-non-emphasized", - "ref": "var(--spectrum-neutral-background-color-selected-default)", + "text-underline-gap": { + "prop": "--spectrum-text-underline-gap", + "value": "1px" + }, + "text-underline-thickness": { + "prop": "--spectrum-text-underline-thickness", + "value": "1px" + }, + "thumbnail-border-color": { + "prop": "--spectrum-thumbnail-border-color", + "ref": "var(--spectrum-gray-800)", "light": { "value": "rgb(41, 41, 41)" }, @@ -11676,168 +15188,185 @@ "value": "rgb(219, 219, 219)" } }, - "table-selected-row-background-opacity": { - "prop": "--spectrum-table-selected-row-background-opacity", + "thumbnail-border-opacity": { + "prop": "--spectrum-thumbnail-border-opacity", "value": "0.1" }, - "table-selected-row-background-opacity-hover": { - "prop": "--spectrum-table-selected-row-background-opacity-hover", - "value": "0.15" - }, - "table-selected-row-background-opacity-non-emphasized": { - "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized", - "value": "0.1" + "thumbnail-corner-radius": { + "prop": "--spectrum-thumbnail-corner-radius", + "ref": "var(--spectrum-corner-radius-75)", + "value": "3px" }, - "table-selected-row-background-opacity-non-emphasized-hover": { - "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized-hover", - "value": "0.15" + "thumbnail-opacity-checkerboard-square-size": { + "prop": "--spectrum-thumbnail-opacity-checkerboard-square-size", + "value": "4px" }, - "table-thumbnail-to-top-minimum-extra-large-compact": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-compact", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } + "thumbnail-opacity-disabled": { + "prop": "--spectrum-thumbnail-opacity-disabled", + "ref": "var(--spectrum-opacity-disabled)", + "value": "0.3" }, - "table-thumbnail-to-top-minimum-extra-large-regular": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-regular", + "thumbnail-size-100": { + "prop": "--spectrum-thumbnail-size-100", "desktop": { - "value": "8px" + "value": "24px" }, "mobile": { - "value": "10px" + "value": "28px" } }, - "table-thumbnail-to-top-minimum-extra-large-spacious": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious", + "thumbnail-size-1000": { + "prop": "--spectrum-thumbnail-size-1000", "desktop": { - "value": "10px" + "value": "64px" }, "mobile": { - "value": "12px" + "value": "72px" } }, - "table-thumbnail-to-top-minimum-large-compact": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-large-compact", + "thumbnail-size-200": { + "prop": "--spectrum-thumbnail-size-200", "desktop": { - "value": "7px" + "value": "28px" }, "mobile": { - "value": "9px" + "value": "32px" } }, - "table-thumbnail-to-top-minimum-large-regular": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-large-regular", + "thumbnail-size-300": { + "prop": "--spectrum-thumbnail-size-300", "desktop": { - "value": "8px" + "value": "32px" }, "mobile": { - "value": "10px" + "value": "36px" } }, - "table-thumbnail-to-top-minimum-large-spacious": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-large-spacious", + "thumbnail-size-400": { + "prop": "--spectrum-thumbnail-size-400", "desktop": { - "value": "8px" + "value": "36px" }, "mobile": { - "value": "10px" + "value": "40px" } }, - "table-thumbnail-to-top-minimum-medium-compact": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-compact", + "thumbnail-size-50": { + "prop": "--spectrum-thumbnail-size-50", "desktop": { - "value": "5px" + "value": "16px" }, "mobile": { - "value": "6px" + "value": "20px" } }, - "table-thumbnail-to-top-minimum-medium-regular": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-regular", + "thumbnail-size-500": { + "prop": "--spectrum-thumbnail-size-500", "desktop": { - "value": "7px" + "value": "40px" }, "mobile": { - "value": "9px" + "value": "44px" } }, - "table-thumbnail-to-top-minimum-medium-spacious": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-spacious", + "thumbnail-size-600": { + "prop": "--spectrum-thumbnail-size-600", "desktop": { - "value": "8px" + "value": "44px" }, "mobile": { - "value": "10px" + "value": "48px" } }, - "table-thumbnail-to-top-minimum-small-compact": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-small-compact", + "thumbnail-size-700": { + "prop": "--spectrum-thumbnail-size-700", "desktop": { - "value": "4px" + "value": "48px" }, "mobile": { - "value": "5px" + "value": "52px" } }, - "table-thumbnail-to-top-minimum-small-regular": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-small-regular", + "thumbnail-size-75": { + "prop": "--spectrum-thumbnail-size-75", "desktop": { - "value": "5px" + "value": "20px" }, "mobile": { - "value": "6px" + "value": "24px" } }, - "table-thumbnail-to-top-minimum-small-spacious": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-small-spacious", + "thumbnail-size-800": { + "prop": "--spectrum-thumbnail-size-800", "desktop": { - "value": "7px" + "value": "52px" }, "mobile": { - "value": "9px" + "value": "56px" } }, - "tag-top-to-avatar-large": { - "prop": "--spectrum-tag-top-to-avatar-large", + "thumbnail-size-900": { + "prop": "--spectrum-thumbnail-size-900", "desktop": { - "value": "9px" + "value": "56px" }, "mobile": { - "value": "11px" + "value": "64px" } }, - "tag-top-to-avatar-medium": { - "prop": "--spectrum-tag-top-to-avatar-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "7px" - } + "title-cjk-emphasized-font-style": { + "prop": "--spectrum-title-cjk-emphasized-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" }, - "tag-top-to-avatar-small": { - "prop": "--spectrum-tag-top-to-avatar-small", + "title-cjk-emphasized-font-weight": { + "prop": "--spectrum-title-cjk-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-cjk-font-family": { + "prop": "--spectrum-title-cjk-font-family", + "ref": "var(--spectrum-cjk-font-family)", + "value": "Adobe Clean Han" + }, + "title-cjk-font-style": { + "prop": "--spectrum-title-cjk-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-cjk-font-weight": { + "prop": "--spectrum-title-cjk-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-cjk-line-height": { + "prop": "--spectrum-title-cjk-line-height", + "ref": "var(--spectrum-cjk-line-height-100)", + "value": 1.5 + }, + "title-cjk-size-l": { + "prop": "--spectrum-title-cjk-size-l", + "ref": "var(--spectrum-font-size-200)", "desktop": { - "value": "4px" + "value": "16px" }, "mobile": { - "value": "5px" + "value": "19px" } }, - "tag-top-to-cross-icon-large": { - "prop": "--spectrum-tag-top-to-cross-icon-large", + "title-cjk-size-m": { + "prop": "--spectrum-title-cjk-size-m", + "ref": "var(--spectrum-font-size-100)", "desktop": { - "value": "15px" + "value": "14px" }, "mobile": { - "value": "19px" + "value": "17px" } }, - "tag-top-to-cross-icon-medium": { - "prop": "--spectrum-tag-top-to-cross-icon-medium", + "title-cjk-size-s": { + "prop": "--spectrum-title-cjk-size-s", + "ref": "var(--spectrum-font-size-75)", "desktop": { "value": "12px" }, @@ -11845,328 +15374,495 @@ "value": "15px" } }, - "tag-top-to-cross-icon-small": { - "prop": "--spectrum-tag-top-to-cross-icon-small", + "title-cjk-size-xl": { + "prop": "--spectrum-title-cjk-size-xl", + "ref": "var(--spectrum-font-size-300)", "desktop": { - "value": "8px" + "value": "18px" }, "mobile": { - "value": "10px" + "value": "22px" } }, - "text-area-minimum-height": { - "prop": "--spectrum-text-area-minimum-height", + "title-cjk-size-xs": { + "prop": "--spectrum-title-cjk-size-xs", + "ref": "var(--spectrum-font-size-50)", "desktop": { - "value": "56px" + "value": "11px" }, "mobile": { - "value": "70px" + "value": "13px" } }, - "text-area-minimum-width": { - "prop": "--spectrum-text-area-minimum-width", + "title-cjk-size-xxl": { + "prop": "--spectrum-title-cjk-size-xxl", + "ref": "var(--spectrum-font-size-400)", "desktop": { - "value": "112px" + "value": "20px" }, "mobile": { - "value": "140px" + "value": "24px" } }, - "text-field-minimum-width-multiplier": { - "prop": "--spectrum-text-field-minimum-width-multiplier", - "value": "1.5" - }, - "text-to-control-100": { - "prop": "--spectrum-text-to-control-100", + "title-cjk-size-xxxl": { + "prop": "--spectrum-title-cjk-size-xxxl", + "ref": "var(--spectrum-font-size-500)", "desktop": { - "value": "10px" + "value": "22px" }, "mobile": { - "value": "13px" + "value": "27px" } }, - "text-to-control-200": { - "prop": "--spectrum-text-to-control-200", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "14px" - } + "title-cjk-strong-emphasized-font-style": { + "prop": "--spectrum-title-cjk-strong-emphasized-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" }, - "text-to-control-300": { - "prop": "--spectrum-text-to-control-300", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "16px" - } + "title-cjk-strong-emphasized-font-weight": { + "prop": "--spectrum-title-cjk-strong-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, - "text-to-control-75": { - "prop": "--spectrum-text-to-control-75", - "desktop": { - "value": "9px" + "title-cjk-strong-font-style": { + "prop": "--spectrum-title-cjk-strong-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-cjk-strong-font-weight": { + "prop": "--spectrum-title-cjk-strong-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-color": { + "prop": "--spectrum-title-color", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" }, - "mobile": { - "value": "11px" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "text-to-visual-100": { - "prop": "--spectrum-text-to-visual-100", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } + "title-line-height": { + "prop": "--spectrum-title-line-height", + "ref": "var(--spectrum-line-height-100)", + "value": 1.3 + }, + "title-margin-bottom-multiplier": { + "prop": "--spectrum-title-margin-bottom-multiplier", + "value": 0.25 + }, + "title-margin-top-multiplier": { + "prop": "--spectrum-title-margin-top-multiplier", + "value": 0.88888889 + }, + "title-sans-serif-emphasized-font-style": { + "prop": "--spectrum-title-sans-serif-emphasized-font-style", + "ref": "var(--spectrum-italic-font-style)", + "value": "italic" + }, + "title-sans-serif-emphasized-font-weight": { + "prop": "--spectrum-title-sans-serif-emphasized-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-sans-serif-font-family": { + "prop": "--spectrum-title-sans-serif-font-family", + "ref": "var(--spectrum-sans-serif-font-family)", + "value": "Adobe Clean" + }, + "title-sans-serif-font-style": { + "prop": "--spectrum-title-sans-serif-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-sans-serif-font-weight": { + "prop": "--spectrum-title-sans-serif-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-sans-serif-strong-emphasized-font-style": { + "prop": "--spectrum-title-sans-serif-strong-emphasized-font-style", + "ref": "var(--spectrum-italic-font-style)", + "value": "italic" + }, + "title-sans-serif-strong-emphasized-font-weight": { + "prop": "--spectrum-title-sans-serif-strong-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-sans-serif-strong-font-style": { + "prop": "--spectrum-title-sans-serif-strong-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-sans-serif-strong-font-weight": { + "prop": "--spectrum-title-sans-serif-strong-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-serif-emphasized-font-style": { + "prop": "--spectrum-title-serif-emphasized-font-style", + "ref": "var(--spectrum-italic-font-style)", + "value": "italic" + }, + "title-serif-emphasized-font-weight": { + "prop": "--spectrum-title-serif-emphasized-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-serif-font-family": { + "prop": "--spectrum-title-serif-font-family", + "ref": "var(--spectrum-serif-font-family)", + "value": "Adobe Clean Serif" + }, + "title-serif-font-style": { + "prop": "--spectrum-title-serif-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-serif-font-weight": { + "prop": "--spectrum-title-serif-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-serif-strong-emphasized-font-style": { + "prop": "--spectrum-title-serif-strong-emphasized-font-style", + "ref": "var(--spectrum-italic-font-style)", + "value": "italic" + }, + "title-serif-strong-emphasized-font-weight": { + "prop": "--spectrum-title-serif-strong-emphasized-font-weight", + "ref": "var(--spectrum-black-font-weight)", + "value": "900" }, - "text-to-visual-200": { - "prop": "--spectrum-text-to-visual-200", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } + "title-serif-strong-font-style": { + "prop": "--spectrum-title-serif-strong-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" }, - "text-to-visual-300": { - "prop": "--spectrum-text-to-visual-300", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } + "title-serif-strong-font-weight": { + "prop": "--spectrum-title-serif-strong-font-weight", + "ref": "var(--spectrum-black-font-weight)", + "value": "900" }, - "text-to-visual-400": { - "prop": "--spectrum-text-to-visual-400", + "title-size-l": { + "prop": "--spectrum-title-size-l", + "ref": "var(--spectrum-font-size-300)", "desktop": { - "value": "9px" + "value": "18px" }, "mobile": { - "value": "11px" + "value": "22px" } }, - "text-to-visual-50": { - "prop": "--spectrum-text-to-visual-50", + "title-size-m": { + "prop": "--spectrum-title-size-m", + "ref": "var(--spectrum-font-size-200)", "desktop": { - "value": "5px" + "value": "16px" }, "mobile": { - "value": "7px" + "value": "19px" } }, - "text-to-visual-75": { - "prop": "--spectrum-text-to-visual-75", + "title-size-s": { + "prop": "--spectrum-title-size-s", + "ref": "var(--spectrum-font-size-100)", "desktop": { - "value": "5px" + "value": "14px" }, "mobile": { - "value": "7px" - } - }, - "text-underline-gap": { - "prop": "--spectrum-text-underline-gap", - "value": "1px" - }, - "text-underline-thickness": { - "prop": "--spectrum-text-underline-thickness", - "value": "1px" - }, - "thumbnail-border-color": { - "prop": "--spectrum-thumbnail-border-color", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" + "value": "17px" } }, - "thumbnail-border-opacity": { - "prop": "--spectrum-thumbnail-border-opacity", - "value": "0.1" - }, - "thumbnail-opacity-disabled": { - "prop": "--spectrum-thumbnail-opacity-disabled", - "ref": "var(--spectrum-opacity-disabled)", - "value": "0.3" - }, - "thumbnail-size-100": { - "prop": "--spectrum-thumbnail-size-100", + "title-size-xl": { + "prop": "--spectrum-title-size-xl", + "ref": "var(--spectrum-font-size-400)", "desktop": { "value": "20px" }, "mobile": { - "value": "26px" + "value": "24px" } }, - "thumbnail-size-1000": { - "prop": "--spectrum-thumbnail-size-1000", + "title-size-xs": { + "prop": "--spectrum-title-size-xs", + "ref": "var(--spectrum-font-size-75)", "desktop": { - "value": "56px" + "value": "12px" }, "mobile": { - "value": "70px" + "value": "15px" } }, - "thumbnail-size-200": { - "prop": "--spectrum-thumbnail-size-200", + "title-size-xxl": { + "prop": "--spectrum-title-size-xxl", + "ref": "var(--spectrum-font-size-500)", "desktop": { "value": "22px" }, "mobile": { - "value": "28px" + "value": "27px" } }, - "thumbnail-size-300": { - "prop": "--spectrum-thumbnail-size-300", + "title-size-xxxl": { + "prop": "--spectrum-title-size-xxxl", + "ref": "var(--spectrum-font-size-600)", "desktop": { - "value": "26px" + "value": "25px" }, "mobile": { - "value": "32px" + "value": "31px" } }, - "thumbnail-size-400": { - "prop": "--spectrum-thumbnail-size-400", + "toast-bottom-to-text": { + "prop": "--spectrum-toast-bottom-to-text", "desktop": { - "value": "28px" + "value": "20px" }, "mobile": { - "value": "36px" + "value": "22px" } }, - "thumbnail-size-50": { - "prop": "--spectrum-thumbnail-size-50", + "toast-height": { + "prop": "--spectrum-toast-height", "desktop": { - "value": "16px" + "value": "52px" }, "mobile": { - "value": "20px" + "value": "60px" } }, - "thumbnail-size-500": { - "prop": "--spectrum-thumbnail-size-500", + "toast-maximum-width": { + "prop": "--spectrum-toast-maximum-width", "desktop": { - "value": "32px" + "value": "336px" }, "mobile": { - "value": "40px" + "value": "420px" } }, - "thumbnail-size-600": { - "prop": "--spectrum-thumbnail-size-600", + "toast-top-to-text": { + "prop": "--spectrum-toast-top-to-text", "desktop": { - "value": "36px" + "value": "18px" }, "mobile": { - "value": "46px" + "value": "20px" } }, - "thumbnail-size-700": { - "prop": "--spectrum-thumbnail-size-700", + "toast-top-to-workflow-icon": { + "prop": "--spectrum-toast-top-to-workflow-icon", "desktop": { - "value": "40px" + "value": "18px" }, "mobile": { - "value": "50px" + "value": "20px" } }, - "thumbnail-size-75": { - "prop": "--spectrum-thumbnail-size-75", + "tooltip-maximum-width": { + "prop": "--spectrum-tooltip-maximum-width", "desktop": { - "value": "18px" + "value": "160px" }, "mobile": { - "value": "22px" + "value": "200px" } }, - "thumbnail-size-800": { - "prop": "--spectrum-thumbnail-size-800", + "tooltip-tip-corner-radius": { + "prop": "--spectrum-tooltip-tip-corner-radius", + "value": "1px" + }, + "tooltip-tip-height": { + "prop": "--spectrum-tooltip-tip-height", "desktop": { - "value": "44px" + "value": "5px" }, "mobile": { - "value": "55px" + "value": "6px" } }, - "thumbnail-size-900": { - "prop": "--spectrum-thumbnail-size-900", + "tooltip-tip-width": { + "prop": "--spectrum-tooltip-tip-width", "desktop": { - "value": "50px" + "value": "10px" }, "mobile": { - "value": "62px" + "value": "12px" } }, - "title-color": { - "prop": "--spectrum-title-color", - "ref": "var(--spectrum-gray-900)", + "track-color": { + "prop": "--spectrum-track-color", + "ref": "var(--spectrum-gray-300)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(218, 218, 218)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(57, 57, 57)" } }, - "toast-bottom-to-text": { - "prop": "--spectrum-toast-bottom-to-text", + "transparent-black-100": { + "prop": "--spectrum-transparent-black-100", + "value": "rgba(0, 0, 0, 0.09)" + }, + "transparent-black-1000": { + "prop": "--spectrum-transparent-black-1000", + "value": "rgb(0, 0, 0)" + }, + "transparent-black-200": { + "prop": "--spectrum-transparent-black-200", + "value": "rgba(0, 0, 0, 0.12)" + }, + "transparent-black-25": { + "prop": "--spectrum-transparent-black-25", + "value": "rgba(0, 0, 0, 0)" + }, + "transparent-black-300": { + "prop": "--spectrum-transparent-black-300", + "value": "rgba(0, 0, 0, 0.15)" + }, + "transparent-black-400": { + "prop": "--spectrum-transparent-black-400", + "value": "rgba(0, 0, 0, 0.22)" + }, + "transparent-black-50": { + "prop": "--spectrum-transparent-black-50", + "value": "rgba(0, 0, 0, 0.03)" + }, + "transparent-black-500": { + "prop": "--spectrum-transparent-black-500", + "value": "rgba(0, 0, 0, 0.44)" + }, + "transparent-black-600": { + "prop": "--spectrum-transparent-black-600", + "value": "rgba(0, 0, 0, 0.56)" + }, + "transparent-black-700": { + "prop": "--spectrum-transparent-black-700", + "value": "rgba(0, 0, 0, 0.69)" + }, + "transparent-black-75": { + "prop": "--spectrum-transparent-black-75", + "value": "rgba(0, 0, 0, 0.05)" + }, + "transparent-black-800": { + "prop": "--spectrum-transparent-black-800", + "value": "rgba(0, 0, 0, 0.84)" + }, + "transparent-black-900": { + "prop": "--spectrum-transparent-black-900", + "value": "rgba(0, 0, 0, 0.93)" + }, + "transparent-white-100": { + "prop": "--spectrum-transparent-white-100", + "value": "rgba(255, 255, 255, 0.11)" + }, + "transparent-white-1000": { + "prop": "--spectrum-transparent-white-1000", + "value": "rgb(255, 255, 255)" + }, + "transparent-white-200": { + "prop": "--spectrum-transparent-white-200", + "value": "rgba(255, 255, 255, 0.14)" + }, + "transparent-white-25": { + "prop": "--spectrum-transparent-white-25", + "value": "rgba(255, 255, 255, 0)" + }, + "transparent-white-300": { + "prop": "--spectrum-transparent-white-300", + "value": "rgba(255, 255, 255, 0.17)" + }, + "transparent-white-400": { + "prop": "--spectrum-transparent-white-400", + "value": "rgba(255, 255, 255, 0.21)" + }, + "transparent-white-50": { + "prop": "--spectrum-transparent-white-50", + "value": "rgba(255, 255, 255, 0.04)" + }, + "transparent-white-500": { + "prop": "--spectrum-transparent-white-500", + "value": "rgba(255, 255, 255, 0.39)" + }, + "transparent-white-600": { + "prop": "--spectrum-transparent-white-600", + "value": "rgba(255, 255, 255, 0.51)" + }, + "transparent-white-700": { + "prop": "--spectrum-transparent-white-700", + "value": "rgba(255, 255, 255, 0.66)" + }, + "transparent-white-75": { + "prop": "--spectrum-transparent-white-75", + "value": "rgba(255, 255, 255, 0.07)" + }, + "transparent-white-800": { + "prop": "--spectrum-transparent-white-800", + "value": "rgba(255, 255, 255, 0.85)" + }, + "transparent-white-900": { + "prop": "--spectrum-transparent-white-900", + "value": "rgba(255, 255, 255, 0.94)" + }, + "tray-top-to-content-area": { + "prop": "--spectrum-tray-top-to-content-area", "desktop": { - "value": "17px" + "value": "4px" }, "mobile": { - "value": "19px" + "value": "5px" } }, - "toast-height": { - "prop": "--spectrum-toast-height", + "tree-view-bottom-to-label": { + "prop": "--spectrum-tree-view-bottom-to-label", "desktop": { - "value": "48px" + "value": "12px" }, "mobile": { - "value": "56px" + "value": "16px" } }, - "toast-maximum-width": { - "prop": "--spectrum-toast-maximum-width", + "tree-view-disclosure-indicator-height": { + "prop": "--spectrum-tree-view-disclosure-indicator-height", "desktop": { - "value": "336px" + "value": "32px" }, "mobile": { - "value": "420px" + "value": "40px" } }, - "toast-top-to-text": { - "prop": "--spectrum-toast-top-to-text", + "tree-view-disclosure-indicator-width": { + "prop": "--spectrum-tree-view-disclosure-indicator-width", "desktop": { - "value": "14px" + "value": "34px" }, "mobile": { - "value": "16px" + "value": "42px" } }, - "toast-top-to-workflow-icon": { - "prop": "--spectrum-toast-top-to-workflow-icon", + "tree-view-drag-handle-to-checkbox": { + "prop": "--spectrum-tree-view-drag-handle-to-checkbox", "desktop": { - "value": "15px" + "value": "8px" }, "mobile": { - "value": "17px" + "value": "10px" } }, - "tooltip-maximum-width": { - "prop": "--spectrum-tooltip-maximum-width", + "tree-view-edge-to-checkbox": { + "prop": "--spectrum-tree-view-edge-to-checkbox", "desktop": { - "value": "160px" + "value": "12px" }, "mobile": { - "value": "200px" + "value": "15px" } }, - "tooltip-tip-height": { - "prop": "--spectrum-tooltip-tip-height", + "tree-view-edge-to-drag-handle": { + "prop": "--spectrum-tree-view-edge-to-drag-handle", "desktop": { "value": "4px" }, @@ -12174,261 +15870,172 @@ "value": "5px" } }, - "tooltip-tip-width": { - "prop": "--spectrum-tooltip-tip-width", + "tree-view-end-edge-to-action-area": { + "prop": "--spectrum-tree-view-end-edge-to-action-area", "desktop": { - "value": "8px" + "value": "6px" }, "mobile": { - "value": "10px" - } - }, - "track-color": { - "prop": "--spectrum-track-color", - "ref": "var(--spectrum-gray-300)", - "light": { - "value": "rgb(218, 218, 218)" - }, - "dark": { - "value": "rgb(57, 57, 57)" - } - }, - "transparent-black-100": { - "prop": "--spectrum-transparent-black-100", - "light": { - "value": "rgba(0, 0, 0, 0.09)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.09)" - } - }, - "transparent-black-1000": { - "prop": "--spectrum-transparent-black-1000", - "value": "rgb(0, 0, 0)" - }, - "transparent-black-200": { - "prop": "--spectrum-transparent-black-200", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.12)" - } - }, - "transparent-black-25": { - "prop": "--spectrum-transparent-black-25", - "light": { - "value": "rgba(0, 0, 0, 0)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0)" - } - }, - "transparent-black-300": { - "prop": "--spectrum-transparent-black-300", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } - }, - "transparent-black-400": { - "prop": "--spectrum-transparent-black-400", - "light": { - "value": "rgba(0, 0, 0, 0.22)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.22)" - } - }, - "transparent-black-50": { - "prop": "--spectrum-transparent-black-50", - "light": { - "value": "rgba(0, 0, 0, 0.03)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.03)" + "value": "7px" } }, - "transparent-black-500": { - "prop": "--spectrum-transparent-black-500", - "light": { - "value": "rgba(0, 0, 0, 0.44)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.44)" - } + "tree-view-header-to-item": { + "prop": "--spectrum-tree-view-header-to-item", + "value": "-1px" }, - "transparent-black-600": { - "prop": "--spectrum-transparent-black-600", - "light": { - "value": "rgba(0, 0, 0, 0.56)" + "tree-view-item-to-header": { + "prop": "--spectrum-tree-view-item-to-header", + "desktop": { + "value": "24px" }, - "dark": { - "value": "rgba(0, 0, 0, 0.56)" + "mobile": { + "value": "30px" } }, - "transparent-black-700": { - "prop": "--spectrum-transparent-black-700", - "light": { - "value": "rgba(0, 0, 0, 0.69)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.69)" - } + "tree-view-item-to-item": { + "prop": "--spectrum-tree-view-item-to-item", + "value": "-1px" }, - "transparent-black-75": { - "prop": "--spectrum-transparent-black-75", - "light": { - "value": "rgba(0, 0, 0, 0.05)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.05)" - } + "tree-view-item-to-item-detached": { + "prop": "--spectrum-tree-view-item-to-item-detached", + "value": "2px" }, - "transparent-black-800": { - "prop": "--spectrum-transparent-black-800", - "light": { - "value": "rgba(0, 0, 0, 0.84)" + "tree-view-label-to-action-area": { + "prop": "--spectrum-tree-view-label-to-action-area", + "desktop": { + "value": "6px" }, - "dark": { - "value": "rgba(0, 0, 0, 0.84)" + "mobile": { + "value": "8px" } }, - "transparent-black-900": { - "prop": "--spectrum-transparent-black-900", - "light": { - "value": "rgba(0, 0, 0, 0.93)" + "tree-view-level-increment": { + "prop": "--spectrum-tree-view-level-increment", + "desktop": { + "value": "16px" }, - "dark": { - "value": "rgba(0, 0, 0, 0.93)" + "mobile": { + "value": "20px" } }, - "transparent-white-100": { - "prop": "--spectrum-transparent-white-100", - "light": { - "value": "rgba(255, 255, 255, 0.11)" + "tree-view-minimum-height": { + "prop": "--spectrum-tree-view-minimum-height", + "desktop": { + "value": "40px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.11)" + "mobile": { + "value": "50px" } }, - "transparent-white-1000": { - "prop": "--spectrum-transparent-white-1000", - "light": { - "value": "rgb(255, 255, 255)" + "tree-view-minimum-top-to-context-area": { + "prop": "--spectrum-tree-view-minimum-top-to-context-area", + "desktop": { + "value": "8px" }, - "dark": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "10px" } }, - "transparent-white-200": { - "prop": "--spectrum-transparent-white-200", - "light": { - "value": "rgba(255, 255, 255, 0.14)" + "tree-view-minimum-width": { + "prop": "--spectrum-tree-view-minimum-width", + "desktop": { + "value": "160px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.14)" + "mobile": { + "value": "200px" } }, - "transparent-white-25": { - "prop": "--spectrum-transparent-white-25", + "tree-view-row-background-hover": { + "prop": "--spectrum-tree-view-row-background-hover", + "ref": "var(--spectrum-gray-100)", "light": { - "value": "rgba(255, 255, 255, 0)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgba(255, 255, 255, 0)" + "value": "rgb(44, 44, 44)" } }, - "transparent-white-300": { - "prop": "--spectrum-transparent-white-300", + "tree-view-selected-row-background-color-emphasized": { + "prop": "--spectrum-tree-view-selected-row-background-color-emphasized", + "ref": "var(--spectrum-informative-color-800)", "light": { - "value": "rgba(255, 255, 255, 0.17)" + "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgba(255, 255, 255, 0.17)" + "value": "rgb(64, 105, 253)" } }, - "transparent-white-400": { - "prop": "--spectrum-transparent-white-400", + "tree-view-selected-row-background-default": { + "prop": "--spectrum-tree-view-selected-row-background-default", + "ref": "var(--spectrum-gray-100)", "light": { - "value": "rgba(255, 255, 255, 0.21)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgba(255, 255, 255, 0.21)" + "value": "rgb(44, 44, 44)" } }, - "transparent-white-50": { - "prop": "--spectrum-transparent-white-50", + "tree-view-selected-row-background-hover": { + "prop": "--spectrum-tree-view-selected-row-background-hover", + "ref": "var(--spectrum-gray-100)", "light": { - "value": "rgba(255, 255, 255, 0.04)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgba(255, 255, 255, 0.04)" + "value": "rgb(44, 44, 44)" } }, - "transparent-white-500": { - "prop": "--spectrum-transparent-white-500", - "light": { - "value": "rgba(255, 255, 255, 0.39)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.39)" - } + "tree-view-selected-row-background-opacity-emphasized": { + "prop": "--spectrum-tree-view-selected-row-background-opacity-emphasized", + "value": "0.1" }, - "transparent-white-600": { - "prop": "--spectrum-transparent-white-600", - "light": { - "value": "rgba(255, 255, 255, 0.51)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.51)" - } + "tree-view-selected-row-background-opacity-emphasized-hover": { + "prop": "--spectrum-tree-view-selected-row-background-opacity-emphasized-hover", + "value": "0.15" }, - "transparent-white-700": { - "prop": "--spectrum-transparent-white-700", - "light": { - "value": "rgba(255, 255, 255, 0.66)" + "tree-view-top-to-action-button": { + "prop": "--spectrum-tree-view-top-to-action-button", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.66)" + "mobile": { + "value": "5px" } }, - "transparent-white-75": { - "prop": "--spectrum-transparent-white-75", - "light": { - "value": "rgba(255, 255, 255, 0.07)" + "tree-view-top-to-checkbox": { + "prop": "--spectrum-tree-view-top-to-checkbox", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.07)" + "mobile": { + "value": "5px" } }, - "transparent-white-800": { - "prop": "--spectrum-transparent-white-800", - "light": { - "value": "rgba(255, 255, 255, 0.85)" + "tree-view-top-to-disclosure-indicator": { + "prop": "--spectrum-tree-view-top-to-disclosure-indicator", + "desktop": { + "value": "15px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.85)" + "mobile": { + "value": "19px" } }, - "transparent-white-900": { - "prop": "--spectrum-transparent-white-900", - "light": { - "value": "rgba(255, 255, 255, 0.94)" + "tree-view-top-to-drag-handle": { + "prop": "--spectrum-tree-view-top-to-drag-handle", + "desktop": { + "value": "15px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.94)" + "mobile": { + "value": "19px" } }, - "tray-top-to-content-area": { - "prop": "--spectrum-tray-top-to-content-area", + "tree-view-top-to-label": { + "prop": "--spectrum-tree-view-top-to-label", "desktop": { - "value": "4px" + "value": "10px" }, "mobile": { - "value": "5px" + "value": "13px" } }, "turquoise-100": { @@ -12607,12 +16214,12 @@ }, "white": { "prop": "--spectrum-white", - "light": { - "value": "rgb(255, 255, 255)" - }, - "dark": { - "value": "rgb(255, 255, 255)" - } + "value": "rgb(255, 255, 255)" + }, + "window-to-edge": { + "prop": "--spectrum-window-to-edge", + "ref": "var(--spectrum-spacing-600)", + "value": "40px" }, "workflow-icon-size-100": { "prop": "--spectrum-workflow-icon-size-100", diff --git a/tokens/package.json b/tokens/package.json index 4cc07294b6..b9039dbcf9 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -24,7 +24,7 @@ "main": "dist/css/index.css", "module": "style-dictionary.config.js", "devDependencies": { - "@adobe/spectrum-tokens": "0.0.0-s2-foundations-20241121221506", + "@adobe/spectrum-tokens": "13.0.0-beta.57", "@adobe/token-diff-generator": "^1.3.0", "@spectrum-tools/postcss-rgb-mapping": "1.1.0", "deepmerge": "^4.3.1", diff --git a/tokens/postcss.config.js b/tokens/postcss.config.js index 9f7cadd8c9..1a7d7d22cf 100644 --- a/tokens/postcss.config.js +++ b/tokens/postcss.config.js @@ -25,5 +25,20 @@ export default (options) => postcssConfig({ order: ["custom-properties", "declarations", "at-rules", "rules"], "properties-order": "alphabetical", }, + cssnano: { + preset: [ + "cssnano-preset-advanced", + { + colormin: false, + discardComments: { removeAll: true }, + // @todo yarn add -DW css-declaration-sorter + cssDeclarationSorter: false, // @todo { order: "smacss" }, + normalizeWhitespace: false, + }, + ], + }, + "postcss-licensing": { + filename: "../COPYRIGHT", + }, }, }); diff --git a/tokens/project.json b/tokens/project.json index 29f618b056..00be7ea674 100644 --- a/tokens/project.json +++ b/tokens/project.json @@ -3,8 +3,7 @@ "tag": ["tokens"], "namedInputs": { "core": [ - "{projectRoot}/custom-express/*.css", - "{projectRoot}/custom-spectrum/*.css" + "{projectRoot}/custom/*.css" ], "scripts": ["{projectRoot}/style-dictionary.config.js", "{projectRoot}/utilities/*.js"], "tools": ["{projectRoot}/postcss.config.js", "{projectRoot}/tasks/token-rollup.js"] diff --git a/tokens/tasks/token-rollup.js b/tokens/tasks/token-rollup.js index a216d1088e..28a1e2e828 100644 --- a/tokens/tasks/token-rollup.js +++ b/tokens/tasks/token-rollup.js @@ -118,48 +118,47 @@ async function main({ if (!existsSync(compiledOutputPath)) { mkdirSync(compiledOutputPath); } + const reports = []; + const errors = []; // Read in the package version from the package.json file const packageJson = await fsp.readFile(join(cwd, "package.json"), "utf-8").then(JSON.parse); // Wait for all the custom files to be processed - return appendCustomOverrides({ packageJson, cwd }).then(async (r) => - Promise.all([ - index( - [join("dist", "css", "*-vars.css")], - join(compiledOutputPath, "css", "index.css"), - { cwd, clean, packageJson } - ) - ]).then((reports) => { - const logs = [reports, r].flat(Infinity).filter(Boolean); - - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - if (logs && logs.length > 0) { - logs.forEach(log => { - // Strip the ../../tokens/ from the paths - console.log(log.replace(/(\.\.\/)+tokens\//g, "")); - }); - } - else console.log("No assets created.".gray); - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - }).catch((err) => { - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - console.trace(err); - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - - process.exit(1); - }) - ); + await appendCustomOverrides({ packageJson, cwd }).then((report) => { reports.push(report); }).catch((err) => { errors.push(err); }); + + // Then build the index.css file + await index(["dist/css/*-vars.css"], path.join(compiledOutputPath, "css", "index.css"), { cwd, clean }).then((report) => { reports.push(report); }).catch((err) => { errors.push(err); }); + + // Combine all the reports into a single log output + const logs = reports.flat(Infinity).filter(Boolean); + const errorLogs = errors.flat(Infinity).filter(Boolean); + + console.log(`\n\n${key} 🔨`); + console.log(`${"".padStart(30, "-")}`); + + if (!(errorLogs && errorLogs.length > 0)) { + if (logs && logs.length > 0) { + logs.forEach(log => { + // Strip the ../../tokens/ from the paths + console.log(log.replace(/(\.\.\/)+tokens\//g, "")); + }); + } + else console.log("No assets created.".gray); + } + else { + errorLogs.forEach(log => { + console.error(log); + }); + } + + console.log(`${"".padStart(30, "-")}`); + console.timeEnd(key); + console.log(""); + + if (errorLogs && errorLogs.length > 0) { + process.exit(1); + } } main(); diff --git a/tools/generator/package.json b/tools/generator/package.json index 91f18d8eea..6dc958d7c9 100644 --- a/tools/generator/package.json +++ b/tools/generator/package.json @@ -25,7 +25,7 @@ }, "devDependencies": { "fuzzy": "^0.1.3", - "inquirer": "^9.2.23", + "inquirer": "^9.3.7", "inquirer-autocomplete-prompt": "^3.0.1", "plop": "^4.0.1" }, diff --git a/tools/generator/templates/index.css.hbs b/tools/generator/templates/index.css.hbs index 2219223a2b..e664ce4eeb 100644 --- a/tools/generator/templates/index.css.hbs +++ b/tools/generator/templates/index.css.hbs @@ -12,18 +12,16 @@ */ .spectrum-{{ pascalCase name }} { - // color: var(--highcontrast-{{ folderName }}-content-color-default, var(--mod-{{ folderName }}-content-color-default, var(--spectrum-{{ folderName }}-content-color-default))); - - &.spectrum-{{ pascalCase name }}--sizeS {} - &, - &.spectrum-{{ pascalCase name }}--sizeM {} - &.spectrum-{{ pascalCase name }}--sizeL {} - &.spectrum-{{ pascalCase name }}--sizeXL {} + // color: var(--highcontrast-{{ folderName }}-content-color, var(--mod-{{ folderName }}-content-color, var(--spectrum-{{ folderName }}-content-color))); } +.spectrum-{{ pascalCase name }}--sizeS {} +.spectrum-{{ pascalCase name }}--sizeL {} +.spectrum-{{ pascalCase name }}--sizeXL {} + @media (forced-colors: active) { .spectrum-{{ pascalCase name }} { - --highcontrast-{{ folderName }}-content-color-default: CanvasText; + --highcontrast-{{ folderName }}-content-color: CanvasText; forced-color-adjust: none; } diff --git a/tools/generator/templates/package.json.hbs b/tools/generator/templates/package.json.hbs index 4ae644481f..e9bdba4af6 100644 --- a/tools/generator/templates/package.json.hbs +++ b/tools/generator/templates/package.json.hbs @@ -13,24 +13,41 @@ "bugs": { "url": "https://github.com/adobe/spectrum-css/issues" }, + "exports": { + ".": "./dist/index.css", + "./*.md": "./*.md", + "./dist/*": "./dist/*", + "./index.css": "./dist/index.css", + "./metadata.json": "./dist/metadata.json", + "./package.json": "./package.json" + }, "main": "dist/index.css", "files": [ "dist/*", - "CHANGELOG.md", + "*.md", "package.json", - "stories/template.js", - "metadata/mods.md" + "stories/*", + "metadata/*" ], + "peerDependencies": { + "{{ tokens.name }}": ">={{ parse tokens.version '.' 0 1 }}" + }, + "devDependencies": { + "@spectrum-css/tokens": "workspace:^" + }, "keywords": [ "spectrum", "css", "design system", "adobe" ], - "peerDependencies": { - "{{ tokens.name }}": ">={{ parse tokens.version '.' 0 1 }}" - }, "publishConfig": { "access": "public" - } + }, + "spectrum": [ + { + "rootClass": "spectrum-{{ pascalCase name }}", + "swc": "https://opensource.adobe.com/spectrum-web-components/components/{{ folderName }}/" + } + ] } diff --git a/tools/generator/templates/stories/template.js.hbs b/tools/generator/templates/stories/template.js.hbs index af1047abb6..394ccd1165 100644 --- a/tools/generator/templates/stories/template.js.hbs +++ b/tools/generator/templates/stories/template.js.hbs @@ -7,8 +7,6 @@ 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-{{ pascalCase name }}", diff --git a/ui-icons/CHANGELOG.md b/ui-icons/CHANGELOG.md index d47e30f564..171a627d10 100644 --- a/ui-icons/CHANGELOG.md +++ b/ui-icons/CHANGELOG.md @@ -2,7 +2,7 @@ ## 1.1.2 -🗓 2024-02-06 +🗓 2024-02-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/ui-icons@1.1.1...@spectrum-css/ui-icons@1.1.1) **Note:** Version bump only for package @spectrum-css/ui-icons diff --git a/ui-icons/index.js b/ui-icons/index.js index 884926f221..b055b43463 100644 --- a/ui-icons/index.js +++ b/ui-icons/index.js @@ -1,118 +1,118 @@ -const fs = require('fs'); +const fs = require("fs"); const fsp = fs.promises; -const path = require('path'); +const path = require("path"); -const fg = require('fast-glob'); -const { optimize } = require('svgo'); -const combine = require('svgcombiner'); -const svgstore = require('svgstore'); +const fg = require("fast-glob"); +const { optimize } = require("svgo"); +const combine = require("svgcombiner"); +const svgstore = require("svgstore"); async function setupIconStores() { - const stores = new Map(); - stores.set('all', svgstore()); - - for (const variant of await fg(['*'], { - cwd: __dirname, - ignore: ['dist', 'node_modules'], - onlyDirectories: true, - })) { - stores.set(variant, svgstore()); - } - - return stores; + const stores = new Map(); + stores.set("all", svgstore()); + + for (const variant of await fg(["*"], { + cwd: __dirname, + ignore: ["dist", "node_modules"], + onlyDirectories: true, + })) { + stores.set(variant, svgstore()); + } + + return stores; } async function main() { - // Not using svgo's loadConfig because it doesn't support dynamic config files - const getSvgoConfig = require('./svgo.config.js'); + // Not using svgo's loadConfig because it doesn't support dynamic config files + const getSvgoConfig = require("./svgo.config.js"); - // Hash to hold all icons arranged by processed name - const icons = new Map(); - const stores = await setupIconStores(); - const variants = [...stores.keys()].filter((key) => key !== 'all'); + // Hash to hold all icons arranged by processed name + const icons = new Map(); + const stores = await setupIconStores(); + const variants = [...stores.keys()].filter((key) => key !== "all"); - const files = await fg([`{${variants.join(',')}}/*.svg`], { - cwd: __dirname, - onlyFiles: true, - }); + const files = await fg([`{${variants.join(",")}}/*.svg`], { + cwd: __dirname, + onlyFiles: true, + }); - const promises = []; - for (const file of files) { - const assetName = path.basename(file, '.svg'); + const promises = []; + for (const file of files) { + const assetName = path.basename(file, ".svg"); - // Capture metadata about the icon from the path and filename - const variant = path.dirname(file); + // Capture metadata about the icon from the path and filename + const variant = path.dirname(file); - // Read in the SVG contents - const contents = await fsp.readFile(file, 'utf-8'); - const result = optimize(contents, getSvgoConfig({ clean: true })); + // Read in the SVG contents + const contents = await fsp.readFile(file, "utf-8"); + const result = optimize(contents, getSvgoConfig({ clean: true })); - icons.set(assetName, { - ...(icons.has(assetName) ? icons.get(assetName) : {}), - [variant]: result.data, - }); + icons.set(assetName, { + ...(icons.has(assetName) ? icons.get(assetName) : {}), + [variant]: result.data, + }); - stores.get(variant).add(assetName, result.data); + stores.get(variant).add(assetName, result.data); - const dest = path.join(__dirname, 'dist', file); - if (!fs.existsSync(path.dirname(dest))) { - fs.mkdirSync(path.dirname(dest), { recursive: true }); - } + const dest = path.join(__dirname, "dist", file); + if (!fs.existsSync(path.dirname(dest))) { + fs.mkdirSync(path.dirname(dest), { recursive: true }); + } - promises.push(fsp.writeFile(dest, result.data)); - } + promises.push(fsp.writeFile(dest, result.data)); + } - // Wait for all the SVG content to be read in and processed before continuing - await Promise.all(promises); + // Wait for all the SVG content to be read in and processed before continuing + await Promise.all(promises); - if (icons.size === 0) return; + if (icons.size === 0) return; - // For each entry in the map, combine the SVG variants into a single SVG file with multiple symbols - promises.length = 0; - [...icons.entries()].map(([iconName, data]) => { - // Combine the SVG variants into a single SVG file with multiple symbols - const contents = combine(iconName, data); + // For each entry in the map, combine the SVG variants into a single SVG file with multiple symbols + promises.length = 0; + [...icons.entries()].map(([iconName, data]) => { + // Combine the SVG variants into a single SVG file with multiple symbols + const contents = combine(iconName, data); - // Add the combined SVG to the "all" store so we can generate a single SVG file with all icons - stores.get('all').add(iconName, contents); + // Add the combined SVG to the "all" store so we can generate a single SVG file with all icons + stores.get("all").add(iconName, contents); - // Write the combined SVG to the dist folder - const destPath = path.join(__dirname, 'dist/combined'); - if (!fs.existsSync(destPath)) fs.mkdirSync(destPath, { recursive: true }); + // Write the combined SVG to the dist folder + const destPath = path.join(__dirname, "dist/combined"); + if (!fs.existsSync(destPath)) fs.mkdirSync(destPath, { recursive: true }); - promises.push(fsp.writeFile(path.join(destPath, `${iconName}.svg`), optimize(contents, getSvgoConfig())?.data)); - }); + promises.push(fsp.writeFile(path.join(destPath, `${iconName}.svg`), optimize(contents, getSvgoConfig())?.data)); + }); - // Finally, we write out the stores to disk - for (const [identifier, store] of stores.entries()) { - const isFullSet = identifier === 'all'; - const filename = isFullSet ? 'spectrum-css-icons' : `spectrum-css-icons-${identifier}`; - const dest = path.join(__dirname, `dist/${filename}.svg`); - const config = getSvgoConfig( - isFullSet - ? { - idPrefix: 'spectrum-css-icon', - removeViewBox: true, - } - : {}, - ); + // Finally, we write out the stores to disk + for (const [identifier, store] of stores.entries()) { + const isFullSet = identifier === "all"; + const filename = isFullSet ? "spectrum-css-icons" : `spectrum-css-icons-${identifier}`; + const dest = path.join(__dirname, `dist/${filename}.svg`); + const config = getSvgoConfig( + isFullSet + ? { + idPrefix: "spectrum-css-icon", + removeViewBox: true, + } + : {}, + ); - const result = optimize(store.toString(), config); + const result = optimize(store.toString(), config); - if (!result?.data) continue; + if (!result?.data) continue; - promises.push(fsp.writeFile(dest, result?.data)); - } + promises.push(fsp.writeFile(dest, result?.data)); + } - return Promise.all(promises); + return Promise.all(promises); } main() - .then(() => { - console.log('✔ Icons generated successfully.'); - process.exit(0); - }) - .catch((e) => { - console.error(e); - process.exit(1); - }); + .then(() => { + console.log("✔ Icons generated successfully."); + process.exit(0); + }) + .catch((e) => { + console.error(e); + process.exit(1); + }); diff --git a/yarn.lock b/yarn.lock index 1507612721..e1eb1c4e63 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5,9 +5,9 @@ __metadata: version: 8 cacheKey: 10c0 -"@actions/artifact@npm:^2.2.1": - version: 2.2.1 - resolution: "@actions/artifact@npm:2.2.1" +"@actions/artifact@npm:^2.3.1": + version: 2.3.1 + resolution: "@actions/artifact@npm:2.3.1" dependencies: "@actions/core": "npm:^1.10.0" "@actions/github": "npm:^5.1.1" @@ -20,9 +20,8 @@ __metadata: "@protobuf-ts/plugin": "npm:^2.2.3-alpha.1" archiver: "npm:^7.0.1" jwt-decode: "npm:^3.1.2" - twirp-ts: "npm:^2.5.0" unzip-stream: "npm:^0.3.1" - checksum: 10c0/ed4689b9df2f362e7fead772953f1b13bf348104174482123d7ab247fc4a5bd39fc21d093155789203755a06415811e6705110b6dc0aa4209006ae9bb1aef3d9 + checksum: 10c0/e1ff127a1e36519b0082d0fce47458d3f35d7c1c84b454f04e7a60c0865fbc4d1e2344adf8ce928f8a83e60dc0514c9f9ecd80b81024f72f506ab51791d53891 languageName: node linkType: hard @@ -118,15 +117,14 @@ __metadata: resolution: "@adobe/spectrum-css-monorepo@workspace:." dependencies: "@adobe/token-diff-generator": "npm:^1.3.0" - "@changesets/changelog-github": "npm:^0.5.0" - "@changesets/cli": "npm:^2.27.11" - "@commitlint/cli": "npm:^19.6.1" - "@commitlint/config-conventional": "npm:^19.6.0" - "@nx/devkit": "npm:^19.8.2" - "@spectrum-tools/postcss-add-theming-layer": "npm:1.0.2" - "@spectrum-tools/postcss-property-rollup": "npm:0.0.1" + "@changesets/changelog-github": "npm:^0.5.1" + "@changesets/cli": "npm:^2.28.1" + "@commitlint/cli": "npm:^19.8.0" + "@commitlint/config-conventional": "npm:^19.8.0" + "@csstools/postcss-bundler": "npm:^2.0.6" + "@nx/devkit": "npm:^19.8.14" "@spectrum-tools/postcss-rgb-mapping": "npm:1.1.0" - "@yarnpkg/types": "npm:^4.0.0" + "@yarnpkg/types": "npm:^4.0.1" at-rule-packer: "npm:^0.4.2" autoprefixer: "npm:^10.4.21" colors: "npm:^1.4.0" @@ -135,21 +133,21 @@ __metadata: cssnano-preset-advanced: "npm:^7.0.6" diff: "npm:^7.0.0" diff2html: "npm:^3.4.51" - eslint: "npm:^8.57.0" - eslint-plugin-jsonc: "npm:^2.18.2" - eslint-plugin-prettier: "npm:^5.1.3" + eslint: "npm:^8.57.1" + eslint-plugin-jsonc: "npm:^2.19.1" + eslint-plugin-prettier: "npm:^5.2.3" fast-glob: "npm:^3.3.3" gh-pages: "npm:^6.3.0" husky: "npm:^9.1.7" jsonc-eslint-parser: "npm:^2.4.0" - lint-staged: "npm:^15.3.0" + lint-staged: "npm:^15.4.3" lodash: "npm:^4.17.21" markdownlint: "npm:^0.37.4" markdownlint-cli: "npm:^0.44.0" - node-gyp: "npm:^10.1.0" + node-gyp: "npm:^10.3.1" npm-registry-fetch: "npm:^18.0.2" nunjucks: "npm:^3.2.4" - nx: "npm:^19.8.2" + nx: "npm:^19.8.14" open: "npm:^10.1.0" pajv: "npm:^1.2.0" postcss: "npm:^8.5.3" @@ -188,10 +186,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241121221506": - version: 0.0.0-s2-foundations-20241121221506 - resolution: "@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241121221506" - checksum: 10c0/64664995ca98170c2a089ecb215103c77bb5a3ff49848371e2dfc301dc3ca30ef4dafae3d44cda82a1609d877e54608cc2e591edef37095ee646c6cf185143ee +"@adobe/spectrum-tokens@npm:13.0.0-beta.57": + version: 13.0.0-beta.57 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.57" + checksum: 10c0/7345001d6f539c40b022f5633aa0697d155a4f668b979ad07e8e5d338f658971eedc9ae30b9285fc273502e6e88d10683603861703b8127c1f71548224905535 languageName: node linkType: hard @@ -445,26 +443,26 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.26.0": - version: 7.26.10 - resolution: "@babel/core@npm:7.26.10" +"@babel/core@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/core@npm:7.26.9" dependencies: "@ampproject/remapping": "npm:^2.2.0" "@babel/code-frame": "npm:^7.26.2" - "@babel/generator": "npm:^7.26.10" + "@babel/generator": "npm:^7.26.9" "@babel/helper-compilation-targets": "npm:^7.26.5" "@babel/helper-module-transforms": "npm:^7.26.0" - "@babel/helpers": "npm:^7.26.10" - "@babel/parser": "npm:^7.26.10" + "@babel/helpers": "npm:^7.26.9" + "@babel/parser": "npm:^7.26.9" "@babel/template": "npm:^7.26.9" - "@babel/traverse": "npm:^7.26.10" - "@babel/types": "npm:^7.26.10" + "@babel/traverse": "npm:^7.26.9" + "@babel/types": "npm:^7.26.9" convert-source-map: "npm:^2.0.0" debug: "npm:^4.1.0" gensync: "npm:^1.0.0-beta.2" json5: "npm:^2.2.3" semver: "npm:^6.3.1" - checksum: 10c0/e046e0e988ab53841b512ee9d263ca409f6c46e2a999fe53024688b92db394346fa3aeae5ea0866331f62133982eee05a675d22922a4603c3f603aa09a581d62 + checksum: 10c0/ed7212ff42a9453765787019b7d191b167afcacd4bd8fec10b055344ef53fa0cc648c9a80159ae4ecf870016a6318731e087042dcb68d1a2a9d34eb290dc014b languageName: node linkType: hard @@ -494,16 +492,16 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.26.10": - version: 7.26.10 - resolution: "@babel/generator@npm:7.26.10" +"@babel/generator@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/generator@npm:7.26.9" dependencies: - "@babel/parser": "npm:^7.26.10" - "@babel/types": "npm:^7.26.10" + "@babel/parser": "npm:^7.26.9" + "@babel/types": "npm:^7.26.9" "@jridgewell/gen-mapping": "npm:^0.3.5" "@jridgewell/trace-mapping": "npm:^0.3.25" jsesc: "npm:^3.0.2" - checksum: 10c0/88b3b3ea80592fc89349c4e1a145e1386e4042866d2507298adf452bf972f68d13bf699a845e6ab8c028bd52c2247013eb1221b86e1db5c9779faacba9c4b10e + checksum: 10c0/6b78872128205224a9a9761b9ea7543a9a7902a04b82fc2f6801ead4de8f59056bab3fd17b1f834ca7b049555fc4c79234b9a6230dd9531a06525306050becad languageName: node linkType: hard @@ -598,7 +596,7 @@ __metadata: languageName: node linkType: hard -"@babel/helpers@npm:^7.26.0, @babel/helpers@npm:^7.26.10": +"@babel/helpers@npm:^7.26.0": version: 7.26.10 resolution: "@babel/helpers@npm:7.26.10" dependencies: @@ -608,6 +606,16 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/helpers@npm:7.26.9" + dependencies: + "@babel/template": "npm:^7.26.9" + "@babel/types": "npm:^7.26.9" + checksum: 10c0/3d4dbc4a33fe4181ed810cac52318b578294745ceaec07e2f6ecccf6cda55d25e4bfcea8f085f333bf911c9e1fc13320248dd1d5315ab47ad82ce1077410df05 + languageName: node + linkType: hard + "@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.20.7": version: 7.24.8 resolution: "@babel/parser@npm:7.24.8" @@ -639,7 +647,7 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.26.10, @babel/parser@npm:^7.26.9": +"@babel/parser@npm:^7.26.9": version: 7.26.10 resolution: "@babel/parser@npm:7.26.10" dependencies: @@ -837,7 +845,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5": +"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1": version: 7.26.10 resolution: "@babel/runtime@npm:7.26.10" dependencies: @@ -846,6 +854,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.5.5": + version: 7.24.4 + resolution: "@babel/runtime@npm:7.24.4" + dependencies: + regenerator-runtime: "npm:^0.14.0" + checksum: 10c0/785aff96a3aa8ff97f90958e1e8a7b1d47f793b204b47c6455eaadc3f694f48c97cd5c0a921fe3596d818e71f18106610a164fb0f1c71fd68c622a58269d537c + languageName: node + linkType: hard + "@babel/template@npm:^7.22.5, @babel/template@npm:^7.26.9, @babel/template@npm:^7.3.3": version: 7.26.9 resolution: "@babel/template@npm:7.26.9" @@ -883,18 +900,18 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.26.10": - version: 7.26.10 - resolution: "@babel/traverse@npm:7.26.10" +"@babel/traverse@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/traverse@npm:7.26.9" dependencies: "@babel/code-frame": "npm:^7.26.2" - "@babel/generator": "npm:^7.26.10" - "@babel/parser": "npm:^7.26.10" + "@babel/generator": "npm:^7.26.9" + "@babel/parser": "npm:^7.26.9" "@babel/template": "npm:^7.26.9" - "@babel/types": "npm:^7.26.10" + "@babel/types": "npm:^7.26.9" debug: "npm:^4.3.1" globals: "npm:^11.1.0" - checksum: 10c0/4e86bb4e3c30a6162bb91df86329df79d96566c3e2d9ccba04f108c30473a3a4fd360d9990531493d90f6a12004f10f616bf9b9229ca30c816b708615e9de2ac + checksum: 10c0/51dd57fa39ea34d04816806bfead04c74f37301269d24c192d1406dc6e244fea99713b3b9c5f3e926d9ef6aa9cd5c062ad4f2fc1caa9cf843d5e864484ac955e languageName: node linkType: hard @@ -929,7 +946,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.26.10, @babel/types@npm:^7.26.9": +"@babel/types@npm:^7.26.10": version: 7.26.10 resolution: "@babel/types@npm:7.26.10" dependencies: @@ -939,6 +956,16 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/types@npm:7.26.9" + dependencies: + "@babel/helper-string-parser": "npm:^7.25.9" + "@babel/helper-validator-identifier": "npm:^7.25.9" + checksum: 10c0/999c56269ba00e5c57aa711fbe7ff071cd6990bafd1b978341ea7572cc78919986e2aa6ee51dacf4b6a7a6fa63ba4eb3f1a03cf55eee31b896a56d068b895964 + languageName: node + linkType: hard + "@bcoe/v8-coverage@npm:^0.2.3": version: 0.2.3 resolution: "@bcoe/v8-coverage@npm:0.2.3" @@ -993,15 +1020,15 @@ __metadata: languageName: node linkType: hard -"@changesets/apply-release-plan@npm:^7.0.7": - version: 7.0.7 - resolution: "@changesets/apply-release-plan@npm:7.0.7" +"@changesets/apply-release-plan@npm:^7.0.10": + version: 7.0.10 + resolution: "@changesets/apply-release-plan@npm:7.0.10" dependencies: - "@changesets/config": "npm:^3.0.5" + "@changesets/config": "npm:^3.1.1" "@changesets/get-version-range-type": "npm:^0.4.0" "@changesets/git": "npm:^3.0.2" - "@changesets/should-skip-package": "npm:^0.1.1" - "@changesets/types": "npm:^6.0.0" + "@changesets/should-skip-package": "npm:^0.1.2" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" detect-indent: "npm:^6.0.0" fs-extra: "npm:^7.0.1" @@ -1010,62 +1037,62 @@ __metadata: prettier: "npm:^2.7.1" resolve-from: "npm:^5.0.0" semver: "npm:^7.5.3" - checksum: 10c0/6ecbcccd46832b230b0c734ec2fc77648401f837dea91a7bf63be07207e4bb01cc6e1d6a05644bb85b6ee4b556bad031f43af7e8c742b873ee1313edb0a03929 + checksum: 10c0/4ee5951448c26bbf73fac5c9a0785d5bb0cc3f2e6c1ffc9337766b446fe79a7b018834be2a4723938faec0d331aa30f1d6c7ea47db48d7a7babe37862645dd57 languageName: node linkType: hard -"@changesets/assemble-release-plan@npm:^6.0.5": - version: 6.0.5 - resolution: "@changesets/assemble-release-plan@npm:6.0.5" +"@changesets/assemble-release-plan@npm:^6.0.6": + version: 6.0.6 + resolution: "@changesets/assemble-release-plan@npm:6.0.6" dependencies: "@changesets/errors": "npm:^0.2.0" - "@changesets/get-dependents-graph": "npm:^2.1.2" - "@changesets/should-skip-package": "npm:^0.1.1" - "@changesets/types": "npm:^6.0.0" + "@changesets/get-dependents-graph": "npm:^2.1.3" + "@changesets/should-skip-package": "npm:^0.1.2" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" semver: "npm:^7.5.3" - checksum: 10c0/6e4b699d67c9f1e78133a33bba7bb46b3119d6497e1f1dba5033905fd60911c90239c67ad6c4823ccd44225dee40d0689083be40f8c86ea30c5535e12d8db041 + checksum: 10c0/292c6570310818f5427b97f1ddfd518ae4493f47e2674ca40bb11251808a20d7f07bff548c4277b1ad5ddfe53602b69ae6628fc45864286e34edfb5f7c2e19a0 languageName: node linkType: hard -"@changesets/changelog-git@npm:^0.2.0": - version: 0.2.0 - resolution: "@changesets/changelog-git@npm:0.2.0" +"@changesets/changelog-git@npm:^0.2.1": + version: 0.2.1 + resolution: "@changesets/changelog-git@npm:0.2.1" dependencies: - "@changesets/types": "npm:^6.0.0" - checksum: 10c0/d94df555656ac4ac9698d87a173b1955227ac0f1763d59b9b4d4f149ab3f879ca67603e48407b1dfdadaef4e7882ae7bbc7b7be160a45a55f05442004bdc61bd + "@changesets/types": "npm:^6.1.0" + checksum: 10c0/6a6fb315ffb2266fcb8f32ae9a60ccdb5436e52350a2f53beacf9822d3355f9052aba5001a718e12af472b4a8fabd69b408d0b11c02ac909ba7a183d27a9f7fd languageName: node linkType: hard -"@changesets/changelog-github@npm:^0.5.0": - version: 0.5.0 - resolution: "@changesets/changelog-github@npm:0.5.0" +"@changesets/changelog-github@npm:^0.5.1": + version: 0.5.1 + resolution: "@changesets/changelog-github@npm:0.5.1" dependencies: "@changesets/get-github-info": "npm:^0.6.0" - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" dotenv: "npm:^8.1.0" - checksum: 10c0/fc6a6947185af6f1c7543c572ca6e46d733188586ab873c75476f389fb11c675df1c230a56394d490aa9a7f13bdf88d23541265deeda77f167d06b0cc3206923 + checksum: 10c0/0ce02d3d7d6bedf86ca2a2bf88ab304ee0f4d5e491edd912769d9420386702876c17850f739f59fe6f90da690e11803cb2047eeef3a6abf411604c7ccab375fb languageName: node linkType: hard -"@changesets/cli@npm:^2.27.11": - version: 2.27.11 - resolution: "@changesets/cli@npm:2.27.11" +"@changesets/cli@npm:^2.28.1": + version: 2.28.1 + resolution: "@changesets/cli@npm:2.28.1" dependencies: - "@changesets/apply-release-plan": "npm:^7.0.7" - "@changesets/assemble-release-plan": "npm:^6.0.5" - "@changesets/changelog-git": "npm:^0.2.0" - "@changesets/config": "npm:^3.0.5" + "@changesets/apply-release-plan": "npm:^7.0.10" + "@changesets/assemble-release-plan": "npm:^6.0.6" + "@changesets/changelog-git": "npm:^0.2.1" + "@changesets/config": "npm:^3.1.1" "@changesets/errors": "npm:^0.2.0" - "@changesets/get-dependents-graph": "npm:^2.1.2" - "@changesets/get-release-plan": "npm:^4.0.6" + "@changesets/get-dependents-graph": "npm:^2.1.3" + "@changesets/get-release-plan": "npm:^4.0.8" "@changesets/git": "npm:^3.0.2" "@changesets/logger": "npm:^0.1.1" - "@changesets/pre": "npm:^2.0.1" - "@changesets/read": "npm:^0.6.2" - "@changesets/should-skip-package": "npm:^0.1.1" - "@changesets/types": "npm:^6.0.0" - "@changesets/write": "npm:^0.3.2" + "@changesets/pre": "npm:^2.0.2" + "@changesets/read": "npm:^0.6.3" + "@changesets/should-skip-package": "npm:^0.1.2" + "@changesets/types": "npm:^6.1.0" + "@changesets/write": "npm:^0.4.0" "@manypkg/get-packages": "npm:^1.1.3" ansi-colors: "npm:^4.1.3" ci-info: "npm:^3.7.0" @@ -1082,22 +1109,22 @@ __metadata: term-size: "npm:^2.1.0" bin: changeset: bin.js - checksum: 10c0/dcaad88c6cd671c5a37005358ed3ab51b5f6f74e2dc1747af060e7bac6918a1ad31e122ca51ef1d337cb291e10997ad4e9156878aa90bf977ed8d38456c603da + checksum: 10c0/f965b56fa533f91b5de0f5fd5b09fac46662f023dafbe474d3fc7ceb71629dce4783a37429a927d50292a7ea95c0694e5a8f0c143d9cbba95d28a4d11ab8106b languageName: node linkType: hard -"@changesets/config@npm:^3.0.5": - version: 3.0.5 - resolution: "@changesets/config@npm:3.0.5" +"@changesets/config@npm:^3.1.1": + version: 3.1.1 + resolution: "@changesets/config@npm:3.1.1" dependencies: "@changesets/errors": "npm:^0.2.0" - "@changesets/get-dependents-graph": "npm:^2.1.2" + "@changesets/get-dependents-graph": "npm:^2.1.3" "@changesets/logger": "npm:^0.1.1" - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" fs-extra: "npm:^7.0.1" micromatch: "npm:^4.0.8" - checksum: 10c0/fead5b29b322c247c00bb6e5fbe5d580c290c1f68c4a507b83a06ea7267100c1242d7fc7aeb29f1389377ec6d8ebf39f0387ee0bdbcc338b2a5ab2487e0c8342 + checksum: 10c0/e6e529ca9525d1550cc2155a01a477c5b923e084985cb5cb15b6efc06da543c2faf623dd67d305688ffa8a8fc9d48f1ba74ad6653ce230183e40f10ffaa0c2dc languageName: node linkType: hard @@ -1110,15 +1137,15 @@ __metadata: languageName: node linkType: hard -"@changesets/get-dependents-graph@npm:^2.1.2": - version: 2.1.2 - resolution: "@changesets/get-dependents-graph@npm:2.1.2" +"@changesets/get-dependents-graph@npm:^2.1.3": + version: 2.1.3 + resolution: "@changesets/get-dependents-graph@npm:2.1.3" dependencies: - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" picocolors: "npm:^1.1.0" semver: "npm:^7.5.3" - checksum: 10c0/f2674ccb71f989b2abf2088953548b6de503e17d0b1f5b0147c4ef1672a5a2dd5201b828b419ccb67841e7812d1fbe1607d12668ea8972b3d0de5a1d2b38b61b + checksum: 10c0/b9d9992440b7e09dcaf22f57d28f1d8e0e31996e1bc44dbbfa1801e44f93fa49ebba6f9356c60f6ff0bd85cd0f0d0b8602f7e0f2addc5be647b686e6f8985f70 languageName: node linkType: hard @@ -1132,17 +1159,17 @@ __metadata: languageName: node linkType: hard -"@changesets/get-release-plan@npm:^4.0.6": - version: 4.0.6 - resolution: "@changesets/get-release-plan@npm:4.0.6" +"@changesets/get-release-plan@npm:^4.0.8": + version: 4.0.8 + resolution: "@changesets/get-release-plan@npm:4.0.8" dependencies: - "@changesets/assemble-release-plan": "npm:^6.0.5" - "@changesets/config": "npm:^3.0.5" - "@changesets/pre": "npm:^2.0.1" - "@changesets/read": "npm:^0.6.2" - "@changesets/types": "npm:^6.0.0" + "@changesets/assemble-release-plan": "npm:^6.0.6" + "@changesets/config": "npm:^3.1.1" + "@changesets/pre": "npm:^2.0.2" + "@changesets/read": "npm:^0.6.3" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" - checksum: 10c0/7c35f1dc5bf6be17b0e2aabc7c2fceec68b4a9c73087d946a7a1691ce5221f16d172be3ae502d4daffdae1e567cdaf7022004d2fb745807ddc74e403c756c246 + checksum: 10c0/b638f83683264818ea6cb729a3fd10f9edf29c61c7acee15ce321287cacbe03700706a20c0b531fdb3bbb23bda8967f4c6cbef08db207189fb7289313f473a1a languageName: node linkType: hard @@ -1175,50 +1202,50 @@ __metadata: languageName: node linkType: hard -"@changesets/parse@npm:^0.4.0": - version: 0.4.0 - resolution: "@changesets/parse@npm:0.4.0" +"@changesets/parse@npm:^0.4.1": + version: 0.4.1 + resolution: "@changesets/parse@npm:0.4.1" dependencies: - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" js-yaml: "npm:^3.13.1" - checksum: 10c0/8e76f8540aceb2263eb76c97f027c1990fc069bf275321ad0aabf843cb51bc6711b13118eda35c701a30a36d26f48e75f7afc14e9a5c863f8a98091021fd5d61 + checksum: 10c0/8caf73b48addb1add246f0287f0dcbd47ca0444b33f251b6208dad36de9c21d2654f0ae0527e5bf14b075be23144b59f48a36e2d87850fb7c004050f07461fdc languageName: node linkType: hard -"@changesets/pre@npm:^2.0.1": - version: 2.0.1 - resolution: "@changesets/pre@npm:2.0.1" +"@changesets/pre@npm:^2.0.2": + version: 2.0.2 + resolution: "@changesets/pre@npm:2.0.2" dependencies: "@changesets/errors": "npm:^0.2.0" - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" fs-extra: "npm:^7.0.1" - checksum: 10c0/aacd4a71cab8a511702903bee50434188f300503a1207a08b89d09dc575981c28af77b7357a610504ce48d101e67308fc6ed4427ac2a61d162de4d01a2a0f695 + checksum: 10c0/0af9396d84c47a88d79b757e9db4e3579b6620260f92c243b8349e7fcefca3c2652583f6d215c13115bed5d5cdc30c975f307fd6acbb89d205b1ba2ae403b918 languageName: node linkType: hard -"@changesets/read@npm:^0.6.2": - version: 0.6.2 - resolution: "@changesets/read@npm:0.6.2" +"@changesets/read@npm:^0.6.3": + version: 0.6.3 + resolution: "@changesets/read@npm:0.6.3" dependencies: "@changesets/git": "npm:^3.0.2" "@changesets/logger": "npm:^0.1.1" - "@changesets/parse": "npm:^0.4.0" - "@changesets/types": "npm:^6.0.0" + "@changesets/parse": "npm:^0.4.1" + "@changesets/types": "npm:^6.1.0" fs-extra: "npm:^7.0.1" p-filter: "npm:^2.1.0" picocolors: "npm:^1.1.0" - checksum: 10c0/a63efb4605c56ac216734fa5749f4f4ed9f8ab0ec2cbef96530b99c244ab84b2a47514d34f8f656e517237b65a456dd274e599b9c745f351719baeb503d0d6c3 + checksum: 10c0/4c2eac60aab0a6b14ad5a2ed2f57427019fe567dd6d2c6e122bd3cbf7f69903dcec6c864a67c39544ed011369223c838e498212303404a7f884428f4366f10da languageName: node linkType: hard -"@changesets/should-skip-package@npm:^0.1.1": - version: 0.1.1 - resolution: "@changesets/should-skip-package@npm:0.1.1" +"@changesets/should-skip-package@npm:^0.1.2": + version: 0.1.2 + resolution: "@changesets/should-skip-package@npm:0.1.2" dependencies: - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" - checksum: 10c0/4fb0a17538492db15733a9514560ff1d4dfbd94882a349495a6585eb675f9414aa74020aa886f1f72542ca70d5d96a842db2f52b08fcb571705b1d9ed3632e57 + checksum: 10c0/484e339e7d6e6950e12bff4eda6e8eccb077c0fbb1f09dd95d2ae948b715226a838c71eaf50cd2d7e0e631ce3bfb1ca93ac752436e6feae5b87aece2e917b440 languageName: node linkType: hard @@ -1229,28 +1256,28 @@ __metadata: languageName: node linkType: hard -"@changesets/types@npm:^6.0.0": - version: 6.0.0 - resolution: "@changesets/types@npm:6.0.0" - checksum: 10c0/e755f208792547e3b9ece15ce4da22466267da810c6fd87d927a1b8cec4d7fb7f0eea0d1a7585747676238e3e4ba1ffdabe016ccb05cfa537b4e4b03ec399f41 +"@changesets/types@npm:^6.1.0": + version: 6.1.0 + resolution: "@changesets/types@npm:6.1.0" + checksum: 10c0/b4cea3a4465d1eaf0bbd7be1e404aca5a055a61d4cc72aadcb73bbbda1670b4022736b8d3052616cbf1f451afa0637545d077697f4b923236539af9cd5abce6c languageName: node linkType: hard -"@changesets/write@npm:^0.3.2": - version: 0.3.2 - resolution: "@changesets/write@npm:0.3.2" +"@changesets/write@npm:^0.4.0": + version: 0.4.0 + resolution: "@changesets/write@npm:0.4.0" dependencies: - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" fs-extra: "npm:^7.0.1" - human-id: "npm:^1.0.2" + human-id: "npm:^4.1.1" prettier: "npm:^2.7.1" - checksum: 10c0/1e00af0a82a780f74e03359d672690b35b6c788891e515a37488fca756109471f0d2da4904185b758a38d26e5cc2f426de4a2201ca3b6e26cf03ab747773690f + checksum: 10c0/311f4d0e536d1b5f2d3f9053537d62b2d4cdbd51e1d2767807ac9d1e0f380367f915d2ad370e5c73902d5a54bffd282d53fff5418c8ad31df51751d652bea826 languageName: node linkType: hard -"@chromatic-com/storybook@npm:^3.2.3": - version: 3.2.3 - resolution: "@chromatic-com/storybook@npm:3.2.3" +"@chromatic-com/storybook@npm:^3.2.5": + version: 3.2.5 + resolution: "@chromatic-com/storybook@npm:3.2.5" dependencies: chromatic: "npm:^11.15.0" filesize: "npm:^10.0.12" @@ -1259,198 +1286,198 @@ __metadata: strip-ansi: "npm:^7.1.0" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/23c59b7d225347d4af8cb6a7596da3417dc3abc2d5036c4ef5cee2852b994a16b5996a1bd1a584bb56e97266d85ce9ae7daeeac296b3060d6b80b14cad10d9d1 + checksum: 10c0/a8064e433caf8842079a676a9ecc0e423b6599e2549d14f9d69cef19d0a4f527c819c9577975436463925dcc8046278fc2f1f3d2bb2d1c250df14e37b0ae44a4 languageName: node linkType: hard -"@commitlint/cli@npm:^19.6.1": - version: 19.6.1 - resolution: "@commitlint/cli@npm:19.6.1" +"@commitlint/cli@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/cli@npm:19.8.0" dependencies: - "@commitlint/format": "npm:^19.5.0" - "@commitlint/lint": "npm:^19.6.0" - "@commitlint/load": "npm:^19.6.1" - "@commitlint/read": "npm:^19.5.0" - "@commitlint/types": "npm:^19.5.0" + "@commitlint/format": "npm:^19.8.0" + "@commitlint/lint": "npm:^19.8.0" + "@commitlint/load": "npm:^19.8.0" + "@commitlint/read": "npm:^19.8.0" + "@commitlint/types": "npm:^19.8.0" tinyexec: "npm:^0.3.0" yargs: "npm:^17.0.0" bin: - commitlint: cli.js - checksum: 10c0/fa7a344292f1d25533b195b061bcae0a80434490fae843ad28593c09668f48e9a74906b69f95d26df4152c56c71ab31a0bc169d333e22c6ca53dc54646a2ff19 + commitlint: ./cli.js + checksum: 10c0/6931c62c18b848b2c7266ec0b2d3a690a9ec9f83151a67a89ef20a49c84d5e6ee8dbaee4aaec14b2bd1229fdd91c7a0b41b7fd68c52fff8632a0037d52bd6eb2 languageName: node linkType: hard -"@commitlint/config-conventional@npm:^19.6.0": - version: 19.6.0 - resolution: "@commitlint/config-conventional@npm:19.6.0" +"@commitlint/config-conventional@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/config-conventional@npm:19.8.0" dependencies: - "@commitlint/types": "npm:^19.5.0" + "@commitlint/types": "npm:^19.8.0" conventional-changelog-conventionalcommits: "npm:^7.0.2" - checksum: 10c0/984870138f5d4b947bc2ea8d12fcb8103ef9e6141d0fb50a6e387665495b80b35890d9dc025443a243a53d2a69d7c0bab1d77c5658a6e5a15a3dd7773557fad2 + checksum: 10c0/c0e2ad4ee8b793ad08ce8f0fd242d8111c71c81eba53b652431b7852e02d3eef0a383e234b7574429f5d1876b712a915921f6ff61fdaccdf708cbbaf3fa1f2f0 languageName: node linkType: hard -"@commitlint/config-validator@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/config-validator@npm:19.5.0" +"@commitlint/config-validator@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/config-validator@npm:19.8.0" dependencies: - "@commitlint/types": "npm:^19.5.0" + "@commitlint/types": "npm:^19.8.0" ajv: "npm:^8.11.0" - checksum: 10c0/f04b8c66448c9a4f335d1ac9625393d471d2bcc864adc834eeec52ce19939c25475bf90677504df03ab88869e883b4ebfddff68f99f7652900d6b297ef586643 + checksum: 10c0/968b3041dbf1683f9da443c2998a53ced52e86b98a48862f39f303af69638c72b7409840c16b3ded27eaa1636bdbf6b2464f8a2628c40d8f14a66a5474359ed5 languageName: node linkType: hard -"@commitlint/ensure@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/ensure@npm:19.5.0" +"@commitlint/ensure@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/ensure@npm:19.8.0" dependencies: - "@commitlint/types": "npm:^19.5.0" + "@commitlint/types": "npm:^19.8.0" lodash.camelcase: "npm:^4.3.0" lodash.kebabcase: "npm:^4.1.1" lodash.snakecase: "npm:^4.1.1" lodash.startcase: "npm:^4.4.0" lodash.upperfirst: "npm:^4.3.1" - checksum: 10c0/94955d424da36a4e9390dfb6e128160d1dcd3ffa20b835a9b6fdd92af46bf8897851f19cbeb9d12a70e9b9c36a993d3a48a60893e74f32fe1b601e1e68484d71 + checksum: 10c0/5160dcf41c595496894cf1d075b4ee15c14b3689967d8693d4121689475d36853eceeb09fc4e07b6f002e7b8869e75418b0c1cd95d4ee32d062811301337875c languageName: node linkType: hard -"@commitlint/execute-rule@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/execute-rule@npm:19.5.0" - checksum: 10c0/966dfc09ae3fe609527fb49c7773ae210ade9d14a802a92a57ab251900a77d2968aed08df6b34f175bf4ae9bf5d675b52b346e7b10b717e8a635499e4cf42267 +"@commitlint/execute-rule@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/execute-rule@npm:19.8.0" + checksum: 10c0/fee5848e41680935510c6eebe2afcfe3511e2ccc39686c555f2e2db0205345479c7dbd84e7a8a2b22c7700ce75e6442b24685fbc3a419b0ea91f83a0850c6489 languageName: node linkType: hard -"@commitlint/format@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/format@npm:19.5.0" +"@commitlint/format@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/format@npm:19.8.0" dependencies: - "@commitlint/types": "npm:^19.5.0" + "@commitlint/types": "npm:^19.8.0" chalk: "npm:^5.3.0" - checksum: 10c0/209a3d530d028d483886ea2337d6ec8a95b61119f53f7f1db167b13fd8a204bdcbcd704e649406a0b2285e8424b3bac9e1e6856d2a78f45e176976b9efb76e45 + checksum: 10c0/25de71d5b19c126e7e9f471dcf8015bc362ee94fec7ca0da866181832548cb4a04c18f732c8d7cc64641e896a33d0e199bd445edd9e0ef164b0e7bd7259b86b1 languageName: node linkType: hard -"@commitlint/is-ignored@npm:^19.6.0": - version: 19.6.0 - resolution: "@commitlint/is-ignored@npm:19.6.0" +"@commitlint/is-ignored@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/is-ignored@npm:19.8.0" dependencies: - "@commitlint/types": "npm:^19.5.0" + "@commitlint/types": "npm:^19.8.0" semver: "npm:^7.6.0" - checksum: 10c0/64e3522598f131aefab72e78f2b0d5d78228041fbe14fd9785611bd5a4ff7dfae38288ff87b171ab2ff722342983387b6e568ab4d758f3c97866eb924252e6c5 + checksum: 10c0/6f882266cca84fdc2a435cc01388b070c60cdda56dff6cb1bd98a443982d8bb90b186972450c733ee1190122882f53e715a7204d9fc9787b5303ca545985958c languageName: node linkType: hard -"@commitlint/lint@npm:^19.6.0": - version: 19.6.0 - resolution: "@commitlint/lint@npm:19.6.0" +"@commitlint/lint@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/lint@npm:19.8.0" dependencies: - "@commitlint/is-ignored": "npm:^19.6.0" - "@commitlint/parse": "npm:^19.5.0" - "@commitlint/rules": "npm:^19.6.0" - "@commitlint/types": "npm:^19.5.0" - checksum: 10c0/d7e3c6a43d89b2196362dce5abef6665869844455176103f311cab7a92f6b7be60edec4f03d27b946a65ee2ceb8ff16f5955cba1da6ecdeb9efe9f215b16f47f + "@commitlint/is-ignored": "npm:^19.8.0" + "@commitlint/parse": "npm:^19.8.0" + "@commitlint/rules": "npm:^19.8.0" + "@commitlint/types": "npm:^19.8.0" + checksum: 10c0/5ce1074e5ad1ed12158fb722d4d643be71c3ae35113c6b13faa71dd85a07eeafec50ef2fee3f3e6fccdbd8bf8684613aa097e287b54a7cbcae1f9f28e2b95e8d languageName: node linkType: hard -"@commitlint/load@npm:^19.6.1": - version: 19.6.1 - resolution: "@commitlint/load@npm:19.6.1" +"@commitlint/load@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/load@npm:19.8.0" dependencies: - "@commitlint/config-validator": "npm:^19.5.0" - "@commitlint/execute-rule": "npm:^19.5.0" - "@commitlint/resolve-extends": "npm:^19.5.0" - "@commitlint/types": "npm:^19.5.0" + "@commitlint/config-validator": "npm:^19.8.0" + "@commitlint/execute-rule": "npm:^19.8.0" + "@commitlint/resolve-extends": "npm:^19.8.0" + "@commitlint/types": "npm:^19.8.0" chalk: "npm:^5.3.0" cosmiconfig: "npm:^9.0.0" cosmiconfig-typescript-loader: "npm:^6.1.0" lodash.isplainobject: "npm:^4.0.6" lodash.merge: "npm:^4.6.2" lodash.uniq: "npm:^4.5.0" - checksum: 10c0/3f92ef6a592491dbb48ae985ef8e3897adccbbb735c09425304cbe574a0ec392b2d724ca14ebb99107e32f60bbec3b873ab64e87fea6d5af7aa579a9052a626e + checksum: 10c0/6826a015ce40ae6043ff45bf29c7d515822ea416ab2a2a6eec6a69e5ba81b71419cadd609070aa3695d59f5442c34e3c264889df343eb66595c130185db58bad languageName: node linkType: hard -"@commitlint/message@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/message@npm:19.5.0" - checksum: 10c0/72b990ba8c3c41441bff2126f4ea536a635c9768dee7000b4951770ac82c5e0bb4c2d408cf28cadbf51a0abbdb7a09ddd36e0968af0997fcc166596d4c3866a7 +"@commitlint/message@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/message@npm:19.8.0" + checksum: 10c0/a7390fade33e381a17d53ec16081bd6915d61cf4eb326739ee4b4c1f3a4016f84e953dd273126fcf23deaf5ca2ed49d75c0e667bc159dcfb26cb37ce840d97a9 languageName: node linkType: hard -"@commitlint/parse@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/parse@npm:19.5.0" +"@commitlint/parse@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/parse@npm:19.8.0" dependencies: - "@commitlint/types": "npm:^19.5.0" + "@commitlint/types": "npm:^19.8.0" conventional-changelog-angular: "npm:^7.0.0" conventional-commits-parser: "npm:^5.0.0" - checksum: 10c0/63655cedcf48b29613ef959155ee83f49942406abe40ee6b64ad989a169a0582451dcf15a9c9b69a66011ae451ab2e086fb80c1823cc7ddf275705ff627660b1 + checksum: 10c0/ece54b76d2bf6eb620d972810a8db276a104cbd29db6a3c7eb661fc6eaf8212fda04a42920eac56831f65af77bc4a8e15260c2c0881f351289d93e4cf5371cde languageName: node linkType: hard -"@commitlint/read@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/read@npm:19.5.0" +"@commitlint/read@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/read@npm:19.8.0" dependencies: - "@commitlint/top-level": "npm:^19.5.0" - "@commitlint/types": "npm:^19.5.0" + "@commitlint/top-level": "npm:^19.8.0" + "@commitlint/types": "npm:^19.8.0" git-raw-commits: "npm:^4.0.0" minimist: "npm:^1.2.8" tinyexec: "npm:^0.3.0" - checksum: 10c0/c2d6f958930e815337a4994779ca1dfcbbb6b81b8f3098cc7380e2cc5ddeae69ebd839b48fecd08950e565d43bc42c479915c578eaf57b3877706bca1fad6b8a + checksum: 10c0/94b9156f67b95d0ca7dd9653e399b7129d0b84c4940dc79a5264148688ca01c70780ef235b67d344059e575938c9e0988af9fa7233a793dcd74f49f9278e0e68 languageName: node linkType: hard -"@commitlint/resolve-extends@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/resolve-extends@npm:19.5.0" +"@commitlint/resolve-extends@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/resolve-extends@npm:19.8.0" dependencies: - "@commitlint/config-validator": "npm:^19.5.0" - "@commitlint/types": "npm:^19.5.0" + "@commitlint/config-validator": "npm:^19.8.0" + "@commitlint/types": "npm:^19.8.0" global-directory: "npm:^4.0.1" import-meta-resolve: "npm:^4.0.0" lodash.mergewith: "npm:^4.6.2" resolve-from: "npm:^5.0.0" - checksum: 10c0/10569a46036b7aa93c77dc5001a67bc9f36b340b97b2fd39b5ee95b0efc5e35335c61f86d4ba0bb5a8e6dd49ccf956990cce9ee29cfea9ba567e02668be01841 + checksum: 10c0/7b05d0c9bc2171e1475baeef13d30d6d985e1dd9cb4652355484a8d4841797dffd3e80edd5c61182cbfab1a28f4180ccbdef87bfa8f4586e057e05e238f5b19b languageName: node linkType: hard -"@commitlint/rules@npm:^19.6.0": - version: 19.6.0 - resolution: "@commitlint/rules@npm:19.6.0" +"@commitlint/rules@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/rules@npm:19.8.0" dependencies: - "@commitlint/ensure": "npm:^19.5.0" - "@commitlint/message": "npm:^19.5.0" - "@commitlint/to-lines": "npm:^19.5.0" - "@commitlint/types": "npm:^19.5.0" - checksum: 10c0/1d93b741cfb46e6c5314ddb03282844b65db832aa4767561bb37e9d0595d02330e6a0a557fb66f86d78b2ffd91cd2ed794899df59ee23b27abc44e1e57b42d0e + "@commitlint/ensure": "npm:^19.8.0" + "@commitlint/message": "npm:^19.8.0" + "@commitlint/to-lines": "npm:^19.8.0" + "@commitlint/types": "npm:^19.8.0" + checksum: 10c0/3d6e932dfbd4c6384d3b3ded66a9f886667988cae4b1ae091350198ae8ca5c703142f13ccd8b632a0d260fd48072f5bc67836c15e6d637033b97dac2c81c95dd languageName: node linkType: hard -"@commitlint/to-lines@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/to-lines@npm:19.5.0" - checksum: 10c0/7674b4b6887c09e84728b9fa9c986ab77db400bf53ec83aaae84e03e0f3ed33088d450d1f67135f0f7a4cbc1121181775199779e1ca162fe604c902987e3008f +"@commitlint/to-lines@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/to-lines@npm:19.8.0" + checksum: 10c0/1a0f34805615f244f34471138cfd5c8a45531ec3d1a0254370835db817dd06ec14181a8b281cd508632cf217d6cf5148473984bf4736d74b275fe69b8cd40863 languageName: node linkType: hard -"@commitlint/top-level@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/top-level@npm:19.5.0" +"@commitlint/top-level@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/top-level@npm:19.8.0" dependencies: find-up: "npm:^7.0.0" - checksum: 10c0/8c1edc513c8d6655606e52d160d31ccd4b13234400ca67d21782798ab66701780b1ec21a7bb411fe8270db7735f10d39d3b0a3e52f3ddd1109b80741eb512bb4 + checksum: 10c0/04d39835bfb8d9f86b693d8d13bfe7e6566d48ac57e382e5139277bb0e5fa286645fe220c323fcb8e6569eea48ab26253c0eb4f6a142855a3a7b7565891ead7c languageName: node linkType: hard -"@commitlint/types@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/types@npm:19.5.0" +"@commitlint/types@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/types@npm:19.8.0" dependencies: "@types/conventional-commits-parser": "npm:^5.0.0" chalk: "npm:^5.3.0" - checksum: 10c0/f4a93992f43b23cd5af200c69bb73227fdc0f78a6f7ebcda73dad10d558c1ac66ff164aa6dc3c2ddb322c9ed8b1a89b05f458e40d7c440a0358f435d2d71c2df + checksum: 10c0/634a5db20110675da8ddf226f200c33f262c6e99d06853fd4a2f6d543e6cc7dfe48b045f7ae76bcce2e39595099bfebe6a5dd6da37ff2968733c1263b8d46644 languageName: node linkType: hard @@ -1520,6 +1547,19 @@ __metadata: languageName: node linkType: hard +"@csstools/postcss-bundler@npm:^2.0.6": + version: 2.0.6 + resolution: "@csstools/postcss-bundler@npm:2.0.6" + dependencies: + "@csstools/css-parser-algorithms": "npm:^3.0.4" + "@csstools/css-tokenizer": "npm:^3.0.3" + "@csstools/postcss-rebase-url": "npm:^2.0.4" + peerDependencies: + postcss: ^8.4 + checksum: 10c0/ececf968f4054abf8fe5c5e9f7b8f667094d21db855c5a5d5f622ce39248272f1d03cd3002712b1ed676f577bea13504c953405c23a94e9e8c3b4fdf612434cc + languageName: node + linkType: hard + "@csstools/postcss-cascade-layers@npm:^5.0.1": version: 5.0.1 resolution: "@csstools/postcss-cascade-layers@npm:5.0.1" @@ -1831,6 +1871,18 @@ __metadata: languageName: node linkType: hard +"@csstools/postcss-rebase-url@npm:^2.0.4": + version: 2.0.4 + resolution: "@csstools/postcss-rebase-url@npm:2.0.4" + dependencies: + "@csstools/css-parser-algorithms": "npm:^3.0.4" + "@csstools/css-tokenizer": "npm:^3.0.3" + peerDependencies: + postcss: ^8.4 + checksum: 10c0/d8636656e1fc895433eb0db3c5beabb89f40db43a3b3ddbb4ebf399aa17a1e8c37384f28b9e7fd317f74eba8fcd2f6e6594f1c3f973c9f3d935f0d44ed14dbbc + languageName: node + linkType: hard + "@csstools/postcss-relative-color-syntax@npm:^3.0.8": version: 3.0.8 resolution: "@csstools/postcss-relative-color-syntax@npm:3.0.8" @@ -2350,10 +2402,10 @@ __metadata: languageName: node linkType: hard -"@eslint/js@npm:8.57.0": - version: 8.57.0 - resolution: "@eslint/js@npm:8.57.0" - checksum: 10c0/9a518bb8625ba3350613903a6d8c622352ab0c6557a59fe6ff6178bf882bf57123f9d92aa826ee8ac3ee74b9c6203fe630e9ee00efb03d753962dcf65ee4bd94 +"@eslint/js@npm:8.57.1": + version: 8.57.1 + resolution: "@eslint/js@npm:8.57.1" + checksum: 10c0/b489c474a3b5b54381c62e82b3f7f65f4b8a5eaaed126546520bf2fede5532a8ed53212919fed1e9048dcf7f37167c8561d58d0ba4492a4244004e7793805223 languageName: node linkType: hard @@ -2410,14 +2462,14 @@ __metadata: languageName: node linkType: hard -"@humanwhocodes/config-array@npm:^0.11.14": - version: 0.11.14 - resolution: "@humanwhocodes/config-array@npm:0.11.14" +"@humanwhocodes/config-array@npm:^0.13.0": + version: 0.13.0 + resolution: "@humanwhocodes/config-array@npm:0.13.0" dependencies: - "@humanwhocodes/object-schema": "npm:^2.0.2" + "@humanwhocodes/object-schema": "npm:^2.0.3" debug: "npm:^4.3.1" minimatch: "npm:^3.0.5" - checksum: 10c0/66f725b4ee5fdd8322c737cb5013e19fac72d4d69c8bf4b7feb192fcb83442b035b92186f8e9497c220e58b2d51a080f28a73f7899bc1ab288c3be172c467541 + checksum: 10c0/205c99e756b759f92e1f44a3dc6292b37db199beacba8f26c2165d4051fe73a4ae52fdcfd08ffa93e7e5cb63da7c88648f0e84e197d154bbbbe137b2e0dd332e languageName: node linkType: hard @@ -2428,7 +2480,7 @@ __metadata: languageName: node linkType: hard -"@humanwhocodes/object-schema@npm:^2.0.2": +"@humanwhocodes/object-schema@npm:^2.0.3": version: 2.0.3 resolution: "@humanwhocodes/object-schema@npm:2.0.3" checksum: 10c0/80520eabbfc2d32fe195a93557cef50dfe8c8905de447f022675aaf66abc33ae54098f5ea78548d925aa671cd4ab7c7daa5ad704fe42358c9b5e7db60f80696c @@ -3024,15 +3076,6 @@ __metadata: languageName: node linkType: hard -"@ljharb/through@npm:^2.3.13": - version: 2.3.13 - resolution: "@ljharb/through@npm:2.3.13" - dependencies: - call-bind: "npm:^1.0.7" - checksum: 10c0/fb60b2fb2c674a674d8ebdb8972ccf52f8a62a9c1f5a2ac42557bc0273231c65d642aa2d7627cbb300766a25ae4642acd0f95fba2f8a1ff891086f0cb15807c3 - languageName: node - linkType: hard - "@manypkg/find-root@npm:^1.1.0": version: 1.1.0 resolution: "@manypkg/find-root@npm:1.1.0" @@ -3177,32 +3220,32 @@ __metadata: languageName: node linkType: hard -"@nrwl/devkit@npm:19.8.2": - version: 19.8.2 - resolution: "@nrwl/devkit@npm:19.8.2" +"@nrwl/devkit@npm:19.8.14": + version: 19.8.14 + resolution: "@nrwl/devkit@npm:19.8.14" dependencies: - "@nx/devkit": "npm:19.8.2" - checksum: 10c0/031f0332788923370b6b41ebbd70a2a01daadeb7f39d5a5fa8894aad7a680baca610ee82e86b9c193e851ed8498e9b50c11795bd4bb3d6037ce18d1bde4cfac8 + "@nx/devkit": "npm:19.8.14" + checksum: 10c0/de398c1fbb53c4737ea3c8361a3c8a66442c24e3ec7fe366de66c5ede8009ff8975c037a3b6ba4784d3a223f0f4ee4f9b47faefa6ce1aa85c26822e7a17689da languageName: node linkType: hard -"@nrwl/tao@npm:19.8.2": - version: 19.8.2 - resolution: "@nrwl/tao@npm:19.8.2" +"@nrwl/tao@npm:19.8.14": + version: 19.8.14 + resolution: "@nrwl/tao@npm:19.8.14" dependencies: - nx: "npm:19.8.2" + nx: "npm:19.8.14" tslib: "npm:^2.3.0" bin: tao: index.js - checksum: 10c0/e85be912f2851750c012fed71c85f0362d466ff2752361ff0a8f91df275fb7d9d4499ba1083ffa28aabd6dcce2c225e704bdbe06f1a9b3f36b558dc31ffaa045 + checksum: 10c0/863a28ab4746f5999a8049d5b86e3d7412c17608135b84513f37997874611672b06c61c026b06cbaa12e37016986c90601d82e65efe34e828414c69b159c4457 languageName: node linkType: hard -"@nx/devkit@npm:19.8.2, @nx/devkit@npm:^19.8.2": - version: 19.8.2 - resolution: "@nx/devkit@npm:19.8.2" +"@nx/devkit@npm:19.8.14, @nx/devkit@npm:^19.8.14": + version: 19.8.14 + resolution: "@nx/devkit@npm:19.8.14" dependencies: - "@nrwl/devkit": "npm:19.8.2" + "@nrwl/devkit": "npm:19.8.14" ejs: "npm:^3.1.7" enquirer: "npm:~2.3.6" ignore: "npm:^5.0.4" @@ -3212,77 +3255,77 @@ __metadata: tslib: "npm:^2.3.0" yargs-parser: "npm:21.1.1" peerDependencies: - nx: ">= 17 <= 20" - checksum: 10c0/af26cce31e8e259a645d28bfb7399762001f25928eb004050dda96954827da6ceb58ac841a2815dc919f8c76bcc616c8a22acc7da5b91aa0b4a2ca5b3fdc5b12 + nx: ">= 19 <= 21" + checksum: 10c0/86de0ba41cd30c2c9ac20fa45d77e7f0f878d7df8423ac3905e6846211ae67b3f843987dec76e712e3e82c05af2e89fa6b1b9cab24675ab30221e678d05d1be7 languageName: node linkType: hard -"@nx/nx-darwin-arm64@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-darwin-arm64@npm:19.8.2" +"@nx/nx-darwin-arm64@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-darwin-arm64@npm:19.8.14" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@nx/nx-darwin-x64@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-darwin-x64@npm:19.8.2" +"@nx/nx-darwin-x64@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-darwin-x64@npm:19.8.14" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@nx/nx-freebsd-x64@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-freebsd-x64@npm:19.8.2" +"@nx/nx-freebsd-x64@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-freebsd-x64@npm:19.8.14" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard -"@nx/nx-linux-arm-gnueabihf@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-linux-arm-gnueabihf@npm:19.8.2" +"@nx/nx-linux-arm-gnueabihf@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-linux-arm-gnueabihf@npm:19.8.14" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@nx/nx-linux-arm64-gnu@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-linux-arm64-gnu@npm:19.8.2" +"@nx/nx-linux-arm64-gnu@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-linux-arm64-gnu@npm:19.8.14" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@nx/nx-linux-arm64-musl@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-linux-arm64-musl@npm:19.8.2" +"@nx/nx-linux-arm64-musl@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-linux-arm64-musl@npm:19.8.14" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@nx/nx-linux-x64-gnu@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-linux-x64-gnu@npm:19.8.2" +"@nx/nx-linux-x64-gnu@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-linux-x64-gnu@npm:19.8.14" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@nx/nx-linux-x64-musl@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-linux-x64-musl@npm:19.8.2" +"@nx/nx-linux-x64-musl@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-linux-x64-musl@npm:19.8.14" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@nx/nx-win32-arm64-msvc@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-win32-arm64-msvc@npm:19.8.2" +"@nx/nx-win32-arm64-msvc@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-win32-arm64-msvc@npm:19.8.14" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@nx/nx-win32-x64-msvc@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-win32-x64-msvc@npm:19.8.2" +"@nx/nx-win32-x64-msvc@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-win32-x64-msvc@npm:19.8.14" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -3572,7 +3615,7 @@ __metadata: languageName: node linkType: hard -"@protobuf-ts/plugin-framework@npm:^2.0.7, @protobuf-ts/plugin-framework@npm:^2.9.4": +"@protobuf-ts/plugin-framework@npm:^2.9.4": version: 2.9.4 resolution: "@protobuf-ts/plugin-framework@npm:2.9.4" dependencies: @@ -4741,7 +4784,7 @@ __metadata: resolution: "@spectrum-css/generator@workspace:tools/generator" dependencies: fuzzy: "npm:^0.1.3" - inquirer: "npm:^9.2.23" + inquirer: "npm:^9.3.7" inquirer-autocomplete-prompt: "npm:^3.0.1" plop: "npm:^4.0.1" languageName: unknown @@ -5097,12 +5140,11 @@ __metadata: resolution: "@spectrum-css/preview@workspace:.storybook" dependencies: "@adobe/spectrum-css-workflow-icons": "npm:^1.5.4" - "@babel/core": "npm:^7.26.0" - "@chromatic-com/storybook": "npm:^3.2.3" + "@babel/core": "npm:^7.26.9" + "@chromatic-com/storybook": "npm:^3.2.5" "@etchteam/storybook-addon-status": "npm:^5.0.0" "@spectrum-css/bundle": "npm:1.0.1" "@spectrum-css/tokens": "npm:16.0.1" - "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.0.0" "@spectrum-css/ui-icons": "npm:1.1.2" "@storybook/addon-a11y": "npm:8.4.7" "@storybook/addon-actions": "npm:8.4.7" @@ -5120,7 +5162,7 @@ __metadata: "@storybook/theming": "npm:8.4.7" "@storybook/web-components-vite": "npm:8.4.7" "@whitespace/storybook-addon-html": "npm:^6.1.1" - chromatic: "npm:^11.22.2" + chromatic: "npm:^11.27.0" lit: "npm:^3.2.1" lodash-es: "npm:^4.17.21" npm-registry-fetch: "npm:^18.0.2" @@ -5129,7 +5171,7 @@ __metadata: react: "npm:^18.3.1" react-dom: "npm:^18.3.1" react-syntax-highlighter: "npm:^15.6.1" - remark-gfm: "npm:^4.0.0" + remark-gfm: "npm:^4.0.1" rollup-plugin-postcss-lit: "npm:^2.1.0" storybook: "npm:8.4.7" vite: "npm:^5.4.11" @@ -5537,18 +5579,11 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tokens-legacy@npm:@spectrum-css/tokens@^15.0.0": - version: 15.2.0 - resolution: "@spectrum-css/tokens@npm:15.2.0" - checksum: 10c0/dd8d1dd39fc72d57bc12e183b3fda7654a7ebf90902267e8c4145d54b09eecfc150f09c92ec837b6c501c0c9da573e2d9b0bc3745c7c8981c3a39ee03367fc24 - languageName: node - linkType: hard - "@spectrum-css/tokens@npm:16.0.1, @spectrum-css/tokens@workspace:tokens": version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:0.0.0-s2-foundations-20241121221506" + "@adobe/spectrum-tokens": "npm:13.0.0-beta.57" "@adobe/token-diff-generator": "npm:^1.3.0" "@spectrum-tools/postcss-rgb-mapping": "npm:1.1.0" deepmerge: "npm:^4.3.1" @@ -5686,7 +5721,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-tools/gh-action-file-diff@workspace:.github/actions/file-diff" dependencies: - "@actions/artifact": "npm:^2.2.1" + "@actions/artifact": "npm:^2.3.1" "@actions/core": "npm:^1.11.1" "@actions/github": "npm:^6.0.0" "@actions/glob": "npm:^0.5.0" @@ -5695,32 +5730,6 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-tools/postcss-add-theming-layer@npm:1.0.2, @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.2.0" - c8: "npm:^10.1.3" - postcss: "npm:^8.5.3" - postcss-selector-parser: "npm:^6.1.2" - postcss-values-parser: "npm:^6.0.2" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - -"@spectrum-tools/postcss-property-rollup@npm:0.0.1, @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.2.0" - c8: "npm:^10.1.3" - postcss: "npm:^8.5.3" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - "@spectrum-tools/postcss-rgb-mapping@npm:1.1.0, @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" @@ -5778,19 +5787,6 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-tools/stylelint-theme-alignment@workspace:plugins/stylelint-theme-alignment": - version: 0.0.0-use.local - resolution: "@spectrum-tools/stylelint-theme-alignment@workspace:plugins/stylelint-theme-alignment" - dependencies: - colors: "npm:^1.4.0" - postcss: "npm:^8.5.3" - postcss-values-parser: "npm:^6.0.2" - stylelint: "npm:^16.18.0" - peerDependencies: - stylelint: ">=16" - languageName: unknown - linkType: soft - "@storybook/addon-a11y@npm:8.4.7": version: 8.4.7 resolution: "@storybook/addon-a11y@npm:8.4.7" @@ -6804,12 +6800,12 @@ __metadata: languageName: node linkType: hard -"@yarnpkg/types@npm:^4.0.0": - version: 4.0.0 - resolution: "@yarnpkg/types@npm:4.0.0" +"@yarnpkg/types@npm:^4.0.1": + version: 4.0.1 + resolution: "@yarnpkg/types@npm:4.0.1" dependencies: tslib: "npm:^2.4.0" - checksum: 10c0/41f67a4aa5c414c1e228f51453451fa15e0dd70c5cf2b1ae1ca142a3f018f25e4a37e60372cd0f5970c755e1804a2e31e208bff427add1cf13f899b0b9adc1e0 + checksum: 10c0/90226789475680ba599833571dd76c0718dd5b4c5022481263ef309d6a628f6246671cd6ca86e49c966ddefa7aca6ccef82240dc1476d2cea702ea5bee2a6b72 languageName: node linkType: hard @@ -8226,7 +8222,7 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^5.2.0, chalk@npm:~5.4.1": +"chalk@npm:^5.2.0, chalk@npm:^5.4.1": version: 5.4.1 resolution: "chalk@npm:5.4.1" checksum: 10c0/b23e88132c702f4855ca6d25cb5538b1114343e41472d5263ee8a37cccfccd9c4216d111e1097c6a27830407a1dc81fecdf2a56f2c63033d4dbbd88c10b0dcef @@ -8427,7 +8423,7 @@ __metadata: languageName: node linkType: hard -"chromatic@npm:^11.15.0": +"chromatic@npm:^11.15.0, chromatic@npm:^11.27.0": version: 11.27.0 resolution: "chromatic@npm:11.27.0" peerDependencies: @@ -8446,25 +8442,6 @@ __metadata: languageName: node linkType: hard -"chromatic@npm:^11.22.2": - version: 11.22.2 - resolution: "chromatic@npm:11.22.2" - peerDependencies: - "@chromatic-com/cypress": ^0.*.* || ^1.0.0 - "@chromatic-com/playwright": ^0.*.* || ^1.0.0 - peerDependenciesMeta: - "@chromatic-com/cypress": - optional: true - "@chromatic-com/playwright": - optional: true - bin: - chroma: dist/bin.js - chromatic: dist/bin.js - chromatic-cli: dist/bin.js - checksum: 10c0/29b9afa333e83a1e04434030a948cb175c22de8b5908915d0507644aeaa3a5fe127ef7e5d0da6c53f48cc3d3d615325ff53da09cc471567b48187bf6336a68f9 - languageName: node - linkType: hard - "chunkd@npm:^2.0.1": version: 2.0.1 resolution: "chunkd@npm:2.0.1" @@ -8731,14 +8708,14 @@ __metadata: languageName: node linkType: hard -"commander@npm:, commander@npm:~13.1.0": +"commander@npm:, commander@npm:^13.1.0, commander@npm:~13.1.0": version: 13.1.0 resolution: "commander@npm:13.1.0" checksum: 10c0/7b8c5544bba704fbe84b7cab2e043df8586d5c114a4c5b607f83ae5060708940ed0b5bd5838cf8ce27539cde265c1cbd59ce3c8c6b017ed3eec8943e3a415164 languageName: node linkType: hard -"commander@npm:^12.1.0, commander@npm:~12.1.0": +"commander@npm:^12.1.0": version: 12.1.0 resolution: "commander@npm:12.1.0" checksum: 10c0/6e1996680c083b3b897bfc1cfe1c58dfbcd9842fd43e1aaf8a795fbc237f65efcc860a3ef457b318e73f29a4f4a28f6403c3d653d021d960e4632dd45bde54a9 @@ -8773,13 +8750,6 @@ __metadata: languageName: node linkType: hard -"commander@npm:^6.1.0": - version: 6.2.1 - resolution: "commander@npm:6.2.1" - checksum: 10c0/85748abd9d18c8bc88febed58b98f66b7c591d9b5017cad459565761d7b29ca13b7783ea2ee5ce84bf235897333706c4ce29adf1ce15c8252780e7000e2ce9ea - languageName: node - linkType: hard - "commander@npm:^7.2.0": version: 7.2.0 resolution: "commander@npm:7.2.0" @@ -9422,7 +9392,7 @@ __metadata: languageName: node linkType: hard -"debug@npm:^4.0.0, debug@npm:^4.1.1, debug@npm:^4.3.7, debug@npm:~4.4.0": +"debug@npm:^4.0.0, debug@npm:^4.1.1, debug@npm:^4.3.7, debug@npm:^4.4.0": version: 4.4.0 resolution: "debug@npm:4.4.0" dependencies: @@ -9833,18 +9803,6 @@ __metadata: languageName: node linkType: hard -"dot-object@npm:^2.1.4": - version: 2.1.5 - resolution: "dot-object@npm:2.1.5" - dependencies: - commander: "npm:^6.1.0" - glob: "npm:^7.1.6" - bin: - dot-object: bin/dot-object - checksum: 10c0/5a9cc1ec156bb3d1363b76946bb84ac062317ceffab52aecb6a751eb13cf2387dbf09fcbe243e4bf16dc47b7531331b25de604729daa5e6bbf105a8ce87418f2 - languageName: node - linkType: hard - "dot-prop@npm:^5.1.0": version: 5.3.0 resolution: "dot-prop@npm:5.3.0" @@ -10476,9 +10434,9 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-jsonc@npm:^2.18.2": - version: 2.18.2 - resolution: "eslint-plugin-jsonc@npm:2.18.2" +"eslint-plugin-jsonc@npm:^2.19.1": + version: 2.19.1 + resolution: "eslint-plugin-jsonc@npm:2.19.1" dependencies: "@eslint-community/eslint-utils": "npm:^4.2.0" eslint-compat-utils: "npm:^0.6.0" @@ -10490,13 +10448,13 @@ __metadata: synckit: "npm:^0.6.0" peerDependencies: eslint: ">=6.0.0" - checksum: 10c0/5ba6fa7f5320838066e0a55d6b5b4e1fa5f244b76593be76e60a5e7153bc6c7b05c8faa38873a663acdc7efc892589f1285f367765b4c8934a941324c14dc107 + checksum: 10c0/256751242bbd1518871cd50a10daa0cf205498b509c3bf99f887a444cbab93adaa3dbf89c8d6e2aeb0707400365d8c7c59bbdb2fa3e53e586b1f4bc583d01473 languageName: node linkType: hard -"eslint-plugin-prettier@npm:^5.1.3": - version: 5.2.1 - resolution: "eslint-plugin-prettier@npm:5.2.1" +"eslint-plugin-prettier@npm:^5.2.3": + version: 5.2.3 + resolution: "eslint-plugin-prettier@npm:5.2.3" dependencies: prettier-linter-helpers: "npm:^1.0.0" synckit: "npm:^0.9.1" @@ -10510,7 +10468,7 @@ __metadata: optional: true eslint-config-prettier: optional: true - checksum: 10c0/4bc8bbaf5bb556c9c501dcdff369137763c49ccaf544f9fa91400360ed5e3a3f1234ab59690e06beca5b1b7e6f6356978cdd3b02af6aba3edea2ffe69ca6e8b2 + checksum: 10c0/60d9c03491ec6080ac1d71d0bee1361539ff6beb9b91ac98cfa7176c9ed52b7dbe7119ebee5b441b479d447d17d802a4a492ee06095ef2f22c460e3dd6459302 languageName: node linkType: hard @@ -10531,15 +10489,15 @@ __metadata: languageName: node linkType: hard -"eslint@npm:^8.57.0": - version: 8.57.0 - resolution: "eslint@npm:8.57.0" +"eslint@npm:^8.57.1": + version: 8.57.1 + resolution: "eslint@npm:8.57.1" dependencies: "@eslint-community/eslint-utils": "npm:^4.2.0" "@eslint-community/regexpp": "npm:^4.6.1" "@eslint/eslintrc": "npm:^2.1.4" - "@eslint/js": "npm:8.57.0" - "@humanwhocodes/config-array": "npm:^0.11.14" + "@eslint/js": "npm:8.57.1" + "@humanwhocodes/config-array": "npm:^0.13.0" "@humanwhocodes/module-importer": "npm:^1.0.1" "@nodelib/fs.walk": "npm:^1.2.8" "@ungap/structured-clone": "npm:^1.2.0" @@ -10575,7 +10533,7 @@ __metadata: text-table: "npm:^0.2.0" bin: eslint: bin/eslint.js - checksum: 10c0/00bb96fd2471039a312435a6776fe1fd557c056755eaa2b96093ef3a8508c92c8775d5f754768be6b1dddd09fdd3379ddb231eeb9b6c579ee17ea7d68000a529 + checksum: 10c0/1fd31533086c1b72f86770a4d9d7058ee8b4643fd1cfd10c7aac1ecb8725698e88352a87805cf4b2ce890aa35947df4b4da9655fb7fdfa60dbb448a43f6ebcf1 languageName: node linkType: hard @@ -10686,7 +10644,7 @@ __metadata: languageName: node linkType: hard -"execa@npm:~8.0.1": +"execa@npm:^8.0.1": version: 8.0.1 resolution: "execa@npm:8.0.1" dependencies: @@ -12149,10 +12107,12 @@ __metadata: languageName: node linkType: hard -"human-id@npm:^1.0.2": - version: 1.0.2 - resolution: "human-id@npm:1.0.2" - checksum: 10c0/e4c3be49b3927ff8ac54ae4a95ed77ad94fd793b57be51aff39aa81931c6efe56303ce1ec76a70c74f85748644207c89ccfa63d828def1313eff7526a14c3b3b +"human-id@npm:^4.1.1": + version: 4.1.1 + resolution: "human-id@npm:4.1.1" + bin: + human-id: dist/cli.js + checksum: 10c0/9a9a18130fb7d6bc707054bacc32cb328289be0de47ba5669fd04995435e7e59931b87c644a223d68473c450221d104175a5fefe93d77f3522822ead8945def8 languageName: node linkType: hard @@ -12368,7 +12328,7 @@ __metadata: languageName: node linkType: hard -"inquirer@npm:^9.2.10": +"inquirer@npm:^9.2.10, inquirer@npm:^9.3.7": version: 9.3.7 resolution: "inquirer@npm:9.3.7" dependencies: @@ -12388,29 +12348,6 @@ __metadata: languageName: node linkType: hard -"inquirer@npm:^9.2.23": - version: 9.2.23 - resolution: "inquirer@npm:9.2.23" - dependencies: - "@inquirer/figures": "npm:^1.0.3" - "@ljharb/through": "npm:^2.3.13" - ansi-escapes: "npm:^4.3.2" - chalk: "npm:^5.3.0" - cli-cursor: "npm:^3.1.0" - cli-width: "npm:^4.1.0" - external-editor: "npm:^3.1.0" - lodash: "npm:^4.17.21" - mute-stream: "npm:1.0.0" - ora: "npm:^5.4.1" - run-async: "npm:^3.0.0" - rxjs: "npm:^7.8.1" - string-width: "npm:^4.2.3" - strip-ansi: "npm:^6.0.1" - wrap-ansi: "npm:^6.2.0" - checksum: 10c0/6adf3a6a9c666ff2baf3e8aef841f3ae266506cf0256ef445de5ec9a456aec8d6ff38180cc436ad3f9045cbb018d11dca98ed3570c28fbf8a857f1e4712eddc7 - languageName: node - linkType: hard - "internal-slot@npm:^1.1.0": version: 1.1.0 resolution: "internal-slot@npm:1.1.0" @@ -14097,7 +14034,7 @@ __metadata: languageName: node linkType: hard -"lilconfig@npm:^3.1.1, lilconfig@npm:^3.1.2, lilconfig@npm:~3.1.3": +"lilconfig@npm:^3.1.1, lilconfig@npm:^3.1.2, lilconfig@npm:^3.1.3": version: 3.1.3 resolution: "lilconfig@npm:3.1.3" checksum: 10c0/f5604e7240c5c275743561442fbc5abf2a84ad94da0f5adc71d25e31fa8483048de3dcedcb7a44112a942fed305fd75841cdf6c9681c7f640c63f1049e9a5dcc @@ -14127,27 +14064,27 @@ __metadata: languageName: node linkType: hard -"lint-staged@npm:^15.3.0": - version: 15.3.0 - resolution: "lint-staged@npm:15.3.0" +"lint-staged@npm:^15.4.3": + version: 15.4.3 + resolution: "lint-staged@npm:15.4.3" dependencies: - chalk: "npm:~5.4.1" - commander: "npm:~12.1.0" - debug: "npm:~4.4.0" - execa: "npm:~8.0.1" - lilconfig: "npm:~3.1.3" - listr2: "npm:~8.2.5" - micromatch: "npm:~4.0.8" - pidtree: "npm:~0.6.0" - string-argv: "npm:~0.3.2" - yaml: "npm:~2.6.1" + chalk: "npm:^5.4.1" + commander: "npm:^13.1.0" + debug: "npm:^4.4.0" + execa: "npm:^8.0.1" + lilconfig: "npm:^3.1.3" + listr2: "npm:^8.2.5" + micromatch: "npm:^4.0.8" + pidtree: "npm:^0.6.0" + string-argv: "npm:^0.3.2" + yaml: "npm:^2.7.0" bin: lint-staged: bin/lint-staged.js - checksum: 10c0/1ddf9488c523c0b65c85b755428d4ad74fac3aa6ccb2e28e9bff5b8d86503158fe241d20d5433a11146872050b43580644901a5ef4c924b1ad7017c224a07339 + checksum: 10c0/c1f71f2273bcbd992af929620f5acc6b9f6899da4b395e780e0b3ab33a0d725c239eb961873067c8c842e057c585c71dd4d44c0dc8b25539d3c2e97a3bdd6f30 languageName: node linkType: hard -"listr2@npm:~8.2.5": +"listr2@npm:^8.2.5": version: 8.2.5 resolution: "listr2@npm:8.2.5" dependencies: @@ -15361,7 +15298,7 @@ __metadata: languageName: node linkType: hard -"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.8, micromatch@npm:~4.0.8": +"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.8": version: 4.0.8 resolution: "micromatch@npm:4.0.8" dependencies: @@ -15784,9 +15721,9 @@ __metadata: languageName: node linkType: hard -"node-gyp@npm:^10.1.0": - version: 10.2.0 - resolution: "node-gyp@npm:10.2.0" +"node-gyp@npm:^10.3.1": + version: 10.3.1 + resolution: "node-gyp@npm:10.3.1" dependencies: env-paths: "npm:^2.2.0" exponential-backoff: "npm:^3.1.1" @@ -15800,7 +15737,7 @@ __metadata: which: "npm:^4.0.0" bin: node-gyp: bin/node-gyp.js - checksum: 10c0/00630d67dbd09a45aee0a5d55c05e3916ca9e6d427ee4f7bc392d2d3dc5fad7449b21fc098dd38260a53d9dcc9c879b36704a1994235d4707e7271af7e9a835b + checksum: 10c0/87c3b50e1f6f5256b5d2879a8c064eefa53ed444bad2a20870be43bc189db7cbffe22c30af056046c6d904181d73881b1726fd391d2f6f79f89b991019f195ea languageName: node linkType: hard @@ -16009,22 +15946,22 @@ __metadata: languageName: node linkType: hard -"nx@npm:19.8.2, nx@npm:^19.8.2": - version: 19.8.2 - resolution: "nx@npm:19.8.2" +"nx@npm:19.8.14, nx@npm:^19.8.14": + version: 19.8.14 + resolution: "nx@npm:19.8.14" dependencies: "@napi-rs/wasm-runtime": "npm:0.2.4" - "@nrwl/tao": "npm:19.8.2" - "@nx/nx-darwin-arm64": "npm:19.8.2" - "@nx/nx-darwin-x64": "npm:19.8.2" - "@nx/nx-freebsd-x64": "npm:19.8.2" - "@nx/nx-linux-arm-gnueabihf": "npm:19.8.2" - "@nx/nx-linux-arm64-gnu": "npm:19.8.2" - "@nx/nx-linux-arm64-musl": "npm:19.8.2" - "@nx/nx-linux-x64-gnu": "npm:19.8.2" - "@nx/nx-linux-x64-musl": "npm:19.8.2" - "@nx/nx-win32-arm64-msvc": "npm:19.8.2" - "@nx/nx-win32-x64-msvc": "npm:19.8.2" + "@nrwl/tao": "npm:19.8.14" + "@nx/nx-darwin-arm64": "npm:19.8.14" + "@nx/nx-darwin-x64": "npm:19.8.14" + "@nx/nx-freebsd-x64": "npm:19.8.14" + "@nx/nx-linux-arm-gnueabihf": "npm:19.8.14" + "@nx/nx-linux-arm64-gnu": "npm:19.8.14" + "@nx/nx-linux-arm64-musl": "npm:19.8.14" + "@nx/nx-linux-x64-gnu": "npm:19.8.14" + "@nx/nx-linux-x64-musl": "npm:19.8.14" + "@nx/nx-win32-arm64-msvc": "npm:19.8.14" + "@nx/nx-win32-x64-msvc": "npm:19.8.14" "@yarnpkg/lockfile": "npm:^1.1.0" "@yarnpkg/parsers": "npm:3.0.0-rc.46" "@zkochan/js-yaml": "npm:0.0.7" @@ -16089,7 +16026,7 @@ __metadata: bin: nx: bin/nx.js nx-cloud: bin/nx-cloud.js - checksum: 10c0/c6c48a30b7981bd6088f5b8317a249e05e837514f6ba4b7eb49055133f368ded77e23931fc22f72f3480635d6e939ac4ff827d4e08d973e34076fef2905c2bed + checksum: 10c0/3bc8b33b341054875a9ddbd9da63d001504948e1e4c7e707c138c939c52ea0269d6bc436aa3b9cf66c315177c626974d8f9322d19a5c1deceb4aa6faaaf67309 languageName: node linkType: hard @@ -16798,13 +16735,6 @@ __metadata: languageName: node linkType: hard -"path-to-regexp@npm:^6.2.0": - version: 6.3.0 - resolution: "path-to-regexp@npm:6.3.0" - checksum: 10c0/73b67f4638b41cde56254e6354e46ae3a2ebc08279583f6af3d96fe4664fc75788f74ed0d18ca44fa4a98491b69434f9eee73b97bb5314bd1b5adb700f5c18d6 - languageName: node - linkType: hard - "path-type@npm:^4.0.0": version: 4.0.0 resolution: "path-type@npm:4.0.0" @@ -16878,7 +16808,7 @@ __metadata: languageName: node linkType: hard -"pidtree@npm:~0.6.0": +"pidtree@npm:^0.6.0": version: 0.6.0 resolution: "pidtree@npm:0.6.0" bin: @@ -18031,7 +17961,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:^2.5.1, prettier@npm:^2.7.1": +"prettier@npm:^2.7.1": version: 2.8.8 resolution: "prettier@npm:2.8.8" bin: @@ -18470,9 +18400,9 @@ __metadata: languageName: node linkType: hard -"remark-gfm@npm:^4.0.0": - version: 4.0.0 - resolution: "remark-gfm@npm:4.0.0" +"remark-gfm@npm:^4.0.1": + version: 4.0.1 + resolution: "remark-gfm@npm:4.0.1" dependencies: "@types/mdast": "npm:^4.0.0" mdast-util-gfm: "npm:^3.0.0" @@ -18480,7 +18410,7 @@ __metadata: remark-parse: "npm:^11.0.0" remark-stringify: "npm:^11.0.0" unified: "npm:^11.0.0" - checksum: 10c0/db0aa85ab718d475c2596e27c95be9255d3b0fc730a4eda9af076b919f7dd812f7be3ac020611a8dbe5253fd29671d7b12750b56e529fdc32dfebad6dbf77403 + checksum: 10c0/427ecc6af3e76222662061a5f670a3e4e33ec5fffe2cabf04034da6a3f9a1bda1fc023e838a636385ba314e66e2bebbf017ca61ebea357eb0f5200fe0625a4b7 languageName: node linkType: hard @@ -19424,7 +19354,7 @@ __metadata: languageName: node linkType: hard -"string-argv@npm:~0.3.2": +"string-argv@npm:^0.3.2": version: 0.3.2 resolution: "string-argv@npm:0.3.2" checksum: 10c0/75c02a83759ad1722e040b86823909d9a2fc75d15dd71ec4b537c3560746e33b5f5a07f7332d1e3f88319909f82190843aa2f0a0d8c8d591ec08e93d5b8dec82 @@ -20296,16 +20226,6 @@ __metadata: languageName: node linkType: hard -"ts-poet@npm:^4.5.0": - version: 4.15.0 - resolution: "ts-poet@npm:4.15.0" - dependencies: - lodash: "npm:^4.17.15" - prettier: "npm:^2.5.1" - checksum: 10c0/87ce3589f071a66a9701c88ee830ce778f2e4c43bcfdee9308a8f38bb53b8fb36e7b5900749389b4bb8aaddf67e87043d51c2fbf36ec25aa98bcfff90bf6d742 - languageName: node - linkType: hard - "tsconfig-paths@npm:^4.1.2": version: 4.2.0 resolution: "tsconfig-paths@npm:4.2.0" @@ -20345,30 +20265,6 @@ __metadata: languageName: node linkType: hard -"twirp-ts@npm:^2.5.0": - version: 2.5.0 - resolution: "twirp-ts@npm:2.5.0" - dependencies: - "@protobuf-ts/plugin-framework": "npm:^2.0.7" - camel-case: "npm:^4.1.2" - dot-object: "npm:^2.1.4" - path-to-regexp: "npm:^6.2.0" - ts-poet: "npm:^4.5.0" - yaml: "npm:^1.10.2" - peerDependencies: - "@protobuf-ts/plugin": ^2.5.0 - ts-proto: ^1.81.3 - peerDependenciesMeta: - "@protobuf-ts/plugin": - optional: true - ts-proto: - optional: true - bin: - protoc-gen-twirp_ts: protoc-gen-twirp_ts - checksum: 10c0/046ef483420105e92bb8429931e754d7046516fd4fc4f5eeeacbf57dd26ec06ab9c69eba934e587e525f24f49177b03667d18dea78741c408b3e69e1c9774bbd - languageName: node - linkType: hard - "type-check@npm:^0.4.0, type-check@npm:~0.4.0": version: 0.4.0 resolution: "type-check@npm:0.4.0" @@ -21384,14 +21280,7 @@ __metadata: languageName: node linkType: hard -"yaml@npm:^1.10.2": - version: 1.10.2 - resolution: "yaml@npm:1.10.2" - checksum: 10c0/5c28b9eb7adc46544f28d9a8d20c5b3cb1215a886609a2fd41f51628d8aaa5878ccd628b755dbcd29f6bb4921bd04ffbc6dcc370689bb96e594e2f9813d2605f - languageName: node - linkType: hard - -"yaml@npm:^2.2.2": +"yaml@npm:^2.2.2, yaml@npm:^2.7.0": version: 2.7.0 resolution: "yaml@npm:2.7.0" bin: @@ -21400,15 +21289,6 @@ __metadata: languageName: node linkType: hard -"yaml@npm:~2.6.1": - version: 2.6.1 - resolution: "yaml@npm:2.6.1" - bin: - yaml: bin.mjs - checksum: 10c0/aebf07f61c72b38c74d2b60c3a3ccf89ee4da45bcd94b2bfb7899ba07a5257625a7c9f717c65a6fc511563d48001e01deb1d9e55f0133f3e2edf86039c8c1be7 - languageName: node - linkType: hard - "yargs-parser@npm:21.1.1, yargs-parser@npm:^21.1.1": version: 21.1.1 resolution: "yargs-parser@npm:21.1.1" From f8b0fe509572a4b47b8d03a9bfa7bd9771e2a924 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Tue, 11 Mar 2025 13:31:37 -0400 Subject: [PATCH 2/2] chore: update token path in Storybook --- .storybook/decorators/context.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index 03706e1572..cc147ee10c 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -1,7 +1,7 @@ import { makeDecorator, useEffect } from "@storybook/preview-api"; import { fetchContainers, toggleStyles } from "./helpers.js"; -import tokens from "@spectrum-css/tokens/dist/index.css?inline"; +import tokens from "@spectrum-css/tokens/dist/css/index.css?inline"; /** * @type import('@storybook/csf').DecoratorFunction