From 2163ef2d824878eacf68be1658f7d616930d1cf0 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 29 Aug 2025 15:11:08 -0400 Subject: [PATCH 1/2] feat: remove modifiers from the API --- .storybook/blocks/ColorPalette.jsx | 2 +- .storybook/blocks/PropertiesTable.jsx | 21 +- .storybook/foundations/drop-shadow/index.css | 81 ++-- .storybook/guides/releasing.mdx | 2 +- components/accordion/dist/metadata.json | 49 -- components/accordion/index.css | 107 +++-- .../accordion/stories/accordion.stories.js | 2 +- components/actionbar/dist/metadata.json | 26 +- components/actionbar/index.css | 33 +- .../actionbar/stories/actionbar.stories.js | 2 +- components/actionbutton/dist/metadata.json | 52 +-- components/actionbutton/index.css | 106 ++--- components/actiongroup/dist/metadata.json | 13 +- components/actiongroup/index.css | 66 +-- components/alertbanner/dist/metadata.json | 44 +- components/alertbanner/index.css | 58 +-- components/alertbanner/stories/template.js | 2 +- components/alertdialog/dist/metadata.json | 33 +- components/alertdialog/index.css | 62 +-- .../stories/alertdialog.stories.js | 2 +- components/asset/dist/metadata.json | 15 +- components/asset/index.css | 17 +- components/assetcard/dist/metadata.json | 49 -- components/assetcard/index.css | 118 ++--- components/assetlist/dist/metadata.json | 22 - components/assetlist/index.css | 46 +- components/avatar/dist/metadata.json | 10 - components/avatar/index.css | 30 +- components/badge/dist/metadata.json | 77 ---- components/badge/index.css | 163 ++++--- components/breadcrumb/dist/metadata.json | 39 +- components/breadcrumb/index.css | 82 ++-- components/button/dist/metadata.json | 59 +-- components/button/index.css | 142 +++--- components/buttongroup/dist/metadata.json | 8 +- components/buttongroup/index.css | 13 +- components/calendar/dist/metadata.json | 60 +-- components/calendar/index.css | 194 ++++---- components/calendar/stories/template.js | 2 +- components/card/dist/metadata.json | 57 --- components/card/index.css | 128 +++--- components/checkbox/dist/metadata.json | 33 -- components/checkbox/index.css | 96 ++-- components/clearbutton/dist/metadata.json | 15 - components/clearbutton/index.css | 32 +- components/closebutton/dist/metadata.json | 26 +- components/closebutton/index.css | 54 +-- components/coachindicator/dist/metadata.json | 21 - components/coachindicator/index.css | 38 +- components/coachmark/dist/metadata.json | 48 +- components/coachmark/index.css | 82 ++-- .../coachmark/stories/coachmark.stories.js | 4 +- components/coachmark/stories/template.js | 6 +- components/colorarea/dist/metadata.json | 10 - components/colorarea/index.css | 20 +- components/colorarea/stories/template.js | 6 +- components/colorhandle/dist/metadata.json | 21 +- components/colorhandle/index.css | 42 +- components/colorloupe/dist/metadata.json | 14 +- components/colorloupe/index.css | 18 +- components/colorslider/dist/metadata.json | 18 +- components/colorslider/index.css | 26 +- components/colorwheel/dist/metadata.json | 15 +- components/colorwheel/index.css | 45 +- .../colorwheel/stories/colorwheel.stories.js | 20 +- .../colorwheel/stories/colorwheel.test.js | 8 +- components/colorwheel/stories/template.js | 4 +- components/combobox/dist/metadata.json | 130 ++---- components/combobox/index.css | 188 ++++---- components/contextualhelp/dist/metadata.json | 26 +- components/contextualhelp/index.css | 42 +- .../stories/contextualhelp.stories.js | 2 +- components/datepicker/dist/metadata.json | 56 +-- components/datepicker/index.css | 100 ++--- components/datepicker/stories/template.js | 2 +- components/dial/dist/metadata.json | 33 -- components/dial/index.css | 104 ++--- components/dialog/dist/metadata.json | 34 +- components/dialog/index.css | 112 ++--- components/dialog/stories/dialog.stories.js | 2 +- components/divider/dist/metadata.json | 14 +- components/divider/index.css | 22 +- components/dropindicator/dist/metadata.json | 8 +- components/dropindicator/index.css | 47 +- components/dropzone/dist/metadata.json | 50 +-- components/dropzone/index.css | 76 ++-- components/fieldgroup/dist/metadata.json | 1 - components/fieldlabel/dist/metadata.json | 17 +- components/fieldlabel/index.css | 28 +- .../floatingactionbutton/dist/metadata.json | 35 +- components/floatingactionbutton/index.css | 88 ++-- components/form/dist/metadata.json | 11 +- components/form/index.css | 16 +- components/helptext/dist/metadata.json | 24 +- components/helptext/index.css | 53 +-- .../helptext/stories/helptext.stories.js | 2 +- components/helptext/stories/template.js | 2 +- components/icon/dist/metadata.json | 7 +- components/icon/icons.css | 15 +- components/icon/stories/icon.test.js | 4 +- .../illustratedmessage/dist/metadata.json | 38 +- components/illustratedmessage/index.css | 58 +-- components/infieldbutton/dist/metadata.json | 27 +- components/infieldbutton/index.css | 54 +-- .../infieldprogresscircle/dist/metadata.json | 10 +- components/infieldprogresscircle/index.css | 10 +- components/inlinealert/dist/metadata.json | 33 +- components/inlinealert/index.css | 69 +-- components/link/dist/metadata.json | 24 +- components/link/index.css | 53 ++- components/logicbutton/dist/metadata.json | 39 +- components/logicbutton/index.css | 76 ++-- components/menu/dist/metadata.json | 108 +---- components/menu/index.css | 280 ++++++------ components/meter/dist/metadata.json | 16 +- components/meter/index.css | 20 +- components/meter/stories/meter.test.js | 2 +- components/miller/dist/metadata.json | 8 +- components/miller/index.css | 10 +- components/modal/dist/metadata.json | 12 - components/modal/index.css | 22 +- components/modal/stories/modal.stories.js | 2 +- .../opacitycheckerboard/dist/metadata.json | 6 - components/opacitycheckerboard/index.css | 10 +- .../stories/opacitycheckerboard.stories.js | 4 +- .../opacitycheckerboard/stories/template.js | 2 +- components/page/dist/metadata.json | 1 - components/page/index.css | 4 +- components/pagination/dist/metadata.json | 13 +- components/pagination/index.css | 12 +- components/picker/dist/metadata.json | 68 +-- components/picker/index.css | 160 +++---- components/picker/stories/template.js | 2 +- components/pickerbutton/dist/metadata.json | 24 - components/pickerbutton/index.css | 44 +- .../stories/pickerbutton.stories.js | 4 +- .../pickerbutton/stories/pickerbutton.test.js | 2 +- components/popover/dist/metadata.json | 19 - components/popover/index.css | 80 ++-- components/popover/stories/popover.stories.js | 4 +- components/popover/stories/template.js | 6 +- components/progressbar/dist/metadata.json | 23 - components/progressbar/index.css | 54 +-- .../stories/progressbar.stories.js | 4 +- .../progressbar/stories/progressbar.test.js | 4 +- components/progressbar/stories/template.js | 4 +- components/progresscircle/dist/metadata.json | 8 +- components/progresscircle/index.css | 18 +- components/radio/dist/metadata.json | 32 -- components/radio/index.css | 82 ++-- components/rating/dist/metadata.json | 23 - components/rating/index.css | 74 ++-- components/rating/stories/rating.stories.js | 6 +- components/search/dist/metadata.json | 84 +--- components/search/index.css | 110 ++--- components/sidenav/dist/metadata.json | 56 --- components/sidenav/index.css | 112 ++--- components/slider/dist/metadata.json | 67 +-- components/slider/index.css | 230 +++++----- components/splitview/dist/metadata.json | 18 - components/splitview/index.css | 82 ++-- components/statuslight/dist/metadata.json | 42 -- components/statuslight/index.css | 82 ++-- components/steplist/dist/metadata.json | 30 +- components/steplist/index.css | 80 ++-- components/stepper/dist/metadata.json | 77 +--- components/stepper/index.css | 172 ++++--- components/swatch/dist/metadata.json | 27 -- components/swatch/index.css | 88 ++-- components/swatchgroup/dist/metadata.json | 6 +- components/swatchgroup/index.css | 4 +- components/switch/dist/metadata.json | 48 -- components/switch/index.css | 122 ++--- components/table/dist/metadata.json | 147 +----- components/table/index.css | 350 +++++++-------- components/table/stories/table.stories.js | 4 +- components/tabs/dist/metadata.json | 45 +- components/tabs/index.css | 96 ++-- components/tag/dist/metadata.json | 84 +--- components/tag/index.css | 164 +++---- components/taggroup/dist/metadata.json | 17 +- components/taggroup/index.css | 34 +- components/textfield/dist/metadata.json | 62 --- components/textfield/index.css | 182 ++++---- components/thumbnail/dist/metadata.json | 19 +- components/thumbnail/index.css | 44 +- components/toast/dist/metadata.json | 28 +- components/toast/index.css | 50 +-- components/tooltip/dist/metadata.json | 26 -- components/tooltip/index.css | 120 ++--- components/tray/dist/metadata.json | 19 +- components/tray/index.css | 24 +- components/treeview/dist/metadata.json | 40 -- components/treeview/index.css | 154 +++---- components/typography/dist/metadata.json | 205 +-------- components/typography/index.css | 418 +++++++++--------- components/underlay/dist/metadata.json | 10 - components/underlay/index.css | 15 +- components/well/dist/metadata.json | 10 - components/well/index.css | 16 +- schemas/metadata.schema.json | 12 +- stylelint.config.js | 8 +- tasks/component-reporter.js | 14 +- tasks/templates/compare-listing.njk | 6 +- tasks/templates/diff-preview.njk | 2 +- tasks/templates/sidenav.njk | 2 +- tasks/utilities.js | 2 +- tools/generator/templates/index.css.hbs | 2 +- 208 files changed, 3716 insertions(+), 6187 deletions(-) diff --git a/.storybook/blocks/ColorPalette.jsx b/.storybook/blocks/ColorPalette.jsx index 923249f5f0f..a7bfe2a75d4 100644 --- a/.storybook/blocks/ColorPalette.jsx +++ b/.storybook/blocks/ColorPalette.jsx @@ -52,7 +52,7 @@ export const ColorItem = ({ title, color, size = 60, values = [], noCheckerboard {value} diff --git a/.storybook/blocks/PropertiesTable.jsx b/.storybook/blocks/PropertiesTable.jsx index c4b72d89219..923fc81c8f5 100644 --- a/.storybook/blocks/PropertiesTable.jsx +++ b/.storybook/blocks/PropertiesTable.jsx @@ -4,13 +4,12 @@ import React, { useContext } from 'react'; import { Table } from "./Layouts.jsx"; import { ThemeContainer } from "./ThemeContainer.jsx"; import { Body, Code, LinkableHeading } from "./Typography.jsx"; -import styles from "@spectrum-css/bundle/dist/index.module.css"; /** * Displays the modifiable custom properties for a component based on the metadata provided in the story. * The story metadata object is imported from the "metadata.json" file in the component's directory. * - * If the metadata object does not contain a "modifiers" array, this component will not render. + * If the metadata object does not contain a "component" array, this component will not render. * * Usage of this doc block within MDX template(s): * @@ -23,14 +22,20 @@ export const PropertiesTable = () => { const metadata = storyMeta?.csfFile?.meta?.parameters?.metadata ?? {}; if (!packageJson?.name) return; - if (!metadata?.modifiers || !metadata?.modifiers.length) return; + if (!metadata?.component || !metadata?.component.length) return; return ( - + Modifiable custom properties @@ -39,10 +44,10 @@ export const PropertiesTable = () => { [ + rows={metadata?.component.map((propertyName) => [ {propertyName} - + , ])} /> diff --git a/.storybook/foundations/drop-shadow/index.css b/.storybook/foundations/drop-shadow/index.css index bf54a5ddce9..349505bb06e 100644 --- a/.storybook/foundations/drop-shadow/index.css +++ b/.storybook/foundations/drop-shadow/index.css @@ -13,103 +13,76 @@ governing permissions and limitations under the License. /* stylelint-disable spectrum-tools/no-unknown-custom-properties */ .spectrum-Foundations-Example-DropShadow-swatch { - block-size: 150px; - inline-size: 150px; - background-color: var(--spectrum-gray-25); - border-radius: var(--spectrum-corner-radius-large-default); - border: transparent; + block-size: 150px; + inline-size: 150px; + background-color: var(--spectrum-gray-25); + border-radius: var(--spectrum-corner-radius-large-default); + border: transparent; } .spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch { - background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */ + background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */ } .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow { - box-shadow: - var(--spectrum-drop-shadow-emphasized-default-x) - var(--spectrum-drop-shadow-emphasized-default-y) - var(--spectrum-drop-shadow-emphasized-default-blur) - var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)); + box-shadow: var(--spectrum-drop-shadow-emphasized-default-x) var(--spectrum-drop-shadow-emphasized-default-y) var(--spectrum-drop-shadow-emphasized-default-blur) var(--spectrum-drop-shadow-emphasized-default-color); } .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow { - filter: drop-shadow( - var(--spectrum-drop-shadow-emphasized-default-x) - var(--spectrum-drop-shadow-emphasized-default-y) - calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */ - var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)) - ); + filter: drop-shadow(var(--spectrum-drop-shadow-emphasized-default-x) var(--spectrum-drop-shadow-emphasized-default-y) calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */ var(--spectrum-drop-shadow-emphasized-default-color)); } .spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow, .spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow, .spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow, .spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow { -/* adjustment because color tokens do not work properly on foundations pages */ - --mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100); + /* adjustment because color tokens do not work properly on foundations pages */ + --spectrum-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100); } .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow { - box-shadow: - var(--spectrum-drop-shadow-emphasized-hover-x) - var(--spectrum-drop-shadow-emphasized-hover-y) - var(--spectrum-drop-shadow-emphasized-hover-blur) - var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)); + box-shadow: var(--spectrum-drop-shadow-emphasized-hover-x) var(--spectrum-drop-shadow-emphasized-hover-y) var(--spectrum-drop-shadow-emphasized-hover-blur) var(--spectrum-drop-shadow-emphasized-hover-color); } .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow { - filter: drop-shadow( - var(--spectrum-drop-shadow-emphasized-hover-x) - var(--spectrum-drop-shadow-emphasized-hover-y) - calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */ - var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)) - ); + filter: drop-shadow(var(--spectrum-drop-shadow-emphasized-hover-x) var(--spectrum-drop-shadow-emphasized-hover-y) calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */ var(--spectrum-drop-shadow-emphasized-hover-color)); } .spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow, .spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow, .spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow, .spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow { -/* adjustment because color tokens do not work properly on foundations pages */ - --mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200); + /* adjustment because color tokens do not work properly on foundations pages */ + --spectrum-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200); } .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow { - box-shadow: - var(--spectrum-drop-shadow-elevated-x) - var(--spectrum-drop-shadow-elevated-y) - var(--spectrum-drop-shadow-elevated-blur) - var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)); + box-shadow: var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) var(--spectrum-drop-shadow-elevated-blur) var(--spectrum-drop-shadow-elevated-color); } .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow { - filter: drop-shadow( - var(--spectrum-drop-shadow-elevated-x) - var(--spectrum-drop-shadow-elevated-y) - calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */ - var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)) - ); + filter: drop-shadow(var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */ var(--spectrum-drop-shadow-elevated-color)); } .spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow, .spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow, .spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow, .spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow { -/* adjustment because color tokens do not work properly on foundations pages */ - --mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200); + /* adjustment because color tokens do not work properly on foundations pages */ + --spectrum-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200); } .spectrum-Foundations-Example-swatch-container { - background-color: var(--spectrum-gray-25); - block-size: 200px; - inline-size: 300px; - display: flex; - align-items: center; - justify-content: center; + background-color: var(--spectrum-gray-25); + block-size: 200px; + inline-size: 300px; + display: flex; + align-items: center; + justify-content: center; } .spectrum-Foundations-Example-variant-container { - background-color: var(--spectrum-gray-25); - display: flex; - flex-direction: row; + background-color: var(--spectrum-gray-25); + display: flex; + flex-direction: row; } diff --git a/.storybook/guides/releasing.mdx b/.storybook/guides/releasing.mdx index a95aec9ea5a..cbf252c83ef 100644 --- a/.storybook/guides/releasing.mdx +++ b/.storybook/guides/releasing.mdx @@ -8,7 +8,7 @@ import { Meta, Title } from "@storybook/blocks"; This project versions components independently, meaning each component has its own version number, updated independently of other components. We follow [semantic versioning](https://semver.org/) and as such, each release is versioned according to the following rules: -- **Major**: Breaking changes such as API changes, the removal of features, or changes to `--mod` custom properties +- **Major**: Breaking changes such as API changes, the removal of features, or changes to custom properties - **Minor**: New features or enhancements - **Patch**: Bug fixes or minor improvements diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index a1f60da66a6..b4c1e57da6f 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -37,55 +37,6 @@ ".spectrum-Accordion:lang(ko)", ".spectrum-Accordion:lang(zh)" ], - "modifiers": [ - "--mod-accordion-animation-duration", - "--mod-accordion-background-color-default", - "--mod-accordion-background-color-down", - "--mod-accordion-background-color-hover", - "--mod-accordion-background-color-key-focus", - "--mod-accordion-content-padding-inline", - "--mod-accordion-corner-radius", - "--mod-accordion-disclosure-indicator-height", - "--mod-accordion-disclosure-indicator-to-text-space", - "--mod-accordion-divider-color", - "--mod-accordion-divider-thickness", - "--mod-accordion-edge-to-content-area", - "--mod-accordion-edge-to-disclosure-indicator-space", - "--mod-accordion-edge-to-text-space", - "--mod-accordion-item-content-area-bottom-to-content", - "--mod-accordion-item-content-area-top-to-content", - "--mod-accordion-item-content-color", - "--mod-accordion-item-content-disabled-color", - "--mod-accordion-item-content-font", - "--mod-accordion-item-content-font-size", - "--mod-accordion-item-content-font-style", - "--mod-accordion-item-content-font-weight", - "--mod-accordion-item-content-line-height", - "--mod-accordion-item-direct-actions-height", - "--mod-accordion-item-direct-actions-spacing", - "--mod-accordion-item-direct-actions-vertical-spacing", - "--mod-accordion-item-focus-indicator-color", - "--mod-accordion-item-focus-indicator-gap", - "--mod-accordion-item-focus-indicator-thickness", - "--mod-accordion-item-header-bottom-to-text-space", - "--mod-accordion-item-header-color-default", - "--mod-accordion-item-header-color-down", - "--mod-accordion-item-header-color-hover", - "--mod-accordion-item-header-color-key-focus", - "--mod-accordion-item-header-disabled-color", - "--mod-accordion-item-header-font", - "--mod-accordion-item-header-font-size", - "--mod-accordion-item-header-font-style", - "--mod-accordion-item-header-font-weight", - "--mod-accordion-item-header-line-height", - "--mod-accordion-item-header-to-direct-actions-space", - "--mod-accordion-item-header-top-to-text-space", - "--mod-accordion-item-min-block-size", - "--mod-accordion-item-minimum-height", - "--mod-accordion-item-minimum-width", - "--mod-accordion-item-width", - "--mod-accordion-top-to-disclosure-indicator" - ], "component": [ "--spectrum-accordion-animation-duration", "--spectrum-accordion-background-color-default", diff --git a/components/accordion/index.css b/components/accordion/index.css index e9372ab6543..2c2bc4e8c15 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -54,29 +54,26 @@ /* Colors */ /* @TODO: use opacity tokens when available */ - --spectrum-accordion-background-color-default: var(--mod-accordion-background-color-default, var(--spectrum-transparent-black-25)); - --spectrum-accordion-background-color-hover: var(--mod-accordion-background-color-hover, var(--spectrum-transparent-black-100)); - --spectrum-accordion-background-color-down: var(--mod-accordion-background-color-down, var(--spectrum-transparent-black-300)); - --spectrum-accordion-background-color-key-focus: var(--mod-accordion-background-color-key-focus, var(--spectrum-transparent-black-100)); + --spectrum-accordion-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-accordion-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-accordion-background-color-down: var(--spectrum-transparent-black-300); + --spectrum-accordion-background-color-key-focus: var(--spectrum-transparent-black-100); - --spectrum-accordion-item-content-color: var(--mod-accordion-item-content-color, var(--spectrum-body-color)); - --spectrum-accordion-divider-color: var(--mod-accordion-divider-color, var(--spectrum-gray-200)); - --spectrum-accordion-item-focus-indicator-color: var(--mod-accordion-item-focus-indicator-color, var(--spectrum-focus-indicator-color)); + --spectrum-accordion-item-content-color: var(--spectrum-body-color); + --spectrum-accordion-divider-color: var(--spectrum-gray-200); + --spectrum-accordion-item-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-accordion-item-header-color-default: var(--mod-accordion-item-header-color-default, var(--spectrum-neutral-content-color-default)); - --spectrum-accordion-item-header-color-hover: var(--mod-accordion-item-header-color-hover, var(--spectrum-neutral-content-color-hover)); - --spectrum-accordion-item-header-color-down: var(--mod-accordion-item-header-color-down, var(--spectrum-neutral-content-color-down)); - --spectrum-accordion-item-header-color-key-focus: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-neutral-content-color-key-focus)); + --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus); /* Calculated minimum block-size that accounts for density spacing changes and/or increases in font size and line-height. This gives us the block-size of the header with a single line of text. */ - --spectrum-accordion-item-min-block-size: max( - var(--mod-accordion-item-minimum-height, var(--spectrum-accordion-item-minimum-height)), - var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))) - ); + --spectrum-accordion-item-min-block-size: max(var(--spectrum-accordion-item-minimum-height), var(--spectrum-accordion-item-header-top-to-text-space) + var(--spectrum-accordion-item-header-bottom-to-text-space) + (var(--spectrum-accordion-item-header-font-size) * var(--spectrum-accordion-item-header-line-height))); /* Calculated vertical spacing for action button and switch to center them within the accordion item */ - --spectrum-accordion-item-direct-actions-vertical-spacing: calc((var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)) - var(--mod-accordion-item-direct-actions-height, var(--spectrum-accordion-item-direct-actions-height))) / 2); + --spectrum-accordion-item-direct-actions-vertical-spacing: calc((var(--spectrum-accordion-item-min-block-size) - var(--spectrum-accordion-item-direct-actions-height)) / 2); /* Right-to-left adjustments for transforms */ &:dir(rtl) { @@ -209,11 +206,11 @@ --spectrum-accordion-background-color-hover: transparent; --spectrum-accordion-background-color-down: transparent; --spectrum-accordion-background-color-key-focus: transparent; - --spectrum-accordion-item-content-color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-color-default: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-color-hover: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-color-down: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-color-key-focus: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-content-color: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-header-color-default: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-header-color-hover: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-header-color-down: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-header-color-key-focus: var(--spectrum-disabled-content-color); } .spectrum-Accordion.spectrum-Accordion--noInlinePadding { @@ -232,13 +229,13 @@ z-index: inherit; position: relative; margin: 0; - min-block-size: var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)); - min-inline-size: var(--mod-accordion-item-minimum-width, var(--spectrum-accordion-item-minimum-width)); - inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width)); - border-block-end: var(--mod-accordion-divider-thickness, var(--spectrum-accordion-divider-thickness)) solid var(--spectrum-accordion-divider-color); + min-block-size: var(--spectrum-accordion-item-min-block-size); + min-inline-size: var(--spectrum-accordion-item-minimum-width); + inline-size: var(--spectrum-accordion-item-width); + border-block-end: var(--spectrum-accordion-divider-thickness) solid var(--spectrum-accordion-divider-color); &:first-child { - border-block-start: var(--mod-accordion-divider-thickness, var(--spectrum-accordion-divider-thickness)) solid var(--spectrum-accordion-divider-color); + border-block-start: var(--spectrum-accordion-divider-thickness) solid var(--spectrum-accordion-divider-color); } } @@ -250,25 +247,25 @@ } .spectrum-Accordion-itemIndicator { - inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); - block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); + inline-size: var(--spectrum-accordion-disclosure-indicator-height); + block-size: var(--spectrum-accordion-disclosure-indicator-height); transform: var(--spectrum-logical-rotation); - transition: transform ease var(--mod-accordion-animation-duration, var(--spectrum-accordion-animation-duration)); + transition: transform ease var(--spectrum-accordion-animation-duration); flex-shrink: 0; - margin-block-start: var(--mod-accordion-top-to-disclosure-indicator, var(--spectrum-accordion-top-to-disclosure-indicator)); - margin-inline: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space)) var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)); + margin-block-start: var(--spectrum-accordion-top-to-disclosure-indicator); + margin-inline: var(--spectrum-accordion-edge-to-disclosure-indicator-space) var(--spectrum-accordion-disclosure-indicator-to-text-space); } .spectrum-Accordion-itemContent { display: none; - padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content)); - padding-inline: var(--mod-accordion-content-padding-inline, var(--spectrum-accordion-content-padding-inline)); + padding-block: var(--spectrum-accordion-item-content-area-top-to-content) var(--spectrum-accordion-item-content-area-bottom-to-content); + padding-inline: var(--spectrum-accordion-content-padding-inline); color: var(--spectrum-accordion-item-content-color); - font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight)); - font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style)); - font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size)); - font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font)); - line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height)); + font-weight: var(--spectrum-accordion-item-content-font-weight); + font-style: var(--spectrum-accordion-item-content-font-style); + font-size: var(--spectrum-accordion-item-content-font-size); + font-family: var(--spectrum-accordion-item-content-font); + line-height: var(--spectrum-accordion-item-content-line-height); } .spectrum-Accordion-itemTitle { @@ -276,10 +273,10 @@ display: flex; align-items: center; - min-block-size: var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)); + min-block-size: var(--spectrum-accordion-item-min-block-size); box-sizing: border-box; /* respect min-block-size but include padding */ - padding-block: var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)); - padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space)); + padding-block: var(--spectrum-accordion-item-header-top-to-text-space) var(--spectrum-accordion-item-header-bottom-to-text-space); + padding-inline-end: var(--spectrum-accordion-edge-to-text-space); } /* Focusable button that expands/collapses the accordion item. */ @@ -293,16 +290,16 @@ justify-content: flex-start; /* start spacing controlled by edge to disclosure icon spacing */ - padding-inline: 0 var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area)); + padding-inline: 0 var(--spectrum-accordion-edge-to-content-area); padding-block: 0; /* reset user-agent styles */ - line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)); + line-height: var(--spectrum-accordion-item-header-line-height); text-overflow: ellipsis; cursor: var(--spectrum-accordion-item-header-cursor); - font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)); - font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight)); - font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style)); - font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font)); + font-size: var(--spectrum-accordion-item-header-font-size); + font-weight: var(--spectrum-accordion-item-header-font-weight); + font-style: var(--spectrum-accordion-item-header-font-style); + font-family: var(--spectrum-accordion-item-header-font); /* Reset styling of button element */ appearance: none; @@ -319,11 +316,11 @@ } &:focus-visible { - border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); + border-radius: var(--spectrum-accordion-corner-radius); background-color: var(--spectrum-accordion-background-color-key-focus); color: var(--spectrum-accordion-item-header-color-key-focus); - outline: var(--mod-accordion-item-focus-indicator-thickness, var(--spectrum-accordion-item-focus-indicator-thickness)) solid var(--spectrum-accordion-item-focus-indicator-color); - outline-offset: var(--mod-accordion-item-focus-indicator-gap, var(--spectrum-accordion-item-focus-indicator-gap)); + outline: var(--spectrum-accordion-item-focus-indicator-thickness) solid var(--spectrum-accordion-item-focus-indicator-color); + outline-offset: var(--spectrum-accordion-item-focus-indicator-gap); } /* higher specificity to maintain active styles over @media hover styles */ @@ -334,17 +331,17 @@ &:has(+ .spectrum-Accordion-itemDirectActions) { /* set spacing between header and direct actions, whether or not noInlinePadding variant is used */ - margin-inline-end: var(--mod-accordion-item-header-to-direct-actions-space, var(--spectrum-accordion-item-header-to-direct-actions-space)); + margin-inline-end: var(--spectrum-accordion-item-header-to-direct-actions-space); } } .spectrum-Accordion-itemDirectActions { - margin-inline-end: var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area)); + margin-inline-end: var(--spectrum-accordion-edge-to-content-area); display: inline-flex; - gap: var(--mod-accordion-item-direct-actions-spacing, var(--spectrum-accordion-item-direct-actions-spacing)); + gap: var(--spectrum-accordion-item-direct-actions-spacing); /* margin needs to be set on top and bottom to keep compact XL items vertically centered and prevent them from growing vertically */ - margin-block: var(--mod-accordion-item-direct-actions-vertical-spacing, var(--spectrum-accordion-item-direct-actions-vertical-spacing)); + margin-block: var(--spectrum-accordion-item-direct-actions-vertical-spacing); } .spectrum-Accordion-item.is-open { @@ -360,7 +357,7 @@ .spectrum-Accordion--quiet .spectrum-Accordion-itemHeader { &:hover, &:active { - border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); + border-radius: var(--spectrum-accordion-corner-radius); } } diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index fea676f489e..1b19feee243 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -161,7 +161,7 @@ CustomWidth.storyName = "Custom width"; CustomWidth.args = { items: longerContent, customStyles: { - "--mod-accordion-item-width": "auto", + "--spectrum-accordion-item-width": "auto", }, }; CustomWidth.parameters = { diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json index 2073a6be7d6..43c0c3d3677 100644 --- a/components/actionbar/dist/metadata.json +++ b/components/actionbar/dist/metadata.json @@ -17,25 +17,6 @@ ".spectrum-ActionBar:lang(ko)", ".spectrum-ActionBar:lang(zh)" ], - "modifiers": [ - "--mod-actionbar-close-button-to-counter", - "--mod-actionbar-corner-radius", - "--mod-actionbar-height", - "--mod-actionbar-item-counter-color", - "--mod-actionbar-item-counter-line-height-cjk", - "--mod-actionbar-minimum-width", - "--mod-actionbar-popover-background-color", - "--mod-actionbar-popover-border-color", - "--mod-actionbar-shadow-blur", - "--mod-actionbar-shadow-color", - "--mod-actionbar-shadow-horizontal", - "--mod-actionbar-shadow-vertical", - "--mod-actionbar-spacing-action-group-edge", - "--mod-actionbar-spacing-bottom-area", - "--mod-actionbar-spacing-label-to-action-group", - "--mod-actionbar-spacing-outer-edge", - "--mod-actionbar-spacing-top-area" - ], "component": [ "--spectrum-action-bar-border-color", "--spectrum-action-bar-bottom-to-content-area", @@ -73,14 +54,13 @@ "--spectrum-drop-shadow-elevated-color", "--spectrum-drop-shadow-elevated-x", "--spectrum-drop-shadow-elevated-y", + "--spectrum-fieldlabel-font-size", + "--spectrum-fieldlabel-line-height", "--spectrum-gray-25", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-spacing-300" ], - "passthroughs": [ - "--mod-fieldlabel-font-size", - "--mod-fieldlabel-line-height" - ], + "passthroughs": [], "high-contrast": ["--highcontrast-actionbar-popover-border-color"] } diff --git a/components/actionbar/index.css b/components/actionbar/index.css index 737af9a4382..44d2821d545 100644 --- a/components/actionbar/index.css +++ b/components/actionbar/index.css @@ -54,7 +54,7 @@ /* ActionBar is outer wrapper with nested popover component within */ .spectrum-ActionBar { /* creates horizontal spacing to edge */ - padding: 0 var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)); + padding: 0 var(--spectrum-actionbar-spacing-outer-edge); inset-block-end: 0; z-index: 1; @@ -70,28 +70,28 @@ &.is-open { /* add ActionBar bottom margin to height for correct spacing even when sticky */ - block-size: calc(var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)) + var(--mod-actionbar-height, var(--spectrum-actionbar-height))); + block-size: calc(var(--spectrum-actionbar-spacing-outer-edge) + var(--spectrum-actionbar-height)); opacity: 1; } .spectrum-ActionBar-popover { /* popover is ActionBar height */ - block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height)); - min-inline-size: var(--mod-actionbar-minimum-width, var(--spectrum-actionbar-minimum-width)); + block-size: var(--spectrum-actionbar-height); + min-inline-size: var(--spectrum-actionbar-minimum-width); box-sizing: border-box; inline-size: 100%; margin: auto; - padding-inline: var(--mod-actionbar-spacing-action-group-edge, var(--spectrum-actionbar-spacing-padding-inline)); - padding-block: var(--mod-actionbar-spacing-top-area, var(--spectrum-actionbar-spacing-top-area)) var(--mod-actionbar-spacing-bottom-area, var(--spectrum-actionbar-spacing-bottom-area)); + padding-inline: var(--spectrum-actionbar-spacing-padding-inline); + padding-block: var(--spectrum-actionbar-spacing-top-area) var(--spectrum-actionbar-spacing-bottom-area); /* Be relative so our width can be restricted */ position: relative; - border-radius: var(--mod-actionbar-corner-radius, var(--spectrum-actionbar-corner-radius)); - border-color: var(--highcontrast-actionbar-popover-border-color, var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color))); - background-color: var(--mod-actionbar-popover-background-color, var(--spectrum-actionbar-popover-background-color)); + border-radius: var(--spectrum-actionbar-corner-radius); + border-color: var(--highcontrast-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color)); + background-color: var(--spectrum-actionbar-popover-background-color); - filter: drop-shadow(var(--mod-actionbar-shadow-horizontal, var(--spectrum-actionbar-shadow-horizontal)) var(--mod-actionbar-shadow-vertical, var(--spectrum-actionbar-shadow-vertical)) var(--mod-actionbar-shadow-blur, var(--spectrum-actionbar-shadow-blur)) var(--mod-actionbar-shadow-color, var(--spectrum-actionbar-shadow-color))); + filter: drop-shadow(var(--spectrum-actionbar-shadow-horizontal) var(--spectrum-actionbar-shadow-vertical) var(--spectrum-actionbar-shadow-blur) var(--spectrum-actionbar-shadow-color)); /* Let clicks do their thing */ pointer-events: auto; @@ -104,16 +104,17 @@ /* item counter */ .spectrum-FieldLabel { - --mod-fieldlabel-font-size: var(--spectrum-action-bar-counter-font-size); - --mod-fieldlabel-line-height: var(--spectrum-actionbar-item-counter-line-height); - color: var(--mod-actionbar-item-counter-color, var(--spectrum-actionbar-item-counter-color)); - padding-inline-start: var(--mod-actionbar-close-button-to-counter, var(--spectrum-actionbar-close-button-to-counter)); + --spectrum-fieldlabel-font-size: var(--spectrum-action-bar-counter-font-size); + --spectrum-fieldlabel-line-height: var(--spectrum-actionbar-item-counter-line-height); + + color: var(--spectrum-actionbar-item-counter-color); + padding-inline-start: var(--spectrum-actionbar-close-button-to-counter); /* cjk language support */ &:lang(ja), &:lang(zh), &:lang(ko) { - line-height: var(--mod-actionbar-item-counter-line-height-cjk, var(--spectrum-actionbar-item-counter-line-height-cjk)); + line-height: var(--spectrum-actionbar-item-counter-line-height-cjk); } } @@ -121,7 +122,7 @@ .spectrum-ActionGroup { /* align to end by default */ margin-inline-start: auto; - padding-inline-start: var(--mod-actionbar-spacing-label-to-action-group, var(--spectrum-actionbar-spacing-label-to-action-group)); /* space between label and action group */ + padding-inline-start: var(--spectrum-actionbar-spacing-label-to-action-group); /* space between label and action group */ } } diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js index 753b1ebb7bd..e3410ba3953 100644 --- a/components/actionbar/stories/actionbar.stories.js +++ b/components/actionbar/stories/actionbar.stories.js @@ -12,7 +12,7 @@ import { BehavioralTemplate } from "./template.js"; * The action bar component is a floating full width bar that appears upon selection. Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time. * * ## Popover dependency - * Action bar requires popover, which is nested within the action bar. Action bar background, border, and corner radius are applied to the nested popover component and can be overridden by using action bar's `--mod-*` prefixed custom properties. A [list of the properties](#modifiable-properties) can be found below. + * Action bar requires popover, which is nested within the action bar. Action bar background, border, and corner radius are applied to the nested popover component. */ export default { title: "Action bar", diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index 7a3a4bb0a35..252d6275464 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -38,53 +38,6 @@ ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))", "a.spectrum-ActionButton" ], - "modifiers": [ - "--mod-actionbutton-animation-duration", - "--mod-actionbutton-background-color-default", - "--mod-actionbutton-background-color-default-selected", - "--mod-actionbutton-background-color-default-selected-emphasized", - "--mod-actionbutton-background-color-disabled", - "--mod-actionbutton-background-color-down", - "--mod-actionbutton-background-color-down-selected", - "--mod-actionbutton-background-color-down-selected-emphasized", - "--mod-actionbutton-background-color-focus", - "--mod-actionbutton-background-color-focus-selected", - "--mod-actionbutton-background-color-focus-selected-emphasized", - "--mod-actionbutton-background-color-hover", - "--mod-actionbutton-background-color-hover-selected", - "--mod-actionbutton-background-color-hover-selected-emphasized", - "--mod-actionbutton-border-radius", - "--mod-actionbutton-content-color-default", - "--mod-actionbutton-content-color-default-selected", - "--mod-actionbutton-content-color-default-selected-emphasized", - "--mod-actionbutton-content-color-disabled", - "--mod-actionbutton-content-color-down", - "--mod-actionbutton-content-color-down-selected", - "--mod-actionbutton-content-color-down-selected-emphasized", - "--mod-actionbutton-content-color-focus", - "--mod-actionbutton-content-color-focus-selected", - "--mod-actionbutton-content-color-focus-selected-emphasized", - "--mod-actionbutton-content-color-hover", - "--mod-actionbutton-content-color-hover-selected", - "--mod-actionbutton-content-color-hover-selected-emphasized", - "--mod-actionbutton-edge-to-hold-icon", - "--mod-actionbutton-edge-to-text", - "--mod-actionbutton-edge-to-visual", - "--mod-actionbutton-edge-to-visual-only", - "--mod-actionbutton-focus-indicator-border-radius", - "--mod-actionbutton-focus-indicator-color", - "--mod-actionbutton-focus-indicator-gap", - "--mod-actionbutton-focus-indicator-thickness", - "--mod-actionbutton-font-size", - "--mod-actionbutton-font-style", - "--mod-actionbutton-font-weight", - "--mod-actionbutton-height", - "--mod-actionbutton-icon-size", - "--mod-actionbutton-label-color", - "--mod-actionbutton-line-height", - "--mod-actionbutton-min-width", - "--mod-actionbutton-text-to-visual" - ], "component": [ "--spectrum-action-button-edge-to-hold-icon-extra-large", "--spectrum-action-button-edge-to-hold-icon-extra-small", @@ -214,10 +167,7 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-button-animation-duration", - "--mod-button-font-family" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-actionbutton-animation-duration", "--highcontrast-actionbutton-background-color-default", diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 8205eb370cb..4e92de67e8d 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -117,26 +117,26 @@ governing permissions and limitations under the License. } &.is-selected { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); + --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-background-color-selected-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-background-color-selected-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-background-color-selected-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-25)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-25)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-25)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-25)); + --spectrum-actionbutton-content-color-default: var(--spectrum-gray-25); + --spectrum-actionbutton-content-color-hover: var(--spectrum-gray-25); + --spectrum-actionbutton-content-color-down: var(--spectrum-gray-25); + --spectrum-actionbutton-content-color-focus: var(--spectrum-gray-25); &.spectrum-ActionButton--emphasized { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); + --spectrum-actionbutton-background-color-default: var(--spectrum-accent-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus); + + --spectrum-actionbutton-content-color-default: var(--spectrum-white); + --spectrum-actionbutton-content-color-hover: var(--spectrum-white); + --spectrum-actionbutton-content-color-down: var(--spectrum-white); + --spectrum-actionbutton-content-color-focus: var(--spectrum-white); } &.spectrum-ActionButton--staticWhite { @@ -249,7 +249,7 @@ governing permissions and limitations under the License. /* Remove button the margin in Firefox and Safari. */ margin: 0; - font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack)); + font-family: var(--spectrum-sans-font-family-stack); /* Adjacent buttons should be aligned correctly */ vertical-align: top; @@ -267,25 +267,25 @@ governing permissions and limitations under the License. -webkit-appearance: button; transition: - 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; + background var(--spectrum-animation-duration-100) ease-out, + border-color var(--spectrum-animation-duration-100) ease-out, + color var(--spectrum-animation-duration-100) ease-out, + box-shadow var(--spectrum-animation-duration-100) ease-out; - min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); - block-size: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height)); - line-height: var(--mod-actionbutton-line-height, var(--spectrum-actionbutton-line-height)); + min-inline-size: var(--spectrum-actionbutton-min-width); + block-size: var(--spectrum-actionbutton-height); + line-height: var(--spectrum-actionbutton-line-height); - border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius)); + border-radius: var(--spectrum-actionbutton-border-radius); border-width: var(--spectrum-actionbutton-border-width); border-color: var(--highcontrast-actionbutton-border-color, var(--spectrum-actionbutton-border-color)); border-style: solid; - gap: var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)); - padding-inline: calc(var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--spectrum-actionbutton-border-width)); + gap: var(--spectrum-actionbutton-text-to-visual); + padding-inline: calc(var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-border-width)); - background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); - color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default))); + background-color: var(--highcontrast-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)); + color: var(--highcontrast-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default)); /* Fix Firefox */ &::-moz-focus-inner { @@ -308,25 +308,25 @@ governing permissions and limitations under the License. } &:hover { - background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover))); - color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover))); + background-color: var(--highcontrast-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-hover)); + color: var(--highcontrast-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-hover)); } &:focus-visible { - background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus))); - color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus))); + background-color: var(--highcontrast-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-focus)); + color: var(--highcontrast-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-focus)); } &:active { - background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))); - color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))); + background-color: var(--highcontrast-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-down)); + color: var(--highcontrast-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-down)); transform: perspective(var(--spectrum-actionbutton-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } &:disabled, &.is-disabled { - background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); - color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))); + background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)); + color: var(--highcontrast-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled)); } } @@ -342,19 +342,19 @@ a.spectrum-ActionButton { flex-shrink: 0; max-block-size: 100%; - inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); - block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + inline-size: var(--spectrum-actionbutton-icon-size); + block-size: var(--spectrum-actionbutton-icon-size); color: inherit; } /* Icon and label text */ .spectrum-ActionButton:has(.spectrum-ActionButton-icon) { - padding-inline-start: calc(var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)) - var(--spectrum-actionbutton-border-width)); + padding-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual) - var(--spectrum-actionbutton-border-width)); } /* Icon only */ .spectrum-ActionButton:not(:has(.spectrum-ActionButton-label)) { - padding-inline: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--spectrum-actionbutton-border-width)); + padding-inline: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton-label { @@ -370,11 +370,11 @@ a.spectrum-ActionButton { pointer-events: none; - font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size)); - font-weight: var(--mod-actionbutton-font-weight, var(--spectrum-actionbutton-font-weight)); - font-style: var(--mod-actionbutton-font-style, var(--spectrum-actionbutton-font-style)); + font-size: var(--spectrum-actionbutton-font-size); + font-weight: var(--spectrum-actionbutton-font-weight); + font-style: var(--spectrum-actionbutton-font-style); white-space: nowrap; - color: var(--mod-actionbutton-label-color, inherit); + color: inherit; text-overflow: ellipsis; overflow: hidden; @@ -382,22 +382,22 @@ a.spectrum-ActionButton { .spectrum-ActionButton-hold { position: absolute; - inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width)); - inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width)); + inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width)); + inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width)); color: inherit; transform: var(--spectrum-logical-rotation); } /* Focus indicator */ .spectrum-ActionButton { - transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out; + transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; &::after { position: absolute; inset: 0; - margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1); - border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius)); - transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out; + margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1); + border-radius: var(--spectrum-actionbutton-focus-indicator-border-radius); + transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; pointer-events: none; content: ""; } @@ -407,7 +407,7 @@ a.spectrum-ActionButton { outline: none; &::after { - box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color))); + box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--highcontrast-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color)); } } } diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index 8d4d2ba86b7..2afd54f75a1 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -28,16 +28,6 @@ ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" ], - "modifiers": [ - "--mod-actiongroup-border-radius", - "--mod-actiongroup-border-radius-reset", - "--mod-actiongroup-button-spacing-reset", - "--mod-actiongroup-gap-size-compact", - "--mod-actiongroup-horizontal-spacing-compact", - "--mod-actiongroup-horizontal-spacing-regular", - "--mod-actiongroup-vertical-spacing-compact", - "--mod-actiongroup-vertical-spacing-regular" - ], "component": [ "--spectrum-actiongroup-border-radius", "--spectrum-actiongroup-border-radius-reset", @@ -49,10 +39,11 @@ "--spectrum-actiongroup-vertical-spacing-regular" ], "global": [ + "--spectrum-actionbutton-focus-indicator-border-radius", "--spectrum-corner-radius-100", "--spectrum-spacing-100", "--spectrum-spacing-75" ], - "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], + "passthroughs": [], "high-contrast": [] } diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css index ac427bc8636..1d3c8754890 100644 --- a/components/actiongroup/index.css +++ b/components/actiongroup/index.css @@ -39,7 +39,7 @@ .spectrum-ActionGroup { display: flex; flex-wrap: wrap; - gap: var(--mod-actiongroup-horizontal-spacing-regular, var(--spectrum-actiongroup-horizontal-spacing-regular)); + gap: var(--spectrum-actiongroup-horizontal-spacing-regular); .spectrum-ActionGroup-item { flex-shrink: 0; @@ -58,13 +58,13 @@ } .spectrum-ActionGroup--vertical { - gap: var(--mod-actiongroup-vertical-spacing-regular, var(--spectrum-actiongroup-vertical-spacing-regular)); + gap: var(--spectrum-actiongroup-vertical-spacing-regular); display: inline-flex; flex-direction: column; } .spectrum-ActionGroup--compact { - gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact)); + gap: var(--spectrum-actiongroup-gap-size-compact); } .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) { @@ -72,34 +72,34 @@ .spectrum-ActionGroup-item { position: relative; - border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); + border-radius: var(--spectrum-actiongroup-border-radius-reset); z-index: 0; &:first-child { /* @passthrough -- Action button styling */ - --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + --spectrum-actionbutton-focus-indicator-border-radius: var(--spectrum-actiongroup-border-radius) 0px 0px var(--spectrum-actiongroup-border-radius); - border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); + border-start-start-radius: var(--spectrum-actiongroup-border-radius); + border-end-start-radius: var(--spectrum-actiongroup-border-radius); + margin-inline-start: var(--spectrum-actiongroup-button-spacing-reset); } & + .spectrum-ActionGroup-item { /* @passthrough -- Action button styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px; + --spectrum-actionbutton-focus-indicator-border-radius: 0px; - margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); - margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); + margin-inline-start: var(--spectrum-actiongroup-horizontal-spacing-compact); + margin-inline-end: var(--spectrum-actiongroup-horizontal-spacing-compact); } &:last-child { /* @passthrough -- Action button styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px; + --spectrum-actionbutton-focus-indicator-border-radius: 0px var(--spectrum-actiongroup-border-radius) var(--spectrum-actiongroup-border-radius) 0px; - border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); - margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); + border-start-end-radius: var(--spectrum-actiongroup-border-radius); + border-end-end-radius: var(--spectrum-actiongroup-border-radius); + margin-inline-start: var(--spectrum-actiongroup-horizontal-spacing-compact); + margin-inline-end: var(--spectrum-actiongroup-border-radius-reset); } &.is-selected { @@ -122,37 +122,37 @@ } .spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) { - gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact)); + gap: var(--spectrum-actiongroup-gap-size-compact); .spectrum-ActionGroup-item { - border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); + border-radius: var(--spectrum-actiongroup-border-radius-reset); &:first-child { /* @passthrough -- Action button styling */ - --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px; + --spectrum-actionbutton-focus-indicator-border-radius: var(--spectrum-actiongroup-border-radius) var(--spectrum-actiongroup-border-radius) 0px 0px; - border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); + border-start-start-radius: var(--spectrum-actiongroup-border-radius); + border-start-end-radius: var(--spectrum-actiongroup-border-radius); + margin-inline-end: var(--spectrum-actiongroup-button-spacing-reset); + margin-block-start: var(--spectrum-actiongroup-vertical-spacing-compact); + margin-block-end: var(--spectrum-actiongroup-vertical-spacing-compact); } & + .spectrum-ActionGroup-item { - margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); + margin-inline-start: var(--spectrum-actiongroup-button-spacing-reset); + margin-inline-end: var(--spectrum-actiongroup-button-spacing-reset); + margin-block-start: var(--spectrum-actiongroup-button-spacing-reset); + margin-block-end: var(--spectrum-actiongroup-vertical-spacing-compact); } &:last-child { /* @passthrough -- Action button styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + --spectrum-actionbutton-focus-indicator-border-radius: 0px 0px var(--spectrum-actiongroup-border-radius) var(--spectrum-actiongroup-border-radius); - border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - margin-block-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); + border-end-start-radius: var(--spectrum-actiongroup-border-radius); + border-end-end-radius: var(--spectrum-actiongroup-border-radius); + margin-block-start: var(--spectrum-actiongroup-vertical-spacing-compact); + margin-block-end: var(--spectrum-actiongroup-button-spacing-reset); } } } diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json index deed56dd2c9..c313f600363 100644 --- a/components/alertbanner/dist/metadata.json +++ b/components/alertbanner/dist/metadata.json @@ -12,35 +12,8 @@ ".spectrum-AlertBanner:has(.spectrum-CloseButton) .spectrum-AlertBanner-body", ".spectrum-AlertBanner:lang(ja)", ".spectrum-AlertBanner:lang(ko)", - ".spectrum-AlertBanner:lang(zh)" - ], - "modifiers": [ - "--mod-alert-banner-background", - "--mod-alert-banner-block-edge-to-button", - "--mod-alert-banner-bottom-to-text", - "--mod-alert-banner-close-button-to-content", - "--mod-alert-banner-close-button-to-inline-end", - "--mod-alert-banner-font-color", - "--mod-alert-banner-font-family", - "--mod-alert-banner-font-size", - "--mod-alert-banner-icon-size", - "--mod-alert-banner-icon-to-text", - "--mod-alert-banner-informative-background", - "--mod-alert-banner-inline-end-to-content", - "--mod-alert-banner-inline-size", - "--mod-alert-banner-inline-start-to-content", - "--mod-alert-banner-line-height", - "--mod-alert-banner-max-inline-size", - "--mod-alert-banner-min-height", - "--mod-alert-banner-negative-background", - "--mod-alert-banner-neutral-background", - "--mod-alert-banner-text-margin-block-end", - "--mod-alert-banner-text-margin-block-start", - "--mod-alert-banner-text-to-button-horizontal", - "--mod-alert-banner-text-to-button-vertical", - "--mod-alert-banner-top-to-close-button", - "--mod-alert-banner-top-to-icon", - "--mod-alert-banner-top-to-text" + ".spectrum-AlertBanner:lang(zh)", + ".spectrum-CloseButton" ], "component": [ "--spectrum-alert-banner-background", @@ -65,14 +38,18 @@ "--spectrum-alert-banner-text-margin-block-start", "--spectrum-alert-banner-text-to-button-horizontal", "--spectrum-alert-banner-text-to-button-vertical", + "--spectrum-alert-banner-top-to-icon", "--spectrum-alert-banner-top-to-text", - "--spectrum-alert-banner-top-to-workflow-icon", "--spectrum-alert-banner-width" ], "global": [ "--spectrum-border-width-100", "--spectrum-cjk-line-height-100", + "--spectrum-closebutton-align-self", + "--spectrum-closebutton-margin-inline", + "--spectrum-closebutton-margin-top", "--spectrum-font-size-100", + "--spectrum-icon-size", "--spectrum-informative-background-color-default", "--spectrum-line-height-100", "--spectrum-negative-background-color-default", @@ -84,12 +61,7 @@ "--spectrum-white", "--spectrum-workflow-icon-size-100" ], - "passthroughs": [ - "--mod-closebutton-align-self", - "--mod-closebutton-margin-inline", - "--mod-closebutton-margin-top", - "--mod-icon-size" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-alert-banner-border-color", "--highcontrast-alert-banner-border-width" diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css index d3000e6d243..8274b079251 100644 --- a/components/alertbanner/index.css +++ b/components/alertbanner/index.css @@ -32,18 +32,13 @@ /* Top and bottom margins for AlertBanner-text. Subtracts the vertical spacing that is already included in the padding-block of its parent AlertBanner-body element. */ - --spectrum-alert-banner-text-margin-block-start: max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button))); - --spectrum-alert-banner-text-margin-block-end: max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button))); + --spectrum-alert-banner-text-margin-block-start: max(0px, var(--spectrum-alert-banner-top-to-text) - var(--spectrum-alert-banner-block-edge-to-button)); + --spectrum-alert-banner-text-margin-block-end: max(0px, var(--spectrum-alert-banner-bottom-to-text) - var(--spectrum-alert-banner-block-edge-to-button)); /* colors */ - --spectrum-alert-banner-background: var(--mod-alert-banner-neutral-background, var(--spectrum-neutral-subdued-background-color-default)); + --spectrum-alert-banner-background: var(--spectrum-neutral-subdued-background-color-default); --spectrum-alert-banner-font-color: var(--spectrum-white); - /* @passthrough -- settings for nested Close button */ - --mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-to-content, var(--spectrum-alert-banner-close-button-to-content)) var(--mod-alert-banner-close-button-to-inline-end, var(--spectrum-alert-banner-close-button-to-inline-end)); - --mod-closebutton-margin-top: var(--mod-alert-banner-top-to-close-button, var(--spectrum-alert-banner-block-edge-to-button)); - --mod-closebutton-align-self: flex-start; - &:lang(ja), &:lang(zh), &:lang(ko) { @@ -52,24 +47,24 @@ } .spectrum-AlertBanner--info { - --spectrum-alert-banner-background: var(--mod-alert-banner-informative-background, var(--spectrum-informative-background-color-default)); + --spectrum-alert-banner-background: var(--spectrum-informative-background-color-default); } .spectrum-AlertBanner--negative { - --spectrum-alert-banner-background: var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default)); + --spectrum-alert-banner-background: var(--spectrum-negative-background-color-default); } .spectrum-AlertBanner { display: none; justify-content: space-between; - inline-size: var(--mod-alert-banner-inline-size, var(--spectrum-alert-banner-inline-size)); - max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size)); - min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height)); - font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size)); - font-family: var(--mod-alert-banner-font-family, var(--spectrum-alert-banner-font-family)); - line-height: var(--mod-alert-banner-line-height, var(--spectrum-alert-banner-line-height)); - color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color)); - background: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background)); + inline-size: var(--spectrum-alert-banner-inline-size); + max-inline-size: var(--spectrum-alert-banner-max-inline-size); + min-block-size: var(--spectrum-alert-banner-min-height); + font-size: var(--spectrum-alert-banner-font-size); + font-family: var(--spectrum-alert-banner-font-family); + line-height: var(--spectrum-alert-banner-line-height); + color: var(--spectrum-alert-banner-font-color); + background: var(--spectrum-alert-banner-background); border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent); &.is-open { @@ -85,15 +80,15 @@ justify-content: flex-end; /* Inline spacing between text and button, only when the button has not wrapped to the next line. */ - column-gap: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal)); + column-gap: var(--spectrum-alert-banner-text-to-button-horizontal); /* Block spacing between text and button, when the button has wrapped to the next line. Takes into account the existing margins on the text. */ - row-gap: max(var(--mod-alert-banner-text-to-button-vertical, 0px), var(--spectrum-alert-banner-text-to-button-vertical) - var(--spectrum-alert-banner-text-margin-block-end)); + row-gap: max(0px, var(--spectrum-alert-banner-text-to-button-vertical) - var(--spectrum-alert-banner-text-margin-block-end)); - padding-block: var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)); - margin-inline-start: var(--mod-alert-banner-inline-start-to-content, var(--spectrum-alert-banner-inline-start-to-content)); - margin-inline-end: var(--mod-alert-banner-inline-end-to-content, var(--spectrum-alert-banner-inline-end-to-content)); + padding-block: var(--spectrum-alert-banner-block-edge-to-button); + margin-inline-start: var(--spectrum-alert-banner-inline-start-to-content); + margin-inline-end: var(--spectrum-alert-banner-inline-end-to-content); /* When dismissible, this spacing is handled by the margin-inline-start on the close button instead. */ .spectrum-AlertBanner:has(.spectrum-CloseButton) & { @@ -106,18 +101,25 @@ flex-grow: 1; } +.spectrum-CloseButton { + /* @passthrough -- settings for nested Close button */ + --spectrum-closebutton-margin-inline: var(--spectrum-alert-banner-close-button-to-content) var(--spectrum-alert-banner-close-button-to-inline-end); + --spectrum-closebutton-margin-top: var(--spectrum-alert-banner-block-edge-to-button); + --spectrum-closebutton-align-self: flex-start; +} + .spectrum-AlertBanner-icon { /* @passthrough -- icon-size */ - --mod-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); + --spectrum-icon-size: var(--spectrum-alert-banner-icon-size); - margin-block-start: calc(var(--mod-alert-banner-top-to-icon, var(--spectrum-alert-banner-top-to-workflow-icon)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button))); - margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text)); + margin-block-start: calc(var(--spectrum-alert-banner-top-to-icon) - var(--spectrum-alert-banner-block-edge-to-button)); + margin-inline-end: var(--spectrum-alert-banner-icon-to-text); flex-shrink: 0; } .spectrum-AlertBanner-text { - margin-block-start: var(--mod-alert-banner-text-margin-block-start, var(--spectrum-alert-banner-text-margin-block-start)); - margin-block-end: var(--mod-alert-banner-text-margin-block-end, var(--spectrum-alert-banner-text-margin-block-end)); + margin-block-start: var(--spectrum-alert-banner-text-margin-block-start); + margin-block-end: var(--spectrum-alert-banner-text-margin-block-end); } @media (forced-colors: active) { diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js index ec0278583fd..c91d8727899 100644 --- a/components/alertbanner/stories/template.js +++ b/components/alertbanner/stories/template.js @@ -49,7 +49,7 @@ export const Template = ({ ${when( ["negative", "info"].some(type => variant === type), () => Icon({ - iconName: variant === "negative" ? "Alert" : "Info", + iconName: variant === "negative" ? "AlertTriangle" : "InfoCircle", setName: "workflow", customClasses: [`${rootClass}-icon`], }, context) diff --git a/components/alertdialog/dist/metadata.json b/components/alertdialog/dist/metadata.json index 7510ea9f7aa..49059f46658 100644 --- a/components/alertdialog/dist/metadata.json +++ b/components/alertdialog/dist/metadata.json @@ -3,39 +3,15 @@ "selectors": [ ".spectrum-AlertDialog", ".spectrum-AlertDialog .spectrum-Icon", - ".spectrum-AlertDialog--error", - ".spectrum-AlertDialog--warning", + ".spectrum-AlertDialog--error .spectrum-AlertDialog-icon", + ".spectrum-AlertDialog--warning .spectrum-AlertDialog-icon", ".spectrum-AlertDialog-buttongroup", + ".spectrum-AlertDialog-buttongroup .spectrum-ButtonGroup", ".spectrum-AlertDialog-content", ".spectrum-AlertDialog-grid", ".spectrum-AlertDialog-header", ".spectrum-AlertDialog-heading" ], - "modifiers": [ - "--mod-alert-dialog-background-color", - "--mod-alert-dialog-body-color", - "--mod-alert-dialog-body-font-family", - "--mod-alert-dialog-body-font-style", - "--mod-alert-dialog-body-font-weight", - "--mod-alert-dialog-body-line-height", - "--mod-alert-dialog-corner-radius", - "--mod-alert-dialog-description-content-size", - "--mod-alert-dialog-description-to-button-group", - "--mod-alert-dialog-edge-to-content", - "--mod-alert-dialog-error-icon-color", - "--mod-alert-dialog-heading-size", - "--mod-alert-dialog-icon-size", - "--mod-alert-dialog-max-width", - "--mod-alert-dialog-min-width", - "--mod-alert-dialog-minimum-title-to-icon", - "--mod-alert-dialog-title-color", - "--mod-alert-dialog-title-font-family", - "--mod-alert-dialog-title-font-style", - "--mod-alert-dialog-title-font-weight", - "--mod-alert-dialog-title-line-height", - "--mod-alert-dialog-title-to-description", - "--mod-alert-dialog-warning-icon-color" - ], "component": [ "--spectrum-alert-dialog-background-color", "--spectrum-alert-dialog-body-color", @@ -70,6 +46,7 @@ "--spectrum-body-color", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", + "--spectrum-buttongroup-justify-content", "--spectrum-corner-radius-extra-large-default", "--spectrum-heading-color", "--spectrum-heading-line-height", @@ -84,6 +61,6 @@ "--spectrum-spacing-500", "--spectrum-workflow-icon-size-100" ], - "passthroughs": ["--mod-buttongroup-justify-content", "--mod-icon-color"], + "passthroughs": [], "high-contrast": [] } diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css index 0bc24598937..7022c233e32 100644 --- a/components/alertdialog/index.css +++ b/components/alertdialog/index.css @@ -41,38 +41,33 @@ --spectrum-alert-dialog-title-to-description: var(--spectrum-spacing-300); --spectrum-alert-dialog-minimum-title-to-icon: var(--spectrum-spacing-100); --spectrum-alert-dialog-description-to-button-group: var(--spectrum-spacing-500); - - /* @passthrough -- mods for nested component */ - --mod-buttongroup-justify-content: flex-end; } .spectrum-AlertDialog { display: flex; box-sizing: border-box; inline-size: fit-content; - min-inline-size: var(--mod-alert-dialog-min-width, var(--spectrum-alert-dialog-min-width)); - max-inline-size: var(--mod-alert-dialog-max-width, var(--spectrum-alert-dialog-max-width)); + min-inline-size: var(--spectrum-alert-dialog-min-width); + max-inline-size: var(--spectrum-alert-dialog-max-width); max-block-size: inherit; - background-color: var(--mod-alert-dialog-background-color, var(--spectrum-alert-dialog-background-color)); + background-color: var(--spectrum-alert-dialog-background-color); outline: none; - padding: var(--mod-alert-dialog-edge-to-content, var(--spectrum-alert-dialog-edge-to-content)); - border-radius: var(--mod-alert-dialog-corner-radius, var(--spectrum-alert-dialog-corner-radius)); + padding: var(--spectrum-alert-dialog-edge-to-content); + border-radius: var(--spectrum-alert-dialog-corner-radius); .spectrum-Icon { - inline-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size)); - block-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size)); + inline-size: var(--spectrum-alert-dialog-icon-size); + block-size: var(--spectrum-alert-dialog-icon-size); flex-shrink: 0; } } -.spectrum-AlertDialog--warning { - /* @passthrough */ - --mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color)); +.spectrum-AlertDialog--warning .spectrum-AlertDialog-icon { + color: var(--spectrum-alert-dialog-warning-icon-color); } -.spectrum-AlertDialog--error { - /* @passthrough */ - --mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color)); +.spectrum-AlertDialog--error .spectrum-AlertDialog-icon { + color: var(--spectrum-alert-dialog-error-icon-color); } .spectrum-AlertDialog-grid { @@ -82,30 +77,30 @@ .spectrum-AlertDialog-header { display: flex; - gap: var(--mod-alert-dialog-minimum-title-to-icon, var(--spectrum-alert-dialog-minimum-title-to-icon)); + gap: var(--spectrum-alert-dialog-minimum-title-to-icon); align-items: center; - margin-block-end: var(--mod-alert-dialog-title-to-description, var(--spectrum-alert-dialog-title-to-description)); + margin-block-end: var(--spectrum-alert-dialog-title-to-description); } .spectrum-AlertDialog-heading { - font-family: var(--mod-alert-dialog-title-font-family, var(--spectrum-alert-dialog-title-font-family)); - font-weight: var(--mod-alert-dialog-title-font-weight, var(--spectrum-alert-dialog-title-font-weight)); - font-style: var(--mod-alert-dialog-title-font-style, var(--spectrum-alert-dialog-title-font-style)); - font-size: var(--mod-alert-dialog-heading-size, var(--spectrum-alert-dialog-heading-size)); - line-height: var(--mod-alert-dialog-title-line-height, var(--spectrum-alert-dialog-title-line-height)); - color: var(--mod-alert-dialog-title-color, var(--spectrum-alert-dialog-title-color)); + font-family: var(--spectrum-alert-dialog-title-font-family); + font-weight: var(--spectrum-alert-dialog-title-font-weight); + font-style: var(--spectrum-alert-dialog-title-font-style); + font-size: var(--spectrum-alert-dialog-heading-size); + line-height: var(--spectrum-alert-dialog-title-line-height); + color: var(--spectrum-alert-dialog-title-color); margin: 0; } .spectrum-AlertDialog-content { - font-family: var(--mod-alert-dialog-body-font-family, var(--spectrum-alert-dialog-body-font-family)); - font-weight: var(--mod-alert-dialog-body-font-weight, var(--spectrum-alert-dialog-body-font-weight)); - font-style: var(--mod-alert-dialog-body-font-style, var(--spectrum-alert-dialog-body-font-style)); - font-size: var(--mod-alert-dialog-description-content-size, var(--spectrum-alert-dialog-description-content-size)); - line-height: var(--mod-alert-dialog-body-line-height, var(--spectrum-alert-dialog-body-line-height)); - color: var(--mod-alert-dialog-body-color, var(--spectrum-alert-dialog-body-color)); + font-family: var(--spectrum-alert-dialog-body-font-family); + font-weight: var(--spectrum-alert-dialog-body-font-weight); + font-style: var(--spectrum-alert-dialog-body-font-style); + font-size: var(--spectrum-alert-dialog-description-content-size); + line-height: var(--spectrum-alert-dialog-body-line-height); + color: var(--spectrum-alert-dialog-body-color); margin: 0; - margin-block-end: var(--mod-alert-dialog-description-to-button-group, var(--spectrum-alert-dialog-description-to-button-group)); + margin-block-end: var(--spectrum-alert-dialog-description-to-button-group); overflow-y: auto; -webkit-overflow-scrolling: touch; @@ -114,6 +109,11 @@ .spectrum-AlertDialog-buttongroup { display: flex; justify-content: end; + + .spectrum-ButtonGroup { + /* @passthrough -- mods for nested component */ + --spectrum-buttongroup-justify-content: flex-end; + } } @media (forced-colors: active) { diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js index 721ba198f8f..48594e7a80e 100644 --- a/components/alertdialog/stories/alertdialog.stories.js +++ b/components/alertdialog/stories/alertdialog.stories.js @@ -142,7 +142,7 @@ Error.args = { isOpen: true, variant: "error", heading: "Unable to share", - icon: "Alert", + icon: "AlertTriangle", content: "An error occurred while sharing your project. Please verify the email address and try again.", }; Error.parameters = { diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json index 6389e295f47..09d31ec710c 100644 --- a/components/asset/dist/metadata.json +++ b/components/asset/dist/metadata.json @@ -10,19 +10,14 @@ ".spectrum-Asset-folderOutline", ".spectrum-Asset-image" ], - "modifiers": [ - "--mod-asset-file-background-color", - "--mod-asset-folder-background-color", - "--mod-asset-icon-margin", - "--mod-asset-icon-max-width", - "--mod-asset-icon-min-width", - "--mod-asset-icon-outline-color" - ], "component": [ "--spectrum-asset-file-background", "--spectrum-asset-file-outline", "--spectrum-asset-folder-background", - "--spectrum-asset-folder-outline" + "--spectrum-asset-folder-outline", + "--spectrum-asset-icon-margin", + "--spectrum-asset-icon-max-width", + "--spectrum-asset-icon-min-width" ], "global": [ "--spectrum-animation-duration-100", @@ -31,5 +26,5 @@ "--spectrum-gray-500" ], "passthroughs": [], - "high-contrast": ["--highcontrast-asset-icon-background-color"] + "high-contrast": [] } diff --git a/components/asset/index.css b/components/asset/index.css index e31f6aea3a7..9405abbd6bc 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -12,10 +12,10 @@ */ .spectrum-Asset { - --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)); + --spectrum-asset-folder-background: var(--spectrum-gray-200); + --spectrum-asset-file-background: var(--spectrum-gray-25); + --spectrum-asset-folder-outline: var(--spectrum-gray-500); + --spectrum-asset-file-outline: var(--spectrum-gray-500); display: flex; align-items: center; @@ -34,9 +34,9 @@ .spectrum-Asset-folder, .spectrum-Asset-file { - inline-size: clamp(var(--mod-asset-icon-min-width, 48px), 100%, var(--mod-asset-icon-max-width, 80px)); + inline-size: clamp(var(--spectrum-asset-icon-min-width, 48px), 100%, var(--spectrum-asset-icon-max-width, 80px)); block-size: 100%; - margin: var(--mod-asset-icon-margin, 20px); + margin: var(--spectrum-asset-icon-margin, 20px); } .spectrum-Asset-folderBackground { @@ -56,7 +56,8 @@ } @media (forced-colors: active) { - .spectrum-Asset { - --highcontrast-asset-icon-background-color: currentColor; + .spectrum-Asset-folderBackground, + .spectrum-Asset-fileBackground { + fill: currentColor; } } diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json index 94bf07de0af..0bdada20d7c 100644 --- a/components/assetcard/dist/metadata.json +++ b/components/assetcard/dist/metadata.json @@ -42,55 +42,6 @@ ".spectrum-AssetCard:lang(ko)", ".spectrum-AssetCard:lang(zh)" ], - "modifiers": [ - "--mod-assectcard-border-color-selected-down", - "--mod-assectcard-focus-indicator-color", - "--mod-assetcard-asset-animation-duration", - "--mod-assetcard-asset-container-border-size", - "--mod-assetcard-asset-size", - "--mod-assetcard-background-color", - "--mod-assetcard-border-color", - "--mod-assetcard-border-color-down", - "--mod-assetcard-border-color-hover", - "--mod-assetcard-border-color-selected", - "--mod-assetcard-border-color-selected-hover", - "--mod-assetcard-border-radius", - "--mod-assetcard-content-font-family", - "--mod-assetcard-content-font-size", - "--mod-assetcard-content-font-style", - "--mod-assetcard-content-font-weight", - "--mod-assetcard-content-letter-spacing", - "--mod-assetcard-content-line-height", - "--mod-assetcard-content-margin-block-start", - "--mod-assetcard-content-text-color", - "--mod-assetcard-focus-indicator-thickness", - "--mod-assetcard-focus-ring-border-radius", - "--mod-assetcard-focus-ring-gap", - "--mod-assetcard-header-content-font-family", - "--mod-assetcard-header-content-font-size", - "--mod-assetcard-header-content-font-stlye", - "--mod-assetcard-header-content-font-weight", - "--mod-assetcard-header-content-letter-spacing", - "--mod-assetcard-header-content-line-height", - "--mod-assetcard-header-content-text-color", - "--mod-assetcard-header-margin-block-start", - "--mod-assetcard-overlay-background-color", - "--mod-assetcard-selectionindicator-background-color-default", - "--mod-assetcard-selectionindicator-background-color-ordered", - "--mod-assetcard-selectionindicator-border-radius", - "--mod-assetcard-selectionindicator-color", - "--mod-assetcard-selectionindicator-font-size", - "--mod-assetcard-selectionindicator-font-weight", - "--mod-assetcard-selectionindicator-margin", - "--mod-assetcard-selectionindicator-size", - "--mod-assetcard-title-font-family", - "--mod-assetcard-title-font-size", - "--mod-assetcard-title-font-style", - "--mod-assetcard-title-font-weight", - "--mod-assetcard-title-letter-spacing", - "--mod-assetcard-title-line-height", - "--mod-assetcard-title-text-color" - ], "component": [ "--spectrum-assetcard-asset-animation-duration", "--spectrum-assetcard-asset-container-border-size", diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 56c40cc58c1..b8110d8de78 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -73,7 +73,7 @@ display: flex; flex-direction: column; - inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size)); + inline-size: var(--spectrum-assetcard-asset-size); cursor: pointer; @@ -104,18 +104,18 @@ &:hover, &:focus-visible { .spectrum-AssetCard-assetContainer::after { - border-color: var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover))); + border-color: var(--highcontrast-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover)); } /* adds hover to checkbox when spectrum-AssetCard card receives hover */ .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover))); + border-color: var(--highcontrast-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover)); } } &:active { .spectrum-AssetCard-assetContainer::after { - border-color: var(--mod-assetcard-border-color-down, var(--spectrum-assetcard-border-color-down)); + border-color: var(--spectrum-assetcard-border-color-down); } } @@ -137,29 +137,29 @@ align-items: center; justify-content: center; - inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size)); - block-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size)); + inline-size: var(--spectrum-assetcard-asset-size); + block-size: var(--spectrum-assetcard-asset-size); - border-radius: var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)); + border-radius: var(--spectrum-assetcard-border-radius); - background-color: var(--mod-assetcard-background-color, var(--spectrum-assetcard-background-color)); + background-color: var(--spectrum-assetcard-background-color); - transition: border var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; + transition: border var(--spectrum-assetcard-asset-animation-duration) ease-in-out; /* focus indicator */ &::before { content: ""; position: absolute; - inset: calc(-1 * var(--mod-assetcard-focus-ring-gap, var(--spectrum-assetcard-focus-ring-gap))); + inset: calc(-1 * var(--spectrum-assetcard-focus-ring-gap)); - border: var(--mod-assetcard-focus-indicator-thickness, var(--spectrum-assetcard-focus-indicator-thickness)) solid var(--mod-assectcard-focus-indicator-color, var(--spectrum-assestcard-focus-indicator-color)); + border: var(--spectrum-assetcard-focus-indicator-thickness) solid var(--spectrum-assestcard-focus-indicator-color); - border-radius: var(--mod-assetcard-focus-ring-border-radius, var(--spectrum-assetcard-focus-ring-border-radius)); + border-radius: var(--spectrum-assetcard-focus-ring-border-radius); opacity: 0; pointer-events: none; - transition: opacity var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; + transition: opacity var(--spectrum-assetcard-asset-animation-duration) ease-in-out; } /* border */ @@ -169,8 +169,8 @@ inset: 0; z-index: 3; - border: var(--mod-assetcard-asset-container-border-size, var(--spectrum-assetcard-asset-container-border-size)) solid var(--mod-assetcard-border-color, var(--spectrum-assetcard-border-color)); - border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px); + border: var(--spectrum-assetcard-asset-container-border-size) solid var(--spectrum-assetcard-border-color); + border-radius: calc(var(--spectrum-assetcard-border-radius) - 1px); } } @@ -182,10 +182,10 @@ block-size: 100%; transition: - inline-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out, - block-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; + inline-size var(--spectrum-assetcard-asset-animation-duration) ease-in-out, + block-size var(--spectrum-assetcard-asset-animation-duration) ease-in-out; - border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px); + border-radius: calc(var(--spectrum-assetcard-border-radius) - 1px); } /* header area, contains the header and optional content */ @@ -195,33 +195,33 @@ align-items: center; /* space between the asset and the header, place it on the header so header can be optional */ - margin-block-start: var(--mod-assetcard-header-margin-block-start, var(--spectrum-assetcard-header-margin-block-start)); + margin-block-start: var(--spectrum-assetcard-header-margin-block-start); } /* bold title */ .spectrum-AssetCard-title { flex-grow: 1; - color: var(--mod-assetcard-title-text-color, var(--spectrum-assetcard-title-text-color)); + color: var(--spectrum-assetcard-title-text-color); - font-family: var(--mod-assetcard-title-font-family, var(--spectrum-assetcard-title-font-family)); - font-weight: var(--mod-assetcard-title-font-weight, var(--spectrum-assetcard-title-font-weight)); - font-size: var(--mod-assetcard-title-font-size, var(--spectrum-assetcard-title-font-size)); - line-height: var(--mod-assetcard-title-line-height, var(--spectrum-assetcard-title-line-height)); - font-style: var(--mod-assetcard-title-font-style, var(--spectrum-assetcard-title-font-style)); - letter-spacing: var(--mod-assetcard-title-letter-spacing, var(--spectrum-assetcard-title-letter-spacing)); + font-family: var(--spectrum-assetcard-title-font-family); + font-weight: var(--spectrum-assetcard-title-font-weight); + font-size: var(--spectrum-assetcard-title-font-size); + line-height: var(--spectrum-assetcard-title-line-height); + font-style: var(--spectrum-assetcard-title-font-style); + letter-spacing: var(--spectrum-assetcard-title-letter-spacing); } /* optional content placed to the right of the title */ .spectrum-AssetCard-headerContent { - color: var(--mod-assetcard-header-content-text-color, var(--spectrum-assetcard-header-content-text-color)); - - font-family: var(--mod-assetcard-header-content-font-family, var(--spectrum-assetcard-header-content-font-family)); - font-size: var(--mod-assetcard-header-content-font-size, var(--spectrum-assetcard-header-content-font-size)); - font-weight: var(--mod-assetcard-header-content-font-weight, var(--spectrum-assetcard-header-content-font-weight)); - line-height: var(--mod-assetcard-header-content-line-height, var(--spectrum-assetcard-header-content-line-height)); - font-style: var(--mod-assetcard-header-content-font-stlye, var(--spectrum-assetcard-header-content-font-style)); - letter-spacing: var(--mod-assetcard-header-content-letter-spacing, var(--spectrum-assetcard-header-content-letter-spacing)); + color: var(--spectrum-assetcard-header-content-text-color); + + font-family: var(--spectrum-assetcard-header-content-font-family); + font-size: var(--spectrum-assetcard-header-content-font-size); + font-weight: var(--spectrum-assetcard-header-content-font-weight); + line-height: var(--spectrum-assetcard-header-content-line-height); + font-style: var(--spectrum-assetcard-header-content-font-style); + letter-spacing: var(--spectrum-assetcard-header-content-letter-spacing); } /* content area, the last thing in the card */ @@ -229,16 +229,16 @@ flex-grow: 1; /* space between the content and the header, place it on the content so content can be optional */ - margin-block-start: var(--mod-assetcard-content-margin-block-start, var(--spectrum-assetcard-content-margin-block-start)); + margin-block-start: var(--spectrum-assetcard-content-margin-block-start); - color: var(--mod-assetcard-content-text-color, var(--spectrum-assetcard-content-text-color)); + color: var(--spectrum-assetcard-content-text-color); - font-family: var(--mod-assetcard-content-font-family, var(--spectrum-assetcard-content-font-family)); - font-size: var(--mod-assetcard-content-font-size, var(--spectrum-assetcard-content-font-size)); - font-weight: var(--mod-assetcard-content-font-weight, var(--spectrum-assetcard-content-font-weight)); - line-height: var(--mod-assetcard-content-line-height, var(--spectrum-assetcard-content-line-height)); - font-style: var(--mod-assetcard-content-font-style, var(--spectrum-assetcard-content-font-style)); - letter-spacing: var(--mod-assetcard-content-letter-spacing, var(--spectrum-assetcard-content-letter-spacing)); + font-family: var(--spectrum-assetcard-content-font-family); + font-size: var(--spectrum-assetcard-content-font-size); + font-weight: var(--spectrum-assetcard-content-font-weight); + line-height: var(--spectrum-assetcard-content-line-height); + font-style: var(--spectrum-assetcard-content-font-style); + letter-spacing: var(--spectrum-assetcard-content-letter-spacing); } /* Selection styles */ @@ -250,34 +250,34 @@ background-color: transparent; pointer-events: none; - transition: background-color var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; + transition: background-color var(--spectrum-assetcard-asset-animation-duration) ease-in-out; - border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px); + border-radius: calc(var(--spectrum-assetcard-border-radius) - 1px); } /* the checkbox or selection order indicator */ .spectrum-AssetCard-selectionIndicator { position: absolute; z-index: 2; - inset-inline-start: var(--mod-assetcard-selectionindicator-margin, var(--spectrum-assetcard-selectionindicator-margin)); - inset-block-start: var(--mod-assetcard-selectionindicator-margin, var(--spectrum-assetcard-selectionindicator-margin)); + inset-inline-start: var(--spectrum-assetcard-selectionindicator-margin); + inset-block-start: var(--spectrum-assetcard-selectionindicator-margin); display: none; align-items: center; justify-content: center; - inline-size: var(--mod-assetcard-selectionindicator-size, var(--spectrum-assetcard-selectionindicator-size)); - block-size: var(--mod-assetcard-selectionindicator-size, var(--spectrum-assetcard-selectionindicator-size)); + inline-size: var(--spectrum-assetcard-selectionindicator-size); + block-size: var(--spectrum-assetcard-selectionindicator-size); - border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius)); + border-radius: var(--spectrum-assetcard-selectionindicator-border-radius); box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) var(--spectrum-assetcard-selectionindicator-box-shadow-color); - color: var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color))); - font-weight: var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight)); - font-size: var(--mod-assetcard-selectionindicator-font-size, var(--spectrum-assetcard-selectionindicator-font-size)); + color: var(--highcontrast-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color)); + font-weight: var(--spectrum-assetcard-selectionindicator-font-weight); + font-size: var(--spectrum-assetcard-selectionindicator-font-size); - transition: opacity var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out; + transition: opacity var(--spectrum-assetcard-asset-animation-duration) ease-in-out; background-color: transparent; } @@ -290,22 +290,22 @@ .spectrum-AssetCard.is-drop-target, .spectrum-AssetCard.is-selected { .spectrum-AssetCard-assetContainer::after { - border-color: var(--highcontrast-assetcard-border-color-selected, var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected))); + border-color: var(--highcontrast-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected)); } .spectrum-AssetCard-selectionOverlay { - background-color: var(--mod-assetcard-overlay-background-color, var(--spectrum-assetcard-overlay-background-color)); + background-color: var(--spectrum-assetcard-overlay-background-color); } &:hover { .spectrum-AssetCard-assetContainer::after { - border-color: var(--highcontrast-assetcard-border-color-selected-hover, var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover))); + border-color: var(--highcontrast-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover)); } } &:active { .spectrum-AssetCard-assetContainer::after { - border-color: var(--highcontrast-assectcard-border-color-selected-down, var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down))); + border-color: var(--highcontrast-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down)); } } } @@ -326,7 +326,7 @@ /* with a checkbox */ .spectrum-AssetCard--checkboxSelection { .spectrum-AssetCard-selectionIndicator { - background-color: var(--mod-assetcard-selectionindicator-background-color-default, var(--spectrum-assetcard-selectionindicator-background-color-default)); + background-color: var(--spectrum-assetcard-selectionindicator-background-color-default); .spectrum-AssetCard-selectionOrder { display: none; @@ -346,7 +346,7 @@ /* with the little order flag that shows the selection order */ .spectrum-AssetCard--orderedSelection { .spectrum-AssetCard-selectionIndicator { - background-color: var(--highcontrast-assetcard-selectionindicator-background-color-ordered, var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered))); + background-color: var(--highcontrast-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered)); .spectrum-AssetCard-checkbox { display: none; diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json index 0da89f4ae57..67f99c5dab2 100644 --- a/components/assetlist/dist/metadata.json +++ b/components/assetlist/dist/metadata.json @@ -26,28 +26,6 @@ ".spectrum-AssetList-itemSelector", ".spectrum-AssetList:dir(rtl)" ], - "modifiers": [ - "--mod-assetlist-border-color-key-focus", - "--mod-assetlist-child-indicator-animation", - "--mod-assetlist-item-animation", - "--mod-assetlist-item-background-color-down", - "--mod-assetlist-item-background-color-hover", - "--mod-assetlist-item-background-color-selected", - "--mod-assetlist-item-background-color-selected-hover", - "--mod-assetlist-item-border-radius", - "--mod-assetlist-item-font-size", - "--mod-assetlist-item-font-weight", - "--mod-assetlist-item-height", - "--mod-assetlist-item-label-padding-inline-start", - "--mod-assetlist-item-margin-bottom", - "--mod-assetlist-item-padding-inline-end", - "--mod-assetlist-item-padding-inline-start", - "--mod-assetlist-label-color", - "--mod-assetlist-thumbnail-margin-left", - "--mod-assetlist-thumbnail-width", - "--mod-assetlist-thumnail-height", - "--mod-assetlist-width" - ], "component": [ "--spectrum-assetlist-border-color-key-focus", "--spectrum-assetlist-child-indicator-animation", diff --git a/components/assetlist/index.css b/components/assetlist/index.css index 28801db0d89..cd59ac920a9 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -48,26 +48,26 @@ .spectrum-AssetList-item { position: relative; - color: var(--highcontrast-assetlist-label-color, var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))); + color: var(--highcontrast-assetlist-label-color, var(--spectrum-assetlist-label-color)); display: flex; box-sizing: border-box; align-items: center; - inline-size: var(--mod-assetlist-width, var(--spectrum-assetlist-width)); - block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height)); + inline-size: var(--spectrum-assetlist-width); + block-size: var(--spectrum-assetlist-item-height); padding-block: 0; - padding-inline: var(--mod-assetlist-item-padding-inline-start, var(--spectrum-assetlist-item-padding-inline-start)) var(--mod-assetlist-item-padding-inline-end, var(--spectrum-assetlist-item-padding-inline-end)); - margin-block: 0 var(--mod-assetlist-item-margin-bottom, var(--spectrum-assetlist-item-margin-block-end)); + padding-inline: var(--spectrum-assetlist-item-padding-inline-start) var(--spectrum-assetlist-item-padding-inline-end); + margin-block: 0 var(--spectrum-assetlist-item-margin-block-end); margin-inline: 0; - border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius)); + border-radius: var(--spectrum-assetlist-item-border-radius); - transition: background-color var(--mod-assetlist-item-animation, var(--spectrum-assetlist-item-animation)) ease-in-out; + transition: background-color var(--spectrum-assetlist-item-animation) ease-in-out; - font-size: var(--mod-assetlist-item-font-size, var(--spectrum-assetlist-item-font-size)); - font-weight: var(--mod-assetlist-item-font-weight, var(--spectrum-assetlist-item-font-weight)); + font-size: var(--spectrum-assetlist-item-font-size); + font-weight: var(--spectrum-assetlist-item-font-weight); font-style: normal; cursor: pointer; @@ -81,11 +81,11 @@ inset-inline-start: 0; inset-inline-end: 0; - block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height)); + block-size: var(--spectrum-assetlist-item-height); background-color: transparent; - border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius)); + border-radius: var(--spectrum-assetlist-item-border-radius); } &.is-selectable, @@ -109,44 +109,44 @@ /* Remove the border on images inside links in IE 10-. */ border-style: none; - inline-size: var(--mod-assetlist-thumbnail-width, var(--spectrum-assetlist-thumbnail-width)); - block-size: var(--mod-assetlist-thumnail-height, var(--spectrum-assetlist-thumbnail-height)); - margin-inline-start: var(--mod-assetlist-thumbnail-margin-left, var(--spectrum-assetlist-thumbnail-margin-inline-start)); + inline-size: var(--spectrum-assetlist-thumbnail-width); + block-size: var(--spectrum-assetlist-thumbnail-height); + margin-inline-start: var(--spectrum-assetlist-thumbnail-margin-inline-start); vertical-align: middle; } &:hover { - background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))); + background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover)); } &:focus-within { &:focus-visible, &.is-focused { - background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))); + background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover)); &::before { /* we cannot achieve rounded corners with outline so we use box-shadow instead */ - box-shadow: 0 0 0 2px var(--highcontrast-assetlist-border-color-key-focus, var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))) inset; + box-shadow: 0 0 0 2px var(--highcontrast-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus)) inset; } } } &.is-navigated { /* gray background */ - background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down)); + background-color: var(--spectrum-assetlist-item-background-color-down); &:hover, &:focus { - background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down)); + background-color: var(--spectrum-assetlist-item-background-color-down); } } &.is-selected { - background-color: var(--highcontrast-assetlist-item-background-color-selected, var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected))); + background-color: var(--highcontrast-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected)); &:hover, &:focus { - background-color: var(--highcontrast-assetlist-item-background-color-selected-hover, var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover))); + background-color: var(--highcontrast-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover)); } } } @@ -157,13 +157,13 @@ .spectrum-AssetList-itemChildIndicator { display: none; - transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation)); + transition: transform ease var(--spectrum-assetlist-child-indicator-animation); transform: var(--spectrum-logical-rotation,); } .spectrum-AssetList-itemLabel { flex: 1; - padding-inline-start: var(--mod-assetlist-item-label-padding-inline-start, var(--spectrum-assetlist-item-label-padding-inline-start)); + padding-inline-start: var(--spectrum-assetlist-item-label-padding-inline-start); text-overflow: ellipsis; overflow: hidden; diff --git a/components/avatar/dist/metadata.json b/components/avatar/dist/metadata.json index 6b5fb54aac2..104fa838815 100644 --- a/components/avatar/dist/metadata.json +++ b/components/avatar/dist/metadata.json @@ -25,16 +25,6 @@ ".spectrum-Avatar.is-focused:not(.is-disabled):after", ".spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after" ], - "modifiers": [ - "--mod-avatar-block-size", - "--mod-avatar-border-radius", - "--mod-avatar-color-opacity", - "--mod-avatar-color-opacity-disabled", - "--mod-avatar-focus-indicator-color", - "--mod-avatar-focus-indicator-gap", - "--mod-avatar-focus-indicator-thickness", - "--mod-avatar-inline-size" - ], "component": [ "--spectrum-avatar-block-size", "--spectrum-avatar-border-color", diff --git a/components/avatar/index.css b/components/avatar/index.css index e6203f003d8..c2ad391a77e 100644 --- a/components/avatar/index.css +++ b/components/avatar/index.css @@ -122,11 +122,11 @@ .spectrum-Avatar { display: inline-block; position: relative; - inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); - block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); + inline-size: var(--spectrum-avatar-inline-size); + block-size: var(--spectrum-avatar-block-size); border-style: solid; - border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); + border-radius: var(--spectrum-avatar-border-radius); border-width: var(--spectrum-avatar-border-thickness); border-color: var(--spectrum-avatar-border-color-default); @@ -137,10 +137,10 @@ overflow: visible; - opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity)); + opacity: var(--spectrum-avatar-color-opacity); &.is-disabled { - opacity: var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)); + opacity: var(--spectrum-avatar-color-opacity-disabled); } } @@ -150,16 +150,16 @@ pointer-events: none; content: ""; position: absolute; - inset-block-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1); - inset-inline-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1); + inset-block-start: calc((var(--spectrum-avatar-focus-indicator-gap) + var(--spectrum-avatar-focus-indicator-thickness)) * -1); + inset-inline-start: calc((var(--spectrum-avatar-focus-indicator-gap) + var(--spectrum-avatar-focus-indicator-thickness)) * -1); - inline-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + (var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2)); - block-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + (var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2)); + inline-size: calc(var(--spectrum-avatar-inline-size) + (var(--spectrum-avatar-focus-indicator-gap) * 2)); + block-size: calc(var(--spectrum-avatar-inline-size) + (var(--spectrum-avatar-focus-indicator-gap) * 2)); border-style: solid; - border-width: var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness)); - border-color: var(--highcontrast-avatar-focus-indicator-color, var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color))); - border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); + border-width: var(--spectrum-avatar-focus-indicator-thickness); + border-color: var(--highcontrast-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color)); + border-radius: var(--spectrum-avatar-border-radius); } } @@ -170,8 +170,8 @@ } .spectrum-Avatar-image { - inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); - block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); + inline-size: var(--spectrum-avatar-inline-size); + block-size: var(--spectrum-avatar-block-size); - border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); + border-radius: var(--spectrum-avatar-border-radius); } diff --git a/components/badge/dist/metadata.json b/components/badge/dist/metadata.json index 29aa729974a..d3799f09836 100644 --- a/components/badge/dist/metadata.json +++ b/components/badge/dist/metadata.json @@ -75,83 +75,6 @@ ".spectrum-Badge-label:lang(ko)", ".spectrum-Badge-label:lang(zh)" ], - "modifiers": [ - "--mod-badge-background-color-accent", - "--mod-badge-background-color-blue", - "--mod-badge-background-color-brown", - "--mod-badge-background-color-celery", - "--mod-badge-background-color-chartreuse", - "--mod-badge-background-color-cinnamon", - "--mod-badge-background-color-cyan", - "--mod-badge-background-color-default", - "--mod-badge-background-color-fuchsia", - "--mod-badge-background-color-gray", - "--mod-badge-background-color-green", - "--mod-badge-background-color-indigo", - "--mod-badge-background-color-informative", - "--mod-badge-background-color-magenta", - "--mod-badge-background-color-negative", - "--mod-badge-background-color-notice", - "--mod-badge-background-color-orange", - "--mod-badge-background-color-pink", - "--mod-badge-background-color-positive", - "--mod-badge-background-color-purple", - "--mod-badge-background-color-red", - "--mod-badge-background-color-seafoam", - "--mod-badge-background-color-silver", - "--mod-badge-background-color-turquoise", - "--mod-badge-background-color-yellow", - "--mod-badge-border-color", - "--mod-badge-border-width", - "--mod-badge-corner-radius", - "--mod-badge-font-size", - "--mod-badge-height", - "--mod-badge-icon-only-spacing-horizontal", - "--mod-badge-icon-spacing-horizontal", - "--mod-badge-icon-spacing-vertical-top", - "--mod-badge-icon-text-spacing", - "--mod-badge-label-icon-color", - "--mod-badge-label-spacing-horizontal", - "--mod-badge-label-spacing-vertical-bottom", - "--mod-badge-label-spacing-vertical-top", - "--mod-badge-line-height", - "--mod-badge-line-height-cjk", - "--mod-badge-outline-background-color-default", - "--mod-badge-outline-border-color-accent", - "--mod-badge-outline-border-color-informative", - "--mod-badge-outline-border-color-negative", - "--mod-badge-outline-border-color-neutral", - "--mod-badge-outline-border-color-notice", - "--mod-badge-outline-border-color-positive", - "--mod-badge-outline-label-icon-color", - "--mod-badge-subtle-background-color-accent", - "--mod-badge-subtle-background-color-blue", - "--mod-badge-subtle-background-color-brown", - "--mod-badge-subtle-background-color-celery", - "--mod-badge-subtle-background-color-chartreuse", - "--mod-badge-subtle-background-color-cinnamon", - "--mod-badge-subtle-background-color-cyan", - "--mod-badge-subtle-background-color-default", - "--mod-badge-subtle-background-color-fuchsia", - "--mod-badge-subtle-background-color-gray", - "--mod-badge-subtle-background-color-green", - "--mod-badge-subtle-background-color-indigo", - "--mod-badge-subtle-background-color-informative", - "--mod-badge-subtle-background-color-magenta", - "--mod-badge-subtle-background-color-negative", - "--mod-badge-subtle-background-color-notice", - "--mod-badge-subtle-background-color-orange", - "--mod-badge-subtle-background-color-pink", - "--mod-badge-subtle-background-color-positive", - "--mod-badge-subtle-background-color-purple", - "--mod-badge-subtle-background-color-red", - "--mod-badge-subtle-background-color-seafoam", - "--mod-badge-subtle-background-color-silver", - "--mod-badge-subtle-background-color-turquoise", - "--mod-badge-subtle-background-color-yellow", - "--mod-badge-subtle-label-icon-color", - "--mod-badge-workflow-icon-size" - ], "component": [ "--spectrum-badge-background-color-accent", "--spectrum-badge-background-color-blue", diff --git a/components/badge/index.css b/components/badge/index.css index 3498a25777f..23833afab1e 100644 --- a/components/badge/index.css +++ b/components/badge/index.css @@ -13,7 +13,7 @@ .spectrum-Badge { /* base badge styling for all t-shirt sizes and all themes */ - --spectrum-badge-border-width: var(--mod-badge-border-width, var(--spectrum-border-width-200)); + --spectrum-badge-border-width: var(--spectrum-border-width-200); --spectrum-badge-border-color: transparent; /* label text styles for all t-shirt sizes and all themes */ @@ -193,7 +193,7 @@ } .spectrum-Badge { - min-block-size: var(--mod-badge-height, var(--spectrum-badge-height)); + min-block-size: var(--spectrum-badge-height); inline-size: auto; display: inline-flex; @@ -202,12 +202,11 @@ cursor: default; - /* Due to calc() for spacing, --mod is included in base border-width token */ - border: var(--spectrum-badge-border-width) solid var(--mod-badge-border-color, var(--spectrum-badge-border-color)); - border-radius: var(--mod-badge-corner-radius, var(--spectrum-badge-corner-radius)); + border: var(--spectrum-badge-border-width) solid var(--spectrum-badge-border-color); + border-radius: var(--spectrum-badge-corner-radius); - background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default)); - color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color)); + background: var(--spectrum-badge-background-color-default); + color: var(--spectrum-badge-label-icon-color); /* Show background color under transparent border to correct visual height */ background-origin: border-box; @@ -218,242 +217,242 @@ /* background color variants */ .spectrum-Badge--neutral { - background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default)); + background: var(--spectrum-badge-background-color-default); } .spectrum-Badge--accent { - background: var(--mod-badge-background-color-accent, var(--spectrum-badge-background-color-accent)); + background: var(--spectrum-badge-background-color-accent); } .spectrum-Badge--informative { - background: var(--mod-badge-background-color-informative, var(--spectrum-badge-background-color-informative)); + background: var(--spectrum-badge-background-color-informative); } .spectrum-Badge--negative { - background: var(--mod-badge-background-color-negative, var(--spectrum-badge-background-color-negative)); + background: var(--spectrum-badge-background-color-negative); } .spectrum-Badge--positive { - background: var(--mod-badge-background-color-positive, var(--spectrum-badge-background-color-positive)); + background: var(--spectrum-badge-background-color-positive); } .spectrum-Badge--notice { - background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice)); + background: var(--spectrum-badge-background-color-notice); } /* non-semantic colors */ .spectrum-Badge--gray { - background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray)); + background: var(--spectrum-badge-background-color-gray); } .spectrum-Badge--red { - background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red)); + background: var(--spectrum-badge-background-color-red); } .spectrum-Badge--orange { - background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange)); + background: var(--spectrum-badge-background-color-orange); } .spectrum-Badge--yellow { - background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow)); + background: var(--spectrum-badge-background-color-yellow); } .spectrum-Badge--chartreuse { - background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse)); + background: var(--spectrum-badge-background-color-chartreuse); } .spectrum-Badge--celery { - background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery)); + background: var(--spectrum-badge-background-color-celery); } .spectrum-Badge--green { - background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green)); + background: var(--spectrum-badge-background-color-green); } .spectrum-Badge--seafoam { - background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam)); + background: var(--spectrum-badge-background-color-seafoam); } .spectrum-Badge--cyan { - background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan)); + background: var(--spectrum-badge-background-color-cyan); } .spectrum-Badge--blue { - background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue)); + background: var(--spectrum-badge-background-color-blue); } .spectrum-Badge--indigo { - background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo)); + background: var(--spectrum-badge-background-color-indigo); } .spectrum-Badge--purple { - background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple)); + background: var(--spectrum-badge-background-color-purple); } .spectrum-Badge--fuchsia { - background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia)); + background: var(--spectrum-badge-background-color-fuchsia); } .spectrum-Badge--magenta { - background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta)); + background: var(--spectrum-badge-background-color-magenta); } .spectrum-Badge--pink { - background: var(--mod-badge-background-color-pink, var(--spectrum-badge-background-color-pink)); + background: var(--spectrum-badge-background-color-pink); } .spectrum-Badge--turquoise { - background: var(--mod-badge-background-color-turquoise, var(--spectrum-badge-background-color-turquoise)); + background: var(--spectrum-badge-background-color-turquoise); } .spectrum-Badge--brown { - background: var(--mod-badge-background-color-brown, var(--spectrum-badge-background-color-brown)); + background: var(--spectrum-badge-background-color-brown); } .spectrum-Badge--cinnamon { - background: var(--mod-badge-background-color-cinnamon, var(--spectrum-badge-background-color-cinnamon)); + background: var(--spectrum-badge-background-color-cinnamon); } .spectrum-Badge--silver { - background: var(--mod-badge-background-color-silver, var(--spectrum-badge-background-color-silver)); + background: var(--spectrum-badge-background-color-silver); } /* Style = subtle */ .spectrum-Badge--style-subtle { - color: var(--mod-badge-subtle-label-icon-color, var(--spectrum-badge-subtle-label-icon-color)); + color: var(--spectrum-badge-subtle-label-icon-color); /* background color variants */ &.spectrum-Badge--neutral { - background: var(--mod-badge-subtle-background-color-default, var(--spectrum-badge-subtle-background-color-default)); + background: var(--spectrum-badge-subtle-background-color-default); } &.spectrum-Badge--accent { - background: var(--mod-badge-subtle-background-color-accent, var(--spectrum-badge-subtle-background-color-accent)); + background: var(--spectrum-badge-subtle-background-color-accent); } &.spectrum-Badge--informative { - background: var(--mod-badge-subtle-background-color-informative, var(--spectrum-badge-subtle-background-color-informative)); + background: var(--spectrum-badge-subtle-background-color-informative); } &.spectrum-Badge--negative { - background: var(--mod-badge-subtle-background-color-negative, var(--spectrum-badge-subtle-background-color-negative)); + background: var(--spectrum-badge-subtle-background-color-negative); } &.spectrum-Badge--positive { - background: var(--mod-badge-subtle-background-color-positive, var(--spectrum-badge-subtle-background-color-positive)); + background: var(--spectrum-badge-subtle-background-color-positive); } &.spectrum-Badge--notice { - background: var(--mod-badge-subtle-background-color-notice, var(--spectrum-badge-subtle-background-color-notice)); + background: var(--spectrum-badge-subtle-background-color-notice); } /* non-semantic colors */ &.spectrum-Badge--gray { - background: var(--mod-badge-subtle-background-color-gray, var(--spectrum-badge-subtle-background-color-gray)); + background: var(--spectrum-badge-subtle-background-color-gray); } &.spectrum-Badge--red { - background: var(--mod-badge-subtle-background-color-red, var(--spectrum-badge-subtle-background-color-red)); + background: var(--spectrum-badge-subtle-background-color-red); } &.spectrum-Badge--orange { - background: var(--mod-badge-subtle-background-color-orange, var(--spectrum-badge-subtle-background-color-orange)); + background: var(--spectrum-badge-subtle-background-color-orange); } &.spectrum-Badge--yellow { - background: var(--mod-badge-subtle-background-color-yellow, var(--spectrum-badge-subtle-background-color-yellow)); + background: var(--spectrum-badge-subtle-background-color-yellow); } &.spectrum-Badge--chartreuse { - background: var(--mod-badge-subtle-background-color-chartreuse, var(--spectrum-badge-subtle-background-color-chartreuse)); + background: var(--spectrum-badge-subtle-background-color-chartreuse); } &.spectrum-Badge--celery { - background: var(--mod-badge-subtle-background-color-celery, var(--spectrum-badge-subtle-background-color-celery)); + background: var(--spectrum-badge-subtle-background-color-celery); } &.spectrum-Badge--green { - background: var(--mod-badge-subtle-background-color-green, var(--spectrum-badge-subtle-background-color-green)); + background: var(--spectrum-badge-subtle-background-color-green); } &.spectrum-Badge--seafoam { - background: var(--mod-badge-subtle-background-color-seafoam, var(--spectrum-badge-subtle-background-color-seafoam)); + background: var(--spectrum-badge-subtle-background-color-seafoam); } &.spectrum-Badge--cyan { - background: var(--mod-badge-subtle-background-color-cyan, var(--spectrum-badge-subtle-background-color-cyan)); + background: var(--spectrum-badge-subtle-background-color-cyan); } &.spectrum-Badge--blue { - background: var(--mod-badge-subtle-background-color-blue, var(--spectrum-badge-subtle-background-color-blue)); + background: var(--spectrum-badge-subtle-background-color-blue); } &.spectrum-Badge--indigo { - background: var(--mod-badge-subtle-background-color-indigo, var(--spectrum-badge-subtle-background-color-indigo)); + background: var(--spectrum-badge-subtle-background-color-indigo); } &.spectrum-Badge--purple { - background: var(--mod-badge-subtle-background-color-purple, var(--spectrum-badge-subtle-background-color-purple)); + background: var(--spectrum-badge-subtle-background-color-purple); } &.spectrum-Badge--fuchsia { - background: var(--mod-badge-subtle-background-color-fuchsia, var(--spectrum-badge-subtle-background-color-fuchsia)); + background: var(--spectrum-badge-subtle-background-color-fuchsia); } &.spectrum-Badge--magenta { - background: var(--mod-badge-subtle-background-color-magenta, var(--spectrum-badge-subtle-background-color-magenta)); + background: var(--spectrum-badge-subtle-background-color-magenta); } &.spectrum-Badge--pink { - background: var(--mod-badge-subtle-background-color-pink, var(--spectrum-badge-subtle-background-color-pink)); + background: var(--spectrum-badge-subtle-background-color-pink); } &.spectrum-Badge--turquoise { - background: var(--mod-badge-subtle-background-color-turquoise, var(--spectrum-badge-subtle-background-color-turquoise)); + background: var(--spectrum-badge-subtle-background-color-turquoise); } &.spectrum-Badge--brown { - background: var(--mod-badge-subtle-background-color-brown, var(--spectrum-badge-subtle-background-color-brown)); + background: var(--spectrum-badge-subtle-background-color-brown); } &.spectrum-Badge--cinnamon { - background: var(--mod-badge-subtle-background-color-cinnamon, var(--spectrum-badge-subtle-background-color-cinnamon)); + background: var(--spectrum-badge-subtle-background-color-cinnamon); } &.spectrum-Badge--silver { - background: var(--mod-badge-subtle-background-color-silver, var(--spectrum-badge-subtle-background-color-silver)); + background: var(--spectrum-badge-subtle-background-color-silver); } } /* Style = outline - only valid for semantic colors */ .spectrum-Badge--style-outline { &:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice) { - background: var(--mod-badge-outline-background-color-default, var(--spectrum-badge-outline-background-color)); - color: var(--mod-badge-outline-label-icon-color, var(--spectrum-badge-outline-label-icon-color)); + background: var(--spectrum-badge-outline-background-color); + color: var(--spectrum-badge-outline-label-icon-color); } &.spectrum-Badge--neutral { - border-color: var(--mod-badge-outline-border-color-neutral, var(--spectrum-badge-outline-border-color-neutral)); + border-color: var(--spectrum-badge-outline-border-color-neutral); } &.spectrum-Badge--accent { - border-color: var(--mod-badge-outline-border-color-accent, var(--spectrum-badge-outline-border-color-accent)); + border-color: var(--spectrum-badge-outline-border-color-accent); } &.spectrum-Badge--informative { - border-color: var(--mod-badge-outline-border-color-informative, var(--spectrum-badge-outline-border-color-informative)); + border-color: var(--spectrum-badge-outline-border-color-informative); } &.spectrum-Badge--negative { - border-color: var(--mod-badge-outline-border-color-negative, var(--spectrum-badge-outline-border-color-negative)); + border-color: var(--spectrum-badge-outline-border-color-negative); } &.spectrum-Badge--positive { - border-color: var(--mod-badge-outline-border-color-positive, var(--spectrum-badge-outline-border-color-positive)); + border-color: var(--spectrum-badge-outline-border-color-positive); } &.spectrum-Badge--notice { - border-color: var(--mod-badge-outline-border-color-notice, var(--spectrum-badge-outline-border-color-notice)); + border-color: var(--spectrum-badge-outline-border-color-notice); } } @@ -480,20 +479,20 @@ /* label */ .spectrum-Badge-label { - font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size)); + font-size: var(--spectrum-badge-font-size); font-weight: var(--spectrum-badge-font-weight); - line-height: var(--mod-badge-line-height, var(--spectrum-badge-line-height)); + line-height: var(--spectrum-badge-line-height); - padding-inline-end: calc(var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal)) - var(--spectrum-badge-border-width)); - padding-inline-start: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal)); - padding-block-start: calc(var(--mod-badge-label-spacing-vertical-top, var(--spectrum-badge-label-spacing-vertical-top)) - var(--spectrum-badge-border-width)); - padding-block-end: calc(var(--mod-badge-label-spacing-vertical-bottom, var(--spectrum-badge-label-spacing-vertical-bottom)) - var(--spectrum-badge-border-width)); + padding-inline-end: calc(var(--spectrum-badge-label-spacing-horizontal) - var(--spectrum-badge-border-width)); + padding-inline-start: var(--spectrum-badge-label-spacing-horizontal); + padding-block-start: calc(var(--spectrum-badge-label-spacing-vertical-top) - var(--spectrum-badge-border-width)); + padding-block-end: calc(var(--spectrum-badge-label-spacing-vertical-bottom) - var(--spectrum-badge-border-width)); /* cjk language support */ &:lang(ja), &:lang(zh), &:lang(ko) { - line-height: var(--mod-badge-line-height-cjk, var(--spectrum-badge-line-height-cjk)); + line-height: var(--spectrum-badge-line-height-cjk); } /* remove left padding from label if preceded by an icon */ @@ -504,24 +503,24 @@ /* optional icon */ .spectrum-Badge-icon { - block-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); - inline-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); + block-size: var(--spectrum-badge-workflow-icon-size); + inline-size: var(--spectrum-badge-workflow-icon-size); /* ensures icon does not shrink when badge width is limited */ - flex: 0 0 var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); + flex: 0 0 var(--spectrum-badge-workflow-icon-size); - margin-inline-start: calc(var(--mod-badge-icon-spacing-horizontal, var(--spectrum-badge-icon-spacing-horizontal)) - var(--spectrum-badge-border-width)); + margin-inline-start: calc(var(--spectrum-badge-icon-spacing-horizontal) - var(--spectrum-badge-border-width)); /* icon with label has reduced padding between icon and text */ - margin-inline-end: var(--mod-badge-icon-text-spacing, var(--spectrum-badge-icon-text-spacing)); - margin-block-start: calc(var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top)) - var(--spectrum-badge-border-width)); - margin-block-end: calc(var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top)) - var(--spectrum-badge-border-width)); + margin-inline-end: var(--spectrum-badge-icon-text-spacing); + margin-block-start: calc(var(--spectrum-badge-icon-spacing-vertical-top) - var(--spectrum-badge-border-width)); + margin-block-end: calc(var(--spectrum-badge-icon-spacing-vertical-top) - var(--spectrum-badge-border-width)); } .spectrum-Badge-icon--no-label { /* icon without label has identical padding left and right */ - margin-inline-start: calc(var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal)) - var(--spectrum-badge-border-width)); - margin-inline-end: calc(var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal)) - var(--spectrum-badge-border-width)); + margin-inline-start: calc(var(--spectrum-badge-icon-only-spacing-horizontal) - var(--spectrum-badge-border-width)); + margin-inline-end: calc(var(--spectrum-badge-icon-only-spacing-horizontal) - var(--spectrum-badge-border-width)); } .spectrum-Badge, diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json index 01ed6639e32..3719c09ddfd 100644 --- a/components/breadcrumb/dist/metadata.json +++ b/components/breadcrumb/dist/metadata.json @@ -31,43 +31,6 @@ ".spectrum-Breadcrumbs-itemSeparator", ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)" ], - "modifiers": [ - "--mod-breadcrumbs-action-button-color", - "--mod-breadcrumbs-action-button-color-disabled", - "--mod-breadcrumbs-action-button-spacing-block", - "--mod-breadcrumbs-action-button-spacing-inline", - "--mod-breadcrumbs-block-size", - "--mod-breadcrumbs-focus-indicator-color", - "--mod-breadcrumbs-focus-indicator-gap", - "--mod-breadcrumbs-focus-indicator-thickness", - "--mod-breadcrumbs-font-family", - "--mod-breadcrumbs-font-family-current", - "--mod-breadcrumbs-font-size", - "--mod-breadcrumbs-font-size-current", - "--mod-breadcrumbs-font-style", - "--mod-breadcrumbs-font-weight", - "--mod-breadcrumbs-font-weight-current", - "--mod-breadcrumbs-icon-spacing-block", - "--mod-breadcrumbs-inline-end", - "--mod-breadcrumbs-inline-start", - "--mod-breadcrumbs-inline-start-to-truncated-menu", - "--mod-breadcrumbs-item-dragged-background", - "--mod-breadcrumbs-item-link-border-radius", - "--mod-breadcrumbs-line-height", - "--mod-breadcrumbs-separator-color", - "--mod-breadcrumbs-separator-spacing-inline", - "--mod-breadcrumbs-text-color", - "--mod-breadcrumbs-text-color-current", - "--mod-breadcrumbs-text-color-disabled", - "--mod-breadcrumbs-text-decoration-gap", - "--mod-breadcrumbs-text-decoration-thickness", - "--mod-breadcrumbs-text-spacing-block-end", - "--mod-breadcrumbs-text-spacing-block-start", - "--mod-breadcrumbs-title-spacing-block-end", - "--mod-breadcrumbs-title-spacing-block-start", - "--mod-heading-margin-end", - "--mod-heading-margin-start" - ], "component": [ "--spectrum-breadcrumbs-action-button-color", "--spectrum-breadcrumbs-action-button-color-disabled", @@ -142,6 +105,8 @@ "--spectrum-font-size-100", "--spectrum-font-size-200", "--spectrum-font-size-75", + "--spectrum-heading-margin-end", + "--spectrum-heading-margin-start", "--spectrum-heading-size-l", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css index bc62aafbc57..1c82547e850 100644 --- a/components/breadcrumb/index.css +++ b/components/breadcrumb/index.css @@ -64,8 +64,8 @@ --spectrum-breadcrumbs-item-dragged-background: rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); /* Sub-component: heading */ - --mod-heading-margin-end: 0px; - --mod-heading-margin-start: 0px; + --spectrum-heading-margin-end: 0px; + --spectrum-heading-margin-start: 0px; } .spectrum-Breadcrumbs--sizeL { @@ -99,8 +99,8 @@ .spectrum-Breadcrumbs { list-style-type: none; margin: 0; - padding-inline: 0 var(--mod-breadcrumbs-inline-end, var(--spectrum-breadcrumbs-inline-end)); - block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size)); + padding-inline: 0 var(--spectrum-breadcrumbs-inline-end); + block-size: var(--spectrum-breadcrumbs-block-size); display: flex; flex-flow: row nowrap; @@ -110,9 +110,9 @@ .spectrum-Breadcrumbs-itemSeparator { position: relative; - margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block)); + margin-block: var(--spectrum-breadcrumbs-icon-spacing-block); opacity: 1; - color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))); + color: var(--highcontrast-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color)); &:dir(rtl) { transform: scaleX(-1); @@ -126,17 +126,17 @@ white-space: nowrap; align-items: center; - font-family: var(--mod-breadcrumbs-font-family, var(--spectrum-breadcrumbs-font-family)); - font-size: var(--mod-breadcrumbs-font-size, var(--spectrum-breadcrumbs-font-size)); - font-weight: var(--mod-breadcrumbs-font-weight, var(--spectrum-breadcrumbs-font-weight)); - font-style: var(--mod-breadcrumbs-font-style, var(--spectrum-breadcrumbs-font-style)); - line-height: var(--mod-breadcrumbs-line-height, var(--spectrum-breadcrumbs-line-height)); + font-family: var(--spectrum-breadcrumbs-font-family); + font-size: var(--spectrum-breadcrumbs-font-size); + font-weight: var(--spectrum-breadcrumbs-font-weight); + font-style: var(--spectrum-breadcrumbs-font-style); + line-height: var(--spectrum-breadcrumbs-line-height); /* Breadcrumbs title (current item) */ &:last-of-type { - font-family: var(--mod-breadcrumbs-font-family-current, var(--spectrum-breadcrumbs-font-family-current)); - font-size: var(--mod-breadcrumbs-font-size-current, var(--spectrum-breadcrumbs-font-size-current)); - font-weight: var(--mod-breadcrumbs-font-weight-current, var(--spectrum-breadcrumbs-font-weight-current)); + font-family: var(--spectrum-breadcrumbs-font-family-current); + font-size: var(--spectrum-breadcrumbs-font-size-current); + font-weight: var(--spectrum-breadcrumbs-font-weight-current); .spectrum-Breadcrumbs-itemSeparator { display: none; @@ -145,23 +145,23 @@ /* Truncated menu */ > .spectrum-ActionButton { - margin-inline: var(--mod-breadcrumbs-action-button-spacing-inline, var(--spectrum-breadcrumbs-action-button-spacing-inline)); - margin-block: var(--mod-breadcrumbs-action-button-spacing-block, var(--spectrum-breadcrumbs-action-button-spacing-block)); - color: var(--highcontrast-breadcrumbs-action-button-color, var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color))); + margin-inline: var(--spectrum-breadcrumbs-action-button-spacing-inline); + margin-block: var(--spectrum-breadcrumbs-action-button-spacing-block); + color: var(--highcontrast-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color)); &:disabled { - color: var(--highcontrast-breadcrumbs-action-button-color-disabled, var(--mod-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled))); + color: var(--highcontrast-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled)); } } /* Start edge to text or truncated menu */ &:first-of-type { > .spectrum-Breadcrumbs-itemLink { - margin-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); + margin-inline-start: var(--spectrum-breadcrumbs-inline-start); } > .spectrum-ActionButton { - margin-inline-start: var(--mod-breadcrumbs-inline-start-to-truncated-menu, var(--spectrum-breadcrumbs-inline-start-to-truncated-menu)); + margin-inline-start: var(--spectrum-breadcrumbs-inline-start-to-truncated-menu); } } } @@ -171,32 +171,32 @@ position: relative; box-sizing: border-box; display: block; - border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); /* placeholder for token */ + border-radius: var(--spectrum-breadcrumbs-item-link-border-radius); /* placeholder for token */ outline: none; text-decoration: none; - color: var(--highcontrast-breadcrumbs-text-color, var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color))); + color: var(--highcontrast-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color)); /* Create new stacking context for negative z-index dragged pseudo element. */ isolation: isolate; - margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start, var(--spectrum-breadcrumbs-text-spacing-block-start)); - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end, var(--spectrum-breadcrumbs-text-spacing-block-end)); - margin-inline-start: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); + margin-block-start: var(--spectrum-breadcrumbs-text-spacing-block-start); + margin-block-end: var(--spectrum-breadcrumbs-text-spacing-block-end); + margin-inline-start: var(--spectrum-breadcrumbs-separator-spacing-inline); &.is-disabled, &[aria-disabled="true"] { - color: var(--highcontrast-breadcrumbs-text-color-disabled, var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled))); + color: var(--highcontrast-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled)); } /* Breadcrumbs title (current item) */ .spectrum-Breadcrumbs-item:last-of-type & { - color: var(--highcontrast-breadcrumbs-text-color-current, var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current))); - margin-block-start: var(--mod-breadcrumbs-title-spacing-block-start, var(--spectrum-breadcrumbs-title-spacing-block-start)); - margin-block-end: var(--mod-breadcrumbs-title-spacing-block-end, var(--spectrum-breadcrumbs-title-spacing-block-end)); + color: var(--highcontrast-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current)); + margin-block-start: var(--spectrum-breadcrumbs-title-spacing-block-start); + margin-block-end: var(--spectrum-breadcrumbs-title-spacing-block-end); } + .spectrum-Breadcrumbs-itemSeparator { - margin-inline-start: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); + margin-inline-start: var(--spectrum-breadcrumbs-separator-spacing-inline); } /* Link is focusable */ @@ -208,8 +208,8 @@ &:active, &:focus-visible { text-decoration: underline; - text-decoration-thickness: var(--mod-breadcrumbs-text-decoration-thickness, var(--spectrum-breadcrumbs-text-decoration-thickness)); - text-underline-offset: var(--mod-breadcrumbs-text-decoration-gap, var(--spectrum-breadcrumbs-text-decoration-gap)); + text-decoration-thickness: var(--spectrum-breadcrumbs-text-decoration-thickness); + text-underline-offset: var(--spectrum-breadcrumbs-text-decoration-gap); } } } @@ -221,22 +221,22 @@ content: ""; pointer-events: none; - margin-inline-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1); - margin-block-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1); + margin-inline-start: calc((var(--spectrum-breadcrumbs-focus-indicator-gap) + var(--spectrum-breadcrumbs-focus-indicator-thickness)) * -1); + margin-block-start: calc((var(--spectrum-breadcrumbs-focus-indicator-gap) + var(--spectrum-breadcrumbs-focus-indicator-thickness)) * -1); box-sizing: border-box; display: block; - inline-size: calc(100% + (var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) * 2) + (var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)) * 2)); - block-size: calc(100% + (var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) * 2) + (var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)) * 2)); + inline-size: calc(100% + (var(--spectrum-breadcrumbs-focus-indicator-gap) * 2) + (var(--spectrum-breadcrumbs-focus-indicator-thickness) * 2)); + block-size: calc(100% + (var(--spectrum-breadcrumbs-focus-indicator-gap) * 2) + (var(--spectrum-breadcrumbs-focus-indicator-thickness) * 2)); - border-width: var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)); + border-width: var(--spectrum-breadcrumbs-focus-indicator-thickness); border-style: solid; - border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); - border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))); + border-radius: var(--spectrum-breadcrumbs-item-link-border-radius); + border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color)); } .spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink::before { - background: var(--mod-breadcrumbs-item-dragged-background, var(--spectrum-breadcrumbs-item-dragged-background)); + background: var(--spectrum-breadcrumbs-item-dragged-background); /* Make sure the background color does not appear on top of the text. */ z-index: -1; @@ -253,7 +253,7 @@ inline-size: 100%; > .spectrum-Breadcrumbs-itemLink { - margin-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); + margin-inline-start: var(--spectrum-breadcrumbs-inline-start); } } } diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index 67e48aa9bd3..1672016188f 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -54,48 +54,6 @@ ".spectrum-Button[pending] .spectrum-ProgressCircle", "a.spectrum-Button" ], - "modifiers": [ - "--mod-button-animation-duration", - "--mod-button-background-color-default", - "--mod-button-background-color-disabled", - "--mod-button-background-color-down", - "--mod-button-background-color-focus", - "--mod-button-background-color-hover", - "--mod-button-border-color-default", - "--mod-button-border-color-disabled", - "--mod-button-border-color-down", - "--mod-button-border-color-focus", - "--mod-button-border-color-hover", - "--mod-button-border-radius", - "--mod-button-border-width", - "--mod-button-bottom-to-text", - "--mod-button-content-color-default", - "--mod-button-content-color-disabled", - "--mod-button-content-color-down", - "--mod-button-content-color-focus", - "--mod-button-content-color-hover", - "--mod-button-edge-to-text", - "--mod-button-edge-to-visual", - "--mod-button-edge-to-visual-only", - "--mod-button-focus-ring-border-radius", - "--mod-button-focus-ring-color", - "--mod-button-focus-ring-gap", - "--mod-button-focus-ring-thickness", - "--mod-button-font-family", - "--mod-button-font-size", - "--mod-button-font-weight", - "--mod-button-height", - "--mod-button-icon-margin-block-start", - "--mod-button-line-height", - "--mod-button-margin-block", - "--mod-button-margin-left", - "--mod-button-margin-right", - "--mod-button-max-inline-size", - "--mod-button-min-width", - "--mod-button-padding-label-to-icon", - "--mod-button-top-to-icon", - "--mod-button-top-to-text" - ], "component": [ "--spectrum-button-animation-duration", "--spectrum-button-background-color-default", @@ -124,13 +82,19 @@ "--spectrum-button-edge-to-visual", "--spectrum-button-edge-to-visual-only", "--spectrum-button-focus-indicator-color", + "--spectrum-button-focus-ring-border-radius", "--spectrum-button-focus-ring-gap", "--spectrum-button-focus-ring-thickness", "--spectrum-button-font-size", "--spectrum-button-font-weight", "--spectrum-button-height", + "--spectrum-button-icon-margin-block-start", "--spectrum-button-intended-icon-size", "--spectrum-button-line-height", + "--spectrum-button-margin-block", + "--spectrum-button-margin-left", + "--spectrum-button-margin-right", + "--spectrum-button-max-inline-size", "--spectrum-button-min-width", "--spectrum-button-minimum-width-multiplier", "--spectrum-button-padding-label-to-icon", @@ -214,7 +178,11 @@ "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-progress-circle-position", + "--spectrum-progress-circle-thickness", "--spectrum-progress-circle-thickness-medium", + "--spectrum-progress-circle-track-border-color", + "--spectrum-progress-circle-track-border-color-over-background", "--spectrum-sans-font-family-stack", "--spectrum-static-black-focus-indicator-color", "--spectrum-static-white-focus-indicator-color", @@ -242,12 +210,7 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-progress-circle-position", - "--mod-progress-circle-thickness", - "--mod-progress-circle-track-border-color", - "--mod-progress-circle-track-border-color-over-background" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-button-background-color-default", "--highcontrast-button-background-color-disabled", diff --git a/components/button/index.css b/components/button/index.css index cc40ddb5227..7223bc285e7 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -29,16 +29,16 @@ --spectrum-button-font-weight: var(--spectrum-bold-font-weight); --spectrum-button-font-size: var(--spectrum-font-size-100); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-100) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-100) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); - --mod-progress-circle-position: absolute; + --spectrum-progress-circle-position: absolute; --spectrum-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); &.spectrum-Button--iconOnly { @@ -52,9 +52,9 @@ --spectrum-button-font-size: var(--spectrum-font-size-75); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-75) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-75) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small); --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small); @@ -72,9 +72,9 @@ --spectrum-button-font-size: var(--spectrum-font-size-200); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-200) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-200) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large); --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large); @@ -88,9 +88,9 @@ --spectrum-button-font-size: var(--spectrum-font-size-300); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-300) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-300) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large); --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); @@ -340,7 +340,7 @@ /* Remove button the margin in Firefox and Safari. */ margin: 0; - font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack)); + font-family: var(--spectrum-sans-font-family-stack); /* Adjacent buttons should be aligned correctly */ vertical-align: top; @@ -350,7 +350,7 @@ /* Font smoothing for Firefox */ -moz-osx-font-smoothing: grayscale; - line-height: var(--mod-button-line-height, var(--spectrum-line-height-100)); + line-height: var(--spectrum-line-height-100); text-decoration: none; /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */ @@ -359,38 +359,38 @@ /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */ -webkit-appearance: button; - border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius)); - border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); + border-radius: var(--spectrum-button-border-radius); + border-width: var(--spectrum-button-border-width); border-style: solid; - font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); - font-weight: var(--mod-button-font-weight, var(--spectrum-button-font-weight)); - gap: var(--mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon)); - max-inline-size: var(--mod-button-max-inline-size, none); - min-inline-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); - min-block-size: var(--mod-button-height, var(--spectrum-button-height)); + font-size: var(--spectrum-button-font-size); + font-weight: var(--spectrum-button-font-weight); + gap: var(--spectrum-button-padding-label-to-icon); + max-inline-size: var(--spectrum-button-max-inline-size, none); + min-inline-size: var(--spectrum-button-min-width); + min-block-size: var(--spectrum-button-height); padding-block: 0; - padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)); + padding-inline: var(--spectrum-button-edge-to-text); - background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); - border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); - color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))); + background-color: var(--highcontrast-button-background-color-default, var(--spectrum-button-background-color-default)); + border-color: var(--highcontrast-button-border-color-default, var(--spectrum-button-border-color-default)); + color: var(--highcontrast-button-content-color-default, var(--spectrum-button-content-color-default)); transition: - border-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, - color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, - background var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear; + border-color var(--spectrum-button-animation-duration, 130ms) linear, + color var(--spectrum-button-animation-duration, 130ms) linear, + background var(--spectrum-button-animation-duration, 130ms) linear; - margin-block: var(--mod-button-margin-block); - margin-inline-end: var(--mod-button-margin-right); - margin-inline-start: var(--mod-button-margin-left); + margin-block: var(--spectrum-button-margin-block); + margin-inline-end: var(--spectrum-button-margin-right); + margin-inline-start: var(--spectrum-button-margin-left); .spectrum-Icon { /* Any block-size difference between the intended workflow icon size and actual icon used. Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))); - margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2))); + margin-block-start: var(--spectrum-button-icon-margin-block-start, max(0px, var(--spectrum-button-top-to-icon) - var(--spectrum-button-border-width) + (var(--_icon-size-difference, 0px) / 2))); - margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text))); + margin-inline-start: calc(var(--spectrum-button-edge-to-visual) - var(--spectrum-button-edge-to-text)); color: inherit; flex-shrink: 0; align-self: flex-start; @@ -407,9 +407,9 @@ display: block; position: absolute; inset: 0; - margin: calc((var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + var(--mod-button-border-width, var(--spectrum-button-border-width))) * -1); - border-radius: var(--mod-button-focus-ring-border-radius, calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)))); - transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; + margin: calc((var(--spectrum-button-focus-ring-gap) + var(--spectrum-button-border-width)) * -1); + border-radius: var(--spectrum-button-focus-ring-border-radius, calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap))); + transition: box-shadow var(--spectrum-button-animation-duration) ease-in-out; pointer-events: none; } @@ -434,7 +434,7 @@ outline: none; &::after { - box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color))); + box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) var(--highcontrast-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)); } } @@ -445,21 +445,21 @@ } &:hover { - background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))); - border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))); - color: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))); + background-color: var(--highcontrast-button-background-color-hover, var(--spectrum-button-background-color-hover)); + border-color: var(--highcontrast-button-border-color-hover, var(--spectrum-button-border-color-hover)); + color: var(--highcontrast-button-content-color-hover, var(--spectrum-button-content-color-hover)); } &:focus-visible { - background-color: var(--highcontrast-button-background-color-focus, var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))); - border-color: var(--highcontrast-button-border-color-focus, var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))); - color: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))); + background-color: var(--highcontrast-button-background-color-focus, var(--spectrum-button-background-color-focus)); + border-color: var(--highcontrast-button-border-color-focus, var(--spectrum-button-border-color-focus)); + color: var(--highcontrast-button-content-color-focus, var(--spectrum-button-content-color-focus)); } &:active { - background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))); - border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))); - color: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))); + background-color: var(--highcontrast-button-background-color-down, var(--spectrum-button-background-color-down)); + border-color: var(--highcontrast-button-border-color-down, var(--spectrum-button-border-color-down)); + color: var(--highcontrast-button-content-color-down, var(--spectrum-button-content-color-down)); transform: perspective(var(--spectrum-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } @@ -467,24 +467,24 @@ &.is-disabled, &[pending], &.is-pending { - background-color: var(--highcontrast-button-background-color-disabled, var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))); - border-color: var(--highcontrast-button-border-color-disabled, var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))); - color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))); + background-color: var(--highcontrast-button-background-color-disabled, var(--spectrum-button-background-color-disabled)); + border-color: var(--highcontrast-button-border-color-disabled, var(--spectrum-button-border-color-disabled)); + color: var(--highcontrast-button-content-color-disabled, var(--spectrum-button-content-color-disabled)); } .spectrum-Icon, .spectrum-Button-label { visibility: visible; opacity: 1; - transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out; + transition: opacity var(--spectrum-button-animation-duration) ease-in-out; } .spectrum-ProgressCircle { visibility: hidden; opacity: 0; transition: - opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out, - visibility 0ms linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)); + opacity var(--spectrum-button-animation-duration) ease-in-out, + visibility 0ms linear var(--spectrum-button-animation-duration); } &[pending], @@ -496,14 +496,14 @@ visibility: hidden; opacity: 0; transition: - opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out, - visibility 0ms linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)); + opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out, + visibility 0ms linear var(--spectrum-button-animation-duration, 130ms); } .spectrum-ProgressCircle { visibility: visible; opacity: 1; - transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out; + transition: opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out; } } } @@ -523,9 +523,9 @@ a.spectrum-Button { /* Fixes horizontal alignment of text in anchor buttons */ text-align: center; - padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - line-height: var(--mod-button-line-height, var(--spectrum-button-line-height)); + padding-block-start: calc(var(--spectrum-button-top-to-text) - var(--spectrum-button-border-width)); + padding-block-end: calc(var(--spectrum-button-bottom-to-text) - var(--spectrum-button-border-width)); + line-height: var(--spectrum-button-line-height); &:empty { display: none; @@ -546,7 +546,7 @@ a.spectrum-Button { /* Icon only variant */ .spectrum-Button.spectrum-Button--iconOnly { min-inline-size: unset; - padding: var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)); + padding: var(--spectrum-button-edge-to-visual-only); .spectrum-Icon { align-self: center; @@ -565,19 +565,17 @@ a.spectrum-Button { --highcontrast-button-content-color-disabled: GrayText; --highcontrast-button-border-color-disabled: GrayText; --highcontrast-button-background-color-disabled: ButtonFace; - - /* @passthrough start -- progress circle highcontrast overrides */ - --mod-progress-circle-track-border-color: ButtonText; - --mod-progress-circle-track-border-color-over-background: ButtonText; - --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); - --highcontrast-button-focus-ring-color: ButtonText; - &:focus-visible { - &::after { - /* Make sure the box-shadow used for the focus indicator is displayed. */ - forced-color-adjust: none; - } + .spectrum-ProgressCircle { + --spectrum-progress-circle-track-border-color: ButtonText; + --spectrum-progress-circle-track-border-color-over-background: ButtonText; + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); + } + + &:focus-visible::after { + /* Make sure the box-shadow used for the focus indicator is displayed. */ + forced-color-adjust: none; } &.spectrum-Button--accent, diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json index 04dc22bce0f..9bdc56163b3 100644 --- a/components/buttongroup/dist/metadata.json +++ b/components/buttongroup/dist/metadata.json @@ -6,16 +6,10 @@ ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS", ".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical" ], - "modifiers": [ - "--mod-buttongroup-flex-wrap", - "--mod-buttongroup-justify-content", - "--mod-buttongroup-spacing", - "--mod-buttongroup-spacing-horizontal", - "--mod-buttongroup-spacing-vertical" - ], "component": [ "--spectrum-buttongroup-display", "--spectrum-buttongroup-flex-direction", + "--spectrum-buttongroup-flex-wrap", "--spectrum-buttongroup-justify-content", "--spectrum-buttongroup-spacing" ], diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css index 0d65d39c0f2..3672f2da973 100644 --- a/components/buttongroup/index.css +++ b/components/buttongroup/index.css @@ -12,21 +12,16 @@ */ .spectrum-ButtonGroup { - /* @deprecated --mod-buttongroup-spacing-horizontal -- replaced by --mod-buttongroup-spacing */ - --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-300))); + --spectrum-buttongroup-spacing: var(--spectrum-spacing-300); --spectrum-buttongroup-display: flex; --spectrum-buttongroup-flex-direction: row; - --spectrum-buttongroup-justify-content: var(--mod-buttongroup-justify-content, normal); + --spectrum-buttongroup-justify-content: normal; &.spectrum-ButtonGroup--sizeS { - /* @deprecated --mod-buttongroup-spacing-horizontal -- replaced by --mod-buttongroup-spacing */ - --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200))); + --spectrum-buttongroup-spacing: var(--spectrum-spacing-200); } &.spectrum-ButtonGroup--vertical { - /* @deprecated --mod-buttongroup-spacing-vertical -- replaced by generic --mod-buttongroup-spacing */ - --mod-buttongroup-spacing: var(--mod-buttongroup-spacing-vertical); - --spectrum-buttongroup-display: inline-flex; --spectrum-buttongroup-flex-direction: column; } @@ -35,7 +30,7 @@ .spectrum-ButtonGroup { display: var(--spectrum-buttongroup-display); flex-direction: var(--spectrum-buttongroup-flex-direction); - flex-wrap: var(--mod-buttongroup-flex-wrap, wrap); + flex-wrap: var(--spectrum-buttongroup-flex-wrap, wrap); gap: var(--spectrum-buttongroup-spacing); justify-content: var(--spectrum-buttongroup-justify-content); diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index cc1fb80035c..7b361c736e0 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -56,54 +56,6 @@ ".spectrum-Calendar-title", ".spectrum-Calendar:dir(rtl)" ], - "modifiers": [ - "--mod-calendar-border-radius-reset", - "--mod-calendar-border-width-reset", - "--mod-calendar-button-icon-color", - "--mod-calendar-day-background-color", - "--mod-calendar-day-background-color-cap-selected", - "--mod-calendar-day-background-color-down", - "--mod-calendar-day-background-color-focus", - "--mod-calendar-day-background-color-hover", - "--mod-calendar-day-background-color-key-focus", - "--mod-calendar-day-background-color-selected", - "--mod-calendar-day-background-color-selected-hover", - "--mod-calendar-day-background-layer-color", - "--mod-calendar-day-border-color", - "--mod-calendar-day-border-color-key-focus", - "--mod-calendar-day-border-size", - "--mod-calendar-day-fill-content", - "--mod-calendar-day-fill-display", - "--mod-calendar-day-height", - "--mod-calendar-day-padding", - "--mod-calendar-day-text-color", - "--mod-calendar-day-text-color-cap-selected", - "--mod-calendar-day-text-color-disabled", - "--mod-calendar-day-text-color-hover", - "--mod-calendar-day-text-color-key-focus", - "--mod-calendar-day-text-color-selected", - "--mod-calendar-day-text-font-weight", - "--mod-calendar-day-text-font-weight-cap-selected", - "--mod-calendar-day-text-font-weight-selected", - "--mod-calendar-day-text-size", - "--mod-calendar-day-text-size-han", - "--mod-calendar-day-title-text-color", - "--mod-calendar-day-title-text-font-weight", - "--mod-calendar-day-title-text-size", - "--mod-calendar-day-today-background-color-selected-hover", - "--mod-calendar-day-today-border-color", - "--mod-calendar-day-today-border-color-disabled", - "--mod-calendar-day-today-text-color", - "--mod-calendar-day-today-text-font-weight", - "--mod-calendar-day-visibility", - "--mod-calendar-day-width", - "--mod-calendar-margin-x", - "--mod-calendar-margin-y", - "--mod-calendar-title-height", - "--mod-calendar-title-text-letter-spacing", - "--mod-calendar-title-text-size", - "--mod-calendar-width" - ], "component": [ "--spectrum-calendar-border-radius-reset", "--spectrum-calendar-border-width-reset", @@ -127,6 +79,8 @@ "--spectrum-calendar-day-border-color-focus", "--spectrum-calendar-day-border-color-key-focus", "--spectrum-calendar-day-border-size", + "--spectrum-calendar-day-fill-content", + "--spectrum-calendar-day-fill-display", "--spectrum-calendar-day-height", "--spectrum-calendar-day-padding", "--spectrum-calendar-day-text-color", @@ -145,6 +99,7 @@ "--spectrum-calendar-day-today-border-color-disabled", "--spectrum-calendar-day-today-text-color", "--spectrum-calendar-day-today-text-font-weight", + "--spectrum-calendar-day-visibility", "--spectrum-calendar-day-width", "--spectrum-calendar-heading-text-size", "--spectrum-calendar-margin-x", @@ -157,6 +112,9 @@ "--spectrum-calendar-width" ], "global": [ + "--spectrum-actionbutton-content-color-default", + "--spectrum-actionbutton-edge-to-text", + "--spectrum-actionbutton-min-width", "--spectrum-bold-font-weight", "--spectrum-border-width-200", "--spectrum-component-height-100", @@ -175,11 +133,7 @@ "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight" ], - "passthroughs": [ - "--mod-actionbutton-content-color-default", - "--mod-actionbutton-edge-to-text", - "--mod-actionbutton-min-width" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-calendar-day-background-cap-selected", "--highcontrast-calendar-day-background-down", diff --git a/components/calendar/index.css b/components/calendar/index.css index 352a388d74f..0a824fd49a2 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -14,30 +14,30 @@ .spectrum-Calendar { --spectrum-calendar-day-background-color-selected-disabled: rgb(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)); - --spectrum-calendar-day-padding: var(--mod-calendar-day-padding, 4px); + --spectrum-calendar-day-width: var(--spectrum-component-height-100); + --spectrum-calendar-day-height: var(--spectrum-component-height-100); + --spectrum-calendar-day-border-size: var(--spectrum-border-width-200); + --spectrum-calendar-day-padding: 4px; - --spectrum-calendar-border-radius-reset: var(--mod-calendar-border-radius-reset, 0); - --spectrum-calendar-border-width-reset: var(--mod-calendar-border-width-reset, 0); - --spectrum-calendar-margin-y: var(--mod-calendar-margin-y, 24px); - --spectrum-calendar-margin-x: var(--mod-calendar-margin-x, 32px); + --spectrum-calendar-border-radius-reset: 0; + --spectrum-calendar-border-width-reset: 0; + --spectrum-calendar-margin-y: 24px; + --spectrum-calendar-margin-x: 32px; /* combines (day-width and day-padding x 2) x 7 days a week */ - --spectrum-calendar-width: var(--mod-calendar-width, calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7)); + --spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7); /* Add letter spacing of 0.66px from Typography > Detail issue #407 */ - --spectrum-calendar-title-text-letter-spacing: var(--mod-calendar-title-text-letter-spacing, 0.06em); - --spectrum-calendar-title-height: var(--mod-calendar-title-height, 32px); - --spectrum-calendar-title-text-size: var(--mod-calendar-title-text-size, var(--spectrum-font-size-300)); + --spectrum-calendar-title-text-letter-spacing: 0.06em; + --spectrum-calendar-title-height: 32px; + --spectrum-calendar-title-text-size: var(--spectrum-font-size-300); - --spectrum-calendar-title-text-font-weight: var(--mod-calendar-day-title-text-font-weight, var(--spectrum-bold-font-weight)); - --spectrum-calendar-title-text-color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default))); + --spectrum-calendar-title-text-font-weight: var(--spectrum-bold-font-weight); + --spectrum-calendar-title-text-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-calendar-heading-text-size: var(--mod-calendar-day-title-text-size, var(--spectrum-font-size-50)); + --spectrum-calendar-heading-text-size: var(--spectrum-font-size-50); - --spectrum-calendar-button-icon-color: var(--mod-calendar-button-icon-color, var(--spectrum-neutral-subdued-content-color-default)); + --spectrum-calendar-button-icon-color: var(--spectrum-neutral-subdued-content-color-default); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); @@ -45,47 +45,47 @@ } .spectrum-Calendar-date { - --spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent); - --spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))); - --spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); + --spectrum-calendar-day-background: transparent; + --spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--spectrum-calendar-day-background-color-selected)); + --spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)); --spectrum-calendar-day-background-color-selected-disabled: rgb(var(--spectrum-gray-100-rgb), 0.4); - --spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))); - --spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))); - --spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))); - --spectrum-calendar-day-background-down: var(--highcontrast-calendar-day-background-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down))); + --spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)); + --spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--spectrum-calendar-day-background-color-hover)); + --spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--spectrum-calendar-day-background-color-key-focus)); + --spectrum-calendar-day-background-down: var(--highcontrast-calendar-day-background-down, var(--spectrum-calendar-day-background-color-down)); - --spectrum-calendar-day-background-layer-color: var(--mod-calendar-day-background-layer-color, transparent); + --spectrum-calendar-day-background-layer-color: transparent; - --spectrum-calendar-day-border-color: var(--mod-calendar-day-border-color, transparent); - --spectrum-calendar-day-border-color-focus: var(--highcontrast-calendar-day-border-color-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))); + --spectrum-calendar-day-border-color: transparent; + --spectrum-calendar-day-border-color-focus: var(--highcontrast-calendar-day-border-color-focus, var(--spectrum-calendar-day-border-color-key-focus)); - --spectrum-calendar-day-text-size: var(--mod-calendar-day-text-size, var(--spectrum-font-size-100)); - --spectrum-calendar-day-text-font-weight: var(--mod-calendar-day-text-font-weight, var(--spectrum-regular-font-weight)); - --spectrum-calendar-day-text-font-weight-selected: var(--mod-calendar-day-text-font-weight-selected, var(--spectrum-bold-font-weight)); - --spectrum-calendar-day-text-font-weight-cap-selected: var(--mod-calendar-day-text-font-weight-cap-selected, var(--spectrum-bold-font-weight)); + --spectrum-calendar-day-text-size: var(--spectrum-font-size-100); + --spectrum-calendar-day-text-font-weight: var(--spectrum-regular-font-weight); + --spectrum-calendar-day-text-font-weight-selected: var(--spectrum-bold-font-weight); + --spectrum-calendar-day-text-font-weight-cap-selected: var(--spectrum-bold-font-weight); /* Styles specific to the today identifier */ - --spectrum-calendar-day-today-background-selected-hover: var(--highcontrast-calendar-day-today-background-selected-hover, var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover))); - --spectrum-calendar-day-today-text-font-weight: var(--mod-calendar-day-today-text-font-weight, var(--spectrum-bold-font-weight)); - --spectrum-calendar-day-today-text-color: var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default))); + --spectrum-calendar-day-today-background-selected-hover: var(--highcontrast-calendar-day-today-background-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover)); + --spectrum-calendar-day-today-text-font-weight: var(--spectrum-bold-font-weight); + --spectrum-calendar-day-today-text-color: var(--highcontrast-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default)); /* @todo There's not a good semantic alias to map this to */ - --spectrum-calendar-day-today-border-color: var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800))); + --spectrum-calendar-day-today-border-color: var(--highcontrast-calendar-day-today-border-color, var(--spectrum-gray-800)); /* Applied to both title-text-color and today-text-color */ - --spectrum-calendar-day-text-color: var(--mod-calendar-day-text-color, var(--spectrum-neutral-subdued-content-color-default)); - --spectrum-calendar-day-text-color-selected: var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down))); - --spectrum-calendar-day-text-color-cap-selected: var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down))); - --spectrum-calendar-day-text-color-hover: var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover))); - --spectrum-calendar-day-text-color-key-focus: var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus))); + --spectrum-calendar-day-text-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-calendar-day-text-color-selected: var(--highcontrast-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down)); + --spectrum-calendar-day-text-color-cap-selected: var(--highcontrast-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down)); + --spectrum-calendar-day-text-color-hover: var(--highcontrast-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover)); + --spectrum-calendar-day-text-color-key-focus: var(--highcontrast-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus)); /* Disabled state */ - --spectrum-calendar-day-text-color-disabled: var(--mod-calendar-day-text-color-disabled, var(--spectrum-disabled-content-color)); - --spectrum-calendar-day-today-border-color-disabled: var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-disabled-border-color)); + --spectrum-calendar-day-text-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-calendar-day-today-border-color-disabled: var(--spectrum-disabled-border-color); &:lang(ja), &:lang(zh), &:lang(ko) { - --spectrum-calendar-day-text-size: var(--mod-calendar-day-text-size-han, var(--spectrum-font-size-50)); + --spectrum-calendar-day-text-size: var(--spectrum-font-size-50); } } @@ -133,7 +133,7 @@ &.is-range-selection.is-selection-start, &.is-range-selection.is-selection-end { - --mod-calendar-day-fill-content: none; + --spectrum-calendar-day-fill-content: none; } } } @@ -154,7 +154,7 @@ } .spectrum-Calendar-title { - color: var(--spectrum-calendar-title-text-color); + color: var(--highcontrast-calendar-day-title-text-color, var(--spectrum-calendar-title-text-color)); font-size: var(--spectrum-calendar-title-text-size); font-weight: var(--spectrum-calendar-title-text-font-weight); @@ -172,9 +172,9 @@ .spectrum-Calendar-prevMonth, .spectrum-Calendar-nextMonth { /* @passthrough start -- mimic the placement and sizing of the dates in the grid below */ - --mod-actionbutton-edge-to-text: var(--spectrum-calendar-day-padding); - --mod-actionbutton-min-width: var(--spectrum-calendar-day-width); - --mod-actionbutton-content-color-default: var(--spectrum-calendar-button-icon-color); + --spectrum-actionbutton-edge-to-text: var(--spectrum-calendar-day-padding); + --spectrum-actionbutton-min-width: var(--spectrum-calendar-day-width); + --spectrum-actionbutton-content-color-default: var(--spectrum-calendar-button-icon-color); /* @passthrough end */ transform: var(--spectrum-logical-rotation,); @@ -250,7 +250,7 @@ .spectrum-Calendar-date { /* This is fun, but we need to trick the table so it doesn't size itself in a weird way */ position: absolute; - display: var(--mod-calendar-day-visibility, block); + display: var(--spectrum-calendar-day-visibility, block); inset-block-start: 0; inset-inline-start: 0; @@ -289,7 +289,7 @@ border-width: var(--spectrum-calendar-day-border-size); border-style: solid; - border-color: var(--mod-calendar-day-border-color, transparent); + border-color: var(--spectrum-calendar-day-border-color, transparent); border-radius: var(--spectrum-calendar-day-width); } @@ -298,7 +298,7 @@ position: absolute; inset-block-start: 0; - display: var(--mod-calendar-day-fill-display, none); + display: var(--spectrum-calendar-day-fill-display, none); block-size: var(--spectrum-calendar-day-height); inline-size: var(--spectrum-calendar-day-width); @@ -306,38 +306,38 @@ border-radius: var(--spectrum-calendar-day-width); background: transparent; - content: var(--mod-calendar-day-fill-content, ""); + content: var(--spectrum-calendar-day-fill-content, ""); } &:hover { - --mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-hover); + --spectrum-calendar-day-text-color: var(--spectrum-calendar-day-text-color-hover); &:not(.is-selection-end, .is-selection-start) { - --mod-calendar-day-background-color: var(--spectrum-calendar-day-background-hover); + --spectrum-calendar-day-background: var(--spectrum-calendar-day-background-hover); } &.is-selected:not(.is-selection-end, .is-selection-start), &.is-range-selection { - --mod-calendar-day-background-color: var(--spectrum-calendar-day-background-selected-hover); + --spectrum-calendar-day-background: var(--spectrum-calendar-day-background-selected-hover); } } &:active { /* Applied behind the selected circle around the date */ - --mod-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-down); + --spectrum-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-down); } &.is-focused { - --mod-calendar-day-border-color: var(--spectrum-calendar-day-border-color-focus); + --spectrum-calendar-day-border-color: var(--spectrum-calendar-day-border-color-focus); &.is-selected, &.is-range-selection { - --mod-calendar-day-background-color: var(--spectrum-calendar-day-background-selected); + --spectrum-calendar-day-background: var(--spectrum-calendar-day-background-selected); } } &.is-outsideMonth { - --mod-calendar-day-visibility: none; + --spectrum-calendar-day-visibility: none; } &.is-range-selection { @@ -360,9 +360,9 @@ &.is-selection-start, &.is-selection-end { - --mod-calendar-day-fill-display: block; - --mod-calendar-day-text-font-weight: var(--spectrum-calendar-day-text-font-weight-selected); - --mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-cap-selected); + --spectrum-calendar-day-fill-display: block; + --spectrum-calendar-day-text-font-weight: var(--spectrum-calendar-day-text-font-weight-selected); + --spectrum-calendar-day-text-color: var(--spectrum-calendar-day-text-color-cap-selected); } &.is-range-start, @@ -408,68 +408,68 @@ &:not(.is-range-selection) { &.is-focused:active, &.is-focused.is-selected { - --mod-calendar-day-text-color-key-focus: var(--spectrum-calendar-day-text-color-cap-selected); - --mod-calendar-day-background-color-key-focus: var(--spectrum-calendar-day-background-cap-selected); + --spectrum-calendar-day-text-color-key-focus: var(--spectrum-calendar-day-text-color-cap-selected); + --spectrum-calendar-day-background-color-key-focus: var(--spectrum-calendar-day-background-cap-selected); } &.is-focused { - --mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-key-focus); - --mod-calendar-day-background-color: var(--spectrum-calendar-day-background-focus); - --mod-calendar-day-border-color: var(--spectrum-calendar-day-border-color-focus); + --spectrum-calendar-day-text-color: var(--spectrum-calendar-day-text-color-key-focus); + --spectrum-calendar-day-background: var(--spectrum-calendar-day-background-focus); + --spectrum-calendar-day-border-color: var(--spectrum-calendar-day-border-color-focus); } &.is-today.is-selected { - --mod-calendar-day-background-color-hover: var(--spectrum-calendar-day-today-background-selected-hover); + --spectrum-calendar-day-background-color-hover: var(--spectrum-calendar-day-today-background-selected-hover); } &.is-selected { - --mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-cap-selected); - --mod-calendar-day-background-color: var(--spectrum-calendar-day-background-cap-selected); - --mod-calendar-day-background-layer-color: transparent; - --mod-calendar-day-text-font-weight: var(--spectrum-calendar-day-text-font-weight-cap-selected); + --spectrum-calendar-day-text-color: var(--spectrum-calendar-day-text-color-cap-selected); + --spectrum-calendar-day-background: var(--spectrum-calendar-day-background-cap-selected); + --spectrum-calendar-day-background-layer-color: transparent; + --spectrum-calendar-day-text-font-weight: var(--spectrum-calendar-day-text-font-weight-cap-selected); } } &.is-selected { - --mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-selected); + --spectrum-calendar-day-text-color: var(--spectrum-calendar-day-text-color-selected); /* Applied behind the selected circle around the date */ - --mod-calendar-day-background-color: var(--spectrum-calendar-day-background-cap-selected); - --mod-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-selected); + --spectrum-calendar-day-background: var(--spectrum-calendar-day-background-cap-selected); + --spectrum-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-selected); } &.is-today { - --mod-calendar-day-text-color: var(--spectrum-calendar-day-today-text-color); - --mod-calendar-day-border-color: var(--spectrum-calendar-day-today-border-color); - --mod-calendar-day-text-font-weight: var(--spectrum-calendar-day-today-text-font-weight); + --spectrum-calendar-day-text-color: var(--spectrum-calendar-day-today-text-color); + --spectrum-calendar-day-border-color: var(--spectrum-calendar-day-today-border-color); + --spectrum-calendar-day-text-font-weight: var(--spectrum-calendar-day-today-text-font-weight); } &.is-disabled { - --mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-disabled); - --mod-calendar-day-text-color-selected: var(--spectrum-calendar-day-text-color-disabled); - --mod-calendar-day-text-color-cap-selected: var(--spectrum-calendar-day-text-color-disabled); - --mod-calendar-day-text-color-hover: var(--spectrum-calendar-day-text-color-disabled); - --mod-calendar-day-text-color-key-focus: var(--spectrum-calendar-day-text-color-disabled); - - --mod-calendar-day-today-border-color: var(--spectrum-calendar-day-today-border-color-disabled); - --mod-calendar-day-border-color-key-focus: transparent; - - --mod-calendar-day-background-color-selected: var(--spectrum-calendar-day-background-color-selected-disabled); - --mod-calendar-day-background-color-selected-hover: transparent; - --mod-calendar-day-background-color-cap-selected: transparent; - --mod-calendar-day-background-color-hover: transparent; - --mod-calendar-day-background-color-focus: transparent; - --mod-calendar-day-background-color-down: transparent; - - --mod-calendar-day-text-font-weight: normal; - --mod-calendar-day-text-font-weight-selected: normal; - --mod-calendar-day-text-font-weight-cap-selected: normal; + --spectrum-calendar-day-text-color: var(--spectrum-calendar-day-text-color-disabled); + --spectrum-calendar-day-text-color-selected: var(--spectrum-calendar-day-text-color-disabled); + --spectrum-calendar-day-text-color-cap-selected: var(--spectrum-calendar-day-text-color-disabled); + --spectrum-calendar-day-text-color-hover: var(--spectrum-calendar-day-text-color-disabled); + --spectrum-calendar-day-text-color-key-focus: var(--spectrum-calendar-day-text-color-disabled); + + --spectrum-calendar-day-today-border-color: var(--spectrum-calendar-day-today-border-color-disabled); + --spectrum-calendar-day-border-color-key-focus: transparent; + + --spectrum-calendar-day-background-color-selected: var(--spectrum-calendar-day-background-color-selected-disabled); + --spectrum-calendar-day-background-color-selected-hover: transparent; + --spectrum-calendar-day-background-color-cap-selected: transparent; + --spectrum-calendar-day-background-color-hover: transparent; + --spectrum-calendar-day-background-color-key-focus: transparent; + --spectrum-calendar-day-background-color-down: transparent; + + --spectrum-calendar-day-text-font-weight: normal; + --spectrum-calendar-day-text-font-weight-selected: normal; + --spectrum-calendar-day-text-font-weight-cap-selected: normal; pointer-events: none; /* @todo sync with design on these colors and states for disabled calendars */ &.is-selected { - --mod-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-selected); + --spectrum-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-selected); } } } diff --git a/components/calendar/stories/template.js b/components/calendar/stories/template.js index 863f5e8d113..a367165d112 100644 --- a/components/calendar/stories/template.js +++ b/components/calendar/stories/template.js @@ -262,7 +262,7 @@ export const Template = ({ ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${styleMap({ - "--mod-actionbutton-icon-size": "10px", + "--spectrum-actionbutton-icon-size": "10px", ...customStyles })} id=${ifDefined(id)} diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json index d1d22100c30..7e0c58fb444 100644 --- a/components/card/dist/metadata.json +++ b/components/card/dist/metadata.json @@ -55,63 +55,6 @@ ".spectrum-Card:hover .spectrum-Card-actions", ".spectrum-Card:hover .spectrum-Card-quickActions" ], - "modifiers": [ - "--mod-animation-duration-100", - "--mod-card-actions-border-radius", - "--mod-card-actions-drop-shadow-blur", - "--mod-card-actions-drop-shadow-color", - "--mod-card-actions-drop-shadow-x", - "--mod-card-actions-drop-shadow-y", - "--mod-card-actions-size", - "--mod-card-actions-spacing", - "--mod-card-animation-duration", - "--mod-card-background-color", - "--mod-card-background-color-hover", - "--mod-card-background-color-selected", - "--mod-card-body-font-color", - "--mod-card-body-font-family", - "--mod-card-body-font-size", - "--mod-card-body-font-style", - "--mod-card-body-font-weight", - "--mod-card-body-line-height", - "--mod-card-body-padding-block-end", - "--mod-card-body-padding-block-start", - "--mod-card-body-padding-inline-end", - "--mod-card-body-padding-inline-start", - "--mod-card-body-spacing", - "--mod-card-border-color", - "--mod-card-border-color-hover", - "--mod-card-border-color-selected", - "--mod-card-border-width", - "--mod-card-content-margin-bottom", - "--mod-card-content-margin-top", - "--mod-card-corner-radius", - "--mod-card-divider-color", - "--mod-card-focus-indicator-color", - "--mod-card-focus-indicator-width", - "--mod-card-footer-margin-block-start", - "--mod-card-footer-margin-inline-end", - "--mod-card-footer-margin-inline-start", - "--mod-card-footer-padding-block-end", - "--mod-card-footer-padding-block-start", - "--mod-card-horizontal-body-padding", - "--mod-card-horizontal-preview-padding", - "--mod-card-minimum-width", - "--mod-card-preview-background-color", - "--mod-card-preview-background-color-hover", - "--mod-card-preview-minimum-height", - "--mod-card-selected-background-color-rgb", - "--mod-card-selected-background-opacity", - "--mod-card-subtitle-padding-right", - "--mod-card-title-font-color", - "--mod-card-title-font-family", - "--mod-card-title-font-size", - "--mod-card-title-font-style", - "--mod-card-title-font-weight", - "--mod-card-title-line-height", - "--mod-card-title-padding-right", - "--mod-overlay-animation-duration" - ], "component": [ "--spectrum-card-actions-border-radius", "--spectrum-card-actions-drop-shadow-blur", diff --git a/components/card/index.css b/components/card/index.css index 472e79504f2..8ffa5214935 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -12,62 +12,62 @@ */ .spectrum-Card { - --spectrum-card-border-color: var(--mod-card-border-color, var(--spectrum-gray-100)); - --spectrum-card-border-color-hover: var(--mod-card-border-color-hover, var(--spectrum-gray-200)); - --spectrum-card-border-color-selected: var(--mod-card-border-color-selected, var(--spectrum-blue-700)); + --spectrum-card-border-color: var(--spectrum-gray-100); + --spectrum-card-border-color-hover: var(--spectrum-gray-200); + --spectrum-card-border-color-selected: var(--spectrum-blue-700); - --spectrum-card-divider-color: var(--mod-card-divider-color, var(--spectrum-gray-200)); - --spectrum-card-preview-background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-gray-100))); - --spectrum-card-preview-background-color-hover: var(--mod-card-preview-background-color-hover, var(--mod-card-background-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)); - --spectrum-card-body-padding-block-start: var(--mod-card-body-padding-block-start, var(--spectrum-spacing-300)); - --spectrum-card-title-padding-right: var(--mod-card-title-padding-right, var(--spectrum-spacing-400)); - --spectrum-card-content-margin-top: var(--mod-card-content-margin-top, var(--spectrum-spacing-100)); - --spectrum-card-content-margin-bottom: var(--mod-card-content-margin-bottom, var(--spectrum-spacing-300)); - --spectrum-card-footer-padding-top: var(--mod-card-footer-padding-block-start, var(--spectrum-spacing-100)); - --spectrum-card-subtitle-padding-right: var(--mod-card-subtitle-padding-right, var(--spectrum-spacing-100)); - - --spectrum-card-border-width: var(--mod-card-border-width, var(--spectrum-border-width-100)); - --spectrum-card-corner-radius: var(--mod-card-corner-radius, var(--spectrum-corner-radius-100)); + --spectrum-card-background-color: var(--spectrum-background-layer-2-color); + --spectrum-card-body-spacing: var(--spectrum-spacing-400); + --spectrum-card-body-padding-block-start: var(--spectrum-spacing-300); + --spectrum-card-title-padding-right: var(--spectrum-spacing-400); + --spectrum-card-content-margin-top: var(--spectrum-spacing-100); + --spectrum-card-content-margin-bottom: var(--spectrum-spacing-300); + --spectrum-card-footer-padding-top: var(--spectrum-spacing-100); + --spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100); + + --spectrum-card-border-width: var(--spectrum-border-width-100); + --spectrum-card-corner-radius: var(--spectrum-corner-radius-100); /* Typography */ - --spectrum-card-title-font-family: var(--mod-card-title-font-family, var(--spectrum-sans-font-family-stack)); - --spectrum-card-title-font-size: var(--mod-card-title-font-size, var(--spectrum-heading-size-xxs)); - --spectrum-card-title-font-weight: var(--mod-card-title-font-weight, var(--spectrum-heading-sans-serif-font-weight)); - --spectrum-card-title-font-style: var(--mod-card-title-font-style, var(--spectrum-heading-sans-serif-font-style)); - --spectrum-card-title-line-height: var(--mod-card-title-line-height, var(--spectrum-heading-line-height)); - --spectrum-card-title-font-color: var(--mod-card-title-font-color, var(--spectrum-heading-color)); - - --spectrum-card-body-font-family: var(--mod-card-body-font-family, var(--spectrum-sans-font-family-stack)); - --spectrum-card-body-font-size: var(--mod-card-body-font-size, var(--spectrum-body-size-s)); - --spectrum-card-body-font-weight: var(--mod-card-body-font-weight, var(--spectrum-body-sans-serif-font-weight)); - --spectrum-card-body-font-style: var(--mod-card-body-font-style, var(--spectrum-body-sans-serif-font-style)); - --spectrum-card-body-line-height: var(--mod-card-body-line-height, var(--spectrum-body-line-height)); - --spectrum-card-body-font-color: var(--mod-card-body-font-color, var(--spectrum-body-color)); + --spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-card-title-font-size: var(--spectrum-heading-size-xxs); + --spectrum-card-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); + --spectrum-card-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --spectrum-card-title-line-height: var(--spectrum-heading-line-height); + --spectrum-card-title-font-color: var(--spectrum-heading-color); + + --spectrum-card-body-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-card-body-font-size: var(--spectrum-body-size-s); + --spectrum-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-card-body-line-height: var(--spectrum-body-line-height); + --spectrum-card-body-font-color: var(--spectrum-body-color); /* Quick Actions */ - --spectrum-card-actions-spacing: var(--mod-card-actions-spacing, var(--spectrum-spacing-300)); - --spectrum-card-actions-size: var(--mod-card-actions-size, var(--spectrum-card-selection-background-size)); - --spectrum-card-actions-border-radius: var(--mod-card-actions-border-radius, var(--spectrum-corner-radius-100)); + --spectrum-card-actions-spacing: var(--spectrum-spacing-300); + --spectrum-card-actions-size: var(--spectrum-card-selection-background-size); + --spectrum-card-actions-border-radius: var(--spectrum-corner-radius-100); - --spectrum-card-actions-drop-shadow-color: var(--mod-card-actions-drop-shadow-color, var(--spectrum-drop-shadow-color)); - --spectrum-card-actions-drop-shadow-x: var(--mod-card-actions-drop-shadow-x, var(--spectrum-drop-shadow-x)); - --spectrum-card-actions-drop-shadow-y: var(--mod-card-actions-drop-shadow-y, var(--spectrum-drop-shadow-y)); - --spectrum-card-actions-drop-shadow-blur: var(--mod-card-actions-drop-shadow-blur, var(--spectrum-drop-shadow-blur)); + --spectrum-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --spectrum-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --spectrum-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --spectrum-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); /* Focus */ - --spectrum-card-focus-indicator-color: var(--mod-card-focus-indicator-color, var(--spectrum-focus-indicator-color)); - --spectrum-card-focus-indicator-width: var(--mod-card-focus-indicator-width, var(--spectrum-focus-indicator-thickness)); + --spectrum-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness); /* Selected */ - --spectrum-card-selected-background-opacity: var(--mod-card-selected-background-opacity, 0.1); /* table-selected-row-background-opacity does not exist in tokens yet */ + --spectrum-card-selected-background-opacity: 0.1; /* table-selected-row-background-opacity does not exist in tokens yet */ /* Horizontal */ - --spectrum-card-horizontal-body-padding: var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300)); - --spectrum-card-horizontal-preview-padding: var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200)); + --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300); + --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200); &.spectrum-Card--gallery { --spectrum-card-content-margin-top: var(--spectrum-spacing-100); @@ -79,7 +79,7 @@ box-sizing: border-box; text-decoration: none; - min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width)); + min-inline-size: var(--spectrum-card-minimum-width); block-size: 100%; border: var(--spectrum-card-border-width) solid transparent; @@ -134,20 +134,19 @@ } &:hover { - --mod-card-border-color: var(--spectrum-card-border-color-hover); + --spectrum-card-border-color: var(--spectrum-card-border-color-hover); } &.is-selected { - --mod-card-border-color: var(--spectrum-card-border-color-selected); + --spectrum-card-border-color: var(--spectrum-card-border-color-selected); &::before { - /* @deprecated --mod-card-selected-background-color-rgb. Use --mod-card-background-color-selected instead. */ - background-color: var(--mod-card-background-color-selected, var(--spectrum-card-selection-background-color)); + background-color: var(--spectrum-card-selection-background-color); } } &.is-drop-target { - --mod-card-background-color: var(--spectrum-background-base-color); + --spectrum-card-background-color: var(--spectrum-background-base-color); box-shadow: 0 0 0 1px var(--spectrum-card-border-color); } @@ -186,9 +185,9 @@ box-sizing: border-box; transition: - transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out, - opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out, - visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)); + transform var(--spectrum-animation-duration-100, 130ms) ease-in-out, + opacity var(--spectrum-animation-duration-100, 130ms) ease-in-out, + visibility 0ms linear var(--spectrum-animation-duration-100, 130ms); } .spectrum-Card-actions { @@ -198,7 +197,7 @@ .spectrum-Card-coverPhoto { position: relative; - block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height)); + block-size: var(--spectrum-card-preview-minimum-height); box-sizing: border-box; overflow: hidden; @@ -230,9 +229,9 @@ .spectrum-Card-body { padding-block-start: var(--spectrum-card-body-padding-block-start); - padding-inline-end: var(--mod-card-body-padding-inline-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))); - padding-inline-start: var(--mod-card-body-padding-inline-start, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))); - padding-block-end: var(--mod-card-body-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))); + padding-inline-end: calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)); + padding-inline-start: calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)); + padding-block-end: calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)); } .spectrum-Card-preview { @@ -278,10 +277,10 @@ .spectrum-Card-footer { /* Accommodate for wanting less spacing between body and footer */ - margin-block-start: var(--mod-card-footer-margin-block-start, calc(-1 * (var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom)))); - margin-inline-start: var(--mod-card-footer-margin-inline-start, var(--spectrum-card-body-spacing)); - margin-inline-end: var(--mod-card-footer-margin-inline-end, var(--spectrum-card-body-spacing)); - padding-block-end: var(--mod-card-footer-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))); + margin-block-start: calc(-1 * (var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom))); + margin-inline-start: var(--spectrum-card-body-spacing); + margin-inline-end: var(--spectrum-card-body-spacing); + padding-block-end: calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)); padding-block-start: var(--spectrum-card-footer-padding-top); color: var(--spectrum-card-body-font-color); @@ -300,7 +299,7 @@ } .spectrum-Card--gallery { - --mod-card-border-color-hover: transparent; + --spectrum-card-border-color-hover: transparent; border-width: 0; border-radius: 0; @@ -315,15 +314,14 @@ .spectrum-Card-preview { border-radius: var(--spectrum-card-corner-radius); background-color: var(--spectrum-card-preview-background-color); - min-block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height)); + min-block-size: var(--spectrum-card-preview-minimum-height); inline-size: 100%; flex: 1; margin: 0 auto; box-sizing: border-box; position: relative; - /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */ - transition: background-color var(--mod-card-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))); + transition: background-color var(--spectrum-animation-duration-100); overflow: visible; /* Use ::before to show the selected overlay */ @@ -376,7 +374,7 @@ } &.is-selected .spectrum-Card-preview::before { - background-color: rgb(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity))); + background-color: rgb(var(--spectrum-card-selected-background-color-rgb), var(--spectrum-card-selected-background-opacity)); } .spectrum-Card-body { @@ -394,7 +392,7 @@ flex-direction: row; &:hover .spectrum-Card-preview { - --mod-card-border-color: var(--spectrum-card-border-color-hover); + --spectrum-card-border-color: var(--spectrum-card-border-color-hover); } .spectrum-Card-preview { diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index daf35c48fa3..7142c1de86b 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -56,39 +56,6 @@ ".spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box", ".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box" ], - "modifiers": [ - "--mod-checkbox-animation-duration", - "--mod-checkbox-border-width", - "--mod-checkbox-bottom-to-text", - "--mod-checkbox-checkmark-color", - "--mod-checkbox-content-color-default", - "--mod-checkbox-content-color-disabled", - "--mod-checkbox-content-color-down", - "--mod-checkbox-content-color-focus", - "--mod-checkbox-content-color-hover", - "--mod-checkbox-control-color-default", - "--mod-checkbox-control-color-disabled", - "--mod-checkbox-control-color-down", - "--mod-checkbox-control-color-focus", - "--mod-checkbox-control-color-hover", - "--mod-checkbox-control-corner-radius", - "--mod-checkbox-control-selected-color-default", - "--mod-checkbox-control-selected-color-down", - "--mod-checkbox-control-selected-color-hover", - "--mod-checkbox-control-size", - "--mod-checkbox-focus-indicator-color", - "--mod-checkbox-focus-indicator-gap", - "--mod-checkbox-focus-indicator-thickness", - "--mod-checkbox-font-size", - "--mod-checkbox-height", - "--mod-checkbox-line-height", - "--mod-checkbox-line-height-cjk", - "--mod-checkbox-margin-block", - "--mod-checkbox-selected-border-width", - "--mod-checkbox-text-to-control", - "--mod-checkbox-top-to-text", - "--mod-focus-indicator-thickness" - ], "component": [ "--spectrum-checkbox-animation-duration", "--spectrum-checkbox-background-color", diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 140581616e8..db51715e2b3 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -76,7 +76,7 @@ &:lang(ja), &:lang(zh), &:lang(ko) { - --mod-checkbox-line-height: var(--mod-checkbox-line-height-cjk, var(--spectrum-checkbox-line-height-cjk)); + --spectrum-checkbox-line-height: var(--spectrum-checkbox-line-height-cjk); } &.spectrum-Checkbox--sizeS { @@ -131,46 +131,46 @@ } .spectrum-Checkbox { - color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); + color: var(--highcontrast-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default)); display: inline-flex; align-items: flex-start; position: relative; - min-block-size: var(--mod-checkbox-height, var(--spectrum-checkbox-height)); + min-block-size: var(--spectrum-checkbox-height); max-inline-size: 100%; vertical-align: top; &:hover { .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-color-hover, var(--spectrum-checkbox-control-color-hover))); + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--spectrum-checkbox-control-color-hover)); } .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover))); + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--spectrum-checkbox-control-selected-color-hover)); } .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))); + color: var(--highcontrast-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover)); } } &:active { .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-color-down, var(--spectrum-checkbox-control-color-down))); + border-color: var(--highcontrast-checkbox-highlight-color-down, var(--spectrum-checkbox-control-color-down)); } .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down))); + border-color: var(--highcontrast-checkbox-highlight-color-down, var(--spectrum-checkbox-control-selected-color-down)); } .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-down, var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down))); + color: var(--highcontrast-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down)); } } &:not(.is-readOnly) { .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box, &:active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box { - transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); + transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); /* stylelint-disable-line */ } } @@ -181,8 +181,8 @@ transform: scale(0); transition: - opacity var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, - transform var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; + opacity var(--spectrum-checkbox-animation-duration) ease-in-out, + transform var(--spectrum-checkbox-animation-duration) ease-in-out; } .spectrum-Checkbox-partialCheckmark { @@ -191,17 +191,17 @@ .spectrum-Checkbox-label { text-align: start; - margin-inline-start: var(--mod-checkbox-text-to-control, var(--spectrum-checkbox-text-to-control)); - margin-block-start: var(--mod-checkbox-top-to-text, var(--spectrum-checkbox-top-to-text)); - margin-block-end: var(--mod-checkbox-bottom-to-text, var(--spectrum-checkbox-bottom-to-text)); + margin-inline-start: var(--spectrum-checkbox-text-to-control); + margin-block-start: var(--spectrum-checkbox-top-to-text); + margin-block-end: var(--spectrum-checkbox-bottom-to-text); - font-size: var(--mod-checkbox-font-size, var(--spectrum-checkbox-font-size)); + font-size: var(--spectrum-checkbox-font-size); font-weight: var(--spectrum-checkbox-text-font-weight); font-style: var(--spectrum-checkbox-text-font-style); - transition: color var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; + transition: color var(--spectrum-checkbox-animation-duration) ease-in-out; - line-height: var(--mod-checkbox-line-height, var(--spectrum-checkbox-line-height)); + line-height: var(--spectrum-checkbox-line-height); } /** @@ -209,7 +209,7 @@ * It is still sized and positioned where it would naturally be present so that touch users can find it with haptics. */ .spectrum-Checkbox-input { - color: var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default)); + color: var(--spectrum-checkbox-control-color-default); /* Remove the margin for input in Firefox and Safari. */ margin: 0; @@ -239,9 +239,9 @@ /* Selected */ &:checked + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); - border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--spectrum-checkbox-control-selected-color-default)); + background-color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-checkmark-color)); + border-width: var(--spectrum-checkbox-selected-border-width); } .spectrum-Checkbox-checkmark { @@ -253,17 +253,17 @@ /* Focus */ &:focus-visible + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))); + border-color: var(--highcontrast-checkbox-color-focus, var(--spectrum-checkbox-control-color-focus)); } &::after { - box-shadow: 0 0 0 var(--mod-checkbox-focus-indicator-thickness, var(--spectrum-checkbox-focus-indicator-thickness)) var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); - margin: calc(var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)) * -1); + box-shadow: 0 0 0 var(--spectrum-checkbox-focus-indicator-thickness) var(--highcontrast-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color)); + margin: calc(var(--spectrum-checkbox-focus-indicator-gap) * -1); } } &:focus-visible + .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-focus, var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))); + color: var(--highcontrast-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus)); } } @@ -274,16 +274,16 @@ position: relative; box-sizing: border-box; - inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); + inline-size: var(--spectrum-checkbox-control-size); + block-size: var(--spectrum-checkbox-control-size); /* Fix vertical alignment when not wrapping since we're flex-start */ - margin: var(--mod-checkbox-margin-block, var(--spectrum-checkbox-top-to-control)) 0; + margin: var(--spectrum-checkbox-top-to-control) 0; flex-grow: 0; flex-shrink: 0; &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))); + border-color: var(--highcontrast-checkbox-color-default, var(--spectrum-checkbox-control-color-default)); background-color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-background-color)); display: block; z-index: 0; @@ -291,20 +291,20 @@ box-sizing: border-box; position: absolute; - inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); + inline-size: var(--spectrum-checkbox-control-size); + block-size: var(--spectrum-checkbox-control-size); - border-radius: var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)); - border-width: var(--mod-checkbox-border-width, var(--spectrum-checkbox-border-width)); + border-radius: var(--spectrum-checkbox-control-corner-radius); + border-width: var(--spectrum-checkbox-border-width); border-style: solid; transition: - border var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, - box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; + border var(--spectrum-checkbox-animation-duration) ease-in-out, + box-shadow var(--spectrum-checkbox-animation-duration) ease-in-out; } &::after { - border-radius: calc(var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)) + var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap))); + border-radius: calc(var(--spectrum-checkbox-control-corner-radius) + var(--spectrum-checkbox-focus-indicator-gap)); content: ""; display: block; position: absolute; @@ -312,11 +312,11 @@ inset-inline-end: 0; inset-block-end: 0; inset-block-start: 0; - margin: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)); + margin: var(--spectrum-checkbox-focus-indicator-gap); transition: - box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out, - margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out; + box-shadow var(--spectrum-checkbox-animation-duration) ease-out, + margin var(--spectrum-checkbox-animation-duration) ease-out; /* force ff to render on the pixel grid */ transform: translate(0, 0); @@ -329,7 +329,7 @@ .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { &::before { border-color: var(--highcontrast-checkbox-highlight-color-default); - border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); + border-width: var(--spectrum-checkbox-selected-border-width); } .spectrum-Checkbox-checkmark { @@ -398,7 +398,7 @@ .spectrum-Checkbox--emphasized { &:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box { &::before { - --mod-checkbox-control-color-focus: var(--highcontrast-checkbox-color-focus, var(--spectrum-checkbox-emphasized-color-focus)); + --spectrum-checkbox-control-color-focus: var(--highcontrast-checkbox-color-focus, var(--spectrum-checkbox-emphasized-color-focus)); } } } @@ -408,19 +408,19 @@ .spectrum-Checkbox .spectrum-Checkbox-input:checked { &:disabled + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled))); + border-color: var(--highcontrast-checkbox-disabled-color-default, var(--spectrum-checkbox-control-color-disabled)); background-color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-background-color)); } } &:hover:disabled + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled))); + border-color: var(--highcontrast-checkbox-disabled-color-default, var(--spectrum-checkbox-control-color-disabled)); } } &:disabled ~ .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-control-color-disabled))); + color: var(--highcontrast-checkbox-disabled-color-default, var(--spectrum-checkbox-control-color-disabled)); } } @@ -429,9 +429,9 @@ .spectrum-Checkbox-input { &:focus-visible + .spectrum-Checkbox-box { forced-color-adjust: none; - outline-color: var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); - outline-offset: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)); - outline-width: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); + outline-color: var(--highcontrast-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color)); + outline-offset: var(--spectrum-checkbox-focus-indicator-gap); + outline-width: var(--spectrum-focus-indicator-thickness); } } diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json index dd50b142662..68505e096a6 100644 --- a/components/clearbutton/dist/metadata.json +++ b/components/clearbutton/dist/metadata.json @@ -21,21 +21,6 @@ ".spectrum-ClearButton:not(:disabled):hover", ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill" ], - "modifiers": [ - "--mod-clear-button-background-color", - "--mod-clear-button-background-color-disabled", - "--mod-clear-button-background-color-down", - "--mod-clear-button-background-color-hover", - "--mod-clear-button-background-color-key-focus", - "--mod-clear-button-height", - "--mod-clear-button-icon-color", - "--mod-clear-button-icon-color-disabled", - "--mod-clear-button-icon-color-down", - "--mod-clear-button-icon-color-hover", - "--mod-clear-button-icon-color-key-focus", - "--mod-clear-button-padding", - "--mod-clear-button-width" - ], "component": [ "--spectrum-clear-button-background-color", "--spectrum-clear-button-background-color-down", diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index 8289c77e0de..c702f83f91c 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -49,23 +49,23 @@ &:disabled, &.is-disabled { - --mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --mod-clear-button-icon-color-hover: var(--spectrum-disabled-content-color); - --mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color); - --mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); + --spectrum-clear-button-icon-color: var(--spectrum-disabled-content-color); + --spectrum-clear-button-icon-color-hover: var(--spectrum-disabled-content-color); + --spectrum-clear-button-icon-color-down: var(--spectrum-disabled-content-color); + --spectrum-clear-button-background-color: transparent; } } .spectrum-ClearButton { - block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); - inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); + block-size: var(--spectrum-clear-button-height); + inline-size: var(--spectrum-clear-button-width); background-color: transparent; margin: 0; - padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding)); + padding: var(--spectrum-clear-button-padding); border: none; - color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color)); + color: var(--spectrum-clear-button-icon-color); &:not(:disabled) { cursor: pointer; @@ -82,28 +82,28 @@ } &:not(:disabled):hover { - color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))); + color: var(--highcontrast-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover)); .spectrum-ClearButton-fill { - background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover)); + background-color: var(--spectrum-clear-button-background-color-hover); } } &:not(:disabled):active { - color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down)); - transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); + color: var(--spectrum-clear-button-icon-color-down); + transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); /* stylelint-disable-line */ .spectrum-ClearButton-fill { - background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down)); + background-color: var(--spectrum-clear-button-background-color-down); } } &:not(:disabled):focus-visible, &:not(:disabled):focus-within { - color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus)); + color: var(--spectrum-clear-button-icon-color-key-focus); .spectrum-ClearButton-fill { - background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus)); + background-color: var(--spectrum-clear-button-background-color-key-focus); } } } @@ -113,7 +113,7 @@ } .spectrum-ClearButton-fill { - background-color: var(--mod-clear-button-background-color, var(--spectrum-clear-button-background-color)); + background-color: var(--spectrum-clear-button-background-color); inline-size: 100%; block-size: 100%; diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json index 28efda498a3..3de9d366385 100644 --- a/components/closebutton/dist/metadata.json +++ b/components/closebutton/dist/metadata.json @@ -29,28 +29,8 @@ ".spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon", "a.spectrum-CloseButton" ], - "modifiers": [ - "--mod-closebutton-align-self", - "--mod-closebutton-animation-duraction", - "--mod-closebutton-animation-duration", - "--mod-closebutton-background-color-default", - "--mod-closebutton-background-color-down", - "--mod-closebutton-background-color-focus", - "--mod-closebutton-background-color-hover", - "--mod-closebutton-border-radius", - "--mod-closebutton-focus-indicator-color", - "--mod-closebutton-focus-indicator-gap", - "--mod-closebutton-focus-indicator-thickness", - "--mod-closebutton-icon-color-default", - "--mod-closebutton-icon-color-disabled", - "--mod-closebutton-icon-color-down", - "--mod-closebutton-icon-color-focus", - "--mod-closebutton-icon-color-hover", - "--mod-closebutton-margin-inline", - "--mod-closebutton-margin-top", - "--mod-closebutton-size" - ], "component": [ + "--spectrum-closebutton-align-self", "--spectrum-closebutton-animation-duration", "--spectrum-closebutton-background-color-default", "--spectrum-closebutton-background-color-down", @@ -65,6 +45,8 @@ "--spectrum-closebutton-icon-color-down", "--spectrum-closebutton-icon-color-focus", "--spectrum-closebutton-icon-color-hover", + "--spectrum-closebutton-margin-inline", + "--spectrum-closebutton-margin-top", "--spectrum-closebutton-size" ], "global": [ @@ -96,7 +78,7 @@ "--spectrum-transparent-white-800", "--spectrum-transparent-white-900" ], - "passthroughs": ["--mod-button-font-family", "--mod-button-line-height"], + "passthroughs": [], "high-contrast": [ "--highcontrast-closebutton-background-color-default", "--highcontrast-closebutton-focus-indicator-color", diff --git a/components/closebutton/index.css b/components/closebutton/index.css index 5bc33779eb1..7e051c9a32b 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -98,10 +98,10 @@ &:focus-visible::after { forced-color-adjust: none; - margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)); + margin: var(--spectrum-closebutton-focus-indicator-gap); transition: - opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out, - margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out; + opacity var(--spectrum-closebutton-animation-duration) ease-out, + margin var(--spectrum-closebutton-animation-duration) ease-out; } } @@ -137,7 +137,7 @@ a.spectrum-CloseButton { /* Remove button the margin in Firefox and Safari. */ margin: 0; - font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack)); + font-family: var(--spectrum-sans-font-family-stack); /* Adjacent buttons should be aligned correctly */ vertical-align: top; @@ -147,7 +147,7 @@ a.spectrum-CloseButton { /* Font smoothing for Firefox */ -moz-osx-font-smoothing: grayscale; - line-height: var(--mod-button-line-height, var(--spectrum-line-height-100)); + line-height: var(--spectrum-line-height-100); text-decoration: none; /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */ @@ -156,21 +156,21 @@ a.spectrum-CloseButton { /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */ -webkit-appearance: button; - block-size: var(--mod-closebutton-size, var(--spectrum-closebutton-size)); - inline-size: var(--mod-closebutton-size, var(--spectrum-closebutton-size)); + block-size: var(--spectrum-closebutton-size); + inline-size: var(--spectrum-closebutton-size); color: inherit; border-color: transparent; - border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius)); + border-radius: var(--spectrum-closebutton-border-radius); border-width: 0; padding: 0; - transition: border-color var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out; + transition: border-color var(--spectrum-closebutton-animation-duration) ease-in-out; - margin-inline: var(--mod-closebutton-margin-inline); - margin-block-start: var(--mod-closebutton-margin-top); - align-self: var(--mod-closebutton-align-self); + margin-inline: var(--spectrum-closebutton-margin-inline); + margin-block-start: var(--spectrum-closebutton-margin-top); + align-self: var(--spectrum-closebutton-align-self); /* Fix Firefox */ &::-moz-focus-inner { @@ -195,9 +195,9 @@ a.spectrum-CloseButton { inset-inline-end: 0; inset-block-end: 0; inset-block-start: 0; - margin: calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1); - border-radius: calc(var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap))); - transition: box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out; + margin: calc(var(--spectrum-closebutton-focus-indicator-gap) * -1); + border-radius: calc(var(--spectrum-closebutton-border-radius) + var(--spectrum-closebutton-focus-indicator-gap)); + transition: box-shadow var(--spectrum-closebutton-animation-duration) ease-in-out; } &:focus-visible { @@ -205,57 +205,57 @@ a.spectrum-CloseButton { outline: none; &::after { - box-shadow: 0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness)) var(--highcontrast-closebutton-focus-indicator-color, var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color))); + box-shadow: 0 0 0 var(--spectrum-closebutton-focus-indicator-thickness) var(--highcontrast-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color)); } } /* COLORS */ &:not(:disabled) { - background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))); + background-color: var(--highcontrast-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)); &:hover { - background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover)); + background-color: var(--spectrum-closebutton-background-color-hover); .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))); + color: var(--highcontrast-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover)); } } &:active { - background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down)); + background-color: var(--spectrum-closebutton-background-color-down); .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))); + color: var(--highcontrast-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down)); } } &:focus-visible, &.is-keyboardFocused { - background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus)); + background-color: var(--spectrum-closebutton-background-color-focus); .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); + color: var(--highcontrast-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)); } } .spectrum-CloseButton-UIIcon { - color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)); + color: var(--spectrum-closebutton-icon-color-default); } &:focus, &.is-focused { .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); + color: var(--highcontrast-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)); } } } &:disabled { cursor: default; - background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)); + background-color: var(--spectrum-closebutton-background-color-default); .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); + color: var(--highcontrast-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)); } } } diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json index 0bed4172eef..de322728e5d 100644 --- a/components/coachindicator/dist/metadata.json +++ b/components/coachindicator/dist/metadata.json @@ -10,27 +10,6 @@ ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack", ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite" ], - "modifiers": [ - "--mod-coach-animation-indicator-ring-center-delay-multiple", - "--mod-coach-animation-indicator-ring-duration", - "--mod-coach-animation-indicator-ring-outer-delay-multiple", - "--mod-coach-indicator-animation-name", - "--mod-coach-indicator-block-size", - "--mod-coach-indicator-gap", - "--mod-coach-indicator-inline-size", - "--mod-coach-indicator-inner-animation-delay-multiple", - "--mod-coach-indicator-left", - "--mod-coach-indicator-min-block-size", - "--mod-coach-indicator-min-inline-size", - "--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple", - "--mod-coach-indicator-quiet-ring-diameter", - "--mod-coach-indicator-ring-block-size", - "--mod-coach-indicator-ring-border-size", - "--mod-coach-indicator-ring-default-color", - "--mod-coach-indicator-ring-diameter", - "--mod-coach-indicator-ring-inline-size", - "--mod-coach-indicator-top" - ], "component": [ "--spectrum-coach-indicator-animation-keyframe-scale-initial", "--spectrum-coach-indicator-animation-ring-inner-delay-multiple", diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css index c3bb2754d30..71ff9408093 100644 --- a/components/coachindicator/index.css +++ b/components/coachindicator/index.css @@ -14,23 +14,23 @@ .spectrum-CoachIndicator { --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200); --spectrum-coach-indicator-sizing-multiple: 3; - --spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-ring-diameter, var(--spectrum-coach-indicator-ring-diameter)); + --spectrum-coach-indicator-ring-diameter-size: var(--spectrum-coach-indicator-ring-diameter); --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple)); --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple)); - --spectrum-coach-indicator-inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-min-inline-size)); - --spectrum-coach-indicator-block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-min-block-size)); + --spectrum-coach-indicator-inline-size: var(--spectrum-coach-indicator-min-inline-size); + --spectrum-coach-indicator-block-size: var(--spectrum-coach-indicator-min-block-size); --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); --spectrum-coach-indicator-animation-keyframe-scale-initial: 1; - --spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-inner-animation-delay-multiple, -0.5); + --spectrum-coach-indicator-animation-ring-inner-delay-multiple: -0.5; &.spectrum-CoachIndicator--quiet { --spectrum-coach-indicator-animation-keyframe-scale-initial: 0.8; --spectrum-coach-indicator-sizing-multiple: 2.75; - --spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)); - --spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33); + --spectrum-coach-indicator-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); + --spectrum-coach-indicator-animation-ring-inner-delay-multiple: -0.33; } &.spectrum-CoachIndicator--staticWhite { @@ -42,10 +42,10 @@ } position: relative; - margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap)); + margin: var(--spectrum-coach-indicator-gap); - min-inline-size: var(--mod-coach-indicator-min-inline-size, var(--spectrum-coach-indicator-min-inline-size)); - min-block-size: var(--mod-coach-indicator-min-block-size, var(--spectrum-coach-indicator-min-block-size)); + min-inline-size: var(--spectrum-coach-indicator-min-inline-size); + min-block-size: var(--spectrum-coach-indicator-min-block-size); inline-size: var(--spectrum-coach-indicator-inline-size); block-size: var(--spectrum-coach-indicator-block-size); @@ -56,27 +56,27 @@ position: absolute; border-style: solid; - border-width: var(--mod-coach-indicator-ring-border-size, var(--spectrum-coach-indicator-ring-border-size)); + border-width: var(--spectrum-coach-indicator-ring-border-size); border-radius: 50%; - border-color: var(--mod-coach-indicator-ring-default-color, var(--spectrum-coach-indicator-ring-default-color)); + border-color: var(--spectrum-coach-indicator-ring-default-color); - inset-block-start: var(--mod-coach-indicator-top, calc(var(--spectrum-coach-indicator-block-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))); - inset-inline-start: var(--mod-coach-indicator-left, calc(var(--spectrum-coach-indicator-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))); + inset-block-start: calc(var(--spectrum-coach-indicator-block-size) / 3 - var(--spectrum-coach-indicator-ring-border-size)); + inset-inline-start: calc(var(--spectrum-coach-indicator-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size)); - inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-diameter-size)); - block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-diameter-size)); - animation: var(--mod-coach-indicator-animation-name, pulse) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite; + inline-size: var(--spectrum-coach-indicator-ring-diameter-size); + block-size: var(--spectrum-coach-indicator-ring-diameter-size); + animation: pulse var(--spectrum-coach-animation-indicator-ring-duration) linear infinite; &:nth-child(1) { - animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--spectrum-coach-indicator-animation-ring-inner-delay-multiple)); + animation-delay: calc(var(--spectrum-coach-animation-indicator-ring-duration) * var(--spectrum-coach-indicator-animation-ring-inner-delay-multiple)); } &:nth-child(2) { - animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-center-delay-multiple, -0.66)); + animation-delay: calc(var(--spectrum-coach-animation-indicator-ring-duration) * -0.66); } &:nth-child(3) { - animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-outer-delay-multiple, -1)); + animation-delay: calc(var(--spectrum-coach-animation-indicator-ring-duration) * -1); } } diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json index 9286c817c5f..6eb9b4ed871 100644 --- a/components/coachmark/dist/metadata.json +++ b/components/coachmark/dist/metadata.json @@ -16,39 +16,6 @@ ".spectrum-CoachMark-step", ".spectrum-CoachMark-title" ], - "modifiers": [ - "--mod-coachmark-action-menu-vertical-offset", - "--mod-coachmark-body-to-footer", - "--mod-coachmark-border-radius", - "--mod-coachmark-border-size", - "--mod-coachmark-content-font-color", - "--mod-coachmark-content-font-family", - "--mod-coachmark-content-font-size", - "--mod-coachmark-content-font-style", - "--mod-coachmark-content-font-weight", - "--mod-coachmark-content-line-height", - "--mod-coachmark-header-to-body", - "--mod-coachmark-heading-to-action-button", - "--mod-coachmark-image-to-heading", - "--mod-coachmark-max-width", - "--mod-coachmark-media-fixed-height", - "--mod-coachmark-media-min-height", - "--mod-coachmark-min-width", - "--mod-coachmark-padding", - "--mod-coachmark-step-color", - "--mod-coachmark-step-font-size", - "--mod-coachmark-step-font-style", - "--mod-coachmark-step-text-font-weight", - "--mod-coachmark-step-text-line-height", - "--mod-coachmark-step-to-bottom", - "--mod-coachmark-title-color", - "--mod-coachmark-title-font-family", - "--mod-coachmark-title-font-size", - "--mod-coachmark-title-font-style", - "--mod-coachmark-title-text-font-weight", - "--mod-coachmark-title-text-line-height", - "--mod-coachmark-width" - ], "component": [ "--spectrum-coach-mark-body-font-size", "--spectrum-coach-mark-edge-to-content", @@ -99,10 +66,16 @@ "--spectrum-body-sans-serif-font-weight", "--spectrum-body-serif-font-style", "--spectrum-border-width-100", + "--spectrum-button-edge-to-visual-only", + "--spectrum-buttongroup-justify-content", + "--spectrum-buttongroup-spacing", "--spectrum-corner-radius-large-default", "--spectrum-heading-color", "--spectrum-line-height-200", "--spectrum-medium-font-weight", + "--spectrum-popover-border-width", + "--spectrum-popover-content-area-spacing", + "--spectrum-popover-corner-radius", "--spectrum-popover-edge-to-content-area", "--spectrum-sans-serif-font", "--spectrum-spacing-100", @@ -112,13 +85,6 @@ "--spectrum-title-sans-serif-font-weight", "--spectrum-title-serif-font-style" ], - "passthroughs": [ - "--mod-button-edge-to-visual-only", - "--mod-buttongroup-justify-content", - "--mod-buttongroup-spacing", - "--mod-popover-border-width", - "--mod-popover-content-area-spacing", - "--mod-popover-corner-radius" - ], + "passthroughs": [], "high-contrast": [] } diff --git a/components/coachmark/index.css b/components/coachmark/index.css index 3d78766e888..e1bb700cb39 100644 --- a/components/coachmark/index.css +++ b/components/coachmark/index.css @@ -17,8 +17,8 @@ --spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width); --spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); - --spectrum-coachmark-border-size: var(--mod-coachmark-border-size, var(--mod-popover-border-width)); - --spectrum-coachmark-border-radius: var(--mod-coachmark-border-radius, var(--mod-popover-corner-radius)); + --spectrum-coachmark-border-size: var(--spectrum-popover-border-width); + --spectrum-coachmark-border-radius: var(--spectrum-popover-corner-radius); --spectrum-coachmark-media-fixed-height: var(--spectrum-coach-mark-media-height); @@ -47,25 +47,25 @@ --spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); /* @passthrough start */ - --mod-buttongroup-justify-content: flex-end; - --mod-popover-border-width: var(--spectrum-border-width-100); - --mod-popover-corner-radius: var(--spectrum-corner-radius-large-default); - --mod-popover-content-area-spacing: 0; - --mod-button-edge-to-visual-only: 9px; + --spectrum-buttongroup-justify-content: flex-end; + --spectrum-popover-border-width: var(--spectrum-border-width-100); + --spectrum-popover-corner-radius: var(--spectrum-corner-radius-large-default); + --spectrum-popover-content-area-spacing: 0; + --spectrum-button-edge-to-visual-only: 9px; /* @passthrough end */ } .spectrum-CoachMark { position: relative; - min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width)); - max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coachmark-max-width)); - inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width)); + min-inline-size: var(--spectrum-coachmark-min-width); + max-inline-size: var(--spectrum-coachmark-max-width); + inline-size: var(--spectrum-coachmark-width); } /* Used when the coachmark has an image */ .spectrum-CoachMark-image-wrapper { - min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height)); - inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coach-mark-width)) - (var(--spectrum-coachmark-border-size) * 2)); + min-block-size: var(--spectrum-coachmark-media-min-height); + inline-size: calc(var(--spectrum-coach-mark-width) - (var(--spectrum-coachmark-border-size) * 2)); object-fit: cover; object-position: center; @@ -75,7 +75,7 @@ } .spectrum-CoachMark-image-wrapper--fixedHeight { - block-size: var(--mod-coachmark-media-fixed-height, var(--spectrum-coachmark-media-fixed-height)); + block-size: var(--spectrum-coachmark-media-fixed-height); } /* Class for the image; nested inside image-wrapper */ @@ -83,7 +83,7 @@ display: block; inline-size: 100%; block-size: 100%; - min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height)); + min-block-size: var(--spectrum-coachmark-media-min-height); object-fit: cover; border-start-start-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size)); border-start-end-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size)); @@ -94,37 +94,37 @@ .spectrum-CoachMark-content, .spectrum-CoachMark-footer { padding-block: 0; - padding-inline: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)); + padding-inline: var(--spectrum-coachmark-padding); } /* Wrapper contains title, action-menu */ .spectrum-CoachMark-header { - padding-block-start: var(--mod-coachmark-image-to-heading, var(--spectrum-coachmark-image-to-heading)); + padding-block-start: var(--spectrum-coachmark-image-to-heading); display: flex; justify-content: space-between; align-items: flex-start; - margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body)); + margin-block-end: var(--spectrum-coachmark-header-to-body); } /* Text wrapper for the title content; sides besdie action menu if present */ .spectrum-CoachMark-title { - color: var(--mod-coachmark-title-color, var(--spectrum-coachmark-title-color)); - font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coachmark-title-font-size)); - font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-coachmark-title-text-font-weight)); - font-family: var(--mod-coachmark-title-font-family, var(--spectrum-coachmark-title-font-family)); - font-style: var(--mod-coachmark-title-font-style, var(--spectrum-coachmark-title-font-style)); - line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-coachmark-title-text-line-height)); + color: var(--spectrum-coachmark-title-color); + font-size: var(--spectrum-coachmark-title-font-size); + font-weight: var(--spectrum-coachmark-title-text-font-weight); + font-family: var(--spectrum-coachmark-title-font-family); + font-style: var(--spectrum-coachmark-title-font-style); + line-height: var(--spectrum-coachmark-title-text-line-height); margin-block-end: 0; } /* Wrapper element around the nested action menu sub-component */ .spectrum-CoachMark-action-menu { - --mod-popover-content-area-spacing: var(--spectrum-popover-edge-to-content-area); + --spectrum-popover-content-area-spacing: var(--spectrum-popover-edge-to-content-area); white-space: nowrap; z-index: 1; - margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-spacing-300)); - margin-block: var(--mod-coachmark-action-menu-vertical-offset, var(--spectrum-coachmark-action-menu-vertical-offset)); + margin-inline-start: var(--spectrum-spacing-300); + margin-block: var(--spectrum-coachmark-action-menu-vertical-offset); } /* @deprecated not used currently in demos or by SWC */ @@ -139,13 +139,13 @@ /* Text wrapper for the content */ .spectrum-CoachMark-content { - margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-coachmark-body-to-footer)); - color: var(--mod-coachmark-content-font-color, var(--spectrum-body-color)); - font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coachmark-content-font-size)); - font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-coachmark-content-font-weight)); - font-family: var(--mod-coachmark-content-font-family, var(--spectrum-sans-serif-font)); - font-style: var(--mod-coachmark-content-font-style, var(--spectrum-body-sans-serif-font-style)); - line-height: var(--mod-coachmark-content-line-height, var(--spectrum-body-line-height)); + margin-block-end: var(--spectrum-coachmark-body-to-footer); + color: var(--spectrum-body-color); + font-size: var(--spectrum-coachmark-content-font-size); + font-weight: var(--spectrum-coachmark-content-font-weight); + font-family: var(--spectrum-sans-serif-font); + font-style: var(--spectrum-body-sans-serif-font-style); + line-height: var(--spectrum-body-line-height); } /* Footer wrapper for the pagination and button group sub-components */ @@ -153,20 +153,20 @@ display: grid; align-items: end; margin-block-start: 0; - padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)); + padding-block-end: var(--spectrum-coachmark-padding); } /* Text wrapper for the step count */ .spectrum-CoachMark-step { justify-self: start; - margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coachmark-step-to-bottom)) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding))); + margin-block-end: calc(var(--spectrum-coachmark-step-to-bottom) - var(--spectrum-coachmark-padding)); - color: var(--mod-coachmark-step-color, var(--spectrum-coachmark-step-color)); - font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coachmark-step-font-size)); - font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-coachmark-step-text-font-weight)); + color: var(--spectrum-coachmark-step-color); + font-size: var(--spectrum-coachmark-step-font-size); + font-weight: var(--spectrum-coachmark-step-text-font-weight); font-family: var(--spectrum-sans-serif-font); - font-style: var(--mod-coachmark-step-font-style, var(--spectrum-coachmark-step-font-style)); - line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-coachmark-step-text-line-height)); + font-style: var(--spectrum-coachmark-step-font-style); + line-height: var(--spectrum-coachmark-step-text-line-height); white-space: nowrap; } @@ -182,5 +182,5 @@ --spectrum-coachmark-buttongroup-display: var(--spectrum-coachmark-buttongroup-mobile-display); /* @passthrough -- ButtonGroup */ - --mod-buttongroup-spacing: var(--spectrum-spacing-100); + --spectrum-buttongroup-spacing: var(--spectrum-spacing-100); } diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index a0fe9e0416c..26efcb9ccac 100644 --- a/components/coachmark/stories/coachmark.stories.js +++ b/components/coachmark/stories/coachmark.stories.js @@ -133,7 +133,9 @@ StandardNoMedia.parameters = { }, }; -/** Images and media have a minimum height and can grow with the parent component. Fixed height media is constrained to a 4:3 aspect ratio by applying the `spectrum-CoachMark-image-wrapper--fixedHeight` class. When this fixed height class is used, the height can be customized using the modifiable custom property `--mod-coachmark-media-fixed-height`. */ +/** + * Images and media have a minimum height and can grow with the parent component. Fixed height media is constrained to a 4:3 aspect ratio by applying the `spectrum-CoachMark-image-wrapper--fixedHeight` class. When this fixed height class is used, the height can be customized using the modifiable custom property `--spectrum-coachmark-media-fixed-height`. + */ export const MediaOptions = CoachMarkMediaOptionsTemplate.bind({}); MediaOptions.tags = ["!dev"]; MediaOptions.args = { diff --git a/components/coachmark/stories/template.js b/components/coachmark/stories/template.js index e07eb7326fb..0802431e104 100644 --- a/components/coachmark/stories/template.js +++ b/components/coachmark/stories/template.js @@ -48,9 +48,9 @@ export const CoachContainer = ( `, )}
${title}
${when( diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json index 2580a3d0eab..6abf4677d53 100644 --- a/components/colorarea/dist/metadata.json +++ b/components/colorarea/dist/metadata.json @@ -11,16 +11,6 @@ ".spectrum-ColorArea.is-focused", ".spectrum-ColorHandle-color" ], - "modifiers": [ - "--mod-colorarea-border-color", - "--mod-colorarea-border-radius", - "--mod-colorarea-border-width", - "--mod-colorarea-disabled-background-color", - "--mod-colorarea-height", - "--mod-colorarea-min-height", - "--mod-colorarea-min-width", - "--mod-colorarea-width" - ], "component": [ "--spectrum-color-area-border-opacity", "--spectrum-color-area-border-rounding", diff --git a/components/colorarea/index.css b/components/colorarea/index.css index e9f1b1091f5..48d78cacd78 100644 --- a/components/colorarea/index.css +++ b/components/colorarea/index.css @@ -27,13 +27,13 @@ position: relative; display: inline-block; cursor: default; - min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width)); - min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height)); - inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width)); - block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); + min-inline-size: var(--spectrum-colorarea-min-width); + min-block-size: var(--spectrum-colorarea-min-height); + inline-size: var(--spectrum-colorarea-width); + block-size: var(--spectrum-colorarea-height); box-sizing: border-box; - border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)); - border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))); + border-radius: var(--spectrum-colorarea-border-radius); + border: var(--spectrum-colorarea-border-width) solid var(--highcontrast-colorarea-border-color, var(--spectrum-colorarea-border-color)); touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */ user-select: none; @@ -44,8 +44,8 @@ &.is-disabled { pointer-events: none; - background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color))); - border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled); + background: var(--highcontrast-colorarea-fill-color-disabled, var(--spectrum-colorarea-disabled-background-color)); + border: var(--spectrum-colorarea-border-width) solid var(--highcontrast-colorarea-border-color-disabled); .spectrum-ColorArea-gradient { display: none; @@ -54,7 +54,7 @@ } .spectrum-ColorArea-handle { - transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0); + transform: translate(calc(var(--spectrum-colorarea-width) - var(--spectrum-colorarea-border-width)), 0); inset-block-start: 0; &:dir(rtl) { @@ -67,7 +67,7 @@ block-size: 100%; /* calc used here to properly calculate the `border-radius` for the gradient such that it aligns with the `border-radius` of the enclosing border */ - border-radius: calc(var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)) - var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width))); + border-radius: calc(var(--spectrum-colorarea-border-radius) - var(--spectrum-colorarea-border-width)); } .spectrum-ColorArea-slider { diff --git a/components/colorarea/stories/template.js b/components/colorarea/stories/template.js index 85c0c614409..1769b1cf1ff 100644 --- a/components/colorarea/stories/template.js +++ b/components/colorarea/stories/template.js @@ -26,8 +26,8 @@ export const Template = ({ ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${styleMap({ - "--mod-colorarea-height": customHeight, - "--mod-colorarea-width": customWidth, + "--spectrum-colorarea-height": customHeight, + "--spectrum-colorarea-width": customWidth, ...customStyles, })} @focusin=${function() { @@ -49,7 +49,7 @@ export const Template = ({ customClasses: [`${rootClass}-handle`], customStyles: { "--spectrum-picked-color": selectedColor, - "transform": customWidth ? "translate(var(--mod-colorarea-width), 0)" : undefined, + "transform": customWidth ? "translate(var(--spectrum-colorarea-width), 0)" : undefined, }, }, context)} .spectrum-Dialog-headerContentWrapper { max-inline-size: fit-content; flex: 1 1 100%; - font-size: var(--mod-standard-dialog-header-content-font-size, var(--spectrum-standard-dialog-header-content-font-size)); + font-size: var(--spectrum-standard-dialog-header-content-font-size); text-wrap: pretty; } } @@ -172,12 +172,12 @@ -webkit-overflow-scrolling: touch; outline: none; /* Hide focus outline */ - font-size: var(--mod-standard-dialog-description-font-size, var(--spectrum-standard-dialog-description-font-size)); - font-weight: var(--mod-standard-dialog-description-font-weight, var(--spectrum-standard-dialog-description-font-weight)); + font-size: var(--spectrum-standard-dialog-description-font-size); + font-weight: var(--spectrum-standard-dialog-description-font-weight); font-family: var(--spectrum-standard-dialog-description-font-family); font-style: var(--spectrum-standard-dialog-description-font-style); - line-height: var(--mod-standard-dialog-description-line-height, var(--spectrum-standard-dialog-description-line-height)); - color: var(--mod-standard-dialog-description-text-color, var(--spectrum-standard-dialog-description-text-color)); + line-height: var(--spectrum-standard-dialog-description-line-height); + color: var(--spectrum-standard-dialog-description-text-color); } .spectrum-Dialog-footer { @@ -187,10 +187,10 @@ align-items: flex-end; /* this recreates padding between the footer content and button group. It should be safe as button group is always end aligned */ - gap: var(--mod-standard-dialog-spacing-footer-to-button-group, var(--spectrum-standard-dialog-spacing-footer-to-button-group)); + gap: var(--spectrum-standard-dialog-spacing-footer-to-button-group); /* this padding isn't built into the grid because it disappears with this footer */ - padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer)); + padding-block-start: var(--spectrum-standard-dialog-spacing-description-to-footer); outline: none; /* Hide focus outline */ @@ -210,25 +210,25 @@ } .spectrum-Dialog-buttonGroup--noFooter { - padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer)); + padding-block-start: var(--spectrum-standard-dialog-spacing-description-to-footer); } /* Dismissible Dialog (with close button) */ .spectrum-Dialog--dismissible .spectrum-Dialog-grid { grid-template-columns: - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + var(--spectrum-standard-dialog-spacing-grid-padding) auto 1fr auto minmax(0, var(--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end)) - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + var(--spectrum-standard-dialog-spacing-grid-padding); grid-template-rows: auto - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + var(--spectrum-standard-dialog-spacing-grid-padding) auto 1fr auto - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + var(--spectrum-standard-dialog-spacing-grid-padding); grid-template-areas: "hero hero hero hero hero hero" ". . . . closeButton closeButton" @@ -249,8 +249,8 @@ align-self: start; justify-self: end; - margin-block-start: var(--mod-standard-dialog-spacing-edge-to-close-button, var(--spectrum-standard-dialog-spacing-edge-to-close-button)); - margin-inline-end: var(--mod-standard-dialog-spacing-edge-to-close-button, var(--spectrum-standard-dialog-spacing-edge-to-close-button)); + margin-block-start: var(--spectrum-standard-dialog-spacing-edge-to-close-button); + margin-inline-end: var(--spectrum-standard-dialog-spacing-edge-to-close-button); } .spectrum-Dialog--fullscreen { @@ -275,16 +275,16 @@ .spectrum-Dialog-grid { display: grid; grid-template-columns: - var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing)) + var(--spectrum-takeover-dialog-grid-spacing) 1fr auto auto - var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing)); + var(--spectrum-takeover-dialog-grid-spacing); grid-template-rows: - var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing)) + var(--spectrum-takeover-dialog-grid-spacing) auto 1fr - var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing)); + var(--spectrum-takeover-dialog-grid-spacing); grid-template-areas: ". . . . ." ". heading header buttonGroup ." @@ -294,8 +294,8 @@ .spectrum-Dialog-header { grid-area: heading; - gap: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap)); - margin-inline-end: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap)); + gap: var(--spectrum-takeover-dialog-spacing-header-content-gap); + margin-inline-end: var(--spectrum-takeover-dialog-spacing-header-content-gap); margin-block-end: var(--spectrum-takeover-dialog-spacing-title-to-content); /* components in fullscreen/fullscreenTakeover dialogs are centered in the headerContentWrapper */ @@ -307,7 +307,7 @@ } .spectrum-Dialog-heading { - font-size: var(--mod-takeover-dialog-title-font-size, var(--spectrum-takeover-dialog-title-font-size)); + font-size: var(--spectrum-takeover-dialog-title-font-size); } .spectrum-Dialog-closeButton { @@ -330,20 +330,20 @@ @media screen and (width <= 700px) { .spectrum-Dialog-grid { grid-template-columns: - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + var(--spectrum-standard-dialog-spacing-grid-padding) auto 1fr auto minmax(0, auto) - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + var(--spectrum-standard-dialog-spacing-grid-padding); grid-template-rows: auto - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + var(--spectrum-standard-dialog-spacing-grid-padding) auto auto 1fr auto - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + var(--spectrum-standard-dialog-spacing-grid-padding); grid-template-areas: "hero hero hero hero hero hero" @@ -361,21 +361,21 @@ .spectrum-Dialog--dismissible .spectrum-Dialog-grid { grid-template-columns: - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + var(--spectrum-standard-dialog-spacing-grid-padding) auto 1fr auto minmax(0, auto) minmax(0, calc(var(--spectrum-standard-dialog-spacing-edge-to-content) - var(--spectrum-standard-dialog-spacing-edge-to-close-button))) - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + var(--spectrum-standard-dialog-spacing-grid-padding); grid-template-rows: auto - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + var(--spectrum-standard-dialog-spacing-grid-padding) auto auto 1fr auto - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + var(--spectrum-standard-dialog-spacing-grid-padding); grid-template-areas: "hero hero hero hero hero hero hero" ". . . . . closeButton closeButton" @@ -395,7 +395,7 @@ } .spectrum-Dialog-heading { - margin-block-end: var(--mod-standard-dialog-spacing-title-to-description, var(--spectrum-standard-dialog-spacing-title-to-description)); + margin-block-end: var(--spectrum-standard-dialog-spacing-title-to-description); } } @@ -405,17 +405,17 @@ &.spectrum-Dialog .spectrum-Dialog-grid { display: grid; grid-template-columns: - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + var(--spectrum-standard-dialog-spacing-grid-padding) 1fr - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + var(--spectrum-standard-dialog-spacing-grid-padding); grid-template-rows: - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + var(--spectrum-standard-dialog-spacing-grid-padding) auto auto 1fr - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + var(--spectrum-standard-dialog-spacing-grid-padding) auto - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + var(--spectrum-standard-dialog-spacing-grid-padding); grid-template-areas: ". . ." ". heading ." @@ -432,7 +432,7 @@ /* The header element is a flexbox, so that the title and headerContentWrapper can wrap sooner. */ display: flex; flex-direction: column; - gap: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap)); + gap: var(--spectrum-takeover-dialog-spacing-header-content-gap); } .spectrum-Dialog-heading { diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index b2fbb79e6fe..4b80b47b13d 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -15,7 +15,7 @@ import { Template } from "./template.js"; * The alert variants that were previously a part of Dialog were moved to their own component, [alert dialog](/docs/components-alert-dialog--docs). * * ## Usage with modal component - * When a dialog component is used in tandem with a [modal](/docs/components-modal--docs), implementations should set `--mod-modal-background-color` to `transparent`. This will prevent any background color used in the modal from peeking through from behind the dialog at the rounded corners, allowing the dialog's background color to take precedence. + * When a dialog component is used in tandem with a [modal](/docs/components-modal--docs), implementations should set `--spectrum-modal-background-color` to `transparent`. This will prevent any background color used in the modal from peeking through from behind the dialog at the rounded corners, allowing the dialog's background color to take precedence. * */ export default { diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json index 94ce19f83fd..53593d45a40 100644 --- a/components/divider/dist/metadata.json +++ b/components/divider/dist/metadata.json @@ -11,15 +11,6 @@ ".spectrum-Divider--vertical", ".spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)" ], - "modifiers": [ - "--mod-divider-background-color", - "--mod-divider-block-minimum-size", - "--mod-divider-inline-minimum-size", - "--mod-divider-thickness", - "--mod-divider-vertical-align", - "--mod-divider-vertical-height", - "--mod-divider-vertical-margin" - ], "component": [ "--spectrum-divider-background-color", "--spectrum-divider-block-minimum-size", @@ -29,6 +20,9 @@ "--spectrum-divider-thickness-large", "--spectrum-divider-thickness-medium", "--spectrum-divider-thickness-small", + "--spectrum-divider-vertical-align", + "--spectrum-divider-vertical-height", + "--spectrum-divider-vertical-margin", "--spectrum-divider-vertical-minimum-height" ], "global": [ @@ -40,5 +34,5 @@ "--spectrum-transparent-white-800" ], "passthroughs": [], - "high-contrast": ["--highcontrast-divider-background-color"] + "high-contrast": [] } diff --git a/components/divider/index.css b/components/divider/index.css index b793b6c86a1..1a0b1834027 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -48,35 +48,35 @@ } .spectrum-Divider { - block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + block-size: var(--spectrum-divider-thickness); inline-size: 100%; /* Show the overflow for hr in Edge and IE. */ overflow: visible; border: none; - border-width: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); - border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + border-width: var(--spectrum-divider-thickness); + border-radius: var(--spectrum-divider-thickness); - background-color: var(--highcontrast-divider-background-color, var(--mod-divider-background-color, var(--spectrum-divider-background-color))); + background-color: var(--spectrum-divider-background-color); &:not(&.spectrum-Divider--vertical) { - min-inline-size: var(--mod-divider-inline-minimum-size, var(--spectrum-divider-inline-minimum-size)); + min-inline-size: var(--spectrum-divider-inline-minimum-size); } } /* vertical dividers */ .spectrum-Divider--vertical { - inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); - min-block-size: var(--mod-divider-block-minimum-size, var(--spectrum-divider-block-minimum-size)); - margin-block: var(--mod-divider-vertical-margin, 0); - block-size: var(--mod-divider-vertical-height, 100%); - align-self: var(--mod-divider-vertical-align, flex-start); + inline-size: var(--spectrum-divider-thickness); + min-block-size: var(--spectrum-divider-block-minimum-size); + margin-block: var(--spectrum-divider-vertical-margin, 0); + block-size: var(--spectrum-divider-vertical-height); + align-self: var(--spectrum-divider-vertical-align, flex-start); } /* windows high contrast mode */ @media (forced-colors: active) { .spectrum-Divider { - --highcontrast-divider-background-color: CanvasText; + background-color: CanvasText; } } diff --git a/components/dropindicator/dist/metadata.json b/components/dropindicator/dist/metadata.json index 294d6ad70bb..9461884c53e 100644 --- a/components/dropindicator/dist/metadata.json +++ b/components/dropindicator/dist/metadata.json @@ -11,12 +11,6 @@ ".spectrum-DropIndicator:after", ".spectrum-DropIndicator:before" ], - "modifiers": [ - "--mod-dropindicator-border-color", - "--mod-dropindicator-border-size", - "--mod-dropindicator-circle-color", - "--mod-dropindicator-circle-size" - ], "component": [ "--spectrum-dropindicator-border-size", "--spectrum-dropindicator-circle-size", @@ -24,5 +18,5 @@ ], "global": ["--spectrum-border-width-200"], "passthroughs": [], - "high-contrast": ["--highcontrast-dropindicator-color"] + "high-contrast": [] } diff --git a/components/dropindicator/index.css b/components/dropindicator/index.css index c603c785e02..b7ab823e491 100644 --- a/components/dropindicator/index.css +++ b/components/dropindicator/index.css @@ -11,65 +11,70 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-DropIndicator { - --highcontrast-dropindicator-color: Highlight; - } -} - .spectrum-DropIndicator { --spectrum-dropindicator-border-size: var(--spectrum-border-width-200); --spectrum-dropindicator-circle-size: 12px; position: relative; - background: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-border-color, var(--spectrum-dropindicator-color))); + background: var(--spectrum-dropindicator-color); &::before, &::after { content: ""; position: absolute; - inline-size: var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)); - block-size: var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)); + inline-size: var(--spectrum-dropindicator-circle-size); + block-size: var(--spectrum-dropindicator-circle-size); border-radius: 50%; - border: var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) solid; + border: var(--spectrum-dropindicator-border-size) solid; box-sizing: border-box; - border-color: var(--highcontrast-dropindicator-color, var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-color))); + border-color: var(--spectrum-dropindicator-color); } } .spectrum-DropIndicator--horizontal { - block-size: var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)); - margin: 0 var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)); + block-size: var(--spectrum-dropindicator-border-size); + margin: 0 var(--spectrum-dropindicator-circle-size); &::before, &::after { - inset-block-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)) / 2 + var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) / 2); + inset-block-start: calc(-1 * var(--spectrum-dropindicator-circle-size) / 2 + var(--spectrum-dropindicator-border-size) / 2); } &::before { - inset-inline-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size))); + inset-inline-start: calc(-1 * var(--spectrum-dropindicator-circle-size)); } &::after { - inset-inline-end: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size))); + inset-inline-end: calc(-1 * var(--spectrum-dropindicator-circle-size)); } } .spectrum-DropIndicator--vertical { - inline-size: var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)); - margin-block: var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)); + inline-size: var(--spectrum-dropindicator-border-size); + margin-block: var(--spectrum-dropindicator-circle-size); margin-inline: 0; &::before, &::after { - inset-inline-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size)) / 2 + var(--mod-dropindicator-border-size, var(--spectrum-dropindicator-border-size)) / 2); + inset-inline-start: calc(-1 * var(--spectrum-dropindicator-circle-size) / 2 + var(--spectrum-dropindicator-border-size) / 2); } &::before { - inset-block-start: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size))); + inset-block-start: calc(-1 * var(--spectrum-dropindicator-circle-size)); } &::after { - inset-block-end: calc(-1 * var(--mod-dropindicator-circle-size, var(--spectrum-dropindicator-circle-size))); + inset-block-end: calc(-1 * var(--spectrum-dropindicator-circle-size)); + } +} + +@media (forced-colors: active) { + .spectrum-DropIndicator { + background: Highlight; + + &::before, + &::after { + border-color: Highlight; + } } } diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index e91812f2d27..60a40841cea 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -20,35 +20,6 @@ ".spectrum-DropZone:focus-visible", ".spectrum-DropZone:has(.spectrum-DropZone-stroke)" ], - "modifiers": [ - "--mod-drop-zone-background-color", - "--mod-drop-zone-background-color-opacity", - "--mod-drop-zone-background-color-opacity-filled", - "--mod-drop-zone-body-font-size", - "--mod-drop-zone-body-to-action", - "--mod-drop-zone-border-color", - "--mod-drop-zone-border-color-hover", - "--mod-drop-zone-border-dash-gap", - "--mod-drop-zone-border-dash-length", - "--mod-drop-zone-border-style", - "--mod-drop-zone-border-style-dragged", - "--mod-drop-zone-border-width", - "--mod-drop-zone-content-background-color", - "--mod-drop-zone-content-bottom-to-text", - "--mod-drop-zone-content-font-family", - "--mod-drop-zone-content-font-size", - "--mod-drop-zone-content-font-weight", - "--mod-drop-zone-content-height", - "--mod-drop-zone-content-max-width", - "--mod-drop-zone-content-maximum-width", - "--mod-drop-zone-content-top-to-text", - "--mod-drop-zone-corner-radius", - "--mod-drop-zone-edge-to-text", - "--mod-drop-zone-illustration-color-hover", - "--mod-drop-zone-inline-size", - "--mod-drop-zone-padding", - "--mod-drop-zone-title-line-height" - ], "component": [ "--spectrum-drop-zone-background-color", "--spectrum-drop-zone-background-color-opacity", @@ -60,6 +31,7 @@ "--spectrum-drop-zone-border-color-hover", "--spectrum-drop-zone-border-dash-gap", "--spectrum-drop-zone-border-dash-length", + "--spectrum-drop-zone-border-style", "--spectrum-drop-zone-border-width", "--spectrum-drop-zone-component-height", "--spectrum-drop-zone-content-background-color", @@ -67,6 +39,7 @@ "--spectrum-drop-zone-content-font-family", "--spectrum-drop-zone-content-font-size", "--spectrum-drop-zone-content-font-weight", + "--spectrum-drop-zone-content-height", "--spectrum-drop-zone-content-max-width", "--spectrum-drop-zone-content-maximum-width", "--spectrum-drop-zone-content-top-to-text", @@ -86,6 +59,7 @@ "--spectrum-accent-visual-color", "--spectrum-bold-font-weight", "--spectrum-border-width-200", + "--spectrum-button-border-radius", "--spectrum-component-bottom-to-text-300", "--spectrum-component-edge-to-text-300", "--spectrum-component-height-300", @@ -94,21 +68,19 @@ "--spectrum-corner-radius-700", "--spectrum-font-size-300", "--spectrum-gray-300", + "--spectrum-illustrated-message-description-font-size", + "--spectrum-illustrated-message-description-position", + "--spectrum-illustrated-message-description-to-action", + "--spectrum-illustrated-message-description-z-index", + "--spectrum-illustrated-message-display", + "--spectrum-illustrated-message-illustration-color", + "--spectrum-illustrated-message-vertical-maximum-width", "--spectrum-line-height-100", "--spectrum-sans-font-family-stack", "--spectrum-spacing-300", "--spectrum-spacing-400" ], - "passthroughs": [ - "--mod-button-border-radius", - "--mod-illustrated-message-description-font-size", - "--mod-illustrated-message-description-position", - "--mod-illustrated-message-description-to-action", - "--mod-illustrated-message-description-z-index", - "--mod-illustrated-message-display", - "--mod-illustrated-message-illustration-color", - "--mod-illustrated-message-vertical-maximum-width" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-drop-zone-border-color", "--highcontrast-drop-zone-border-color-hover", diff --git a/components/dropzone/index.css b/components/dropzone/index.css index b495fc596e1..f14de44645e 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -43,14 +43,14 @@ --spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color); /* Settings for a nested illustrated message */ - --mod-illustrated-message-vertical-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width)); - --mod-illustrated-message-description-to-action: var(--mod-drop-zone-body-to-action, var(--spectrum-drop-zone-body-to-action)); - --mod-illustrated-message-description-position: relative; - --mod-illustrated-message-description-z-index: 10; - --mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-font-size)); + --spectrum-illustrated-message-vertical-maximum-width: var(--spectrum-drop-zone-content-maximum-width); + --spectrum-illustrated-message-description-to-action: var(--spectrum-drop-zone-body-to-action); + --spectrum-illustrated-message-description-position: relative; + --spectrum-illustrated-message-description-z-index: 10; + --spectrum-illustrated-message-description-font-size: var(--spectrum-drop-zone-body-font-size); /* Adjusts height of filled & dragged dropzone state */ - --mod-drop-zone-content-height: 280px; + --spectrum-drop-zone-content-height: 280px; } .spectrum-DropZone { @@ -58,21 +58,21 @@ justify-content: center; align-items: center; box-sizing: border-box; - inline-size: var(--mod-drop-zone-inline-size, var(--spectrum-drop-zone-inline-size)); - padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); - border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius)); + inline-size: var(--spectrum-drop-zone-inline-size); + padding: calc(var(--spectrum-drop-zone-padding) - var(--spectrum-drop-zone-border-width)); + border-radius: var(--spectrum-drop-zone-corner-radius); background-size: cover; - background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); + background-color: var(--spectrum-drop-zone-background-color); position: relative; - border: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)) dashed var(--highcontrast-drop-zone-border-color, var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color))); + border: var(--spectrum-drop-zone-border-width) dashed var(--highcontrast-drop-zone-border-color, var(--spectrum-drop-zone-border-color)); &.is-dragged { - --mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid); - --mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color))); - --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + --spectrum-drop-zone-border-style: solid; + --spectrum-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--spectrum-drop-zone-dragged-background-color)); + --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)); /* Updated values for a nested illustrated message when state changes */ - --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover)); + --spectrum-illustrated-message-illustration-color: var(--spectrum-drop-zone-illustration-color-hover); color: var(--spectrum-drop-zone-illustration-color-hover); border-style: solid; @@ -83,15 +83,15 @@ &.is-filled { /* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */ - --mod-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled))); + --spectrum-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color), var(--spectrum-drop-zone-background-color-opacity-filled)); /* Updated values for a nested illustrated message when state changes */ - --mod-illustrated-message-display: none; + --spectrum-illustrated-message-display: none; } &.is-filled.is-dragged { background-position: center; - block-size: var(--mod-drop-zone-content-height); + block-size: var(--spectrum-drop-zone-content-height); background-blend-mode: multiply; .spectrum-DropZone-content { @@ -107,7 +107,7 @@ } &:focus-visible { - --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)); outline: 0; } } @@ -126,17 +126,17 @@ } .spectrum-DropZone-strokePath { - stroke: var(--highcontrast-drop-zone-border-color, var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color))); - stroke-dasharray: var(--mod-drop-zone-border-dash-length, var(--spectrum-drop-zone-stroke-dash-length)) var(--mod-drop-zone-border-dash-gap, var(--spectrum-drop-zone-stroke-dash-gap)); + stroke: var(--highcontrast-drop-zone-border-color, var(--spectrum-drop-zone-border-color)); + stroke-dasharray: var(--spectrum-drop-zone-stroke-dash-length) var(--spectrum-drop-zone-stroke-dash-gap); rx: var(--spectrum-drop-zone-corner-radius); ry: var(--spectrum-drop-zone-corner-radius); - stroke-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)); - inline-size: calc(100% - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); - block-size: calc(100% - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); + stroke-width: var(--spectrum-drop-zone-border-width); + inline-size: calc(100% - var(--spectrum-drop-zone-border-width)); + block-size: calc(100% - var(--spectrum-drop-zone-border-width)); } .spectrum-DropZone-content { - max-inline-size: var(--mod-illustrated-message-vertical-maximum-width); + max-inline-size: var(--spectrum-illustrated-message-vertical-maximum-width); } .spectrum-DropZone-actions { @@ -146,30 +146,30 @@ .spectrum-DropZone-button { /* Adjust corner radius of button component is dragged & filled state */ - --mod-button-border-radius: var(--spectrum-corner-radius-500); + --spectrum-button-border-radius: var(--spectrum-corner-radius-500); box-sizing: border-box; border: none; block-size: auto; - max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-max-width)); - padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text)); - padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text)); - padding-inline: var(--mod-drop-zone-edge-to-text, var(--spectrum-drop-zone-edge-to-text)); - background-color: var(--highcontrast-drop-zone-button-color, var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color))); + max-inline-size: var(--spectrum-drop-zone-content-max-width); + padding-block-start: var(--spectrum-drop-zone-content-top-to-text); + padding-block-end: var(--spectrum-drop-zone-content-bottom-to-text); + padding-inline: var(--spectrum-drop-zone-edge-to-text); + background-color: var(--highcontrast-drop-zone-button-color, var(--spectrum-drop-zone-content-background-color)); max-block-size: var(--spectrum-drop-zone-component-height); - font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-drop-zone-content-font-family)); - font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-drop-zone-content-font-weight)); - line-height: var(--mod-drop-zone-title-line-height, var(--spectrum-drop-zone-title-line-height)); + font-family: var(--spectrum-drop-zone-content-font-family); + font-weight: var(--spectrum-drop-zone-content-font-weight); + line-height: var(--spectrum-drop-zone-title-line-height); .spectrum-Button-label { - font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size)); + font-size: var(--spectrum-drop-zone-content-font-size); padding: unset; } &:hover, &:focus { - background-color: var(--highcontrast-drop-zone-button-color, var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color))); + background-color: var(--highcontrast-drop-zone-button-color, var(--spectrum-drop-zone-content-background-color)); } } @@ -188,10 +188,10 @@ --highcontrast-drop-zone-border-color: ButtonText; &.is-dragged { - border-color: var(--highcontrast-drop-zone-border-color-hover); + border-color: Highlight; .spectrum-DropZone-strokePath { - stroke: var(--highcontrast-drop-zone-border-color-hover); + stroke: Highlight; } } } diff --git a/components/fieldgroup/dist/metadata.json b/components/fieldgroup/dist/metadata.json index 3c2343b1019..dafd2eecd45 100644 --- a/components/fieldgroup/dist/metadata.json +++ b/components/fieldgroup/dist/metadata.json @@ -10,7 +10,6 @@ ".spectrum-FieldGroup--vertical .spectrum-FieldGroupInputLayout", ".spectrum-FieldGroupInputLayout" ], - "modifiers": [], "component": [], "global": ["--spectrum-spacing-300"], "passthroughs": [], diff --git a/components/fieldlabel/dist/metadata.json b/components/fieldlabel/dist/metadata.json index 2a55dbd82f4..4ce6dc7ded0 100644 --- a/components/fieldlabel/dist/metadata.json +++ b/components/fieldlabel/dist/metadata.json @@ -15,20 +15,6 @@ ".spectrum-FieldLabel:lang(ko)", ".spectrum-FieldLabel:lang(zh)" ], - "modifiers": [ - "--mod-fieldlabel-asterisk-vertical-align", - "--mod-fieldlabel-bottom-to-text", - "--mod-fieldlabel-font-size", - "--mod-fieldlabel-font-weight", - "--mod-fieldlabel-line-height", - "--mod-fieldlabel-line-height-cjk", - "--mod-fieldlabel-min-height", - "--mod-fieldlabel-padding-inline", - "--mod-fieldlabel-side-margin-block-start", - "--mod-fieldlabel-side-padding-right", - "--mod-fieldlabel-text-to-asterisk", - "--mod-fieldlabel-top-to-text" - ], "component": [ "--spectrum-field-label-text-to-asterisk-extra-large", "--spectrum-field-label-text-to-asterisk-large", @@ -38,6 +24,7 @@ "--spectrum-field-label-top-margin-large", "--spectrum-field-label-top-margin-medium", "--spectrum-field-label-top-margin-small", + "--spectrum-fieldlabel-asterisk-vertical-align", "--spectrum-fieldlabel-bottom-to-text", "--spectrum-fieldlabel-color", "--spectrum-fieldlabel-font-size", @@ -77,5 +64,5 @@ "--spectrum-white" ], "passthroughs": [], - "high-contrast": ["--highcontrast-fieldlabel-disabled-content-color"] + "high-contrast": [] } diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css index ba6692619ff..2a5c87c0912 100644 --- a/components/fieldlabel/index.css +++ b/components/fieldlabel/index.css @@ -30,12 +30,12 @@ &:lang(ja), &:lang(zh), &:lang(ko) { - --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-cjk-line-height-100)); + --spectrum-fieldlabel-line-height: var(--spectrum-cjk-line-height-100); } /********* Disabled state *********/ &.is-disabled { - --spectrum-fieldlabel-color: var(--highcontrast-fieldlabel-disabled-content-color, var(--spectrum-disabled-content-color)); + --spectrum-fieldlabel-color: var(--spectrum-disabled-content-color); } } @@ -87,15 +87,15 @@ display: block; text-wrap: pretty; box-sizing: border-box; - min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height)); + min-block-size: var(--spectrum-fieldlabel-min-height); - padding-block: var(--mod-fieldlabel-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-fieldlabel-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text)); - padding-inline: var(--mod-fieldlabel-padding-inline, 0); + padding-block: var(--spectrum-fieldlabel-top-to-text) var(--spectrum-fieldlabel-bottom-to-text); + padding-inline: 0; - font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size)); - font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-fieldlabel-font-weight)); + font-size: var(--spectrum-fieldlabel-font-size); + font-weight: var(--spectrum-fieldlabel-font-weight); - line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height)); + line-height: var(--spectrum-fieldlabel-line-height); -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; @@ -106,17 +106,17 @@ .spectrum-FieldLabel-requiredIcon { color: inherit; margin-block: 0; - margin-inline: var(--mod-fieldlabel-text-to-asterisk, var(--spectrum-fieldlabel-text-to-asterisk)) 0; - vertical-align: var(--mod-fieldlabel-asterisk-vertical-align, baseline); + margin-inline: var(--spectrum-fieldlabel-text-to-asterisk) 0; + vertical-align: var(--spectrum-fieldlabel-asterisk-vertical-align, baseline); } .spectrum-FieldLabel--left, .spectrum-FieldLabel--right { display: inline-block; - margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-fieldlabel-side-margin-block-start)); + margin-block-start: var(--spectrum-fieldlabel-side-margin-block-start); margin-block-end: 0; - margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right)); + margin-inline-end: var(--spectrum-fieldlabel-side-padding-right); vertical-align: top; } @@ -127,7 +127,7 @@ /********* WHCM *********/ @media (forced-colors: active) { - .spectrum-FieldLabel { - --highcontrast-fieldlabel-disabled-content-color: GrayText; + .spectrum-FieldLabel.is-disabled { + color: GrayText; } } diff --git a/components/floatingactionbutton/dist/metadata.json b/components/floatingactionbutton/dist/metadata.json index 0ddd22d190a..e2fced0efc1 100644 --- a/components/floatingactionbutton/dist/metadata.json +++ b/components/floatingactionbutton/dist/metadata.json @@ -2,6 +2,7 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-FloatingActionButton", + ".spectrum-FloatingActionButton .spectrum-FloatingActionButton-icon", ".spectrum-FloatingActionButton--secondary", ".spectrum-FloatingActionButton:active", ".spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon", @@ -13,33 +14,12 @@ ".spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon", ".spectrum-Icon.spectrum-FloatingActionButton-icon" ], - "modifiers": [ - "--mod-afloating-action-button-focus-ring-color", - "--mod-floating-action-button-background-color", - "--mod-floating-action-button-background-color-down", - "--mod-floating-action-button-background-color-hover", - "--mod-floating-action-button-background-color-key-focus", - "--mod-floating-action-button-border-radius", - "--mod-floating-action-button-drop-shadow-blur", - "--mod-floating-action-button-drop-shadow-color", - "--mod-floating-action-button-drop-shadow-x", - "--mod-floating-action-button-drop-shadow-y", - "--mod-floating-action-button-focus-ring-gap", - "--mod-floating-action-button-focus-ring-width", - "--mod-floating-action-button-icon-color", - "--mod-floating-action-button-icon-color-down", - "--mod-floating-action-button-icon-color-hover", - "--mod-floating-action-button-icon-color-key-focus", - "--mod-floating-action-button-icon-size", - "--mod-floating-action-button-margin", - "--mod-floating-action-button-padding", - "--mod-floating-action-button-size" - ], "component": [ "--spectrum-floating-action-button-background-color", "--spectrum-floating-action-button-background-color-down", "--spectrum-floating-action-button-background-color-hover", "--spectrum-floating-action-button-background-color-key-focus", + "--spectrum-floating-action-button-border-radius", "--spectrum-floating-action-button-drop-shadow-blur", "--spectrum-floating-action-button-drop-shadow-color", "--spectrum-floating-action-button-drop-shadow-y", @@ -73,14 +53,5 @@ "--spectrum-workflow-icon-size-200" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-floating-action-button-background-color", - "--highcontrast-floating-action-button-background-color-down", - "--highcontrast-floating-action-button-background-color-hover", - "--highcontrast-floating-action-button-background-color-key-focus", - "--highcontrast-floating-action-button-icon-color", - "--highcontrast-floating-action-button-icon-color-down", - "--highcontrast-floating-action-button-icon-color-hover", - "--highcontrast-floating-action-button-icon-color-key-focus" - ] + "high-contrast": [] } diff --git a/components/floatingactionbutton/index.css b/components/floatingactionbutton/index.css index bc695d6c109..f9aaaadeaae 100644 --- a/components/floatingactionbutton/index.css +++ b/components/floatingactionbutton/index.css @@ -11,25 +11,6 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-FloatingActionButton { - --highcontrast-floating-action-button-background-color: ButtonText; - --highcontrast-floating-action-button-background-color-hover: Highlight; - --highcontrast-floating-action-button-background-color-down: Highlight; - --highcontrast-floating-action-button-background-color-key-focus: Highlight; - - --highcontrast-floating-action-button-icon-color: ButtonFace; - --highcontrast-floating-action-button-icon-color-hover: ButtonFace; - --highcontrast-floating-action-button-icon-color-down: ButtonFace; - --highcontrast-floating-action-button-icon-color-key-focus: ButtonFace; - - &::after { - /* make sure focus-ring renders */ - forced-color-adjust: none; - } - } -} - .spectrum-FloatingActionButton { --spectrum-floating-action-button-size: var(--spectrum-component-height-200); --spectrum-floating-action-button-icon-size: var(--spectrum-workflow-icon-size-200); @@ -61,50 +42,50 @@ .spectrum-FloatingActionButton { cursor: pointer; - block-size: var(--mod-floating-action-button-size, var(--spectrum-floating-action-button-size)); - inline-size: var(--mod-floating-action-button-size, var(--spectrum-floating-action-button-size)); - border-radius: var(--mod-floating-action-button-border-radius, 50%); - padding-inline: var(--mod-floating-action-button-padding, var(--spectrum-floating-action-button-padding)); - padding-block: var(--mod-floating-action-button-padding, var(--spectrum-floating-action-button-padding)); - margin-inline-end: var(--mod-floating-action-button-margin, var(--spectrum-floating-action-button-margin)); - margin-block-end: var(--mod-floating-action-button-margin, var(--spectrum-floating-action-button-margin)); + block-size: var(--spectrum-floating-action-button-size); + inline-size: var(--spectrum-floating-action-button-size); + border-radius: var(--spectrum-floating-action-button-border-radius, 50%); + padding-inline: var(--spectrum-floating-action-button-padding); + padding-block: var(--spectrum-floating-action-button-padding); + margin-inline-end: var(--spectrum-floating-action-button-margin); + margin-block-end: var(--spectrum-floating-action-button-margin); border: none; - box-shadow: var(--mod-floating-action-button-drop-shadow-x, var(--spectrum-drop-shadow-x)) var(--mod-floating-action-button-drop-shadow-y, var(--spectrum-floating-action-button-drop-shadow-y)) var(--mod-floating-action-button-drop-shadow-blur, var(--spectrum-floating-action-button-drop-shadow-blur)) var(--mod-floating-action-button-drop-shadow-color, var(--spectrum-floating-action-button-drop-shadow-color)); + box-shadow: var(--spectrum-drop-shadow-x) var(--spectrum-floating-action-button-drop-shadow-y) var(--spectrum-floating-action-button-drop-shadow-blur) var(--spectrum-floating-action-button-drop-shadow-color); position: relative; /* default is primary */ - background-color: var(--highcontrast-floating-action-button-background-color, var(--mod-floating-action-button-background-color, var(--spectrum-floating-action-button-background-color))); + background-color: var(--spectrum-floating-action-button-background-color); &:hover { - background-color: var(--highcontrast-floating-action-button-background-color-hover, var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))); + background-color: var(--spectrum-floating-action-button-background-color-hover); .spectrum-FloatingActionButton-icon { - color: var(--highcontrast-floating-action-button-icon-color-hover, var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))); + color: var(--spectrum-floating-action-button-icon-color-hover); } } &:active { - background-color: var(--highcontrast-floating-action-button-background-color-down, var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))); + background-color: var(--spectrum-floating-action-button-background-color-down); .spectrum-FloatingActionButton-icon { - color: var(--highcontrast-floating-action-button-icon-color-down, var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))); + color: var(--spectrum-floating-action-button-icon-color-down); } } &:focus-visible { - background-color: var(--highcontrast-floating-action-button-background-color-key-focus, var(--mod-floating-action-button-background-color-key-focus, var(--spectrum-floating-action-button-background-color-key-focus))); + background-color: var(--spectrum-floating-action-button-background-color-key-focus); outline: 0; .spectrum-FloatingActionButton-icon { - color: var(--highcontrast-floating-action-button-icon-color-key-focus, var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))); + color: var(--spectrum-floating-action-button-icon-color-key-focus); } &::after { position: absolute; inset: 0; - margin: calc(-1 * var(--mod-floating-action-button-focus-ring-gap, var(--spectrum-focus-indicator-gap))); - box-shadow: 0 0 0 var(--mod-floating-action-button-focus-ring-width, var(--spectrum-focus-indicator-thickness)) var(--mod-afloating-action-button-focus-ring-color, var(--spectrum-focus-indicator-color)); - border-radius: var(--mod-floating-action-button-border-radius, 50%); + margin: calc(-1 * var(--spectrum-focus-indicator-gap)); + box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--spectrum-focus-indicator-color); + border-radius: var(--spectrum-floating-action-button-border-radius, 50%); pointer-events: none; content: ""; } @@ -112,7 +93,34 @@ } .spectrum-Icon.spectrum-FloatingActionButton-icon { - block-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); - inline-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); - color: var(--highcontrast-floating-action-button-icon-color, var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))); + block-size: var(--spectrum-floating-action-button-icon-size); + inline-size: var(--spectrum-floating-action-button-icon-size); + color: var(--spectrum-floating-action-button-icon-color); +} + +@media (forced-colors: active) { + .spectrum-FloatingActionButton { + background-color: ButtonText; + + &:hover { + background-color: Highlight; + } + + &:hover, + &:active, + &:focus-visible { + .spectrum-FloatingActionButton-icon { + color: ButtonFace; + } + } + + .spectrum-FloatingActionButton-icon { + color: ButtonFace; + } + + &::after { + /* make sure focus-ring renders */ + forced-color-adjust: none; + } + } } diff --git a/components/form/dist/metadata.json b/components/form/dist/metadata.json index c07dfdca8d9..e1e6496c1ff 100644 --- a/components/form/dist/metadata.json +++ b/components/form/dist/metadata.json @@ -11,17 +11,10 @@ ".spectrum-Form-itemLabel.is-disabled", ".spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon" ], - "modifiers": [ - "--mod-disabled-content-color", - "--mod-form-grid-template-columns", - "--mod-form-grid-template-columns-labels-above", - "--mod-form-inline-size", - "--mod-form-item-block-spacing", - "--mod-form-item-block-spacing-labels-above" - ], "component": [ "--spectrum-form-grid-template-columns", "--spectrum-form-grid-template-columns-labels-above", + "--spectrum-form-inline-size", "--spectrum-form-item-block-spacing", "--spectrum-form-item-block-spacing-labels-above", "--spectrum-form-item-disabled-content-color" @@ -32,5 +25,5 @@ "--spectrum-spacing-300" ], "passthroughs": [], - "high-contrast": ["--highcontrast-form-item-disabled-content-color"] + "high-contrast": [] } diff --git a/components/form/index.css b/components/form/index.css index 905208b8256..2db2f69b8b9 100644 --- a/components/form/index.css +++ b/components/form/index.css @@ -22,10 +22,10 @@ margin: 0; display: grid; - grid-template-columns: var(--mod-form-grid-template-columns, var(--spectrum-form-grid-template-columns)); - inline-size: var(--mod-form-inline-size, fit-content); + grid-template-columns: var(--spectrum-form-grid-template-columns); + inline-size: var(--spectrum-form-inline-size, fit-content); justify-content: start; - row-gap: var(--mod-form-item-block-spacing, var(--spectrum-form-item-block-spacing)); + row-gap: var(--spectrum-form-item-block-spacing); } /* Row */ @@ -53,8 +53,8 @@ /* Rows with stacked alignment */ .spectrum-Form--labelsAbove { - --mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--spectrum-form-item-block-spacing-labels-above)); - --mod-form-grid-template-columns: var(--mod-form-grid-template-columns-labels-above, var(--spectrum-form-grid-template-columns-labels-above)); + --spectrum-form-item-block-spacing: var(--spectrum-form-item-block-spacing-labels-above); + --spectrum-form-grid-template-columns: var(--spectrum-form-grid-template-columns-labels-above); .spectrum-Form-item { display: block; @@ -64,10 +64,10 @@ /********* Disabled state *********/ .spectrum-Form-itemLabel { &.is-disabled { - color: var(--highcontrast-form-item-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color))); + color: var(--spectrum-form-item-disabled-content-color); .spectrum-FieldLabel-requiredIcon { - color: var(--highcontrast-form-item-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color))); + color: var(--spectrum-form-item-disabled-content-color); } } } @@ -75,6 +75,6 @@ /********* WHCM *********/ @media (forced-colors: active) { .spectrum-Form { - --highcontrast-form-item-disabled-content-color: GrayText; + --spectrum-form-item-disabled-content-color: GrayText; } } diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index 4ed0075bb8c..aa5124b210f 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -20,23 +20,6 @@ ".spectrum-HelpText:lang(ko)", ".spectrum-HelpText:lang(zh)" ], - "modifiers": [ - "--mod-helptext-bottom-edge-to-workflow-icon", - "--mod-helptext-bottom-to-text", - "--mod-helptext-content-color-default", - "--mod-helptext-font-family", - "--mod-helptext-font-size", - "--mod-helptext-font-style", - "--mod-helptext-font-weight", - "--mod-helptext-icon-color-default", - "--mod-helptext-icon-size", - "--mod-helptext-line-height", - "--mod-helptext-line-height-cjk", - "--mod-helptext-min-height", - "--mod-helptext-text-to-visual", - "--mod-helptext-top-edge-to-workflow-icon", - "--mod-helptext-top-to-text" - ], "component": [ "--spectrum-helptext-bottom-to-text", "--spectrum-helptext-content-color-default", @@ -91,10 +74,5 @@ "--spectrum-workflow-icon-size-75" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-content-color-disabled", - "--highcontrast-helptext-icon-color-default", - "--highcontrast-helptext-icon-color-disabled" - ] + "high-contrast": [] } diff --git a/components/helptext/index.css b/components/helptext/index.css index 3ef91377442..daaed19a516 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -30,7 +30,7 @@ &:lang(ja), &:lang(zh), &:lang(ko) { - --mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100)); + --spectrum-helptext-line-height: var(--spectrum-cjk-line-height-100); } &.spectrum-HelpText--sizeS { @@ -81,66 +81,69 @@ } .spectrum-HelpText { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + color: var(--spectrum-helptext-content-color-default); display: flex; - font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); - min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); + font-size: var(--spectrum-helptext-font-size); + min-block-size: var(--spectrum-helptext-min-height); .spectrum-HelpText-validationIcon { - margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual)); - padding-block-start: var(--mod-helptext-top-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); - padding-block-end: var(--mod-helptext-bottom-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); + margin-inline-end: var(--spectrum-helptext-text-to-visual); + padding-block-start: var(--spectrum-helptext-edge-to-workflow-icon); + padding-block-end: var(--spectrum-helptext-edge-to-workflow-icon); flex-shrink: 0; - block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); - inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); + block-size: var(--spectrum-helptext-icon-size); + inline-size: var(--spectrum-helptext-icon-size); } .spectrum-HelpText-text { - padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text)); - padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text)); - line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height)); - font-family: var(--mod-helptext-font-family, var(--spectrum-helptext-font-family)); - font-style: var(--mod-helptext-font-style, var(--spectrum-helptext-font-style)); - font-weight: var(--mod-helptext-font-weight, var(--spectrum-helptext-font-weight)); + padding-block-start: var(--spectrum-helptext-top-to-text); + padding-block-end: var(--spectrum-helptext-bottom-to-text); + line-height: var(--spectrum-helptext-line-height); + font-family: var(--spectrum-helptext-font-family); + font-style: var(--spectrum-helptext-font-style); + font-weight: var(--spectrum-helptext-font-weight); } /* Variants -- Neutral, negative, disabled */ &.spectrum-HelpText--neutral { .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + color: var(--spectrum-helptext-content-color-default); } .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + color: var(--spectrum-helptext-icon-color-default); } } &.spectrum-HelpText--negative { .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + color: var(--spectrum-helptext-content-color-default); } .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + color: var(--spectrum-helptext-icon-color-default); } } &.is-disabled { .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-disabled, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + color: var(--spectrum-helptext-content-color-default); } .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-disabled, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + color: var(--spectrum-helptext-icon-color-default); } } } @media (forced-colors: active) { .spectrum-HelpText { - --highcontrast-helptext-content-color-default: CanvasText; - --highcontrast-helptext-icon-color-default: CanvasText; - --highcontrast-helptext-icon-color-disabled: GrayText; - --highcontrast-helptext-content-color-disabled: GrayText; + --spectrum-helptext-content-color-default: CanvasText; + --spectrum-helptext-icon-color-default: CanvasText; + + &.is-disabled { + --spectrum-helptext-content-color-default: GrayText; + --spectrum-helptext-icon-color-default: GrayText; + } } } diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index 01d56bd4f99..97d337766c0 100644 --- a/components/helptext/stories/helptext.stories.js +++ b/components/helptext/stories/helptext.stories.js @@ -102,7 +102,7 @@ Sizing.storyName = "Sizing"; Sizing.args = { variant: "negative", customStyles: { - "--mod-helptext-align-text": "center", + "--spectrum-helptext-align-text": "center", }, }; Sizing.tags = ["!dev"]; diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js index 894c60745cb..61f3688f4cf 100644 --- a/components/helptext/stories/template.js +++ b/components/helptext/stories/template.js @@ -87,7 +87,7 @@ export const NegativeTemplate = (args, context) => Container({ ...args, hideIcon, customStyles: { - "--mod-helptext-align-text": "center", + "--spectrum-helptext-align-text": "center", }, }, context), }, context) diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json index 7fcad33c95b..f7a78b7bf93 100644 --- a/components/icon/dist/metadata.json +++ b/components/icon/dist/metadata.json @@ -114,14 +114,9 @@ ".spectrum-UIIcon-LinkOut400", ".spectrum-UIIcon-LinkOut75" ], - "modifiers": [ - "--mod-icon-block-size", - "--mod-icon-color", - "--mod-icon-inline-size", - "--mod-icon-size" - ], "component": [ "--spectrum-icon-block-size", + "--spectrum-icon-color", "--spectrum-icon-inline-size", "--spectrum-icon-size" ], diff --git a/components/icon/icons.css b/components/icon/icons.css index ff0a39b001d..2e58c17a8ab 100644 --- a/components/icon/icons.css +++ b/components/icon/icons.css @@ -13,22 +13,15 @@ .spectrum-Icon, .spectrum-UIIcon { - /* stylelint-disable-next-line custom-property-pattern -- variable name defined by A4U output */ - --iconPrimary: var(--mod-icon-color, currentColor); - - --spectrum-icon-inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size))); - --spectrum-icon-block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size))); - display: inline-block; - inline-size: var(--spectrum-icon-inline-size); - block-size: var(--spectrum-icon-block-size); + inline-size: var(--spectrum-icon-inline-size, var(--spectrum-icon-size)); + block-size: var(--spectrum-icon-block-size, var(--spectrum-icon-size)); /* Use custom pass through or inherit the text color. */ - color: var(--mod-icon-color, inherit); + color: var(--spectrum-icon-color, inherit); /* Fill should match the current text color. */ - /* stylelint-disable-next-line custom-property-pattern -- map this to the same value as what's used by the icon's SVG code */ - fill: var(--iconPrimary); + fill: var(--spectrum-icon-color, currentColor); /* Don't catch clicks or hover, otherwise they may not escape the SVG. */ pointer-events: none; diff --git a/components/icon/stories/icon.test.js b/components/icon/stories/icon.test.js index 34202826597..32e662082fe 100644 --- a/components/icon/stories/icon.test.js +++ b/components/icon/stories/icon.test.js @@ -39,7 +39,7 @@ export const TestTemplate = (args, context) => html` size: "s", content: [scale], customStyles: { - "--mod-detail-font-color": "var(--spectrum-seafoam-900)", + "--spectrum-detail-font-color": "var(--spectrum-seafoam-900)", } })}
@@ -98,7 +98,7 @@ export const TestTemplate = (args, context) => html` size: "s", content: [scale], customStyles: { - "--mod-detail-font-color": "var(--spectrum-seafoam-900)", + "--spectrum-detail-font-color": "var(--spectrum-seafoam-900)", } })} diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json index 12705f6822e..086621d7d4b 100644 --- a/components/illustratedmessage/dist/metadata.json +++ b/components/illustratedmessage/dist/metadata.json @@ -21,34 +21,6 @@ ".spectrum-IllustratedMessage:lang(ko)", ".spectrum-IllustratedMessage:lang(zh)" ], - "modifiers": [ - "--mod-illustrated-message-description-color", - "--mod-illustrated-message-description-font-family", - "--mod-illustrated-message-description-font-size", - "--mod-illustrated-message-description-font-style", - "--mod-illustrated-message-description-font-weight", - "--mod-illustrated-message-description-line-height", - "--mod-illustrated-message-description-pointer-events", - "--mod-illustrated-message-description-position", - "--mod-illustrated-message-description-to-action", - "--mod-illustrated-message-description-z-index", - "--mod-illustrated-message-display", - "--mod-illustrated-message-heading-to-description", - "--mod-illustrated-message-horizontal-maximum-width", - "--mod-illustrated-message-illustrated-inline-size", - "--mod-illustrated-message-illustration-block-size", - "--mod-illustrated-message-illustration-color", - "--mod-illustrated-message-illustration-size", - "--mod-illustrated-message-illustration-to-heading", - "--mod-illustrated-message-pointer-events", - "--mod-illustrated-message-title-color", - "--mod-illustrated-message-title-font-family", - "--mod-illustrated-message-title-font-size", - "--mod-illustrated-message-title-font-style", - "--mod-illustrated-message-title-font-weight", - "--mod-illustrated-message-title-line-height", - "--mod-illustrated-message-vertical-maximum-width" - ], "component": [ "--spectrum-illustrated-message-description-color", "--spectrum-illustrated-message-description-font-family", @@ -56,7 +28,11 @@ "--spectrum-illustrated-message-description-font-style", "--spectrum-illustrated-message-description-font-weight", "--spectrum-illustrated-message-description-line-height", + "--spectrum-illustrated-message-description-pointer-events", + "--spectrum-illustrated-message-description-position", "--spectrum-illustrated-message-description-to-action", + "--spectrum-illustrated-message-description-z-index", + "--spectrum-illustrated-message-display", "--spectrum-illustrated-message-heading-to-description", "--spectrum-illustrated-message-horizontal-maximum-width", "--spectrum-illustrated-message-illustration-color", @@ -69,6 +45,7 @@ "--spectrum-illustrated-message-medium-body-font-size", "--spectrum-illustrated-message-medium-cjk-title-font-size", "--spectrum-illustrated-message-medium-title-font-size", + "--spectrum-illustrated-message-pointer-events", "--spectrum-illustrated-message-small-body-font-size", "--spectrum-illustrated-message-small-cjk-title-font-size", "--spectrum-illustrated-message-small-title-font-size", @@ -84,6 +61,7 @@ "--spectrum-body-color", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", + "--spectrum-buttongroup-justify-content", "--spectrum-heading-color", "--spectrum-line-height-200", "--spectrum-neutral-content-color-default", @@ -96,6 +74,6 @@ "--spectrum-title-sans-serif-font-style", "--spectrum-title-sans-serif-font-weight" ], - "passthroughs": ["--mod-buttongroup-justify-content"], - "high-contrast": ["--highcontrast-illustrated-message-illustration-color"] + "passthroughs": [], + "high-contrast": [] } diff --git a/components/illustratedmessage/index.css b/components/illustratedmessage/index.css index 39894c695a1..d6fd8e2c9b2 100644 --- a/components/illustratedmessage/index.css +++ b/components/illustratedmessage/index.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. --spectrum-illustrated-message-illustration-to-content: var(--spectrum-spacing-200); --spectrum-illustrated-message-description-to-action: var(--spectrum-spacing-300); /* @passthrough -- settings for nested button group */ - --mod-buttongroup-justify-content: center; + --spectrum-buttongroup-justify-content: center; /* Illustration */ --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-content-color-default); @@ -74,57 +74,57 @@ governing permissions and limitations under the License. .spectrum-IllustratedMessage { block-size: 100%; - display: var(--mod-illustrated-message-display, grid); + display: var(--spectrum-illustrated-message-display, grid); grid-template-areas: ". illustration ." "body body body"; text-align: center; - pointer-events: var(--mod-illustrated-message-pointer-events, auto); - max-inline-size: var(--mod-illustrated-message-vertical-maximum-width, var(--spectrum-illustrated-message-vertical-maximum-width)); + pointer-events: var(--spectrum-illustrated-message-pointer-events, auto); + max-inline-size: var(--spectrum-illustrated-message-vertical-maximum-width); } .spectrum-IllustratedMessage-illustration { - margin-block-end: var(--mod-illustrated-message-illustration-to-heading, var(--spectrum-illustrated-message-illustration-to-heading)); - color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))); + margin-block-end: var(--spectrum-illustrated-message-illustration-to-heading); + color: var(--spectrum-illustrated-message-illustration-color); fill: currentColor; stroke: currentColor; - block-size: var(--mod-illustrated-message-illustration-block-size, var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))); - inline-size: var(--mod-illustrated-message-illustrated-inline-size, var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))); + block-size: var(--spectrum-illustrated-message-illustration-size); + inline-size: var(--spectrum-illustrated-message-illustration-size); grid-area: illustration; } .spectrum-IllustratedMessage-heading { - font-family: var(--mod-illustrated-message-title-font-family, var(--spectrum-illustrated-message-title-font-family)); - font-weight: var(--mod-illustrated-message-title-font-weight, var(--spectrum-illustrated-message-title-font-weight)); - font-style: var(--mod-illustrated-message-title-font-style, var(--spectrum-illustrated-message-title-font-style)); - font-size: var(--mod-illustrated-message-title-font-size, var(--spectrum-illustrated-message-title-font-size)); - line-height: var(--mod-illustrated-message-title-line-height, var(--spectrum-illustrated-message-title-line-height)); + font-family: var(--spectrum-illustrated-message-title-font-family); + font-weight: var(--spectrum-illustrated-message-title-font-weight); + font-style: var(--spectrum-illustrated-message-title-font-style); + font-size: var(--spectrum-illustrated-message-title-font-size); + line-height: var(--spectrum-illustrated-message-title-line-height); - color: var(--mod-illustrated-message-title-color, var(--spectrum-illustrated-message-title-color)); + color: var(--spectrum-illustrated-message-title-color); margin-block-start: 0; - margin-block-end: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description)); + margin-block-end: var(--spectrum-illustrated-message-heading-to-description); } .spectrum-IllustratedMessage-description { - position: var(--mod-illustrated-message-description-position); - z-index: var(--mod-illustrated-message-description-z-index); - pointer-events: var(--mod-illustrated-message-description-pointer-events, auto); + position: var(--spectrum-illustrated-message-description-position); + z-index: var(--spectrum-illustrated-message-description-z-index); + pointer-events: var(--spectrum-illustrated-message-description-pointer-events, auto); - font-family: var(--mod-illustrated-message-description-font-family, var(--spectrum-illustrated-message-description-font-family)); - font-weight: var(--mod-illustrated-message-description-font-weight, var(--spectrum-illustrated-message-description-font-weight)); - font-style: var(--mod-illustrated-message-description-font-style, var(--spectrum-illustrated-message-description-font-style)); - font-size: var(--mod-illustrated-message-description-font-size, var(--spectrum-illustrated-message-description-font-size)); - line-height: var(--mod-illustrated-message-description-line-height, var(--spectrum-illustrated-message-description-line-height)); + font-family: var(--spectrum-illustrated-message-description-font-family); + font-weight: var(--spectrum-illustrated-message-description-font-weight); + font-style: var(--spectrum-illustrated-message-description-font-style); + font-size: var(--spectrum-illustrated-message-description-font-size); + line-height: var(--spectrum-illustrated-message-description-line-height); - color: var(--mod-illustrated-message-description-color, var(--spectrum-illustrated-message-description-color)); + color: var(--spectrum-illustrated-message-description-color); margin-block: 0; } .spectrum-IllustratedMessage--horizontal { - --mod-buttongroup-justify-content: flex-start; - max-inline-size: var(--mod-illustrated-message-horizontal-maximum-width, var(--spectrum-illustrated-message-horizontal-maximum-width)); + --spectrum-buttongroup-justify-content: flex-start; + max-inline-size: var(--spectrum-illustrated-message-horizontal-maximum-width); text-align: start; gap: var(--spectrum-illustrated-message-illustration-to-content); grid-template-areas: "illustration body"; @@ -136,7 +136,7 @@ governing permissions and limitations under the License. } .spectrum-IllustratedMessage-actions { - margin-block-start: var(--mod-illustrated-message-description-to-action, var(--spectrum-illustrated-message-description-to-action)); + margin-block-start: var(--spectrum-illustrated-message-description-to-action); } .spectrum-IllustratedMessage-content { @@ -144,7 +144,7 @@ governing permissions and limitations under the License. } @media (forced-colors: active) { - .spectrum-IllustratedMessage { - --highcontrast-illustrated-message-illustration-color: CanvasText; + .spectrum-IllustratedMessage-illustration { + color: CanvasText; } } diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json index 98a823a73c7..d0f59ba174d 100644 --- a/components/infieldbutton/dist/metadata.json +++ b/components/infieldbutton/dist/metadata.json @@ -25,32 +25,6 @@ ".spectrum-InfieldButton:not(:disabled):focus-visible", ".spectrum-InfieldButton:not(:disabled):hover" ], - "modifiers": [ - "--mod-infield-button-background-color", - "--mod-infield-button-background-color-disabled", - "--mod-infield-button-background-color-down", - "--mod-infield-button-background-color-down-disabled", - "--mod-infield-button-background-color-down-quiet", - "--mod-infield-button-background-color-hover", - "--mod-infield-button-background-color-hover-disabled", - "--mod-infield-button-background-color-hover-quiet", - "--mod-infield-button-background-color-quiet", - "--mod-infield-button-background-color-quiet-disabled", - "--mod-infield-button-border-radius", - "--mod-infield-button-edge-to-fill", - "--mod-infield-button-field-edge-to-icon", - "--mod-infield-button-fill-justify-content", - "--mod-infield-button-fill-padding", - "--mod-infield-button-height", - "--mod-infield-button-icon-color", - "--mod-infield-button-icon-color-disabled", - "--mod-infield-button-icon-color-down", - "--mod-infield-button-icon-color-down-disabled", - "--mod-infield-button-icon-color-hover", - "--mod-infield-button-icon-color-hover-disabled", - "--mod-infield-button-side-edge-to-fill", - "--mod-infield-button-width" - ], "component": [ "--spectrum-in-field-button-edge-to-fill-extra-large", "--spectrum-in-field-button-edge-to-fill-large", @@ -67,6 +41,7 @@ "--spectrum-infield-button-downstate-perspective", "--spectrum-infield-button-edge-to-fill", "--spectrum-infield-button-field-edge-to-disclosure-icon", + "--spectrum-infield-button-field-edge-to-icon", "--spectrum-infield-button-fill-justify-content", "--spectrum-infield-button-fill-padding", "--spectrum-infield-button-height", diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index a1e54ecb1de..79d4abf2985 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -38,13 +38,13 @@ --spectrum-infield-button-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); &: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)); + --spectrum-infield-button-background-color: var(--spectrum-disabled-background-color); + --spectrum-infield-button-background-color-hover: var(--spectrum-disabled-background-color); + --spectrum-infield-button-background-color-down: var(--spectrum-disabled-background-color); - --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)); - --mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); + --spectrum-infield-button-icon-color: var(--spectrum-disabled-content-color); + --spectrum-infield-button-icon-color-hover: var(--spectrum-disabled-content-color); + --spectrum-infield-button-icon-color-down: var(--spectrum-disabled-content-color); } &.spectrum-InfieldButton--sizeS { @@ -79,23 +79,23 @@ } &.spectrum-InfieldButton--quiet { - --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent); - --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent); - --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent); + --spectrum-infield-button-background-color: transparent; + --spectrum-infield-button-background-color-hover: transparent; + --spectrum-infield-button-background-color-down: transparent; &:disabled { - --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent); + --spectrum-infield-button-background-color: transparent; } } &:hover { - --mod-infield-button-background-color: var(--mod-infield-button-background-color-hover, var(--spectrum-infield-button-background-color-hover)); - --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover)); + --spectrum-infield-button-background-color: var(--spectrum-infield-button-background-color-hover); + --spectrum-infield-button-icon-color: var(--spectrum-infield-button-icon-color-hover); } &:active { - --mod-infield-button-background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down)); - --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down)); + --spectrum-infield-button-background-color: var(--spectrum-infield-button-background-color-down); + --spectrum-infield-button-icon-color: var(--spectrum-infield-button-icon-color-down); } } @@ -108,10 +108,10 @@ justify-content: center; align-items: center; - block-size: var(--mod-infield-button-height, var(--spectrum-infield-button-height)); - inline-size: var(--mod-infield-button-width, var(--spectrum-infield-button-width)); + block-size: var(--spectrum-infield-button-height); + inline-size: var(--spectrum-infield-button-width); - padding: var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)); + padding: var(--spectrum-infield-button-edge-to-fill); &:disabled { cursor: auto; @@ -130,13 +130,13 @@ display: flex; & .spectrum-InfieldButton { - --mod-infield-button-field-edge-to-icon: var(--spectrum-infield-button-inline-field-edge-to-icon); - inline-size: calc(var(--mod-infield-button-width, var(--spectrum-infield-button-width)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill))); - padding-inline: var(--mod-infield-button-side-edge-to-fill, var(--spectrum-infield-button-inline-edge-to-fill)); + --spectrum-infield-button-field-edge-to-icon: var(--spectrum-infield-button-inline-field-edge-to-icon); + inline-size: calc(var(--spectrum-infield-button-width) - var(--spectrum-infield-button-edge-to-fill)); + padding-inline: var(--spectrum-infield-button-inline-edge-to-fill); } & > .spectrum-InfieldButton.spectrum-InfieldButton--sizeS { - inline-size: var(--mod-infield-button-width, var(--spectrum-infield-button-width)); + inline-size: var(--spectrum-infield-button-width); } } @@ -144,15 +144,15 @@ block-size: 100%; inline-size: 100%; - background-color: var(--highcontrast-infield-button-background-color, var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color))); - border-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); + background-color: var(--highcontrast-infield-button-background-color, var(--spectrum-infield-button-background-color)); + border-radius: var(--spectrum-infield-button-border-radius); - padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding)); + padding: var(--spectrum-infield-button-fill-padding); /* center icon */ display: flex; align-items: center; - justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content)); + justify-content: var(--spectrum-infield-button-fill-justify-content); transition: background-color var(--spectrum-animation-duration-100) ease-in-out; } @@ -166,8 +166,8 @@ /* remove margin used for centering */ margin: 0 !important; - color: var(--highcontrast-infield-button-icon-color, var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color))); - padding: var(--mod-infield-button-field-edge-to-icon, var(--spectrum-infield-button-field-edge-to-disclosure-icon)); + color: var(--highcontrast-infield-button-icon-color, var(--spectrum-infield-button-icon-color)); + padding: var(--spectrum-infield-button-field-edge-to-icon); } @media (forced-colors: active) { diff --git a/components/infieldprogresscircle/dist/metadata.json b/components/infieldprogresscircle/dist/metadata.json index ffc95f11390..2f01bbd20ae 100644 --- a/components/infieldprogresscircle/dist/metadata.json +++ b/components/infieldprogresscircle/dist/metadata.json @@ -7,7 +7,6 @@ ".spectrum-InfieldProgressCircle--sizeS", ".spectrum-InfieldProgressCircle--sizeXL" ], - "modifiers": [], "component": [ "--spectrum-in-field-progress-circle-edge-to-fill", "--spectrum-in-field-progress-circle-size-100", @@ -16,10 +15,11 @@ "--spectrum-in-field-progress-circle-size-75", "--spectrum-infieldprogresscircle-padding-block" ], - "global": ["--spectrum-progress-circle-thickness-small"], - "passthroughs": [ - "--mod-progress-circle-size", - "--mod-progress-circle-thickness" + "global": [ + "--spectrum-progress-circle-size", + "--spectrum-progress-circle-thickness", + "--spectrum-progress-circle-thickness-small" ], + "passthroughs": [], "high-contrast": [] } diff --git a/components/infieldprogresscircle/index.css b/components/infieldprogresscircle/index.css index e3525eccc40..5c14e4412cb 100644 --- a/components/infieldprogresscircle/index.css +++ b/components/infieldprogresscircle/index.css @@ -11,21 +11,21 @@ governing permissions and limitations under the License. */ .spectrum-InfieldProgressCircle { - --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small); - --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-100); + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small); + --spectrum-progress-circle-size: var(--spectrum-in-field-progress-circle-size-100); --spectrum-infieldprogresscircle-padding-block: var(--spectrum-in-field-progress-circle-edge-to-fill); } .spectrum-InfieldProgressCircle--sizeS { - --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-75); + --spectrum-progress-circle-size: var(--spectrum-in-field-progress-circle-size-75); } .spectrum-InfieldProgressCircle--sizeL { - --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-200); + --spectrum-progress-circle-size: var(--spectrum-in-field-progress-circle-size-200); } .spectrum-InfieldProgressCircle--sizeXL { - --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-300); + --spectrum-progress-circle-size: var(--spectrum-in-field-progress-circle-size-300); } .spectrum-InfieldProgressCircle { diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json index 81ebe4df638..b5e90164851 100644 --- a/components/inlinealert/dist/metadata.json +++ b/components/inlinealert/dist/metadata.json @@ -26,31 +26,6 @@ ".spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle", ".spectrum-InLineAlert.spectrum-InLineAlert--subtle" ], - "modifiers": [ - "--mod-inlinealert-background-color", - "--mod-inlinealert-border-and-icon-color", - "--mod-inlinealert-border-radius", - "--mod-inlinealert-border-width", - "--mod-inlinealert-content-color", - "--mod-inlinealert-content-font-family", - "--mod-inlinealert-content-font-size", - "--mod-inlinealert-content-font-style", - "--mod-inlinealert-content-font-weight", - "--mod-inlinealert-content-line-height", - "--mod-inlinealert-header-color", - "--mod-inlinealert-header-min-block-size", - "--mod-inlinealert-heading-font-family", - "--mod-inlinealert-heading-font-size", - "--mod-inlinealert-heading-font-style", - "--mod-inlinealert-heading-font-weight", - "--mod-inlinealert-heading-line-height", - "--mod-inlinealert-icon-size", - "--mod-inlinealert-min-inline-size", - "--mod-inlinealert-min-spacing-header-to-icon", - "--mod-inlinealert-spacing-content-link-button", - "--mod-inlinealert-spacing-edge-to-text", - "--mod-inlinealert-spacing-header-content" - ], "component": [ "--spectrum-in-line-alert-minimum-width", "--spectrum-inlinealert-background-color", @@ -116,11 +91,5 @@ "--spectrum-workflow-icon-size-100" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-inlinealert-background-color", - "--highcontrast-inlinealert-border-and-icon-color", - "--highcontrast-inlinealert-border-width", - "--highcontrast-inlinealert-content-color", - "--highcontrast-inlinealert-header-color" - ] + "high-contrast": [] } diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css index 62cf0bf3b97..c962173f3e8 100644 --- a/components/inlinealert/index.css +++ b/components/inlinealert/index.css @@ -130,49 +130,49 @@ display: inline-block; box-sizing: border-box; - min-inline-size: var(--mod-inlinealert-min-inline-size, var(--spectrum-inlinealert-min-inline-size)); + min-inline-size: var(--spectrum-inlinealert-min-inline-size); - padding-block: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text)); - padding-inline: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text)); + padding-block: var(--spectrum-inlinealert-spacing-edge-to-text); + padding-inline: var(--spectrum-inlinealert-spacing-edge-to-text); - border-width: var(--highcontrast-inlinealert-border-width, var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width))); + border-width: var(--spectrum-inlinealert-border-width); border-style: solid; - border-radius: var(--mod-inlinealert-border-radius, var(--spectrum-inlinealert-border-radius)); + border-radius: var(--spectrum-inlinealert-border-radius); - background-color: var(--highcontrast-inlinealert-background-color, var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color))); - border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color))); + background-color: var(--spectrum-inlinealert-background-color); + border-color: var(--spectrum-inlinealert-border-and-icon-color); } .spectrum-InLineAlert-icon { - inline-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size)); - block-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size)); + inline-size: var(--spectrum-inlinealert-icon-size); + block-size: var(--spectrum-inlinealert-icon-size); flex-shrink: 0; - color: var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color)); + color: var(--spectrum-inlinealert-border-and-icon-color); } .spectrum-InLineAlert-header { display: flex; justify-content: space-between; - gap: var(--mod-inlinealert-min-spacing-header-to-icon, var(--spectrum-inlinealert-min-spacing-header-to-icon)); - margin-block-end: var(--mod-inlinealert-spacing-header-content, var(--spectrum-inlinealert-spacing-header-content)); + gap: var(--spectrum-inlinealert-min-spacing-header-to-icon); + margin-block-end: var(--spectrum-inlinealert-spacing-header-content); - font-weight: var(--mod-inlinealert-heading-font-weight, var(--spectrum-inlinealert-heading-font-weight)); - font-family: var(--mod-inlinealert-heading-font-family, var(--spectrum-inlinealert-heading-font-family)); - font-style: var(--mod-inlinealert-heading-font-style, var(--spectrum-inlinealert-heading-font-style)); - font-size: var(--mod-inlinealert-heading-font-size, var(--spectrum-inlinealert-heading-font-size)); - line-height: var(--mod-inlinealert-heading-line-height, var(--spectrum-inlinealert-heading-line-height)); + font-weight: var(--spectrum-inlinealert-heading-font-weight); + font-family: var(--spectrum-inlinealert-heading-font-family); + font-style: var(--spectrum-inlinealert-heading-font-style); + font-size: var(--spectrum-inlinealert-heading-font-size); + line-height: var(--spectrum-inlinealert-heading-line-height); text-transform: none; - min-block-size: var(--mod-inlinealert-header-min-block-size, var(--spectrum-inlinealert-header-min-block-size)); + min-block-size: var(--spectrum-inlinealert-header-min-block-size); - color: var(--highcontrast-inlinealert-header-color, var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color))); + color: var(--spectrum-inlinealert-header-color); } .spectrum-InLineAlert-content { display: flex; justify-content: space-between; - gap: var(--mod-inlinealert-min-spacing-header-to-icon, var(--spectrum-inlinealert-min-spacing-header-to-icon)); + gap: var(--spectrum-inlinealert-min-spacing-header-to-icon); margin-block-end: 0; margin-inline-start: 0; @@ -181,19 +181,19 @@ overflow-wrap: break-word; - font-weight: var(--mod-inlinealert-content-font-weight, var(--spectrum-inlinealert-content-font-weight)); - font-family: var(--mod-inlinealert-content-font-family, var(--spectrum-inlinealert-content-font-family)); - font-style: var(--mod-inlinealert-content-font-style, var(--spectrum-inlinealert-content-font-style)); - font-size: var(--mod-inlinealert-content-font-size, var(--spectrum-inlinealert-content-font-size)); - line-height: var(--mod-inlinealert-content-line-height, var(--spectrum-inlinealert-content-line-height)); + font-weight: var(--spectrum-inlinealert-content-font-weight); + font-family: var(--spectrum-inlinealert-content-font-family); + font-style: var(--spectrum-inlinealert-content-font-style); + font-size: var(--spectrum-inlinealert-content-font-size); + line-height: var(--spectrum-inlinealert-content-line-height); - color: var(--highcontrast-inlinealert-content-color, var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color))); + color: var(--spectrum-inlinealert-content-color); } .spectrum-InLineAlert-footer { display: flex; justify-content: flex-start; - margin-block-start: var(--mod-inlinealert-spacing-content-link-button, var(--spectrum-inlinealert-spacing-content-link-button)); + margin-block-start: var(--spectrum-inlinealert-spacing-content-link-button); &:empty { display: none; @@ -202,15 +202,18 @@ @media (forced-colors: active) { .spectrum-InLineAlert { - --highcontrast-inlinealert-header-color: CanvasText; - --highcontrast-inlinealert-content-color: CanvasText; - --highcontrast-inlinealert-border-and-icon-color: CanvasText; - - --highcontrast-inlinealert-background-color: Canvas; + background-color: Canvas; + border-color: CanvasText; &.spectrum-InLineAlert--subtle, &.spectrum-InLineAlert--bold { - --highcontrast-inlinealert-border-width: var(--spectrum-border-width-200); + border-width: var(--spectrum-border-width-200); } } + + .spectrum-InLineAlert-header, + .spectrum-InLineAlert-content, + .spectrum-InLineAlert-icon { + color: CanvasText; + } } diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json index 9c83915a752..561b85a38e9 100644 --- a/components/link/dist/metadata.json +++ b/components/link/dist/metadata.json @@ -15,21 +15,6 @@ ".spectrum-Link:lang(ko)", ".spectrum-Link:lang(zh)" ], - "modifiers": [ - "--mod-link-animation-duration", - "--mod-link-inline-font-weight", - "--mod-link-line-height-cjk", - "--mod-link-text-color", - "--mod-link-text-color-active", - "--mod-link-text-color-black", - "--mod-link-text-color-focus", - "--mod-link-text-color-hover", - "--mod-link-text-color-secondary-active", - "--mod-link-text-color-secondary-default", - "--mod-link-text-color-secondary-focus", - "--mod-link-text-color-secondary-hover", - "--mod-link-text-color-white" - ], "component": [ "--spectrum-link-corner-radius", "--spectrum-link-default-font-family", @@ -42,6 +27,10 @@ "--spectrum-link-inline-font-weight", "--spectrum-link-line-height", "--spectrum-link-line-height-cjk", + "--spectrum-link-text-color", + "--spectrum-link-text-color-down", + "--spectrum-link-text-color-focus", + "--spectrum-link-text-color-hover", "--spectrum-link-text-underline-gap", "--spectrum-link-text-underline-thickness" ], @@ -74,8 +63,5 @@ "--spectrum-white" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-link-focus-indicator-color", - "--highcontrast-link-text-color" - ] + "high-contrast": [] } diff --git a/components/link/index.css b/components/link/index.css index 9c49d650727..dff985899cf 100644 --- a/components/link/index.css +++ b/components/link/index.css @@ -12,6 +12,11 @@ */ .spectrum-Link { + --spectrum-link-text-color: var(--spectrum-accent-content-color-default); + --spectrum-link-text-color-hover: var(--spectrum-accent-content-color-hover); + --spectrum-link-text-color-down: var(--spectrum-accent-content-color-down); + --spectrum-link-text-color-focus: var(--spectrum-accent-content-color-key-focus); + /* Focus state */ --spectrum-link-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-link-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); @@ -39,11 +44,11 @@ /* Remove gaps in links underline in iOS 8+ and Safari 8+. */ text-decoration-skip: objects; text-decoration: underline; - transition: color var(--mod-link-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out; + transition: color var(--spectrum-animation-duration-100) ease-in-out; outline: none; cursor: pointer; - color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--spectrum-accent-content-color-default))); + color: var(--spectrum-link-text-color); font-family: var(--spectrum-link-default-font-family); font-weight: var(--spectrum-link-font-weight); font-size: var(--spectrum-link-font-size); @@ -53,17 +58,16 @@ text-underline-offset: var(--spectrum-link-text-underline-gap); &:hover { - --mod-link-text-color: var(--mod-link-text-color-hover, var(--spectrum-accent-content-color-hover)); + color: var(--spectrum-link-text-color-hover); } &:active { - --mod-link-text-color: var(--mod-link-text-color-active, var(--spectrum-accent-content-color-down)); + color: var(--spectrum-link-text-color-down); } &:focus-visible { - --mod-link-text-color: var(--mod-link-text-color-focus, var(--spectrum-accent-content-color-key-focus)); - - outline: var(--spectrum-link-focus-indicator-thickness) solid var(--highcontrast-link-focus-indicator-color, var(--spectrum-link-focus-indicator-color)); + color: var(--spectrum-link-text-color-focus); + outline: var(--spectrum-link-focus-indicator-thickness) solid var(--spectrum-link-focus-indicator-color); outline-offset: var(--spectrum-link-focus-indicator-gap); border-radius: var(--spectrum-link-corner-radius); } @@ -71,15 +75,15 @@ &:lang(ja), &:lang(zh), &:lang(ko) { - line-height: var(--mod-link-line-height-cjk, var(--spectrum-link-line-height-cjk)); + line-height: var(--spectrum-link-line-height-cjk); } } .spectrum-Link--secondary { - --mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default)); - --mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover)); - --mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down)); - --mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus)); + --spectrum-link-text-color: var(--spectrum-neutral-content-color-default); + --spectrum-link-text-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-link-text-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-link-text-color-focus: var(--spectrum-neutral-content-color-key-focus); } .spectrum-Link--quiet { @@ -91,23 +95,23 @@ } .spectrum-Link--inline { - --spectrum-link-font-weight: var(--mod-link-inline-font-weight, var(--spectrum-link-inline-font-weight)); + --spectrum-link-font-weight: var(--spectrum-link-inline-font-weight); } .spectrum-Link--staticWhite { - --mod-link-text-color: var(--mod-link-text-color-white, var(--spectrum-white)); - --mod-link-text-color-hover: var(--mod-link-text-color-white, var(--spectrum-white)); - --mod-link-text-color-active: var(--mod-link-text-color-white, var(--spectrum-white)); - --mod-link-text-color-focus: var(--mod-link-text-color-white, var(--spectrum-white)); + --spectrum-link-text-color: var(--spectrum-white); + --spectrum-link-text-color-hover: var(--spectrum-white); + --spectrum-link-text-color-down: var(--spectrum-white); + --spectrum-link-text-color-focus: var(--spectrum-white); --spectrum-link-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); } .spectrum-Link--staticBlack { - --mod-link-text-color: var(--mod-link-text-color-black, var(--spectrum-black)); - --mod-link-text-color-hover: var(--mod-link-text-color-black, var(--spectrum-black)); - --mod-link-text-color-active: var(--mod-link-text-color-black, var(--spectrum-black)); - --mod-link-text-color-focus: var(--mod-link-text-color-black, var(--spectrum-black)); + --spectrum-link-text-color: var(--spectrum-black); + --spectrum-link-text-color-hover: var(--spectrum-black); + --spectrum-link-text-color-down: var(--spectrum-black); + --spectrum-link-text-color-focus: var(--spectrum-black); --spectrum-link-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); } @@ -115,7 +119,10 @@ /* Windows high contrast mode */ @media (forced-colors: active) { .spectrum-Link { - --highcontrast-link-text-color: LinkText; - --highcontrast-link-focus-indicator-color: LinkText; + color: LinkText; + + &:focus-visible { + outline-color: LinkText; + } } } diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json index b61731b416a..2e6d49190f2 100644 --- a/components/logicbutton/dist/metadata.json +++ b/components/logicbutton/dist/metadata.json @@ -14,38 +14,6 @@ ".spectrum-LogicButton:focus-visible", ".spectrum-LogicButton:focus-visible:after" ], - "modifiers": [ - "--mod-focus-indicator-gap", - "--mod-logic-button-and-background-color", - "--mod-logic-button-and-background-color-disabled", - "--mod-logic-button-and-background-color-hover", - "--mod-logic-button-and-background-color-hover-disabled", - "--mod-logic-button-and-border-color", - "--mod-logic-button-and-border-color-disabled", - "--mod-logic-button-and-border-color-hover", - "--mod-logic-button-and-border-color-hover-disabled", - "--mod-logic-button-and-text-color", - "--mod-logic-button-and-text-color-disabled", - "--mod-logic-button-border-radius", - "--mod-logic-button-border-width", - "--mod-logic-button-focus-indicator-color", - "--mod-logic-button-focus-indicator-gap", - "--mod-logic-button-focus-indicator-width", - "--mod-logic-button-font-size", - "--mod-logic-button-font-weight", - "--mod-logic-button-height", - "--mod-logic-button-or-background-color", - "--mod-logic-button-or-background-color-disabled", - "--mod-logic-button-or-background-color-hover", - "--mod-logic-button-or-background-color-hover-disabled", - "--mod-logic-button-or-border-color", - "--mod-logic-button-or-border-color-disabled", - "--mod-logic-button-or-border-color-hover", - "--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" - ], "component": [ "--spectrum-logic-button-and-background-color", "--spectrum-logic-button-and-background-color-disabled", @@ -57,6 +25,7 @@ "--spectrum-logic-button-and-border-color-hover-disabled", "--spectrum-logic-button-and-text-color", "--spectrum-logic-button-border-radius", + "--spectrum-logic-button-height", "--spectrum-logic-button-or-background-color", "--spectrum-logic-button-or-background-color-disabled", "--spectrum-logic-button-or-background-color-hover", @@ -84,11 +53,7 @@ "--spectrum-sans-font-family-stack", "--spectrum-white" ], - "passthroughs": [ - "--mod-button-animation-duration", - "--mod-button-focus-indicator-gap", - "--mod-button-font-family" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-logic-button-and-background-color", "--highcontrast-logic-button-and-background-color-hover", diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index e54943f5bd6..dad2dbeae4d 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -31,6 +31,8 @@ --spectrum-logic-button-or-text-color: var(--spectrum-white); --spectrum-logic-button-text-color-disabled: var(--spectrum-gray-500); + --spectrum-logic-button-height: 24px; + cursor: pointer; user-select: none; @@ -48,7 +50,7 @@ /* Remove button the margin in Firefox and Safari. */ margin: 0; - font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack)); + font-family: var(--spectrum-sans-font-family-stack); /* Adjacent buttons should be aligned correctly */ vertical-align: top; @@ -66,20 +68,20 @@ -webkit-appearance: button; transition: - 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; + background var(--spectrum-animation-duration-100) ease-out, + border-color var(--spectrum-animation-duration-100) ease-out, + color var(--spectrum-animation-duration-100) ease-out, + box-shadow var(--spectrum-animation-duration-100) ease-out; - block-size: var(--mod-logic-button-height, 24px); - padding: var(--mod-logic-button-padding, var(--spectrum-component-edge-to-text-50)); + block-size: var(--spectrum-logic-button-height); + padding: var(--spectrum-component-edge-to-text-50); - border-width: var(--mod-logic-button-border-width, var(--spectrum-border-width-200)); + border-width: var(--spectrum-border-width-200); border-style: solid; - border-radius: var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)); + border-radius: var(--spectrum-logic-button-border-radius); - font-size: var(--mod-logic-button-font-size, var(--spectrum-font-size-100)); - font-weight: var(--mod-logic-button-font-weight, var(--spectrum-bold-font-weight)); + font-size: var(--spectrum-font-size-100); + font-weight: var(--spectrum-bold-font-weight); line-height: 0; /* Fix Firefox */ @@ -112,13 +114,13 @@ inset-inline-end: 0; display: block; - margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); + margin: calc(var(--spectrum-focus-indicator-gap) * -1); transition: - 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; + opacity var(--spectrum-animation-duration-100) ease-out, + margin var(--spectrum-animation-duration-100) ease-out; - border-radius: calc(var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)) + var(--mod-logic-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap))); + border-radius: calc(var(--spectrum-logic-button-border-radius) + var(--spectrum-focus-indicator-gap)); } &:focus-visible::after { @@ -129,45 +131,45 @@ outline: none; &::after { - box-shadow: 0 0 0 var(--mod-logic-button-focus-indicator-width, var(--spectrum-focus-indicator-thickness)) var(--highcontrast-logic-button-focus-indicator-color, var(--mod-logic-button-focus-indicator-color, var(--spectrum-focus-indicator-color))); + box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-logic-button-focus-indicator-color, var(--spectrum-focus-indicator-color)); } } &:disabled, &.is-disabled { - --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-logic-button-and-background-color-disabled)); - --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-logic-button-and-border-color-disabled)); - --mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-logic-button-text-color-disabled)); - --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-logic-button-and-background-color-hover-disabled)); - --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-logic-button-and-border-color-hover-disabled)); - - --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-logic-button-or-background-color-disabled)); - --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-logic-button-or-border-color-disabled)); - --mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-logic-button-text-color-disabled)); - --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-logic-button-or-background-color-hover-disabled)); - --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-logic-button-or-border-color-hover-disabled)); + --spectrum-logic-button-and-background-color: var(--spectrum-logic-button-and-background-color-disabled); + --spectrum-logic-button-and-border-color: var(--spectrum-logic-button-and-border-color-disabled); + --spectrum-logic-button-and-text-color: var(--spectrum-logic-button-text-color-disabled); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-logic-button-and-background-color-hover-disabled); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-logic-button-and-border-color-hover-disabled); + + --spectrum-logic-button-or-background-color: var(--spectrum-logic-button-or-background-color-disabled); + --spectrum-logic-button-or-border-color: var(--spectrum-logic-button-or-border-color-disabled); + --spectrum-logic-button-or-text-color: var(--spectrum-logic-button-text-color-disabled); + --spectrum-logic-button-or-background-color-hover: var(--spectrum-logic-button-or-background-color-hover-disabled); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-logic-button-or-border-color-hover-disabled); } } .spectrum-LogicButton--and { - background-color: var(--highcontrast-logic-button-and-background-color, var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color))); - border-color: var(--highcontrast-logic-button-and-border-color, var(--mod-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color))); - color: var(--highcontrast-logic-button-and-text-color, var(--mod-logic-button-and-text-color, var(--spectrum-logic-button-and-text-color))); + background-color: var(--highcontrast-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color)); + border-color: var(--highcontrast-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color)); + color: var(--highcontrast-logic-button-and-text-color, var(--spectrum-logic-button-and-text-color)); &:hover:not([disabled]) { - background-color: var(--highcontrast-logic-button-and-background-color-hover, var(--mod-logic-button-and-background-color-hover, var(--spectrum-logic-button-and-background-color-hover))); - border-color: var(--highcontrast-logic-button-and-border-color-hover, var(--mod-logic-button-and-border-color-hover, var(--spectrum-logic-button-and-border-color-hover))); + background-color: var(--highcontrast-logic-button-and-background-color-hover, var(--spectrum-logic-button-and-background-color-hover)); + border-color: var(--highcontrast-logic-button-and-border-color-hover, var(--spectrum-logic-button-and-border-color-hover)); } } .spectrum-LogicButton--or { - background-color: var(--highcontrast-logic-button-or-background-color, var(--mod-logic-button-or-background-color, var(--spectrum-logic-button-or-background-color))); - border-color: var(--highcontrast-logic-button-or-border-color, var(--mod-logic-button-or-border-color, var(--spectrum-logic-button-or-border-color))); - color: var(--highcontrast-logic-button-or-text-color, var(--mod-logic-button-or-text-color, var(--spectrum-logic-button-or-text-color))); + background-color: var(--highcontrast-logic-button-or-background-color, var(--spectrum-logic-button-or-background-color)); + border-color: var(--highcontrast-logic-button-or-border-color, var(--spectrum-logic-button-or-border-color)); + color: var(--highcontrast-logic-button-or-text-color, var(--spectrum-logic-button-or-text-color)); &:hover:not([disabled]) { - background-color: var(--highcontrast-logic-button-or-background-color-hover, var(--mod-logic-button-or-background-color-hover, var(--spectrum-logic-button-or-background-color-hover))); - border-color: var(--highcontrast-logic-button-or-border-color-hover, var(--mod-logic-button-or-border-color-hover, var(--spectrum-logic-button-or-border-color-hover))); + background-color: var(--highcontrast-logic-button-or-background-color-hover, var(--spectrum-logic-button-or-background-color-hover)); + border-color: var(--highcontrast-logic-button-or-border-color-hover, var(--spectrum-logic-button-or-border-color-hover)); } } diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json index 3693f34c5dc..6b072a49086 100644 --- a/components/menu/dist/metadata.json +++ b/components/menu/dist/metadata.json @@ -149,101 +149,11 @@ ".spectrum-Menu:lang(ko)", ".spectrum-Menu:lang(zh)" ], - "modifiers": [ - "--mod-menu-back-heading-color", - "--mod-menu-back-icon-color-default", - "--mod-menu-back-icon-margin-block", - "--mod-menu-back-icon-margin-inline", - "--mod-menu-back-padding-block-end", - "--mod-menu-back-padding-block-start", - "--mod-menu-back-padding-inline-end", - "--mod-menu-back-padding-inline-start", - "--mod-menu-checkmark-display", - "--mod-menu-checkmark-icon-color-default", - "--mod-menu-checkmark-icon-color-down", - "--mod-menu-checkmark-icon-color-focus", - "--mod-menu-checkmark-icon-color-hover", - "--mod-menu-collapsible-icon-color", - "--mod-menu-drillin-icon-color-default", - "--mod-menu-drillin-icon-color-down", - "--mod-menu-drillin-icon-color-focus", - "--mod-menu-drillin-icon-color-hover", - "--mod-menu-inline-size", - "--mod-menu-item-background-color-default", - "--mod-menu-item-background-color-down", - "--mod-menu-item-background-color-hover", - "--mod-menu-item-background-color-key-focus", - "--mod-menu-item-bottom-edge-to-text", - "--mod-menu-item-checkmark-height", - "--mod-menu-item-checkmark-width", - "--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start", - "--mod-menu-item-corner-radius", - "--mod-menu-item-description-color-default", - "--mod-menu-item-description-color-disabled", - "--mod-menu-item-description-color-down", - "--mod-menu-item-description-color-focus", - "--mod-menu-item-description-color-hover", - "--mod-menu-item-description-font-size", - "--mod-menu-item-description-line-height", - "--mod-menu-item-description-line-height-cjk", - "--mod-menu-item-focus-indicator-color", - "--mod-menu-item-focus-indicator-width", - "--mod-menu-item-icon-height", - "--mod-menu-item-icon-width", - "--mod-menu-item-label-content-color-default", - "--mod-menu-item-label-content-color-disabled", - "--mod-menu-item-label-content-color-down", - "--mod-menu-item-label-content-color-focus", - "--mod-menu-item-label-content-color-hover", - "--mod-menu-item-label-font-size", - "--mod-menu-item-label-icon-color-default", - "--mod-menu-item-label-icon-color-disabled", - "--mod-menu-item-label-icon-color-down", - "--mod-menu-item-label-icon-color-focus", - "--mod-menu-item-label-icon-color-hover", - "--mod-menu-item-label-inline-edge-to-content", - "--mod-menu-item-label-line-height", - "--mod-menu-item-label-line-height-cjk", - "--mod-menu-item-label-text-to-visual", - "--mod-menu-item-label-to-description-spacing", - "--mod-menu-item-label-to-value-area-min-spacing", - "--mod-menu-item-linkout-icon-height", - "--mod-menu-item-linkout-icon-width", - "--mod-menu-item-min-height", - "--mod-menu-item-selectable-edge-to-text-not-selected", - "--mod-menu-item-text-to-control", - "--mod-menu-item-thumbnail-height", - "--mod-menu-item-thumbnail-opacity-disabled", - "--mod-menu-item-thumbnail-to-label", - "--mod-menu-item-thumbnail-width", - "--mod-menu-item-top-edge-to-text", - "--mod-menu-item-top-to-action", - "--mod-menu-item-top-to-checkbox", - "--mod-menu-item-top-to-checkmark", - "--mod-menu-item-top-to-thumbnail", - "--mod-menu-item-top-to-workflow-icon", - "--mod-menu-item-value-color-default", - "--mod-menu-item-value-color-down", - "--mod-menu-item-value-color-focus", - "--mod-menu-item-value-color-hover", - "--mod-menu-section-description-color", - "--mod-menu-section-description-font-size", - "--mod-menu-section-description-font-weight", - "--mod-menu-section-description-line-height", - "--mod-menu-section-description-line-height-cjk", - "--mod-menu-section-divider-margin-block", - "--mod-menu-section-header-bottom-edge-to-text", - "--mod-menu-section-header-color", - "--mod-menu-section-header-font-size", - "--mod-menu-section-header-font-weight", - "--mod-menu-section-header-line-height", - "--mod-menu-section-header-line-height-cjk", - "--mod-menu-section-header-min-width", - "--mod-menu-section-header-to-description", - "--mod-menu-section-header-top-edge-to-text" - ], "component": [ "--spectrum-menu-back-icon-margin", + "--spectrum-menu-back-padding-block-end", + "--spectrum-menu-back-padding-block-start", + "--spectrum-menu-back-padding-inline-start", "--spectrum-menu-checkmark-display", "--spectrum-menu-checkmark-display-hidden", "--spectrum-menu-checkmark-display-shown", @@ -257,6 +167,7 @@ "--spectrum-menu-drillin-icon-color-down", "--spectrum-menu-drillin-icon-color-focus", "--spectrum-menu-drillin-icon-color-hover", + "--spectrum-menu-inline-size", "--spectrum-menu-item-background-color-default", "--spectrum-menu-item-background-color-down", "--spectrum-menu-item-background-color-hover", @@ -359,6 +270,8 @@ "--spectrum-accent-color-1100", "--spectrum-accent-color-900", "--spectrum-bold-font-weight", + "--spectrum-checkbox-text-to-control", + "--spectrum-checkbox-top-to-text", "--spectrum-checkmark-icon-size-100", "--spectrum-checkmark-icon-size-200", "--spectrum-checkmark-icon-size-300", @@ -427,6 +340,8 @@ "--spectrum-regular-font-weight", "--spectrum-spacing-100", "--spectrum-spacing-50", + "--spectrum-switch-control-label-spacing", + "--spectrum-switch-spacing-top-to-label", "--spectrum-text-to-control-100", "--spectrum-text-to-control-200", "--spectrum-text-to-control-300", @@ -445,12 +360,7 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-checkbox-text-to-control", - "--mod-checkbox-top-to-text", - "--mod-switch-control-label-spacing", - "--mod-switch-spacing-top-to-label" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-checkbox-highlight-color-default", "--highcontrast-checkbox-highlight-color-hover", diff --git a/components/menu/index.css b/components/menu/index.css index b5dd79577a7..e0e30938d59 100644 --- a/components/menu/index.css +++ b/components/menu/index.css @@ -119,11 +119,11 @@ --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))); /* Focus state styling */ - --spectrum-menu-item-focus-indicator-width: var(--mod-menu-item-focus-indicator-width, var(--spectrum-focus-indicator-thickness)); + --spectrum-menu-item-focus-indicator-width: var(--spectrum-focus-indicator-thickness); --spectrum-menu-item-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-menu-item-focus-indicator-offset: var(--spectrum-focus-indicator-gap); --spectrum-menu-item-focus-indicator-outline-style: solid; - --spectrum-menu-item-focus-indicator-color-default: var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); + --spectrum-menu-item-focus-indicator-color-default: var(--highcontrast-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)); --spectrum-menu-item-focus-margin: calc(var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width)); &.spectrum-Menu--sizeS { @@ -267,7 +267,7 @@ .spectrum-Menu { display: inline-block; - inline-size: var(--mod-menu-inline-size, auto); + inline-size: var(--spectrum-menu-inline-size, auto); box-sizing: border-box; margin: 0; padding: 0; @@ -277,10 +277,10 @@ &:lang(ja), &:lang(zh), &:lang(ko) { - --spectrum-menu-item-label-line-height: var(--mod-menu-item-label-line-height-cjk, var(--spectrum-menu-item-label-line-height-cjk)); - --spectrum-menu-item-description-line-height: var(--mod-menu-item-description-line-height-cjk, var(--spectrum-menu-item-description-line-height-cjk)); - --spectrum-menu-section-header-line-height: var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk)); - --spectrum-menu-section-description-line-height: var(--mod-menu-section-description-line-height-cjk, var(--spectrum-menu-section-description-line-height-cjk)); + --spectrum-menu-item-label-line-height: var(--spectrum-menu-item-label-line-height-cjk); + --spectrum-menu-item-description-line-height: var(--spectrum-menu-item-description-line-height-cjk); + --spectrum-menu-section-header-line-height: var(--spectrum-menu-section-header-line-height-cjk); + --spectrum-menu-section-description-line-height: var(--spectrum-menu-section-description-line-height-cjk); } /* Menus with "selectable" menu items. */ @@ -289,13 +289,13 @@ .spectrum-Menu-item { --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-hidden); - padding-inline-start: var(--mod-menu-item-selectable-edge-to-text-not-selected, var(--spectrum-menu-item-selectable-edge-to-text-not-selected)); + padding-inline-start: var(--spectrum-menu-item-selectable-edge-to-text-not-selected); /* Remove inline-start spacing once an item is selected and a checkmark appears. */ &.is-selected { --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown); - padding-inline-start: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-inline-start: var(--spectrum-menu-item-label-inline-edge-to-content); } } } @@ -322,31 +322,31 @@ overflow: visible; inline-size: auto; - margin-block: var(--mod-menu-section-divider-margin-block, max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness)) / 2)); - margin-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + margin-block: max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness)) / 2); + margin-inline: var(--spectrum-menu-item-label-inline-edge-to-content); } /* Icons */ .spectrum-Menu-itemIcon { - fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default))); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default))); + fill: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-item-label-icon-color-default)); + color: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-item-label-icon-color-default)); grid-area: iconArea; } .spectrum-Menu-checkmark { - display: var(--mod-menu-checkmark-display, var(--spectrum-menu-checkmark-display)); - block-size: var(--mod-menu-item-checkmark-height, var(--spectrum-menu-item-checkmark-height)); - inline-size: var(--mod-menu-item-checkmark-width, var(--spectrum-menu-item-checkmark-width)); + display: var(--spectrum-menu-checkmark-display); + block-size: var(--spectrum-menu-item-checkmark-height); + inline-size: var(--spectrum-menu-item-checkmark-width); - fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default))); - color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default))); + fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default)); + color: var(--highcontrast-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default)); opacity: 1; - margin-block-start: calc(var(--mod-menu-item-top-to-checkmark, var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); + margin-block-start: calc(var(--spectrum-menu-item-top-to-checkmark) - var(--spectrum-menu-item-top-edge-to-text)); /* Checkmarks have text or an icon directly next to them. */ - margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); + margin-inline-end: var(--spectrum-menu-item-text-to-control); grid-area: checkmarkArea; } @@ -356,7 +356,7 @@ inline-size: var(--spectrum-menu-item-chevron-width); /* Chevrons (aka collapsibles) have text or an icon directly next to them. */ - margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); + margin-inline-end: var(--spectrum-menu-item-text-to-control); grid-area: chevronArea; @@ -366,26 +366,26 @@ } .spectrum-Menu-backIcon { - margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin)); - margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin)); - fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color))); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color))); + margin-block: var(--spectrum-menu-back-icon-margin); + margin-inline: var(--spectrum-menu-back-icon-margin); + fill: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-section-header-color)); + color: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-section-header-color)); } .spectrum-Menu-itemIcon--workflowIcon { /* Always provide space at the end of a workflow icon. */ - margin-inline-end: var(--mod-menu-item-label-text-to-visual, var(--spectrum-menu-item-label-text-to-visual)); - margin-block-start: calc(var(--mod-menu-item-top-to-workflow-icon, var(--spectrum-menu-item-top-to-workflow-icon)) - var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); + margin-inline-end: var(--spectrum-menu-item-label-text-to-visual); + margin-block-start: calc(var(--spectrum-menu-item-top-to-workflow-icon) - var(--spectrum-menu-item-top-edge-to-text)); } .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout) { - block-size: var(--mod-menu-item-icon-height, var(--spectrum-menu-item-icon-height)); - inline-size: var(--mod-menu-item-icon-width, var(--spectrum-menu-item-icon-width)); + block-size: var(--spectrum-menu-item-icon-height); + inline-size: var(--spectrum-menu-item-icon-width); } .spectrum-Menu-linkout { - block-size: var(--mod-menu-item-linkout-icon-height, var(--spectrum-menu-item-linkout-icon-height)); - inline-size: var(--mod-menu-item-linkout-icon-width, var(--spectrum-menu-item-linkout-icon-width)); + block-size: var(--spectrum-menu-item-linkout-icon-height); + inline-size: var(--spectrum-menu-item-linkout-icon-width); } /* Presentational list items for sections and dividers. */ @@ -403,19 +403,19 @@ position: relative; align-items: center; - border-radius: var(--mod-menu-item-corner-radius, var(--spectrum-menu-item-corner-radius)); + border-radius: var(--spectrum-menu-item-corner-radius); box-sizing: border-box; - background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))); + background-color: var(--highcontrast-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)); - line-height: var(--mod-menu-item-label-line-height, var(--spectrum-menu-item-label-line-height)); + line-height: var(--spectrum-menu-item-label-line-height); - min-block-size: var(--mod-menu-item-min-height, var(--spectrum-menu-item-min-height)); + min-block-size: var(--spectrum-menu-item-min-height); - padding-block-start: var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)); - padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)); - padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-block-start: var(--spectrum-menu-item-top-edge-to-text); + padding-block-end: var(--spectrum-menu-item-bottom-edge-to-text); + padding-inline: var(--spectrum-menu-item-label-inline-edge-to-content); margin: var(--spectrum-menu-item-focus-margin); text-decoration: none; @@ -458,15 +458,15 @@ .spectrum-Menu-itemCheckbox { /* @passthrough start */ - --mod-checkbox-top-to-text: 0; - --mod-checkbox-text-to-control: 0; + --spectrum-checkbox-top-to-text: 0; + --spectrum-checkbox-text-to-control: 0; /* @passthrough end */ min-block-size: 0; .spectrum-Checkbox-box { - margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); - margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox)); + margin-inline-end: var(--spectrum-menu-item-text-to-control); + margin-block-start: var(--spectrum-menu-item-top-to-checkbox); margin-block-end: 0; } } @@ -475,7 +475,7 @@ min-block-size: 0; .spectrum-Switch-switch { - margin-block-start: var(--mod-menu-item-top-to-action, var(--spectrum-menu-item-top-to-action)); + margin-block-start: var(--spectrum-menu-item-top-to-action); margin-block-end: 0; } } @@ -497,79 +497,79 @@ &:focus-visible, &.is-focus-visible { - background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-keyboard-focus))); + background-color: var(--highcontrast-menu-item-background-color-focus, var(--spectrum-menu-item-background-color-keyboard-focus)); > .spectrum-Menu-itemLabel { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus))); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-label-content-color-focus)); } > .spectrum-Menu-sectionHeading { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-section-header-color)); } > .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus))); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-description-color-focus)); } > .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus))); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-value-color-focus)); } > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-linkout { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-label-icon-color-focus)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-label-icon-color-focus)); } > .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-collapsible-icon-color)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-collapsible-icon-color)); } > .spectrum-Menu-checkmark { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-checkmark-icon-color-focus)); } } &:hover { - background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))); + background-color: var(--highcontrast-menu-item-background-color-focus, var(--spectrum-menu-item-background-color-hover)); > .spectrum-Menu-itemLabel { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-label-content-color-hover)); } > .spectrum-Menu-sectionHeading { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-section-header-color)); } > .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-description-color-hover)); } > .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-value-color-hover)); } > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-linkout { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-label-icon-color-hover)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-label-icon-color-hover)); } > .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-collapsible-icon-color)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-collapsible-icon-color)); } > .spectrum-Menu-checkmark { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-checkmark-icon-color-hover)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-checkmark-icon-color-hover)); } } &:active { - background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down))); + background-color: var(--highcontrast-menu-item-background-color-focus, var(--spectrum-menu-item-background-color-down)); /* The perceived motion can be a bit jarring given the size/complexity of a menu item */ @media (prefers-reduced-motion: no-preference) { @@ -577,35 +577,35 @@ } > .spectrum-Menu-itemLabel { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down))); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-label-content-color-down)); } > .spectrum-Menu-sectionHeading { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-section-header-color)); } > .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down))); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-description-color-down)); } > .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down))); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-value-color-down)); } > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-linkout { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-label-icon-color-down)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-label-icon-color-down)); } > .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-collapsible-icon-color)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-collapsible-icon-color)); } > .spectrum-Menu-checkmark { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-checkmark-icon-color-down)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-checkmark-icon-color-down)); } } @@ -615,20 +615,20 @@ .spectrum-Menu-itemLabel, .spectrum-Menu-sectionHeading, .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled))); + color: var(--highcontrast-menu-item-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)); } .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); + color: var(--highcontrast-menu-item-color-disabled, var(--spectrum-menu-item-description-color-disabled)); } .spectrum-Menu-itemIcon { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); - fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); + color: var(--highcontrast-menu-item-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)); + fill: var(--highcontrast-menu-item-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)); } .spectrum-Menu-itemThumbnail { - opacity: var(--mod-menu-item-thumbnail-opacity-disabled, var(--spectrum-menu-item-thumbnail-opacity-disabled)); + opacity: var(--spectrum-menu-item-thumbnail-opacity-disabled); } &:hover { @@ -638,16 +638,16 @@ .spectrum-Menu-itemLabel, .spectrum-Menu-sectionHeading, .spectrum-Menu-itemValue { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled))); + color: var(--highcontrast-menu-item-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)); } .spectrum-Menu-itemDescription { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); + color: var(--highcontrast-menu-item-color-disabled, var(--spectrum-menu-item-description-color-disabled)); } .spectrum-Menu-itemIcon { - color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); - fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); + color: var(--highcontrast-menu-item-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)); + fill: var(--highcontrast-menu-item-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)); } } } @@ -665,13 +665,13 @@ .spectrum-Menu-itemLabel { /* @passthrough start -- Switch spacing overrides */ - --mod-switch-control-label-spacing: 0; - --mod-switch-spacing-top-to-label: 0; + --spectrum-switch-control-label-spacing: 0; + --spectrum-switch-spacing-top-to-label: 0; /* @passthrough end */ grid-area: labelArea; - font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default))); + font-size: var(--spectrum-menu-item-label-font-size); + color: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-item-label-content-color-default)); hyphens: auto; overflow-wrap: break-word; @@ -679,30 +679,30 @@ .spectrum-Menu-itemValue { grid-area: valueArea; - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default))); - font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)); + color: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-item-value-color-default)); + font-size: var(--spectrum-menu-item-label-font-size); justify-self: end; - margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); + margin-inline-start: var(--spectrum-menu-item-label-to-value-area-min-spacing); } .spectrum-Menu-itemActions { display: grid; grid-area: actionsArea; - margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); + margin-inline-start: var(--spectrum-menu-item-label-to-value-area-min-spacing); } .spectrum-Menu-sectionHeading { grid-area: sectionHeadingArea; grid-column: 1 / -1; - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + color: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-section-header-color)); display: block; - font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); - font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); - line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); - min-inline-size: var(--mod-menu-section-header-min-width, var(--spectrum-menu-section-header-min-width)); - padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); - padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))); - padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + font-size: var(--spectrum-menu-section-header-font-size); + font-weight: var(--spectrum-menu-section-header-font-weight); + line-height: var(--spectrum-menu-section-header-line-height); + min-inline-size: var(--spectrum-menu-section-header-min-width); + padding-block-start: var(--spectrum-menu-item-top-edge-to-text); + padding-block-end: var(--spectrum-menu-item-bottom-edge-to-text); + padding-inline: var(--spectrum-menu-item-label-inline-edge-to-content); /* Keep alignment with menu items */ margin-inline: var(--spectrum-menu-item-focus-margin); @@ -710,30 +710,30 @@ .spectrum-Menu-sectionDescription { display: block; - color: var(--mod-menu-section-description-color, var(--spectrum-menu-section-description-color)); - font-weight: var(--mod-menu-section-description-font-weight, var(--spectrum-menu-section-description-font-weight)); - line-height: var(--mod-menu-section-description-line-height, var(--spectrum-menu-section-description-line-height)); - font-size: var(--mod-menu-section-description-font-size, var(--spectrum-menu-section-description-font-size)); - margin-block-start: var(--mod-menu-section-header-to-description, var(--spectrum-menu-section-header-to-description)); + color: var(--spectrum-menu-section-description-color); + font-weight: var(--spectrum-menu-section-description-font-weight); + line-height: var(--spectrum-menu-section-description-line-height); + font-size: var(--spectrum-menu-section-description-font-size); + margin-block-start: var(--spectrum-menu-section-header-to-description); } .spectrum-Menu-itemDescription { grid-area: descriptionArea; - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-description-color-default, var(--spectrum-menu-item-description-color-default))); - font-size: var(--mod-menu-item-description-font-size, var(--spectrum-menu-item-description-font-size)); + color: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-item-description-color-default)); + font-size: var(--spectrum-menu-item-description-font-size); hyphens: auto; overflow-wrap: break-word; - margin-block-start: var(--mod-menu-item-label-to-description-spacing, var(--spectrum-menu-item-label-to-description)); - line-height: var(--mod-menu-item-description-line-height, var(--spectrum-menu-item-description-line-height)); + margin-block-start: var(--spectrum-menu-item-label-to-description); + line-height: var(--spectrum-menu-item-description-line-height); } .spectrum-Menu-itemThumbnail { grid-area: iconArea; display: inline-block; - block-size: var(--mod-menu-item-thumbnail-height, var(--spectrum-menu-item-thumbnail-height)); - inline-size: var(--mod-menu-item-thumbnail-width, var(--spectrum-menu-item-thumbnail-width)); - margin-block-start: calc(var(--mod-menu-item-top-to-thumbnail, var(--spectrum-menu-item-top-to-thumbnail)) - var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); - margin-inline-end: var(--mod-menu-item-thumbnail-to-label, var(--spectrum-menu-item-thumbnail-to-label)); + block-size: var(--spectrum-menu-item-thumbnail-height); + inline-size: var(--spectrum-menu-item-thumbnail-width); + margin-block-start: calc(var(--spectrum-menu-item-top-to-thumbnail) - var(--spectrum-menu-item-top-edge-to-text)); + margin-inline-end: var(--spectrum-menu-item-thumbnail-to-label); /* Span two rows to properly align to description when present */ .spectrum-Menu-item:has(> &):has(> .spectrum-Menu-itemDescription) & { @@ -780,8 +780,8 @@ } > .spectrum-Menu-itemIcon { - padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); - padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))); + padding-block-start: var(--spectrum-menu-item-top-edge-to-text); + padding-block-end: var(--spectrum-menu-item-bottom-edge-to-text); } .spectrum-Menu-chevron { @@ -796,7 +796,7 @@ display: none; /* reposition the entire submenu to be flush left with the parent menu item via negative margins */ - margin-inline: calc(var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)) * -1); + margin-inline: calc(var(--spectrum-menu-item-label-inline-edge-to-content) * -1); &.is-open { display: block; @@ -807,7 +807,7 @@ allow item to take up full width of parent, but make the content start where the parent item's label text starts */ - padding-inline-start: var(--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start, var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start)); + padding-inline-start: var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start); } } } @@ -821,45 +821,45 @@ .spectrum-Menu-item--drillIn { .spectrum-Menu-chevron { grid-area: chevronAreaDrillIn; - fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default))); - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default))); - margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); + fill: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-drillin-icon-color-default)); + color: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-drillin-icon-color-default)); + margin-inline-start: var(--spectrum-menu-item-label-to-value-area-min-spacing); margin-inline-end: 0; } &.is-open { - --spectrum-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))); + --spectrum-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color, var(--spectrum-menu-item-background-color-hover)); .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-label-icon-color-hover)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-item-label-icon-color-hover)); } .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-drillin-icon-color-hover)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-drillin-icon-color-hover)); } .spectrum-Menu-checkmark { - fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); - color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); + fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-hover)); + color: var(--highcontrast-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-hover)); } } &:hover .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-drillin-icon-color-hover)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-drillin-icon-color-hover)); } &:focus .spectrum-Menu-chevron, &.is-focused .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-drillin-icon-color-focus)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-drillin-icon-color-focus)); } &:active .spectrum-Menu-chevron { - fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))); - color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))); + fill: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-drillin-icon-color-down)); + color: var(--highcontrast-menu-item-color-focus, var(--spectrum-menu-drillin-icon-color-down)); } } @@ -868,8 +868,8 @@ display: flex; flex-flow: row wrap; align-items: center; - padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); - padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); + padding-inline: var(--spectrum-menu-back-padding-inline-start, 0) var(--spectrum-menu-item-label-inline-edge-to-content); + padding-block: var(--spectrum-menu-back-padding-block-start, 0) var(--spectrum-menu-back-padding-block-end, 0); .spectrum-Menu-sectionHeading { padding: 0; @@ -892,10 +892,10 @@ .spectrum-Menu-backHeading { display: block; - color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))); - font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); - font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); - line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); + color: var(--highcontrast-menu-item-color-default, var(--spectrum-menu-section-header-color)); + font-size: var(--spectrum-menu-section-header-font-size); + font-weight: var(--spectrum-menu-section-header-font-weight); + line-height: var(--spectrum-menu-section-header-line-height); } @media (forced-colors: active) { diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json index 53ce94ace9a..0ff3021350d 100644 --- a/components/meter/dist/metadata.json +++ b/components/meter/dist/metadata.json @@ -10,11 +10,6 @@ ".spectrum-Meter.spectrum-Meter--sizeS", ".spectrum-Meter.spectrum-Meter--sizeXL" ], - "modifiers": [ - "--mod-meter-help-text-to-progress-bar", - "--mod-meter-max-width", - "--mod-meter-min-width" - ], "component": [ "--spectrum-meter-help-text-to-progress-bar", "--spectrum-meter-maximum-width", @@ -28,13 +23,12 @@ "--spectrum-negative-visual-color", "--spectrum-notice-visual-color", "--spectrum-positive-visual-color", + "--spectrum-progressbar-fill-color", + "--spectrum-progressbar-max-size", + "--spectrum-progressbar-min-size", + "--spectrum-progressbar-thickness", "--spectrum-spacing-75" ], - "passthroughs": [ - "--mod-progressbar-fill-color", - "--mod-progressbar-max-size", - "--mod-progressbar-min-size", - "--mod-progressbar-thickness" - ], + "passthroughs": [], "high-contrast": [] } diff --git a/components/meter/index.css b/components/meter/index.css index fb552428a38..73358989c3e 100644 --- a/components/meter/index.css +++ b/components/meter/index.css @@ -13,37 +13,37 @@ /* @passthrough start */ .spectrum-Meter { - --mod-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-maximum-width)); - --mod-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-minimum-width)); + --spectrum-progressbar-max-size: var(--spectrum-meter-maximum-width); + --spectrum-progressbar-min-size: var(--spectrum-meter-minimum-width); --spectrum-meter-help-text-to-progress-bar: var(--spectrum-spacing-75); - --mod-progressbar-thickness: var(--spectrum-meter-thickness-medium); + --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-medium); &.spectrum-Meter--sizeS { - --mod-progressbar-thickness: var(--spectrum-meter-thickness-small); + --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-small); } &.spectrum-Meter--sizeL { - --mod-progressbar-thickness: var(--spectrum-meter-thickness-large); + --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-large); } &.spectrum-Meter--sizeXL { - --mod-progressbar-thickness: var(--spectrum-meter-thickness-extra-large); + --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-extra-large); } &.is-positive { - --mod-progressbar-fill-color: var(--spectrum-positive-visual-color); + --spectrum-progressbar-fill-color: var(--spectrum-positive-visual-color); } &.is-notice { - --mod-progressbar-fill-color: var(--spectrum-notice-visual-color); + --spectrum-progressbar-fill-color: var(--spectrum-notice-visual-color); } &.is-negative { - --mod-progressbar-fill-color: var(--spectrum-negative-visual-color); + --spectrum-progressbar-fill-color: var(--spectrum-negative-visual-color); } .spectrum-ProgressBar-helptext { - margin-block-start: var(--mod-meter-help-text-to-progress-bar, var(--spectrum-meter-help-text-to-progress-bar)); + margin-block-start: var(--spectrum-meter-help-text-to-progress-bar); } } /* @passthrough end */ diff --git a/components/meter/stories/meter.test.js b/components/meter/stories/meter.test.js index 64d3ef98750..44b4367bc9b 100644 --- a/components/meter/stories/meter.test.js +++ b/components/meter/stories/meter.test.js @@ -40,7 +40,7 @@ export const MeterGroup = Variants({ helpText: "Help text message to add more context", }, /* The gradient story below supports linear-gradients used by Express. For use cases that require a custom - linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS. + linear-gradient for any --spectrum-*-{fill} properties, set those custom properties in CSS. */ { testHeading: "Gradient support", diff --git a/components/miller/dist/metadata.json b/components/miller/dist/metadata.json index fbb3770d558..0895d971d93 100644 --- a/components/miller/dist/metadata.json +++ b/components/miller/dist/metadata.json @@ -5,13 +5,7 @@ ".spectrum-MillerColumns-item", ".spectrum-MillerColumns-item:first-child" ], - "modifiers": [ - "--mod-millercolumns-inline-size", - "--mod-millercolumns-margin-inline-end", - "--mod-millercolumns-margin-inline-start", - "--mod-millercolumns-padding" - ], - "component": [], + "component": ["--spectrum-millercolumns-inline-size"], "global": ["--spectrum-spacing-100"], "passthroughs": [], "high-contrast": [] diff --git a/components/miller/index.css b/components/miller/index.css index 6c78ea3ac31..1f3fe7fac10 100644 --- a/components/miller/index.css +++ b/components/miller/index.css @@ -15,21 +15,23 @@ overflow-x: auto; white-space: nowrap; user-select: none; - padding: var(--mod-millercolumns-padding, var(--spectrum-spacing-100)) 0; + padding: var(--spectrum-spacing-100) 0; } .spectrum-MillerColumns-item { + --spectrum-millercolumns-inline-size: 272px; + display: inline-block; - inline-size: var(--mod-millercolumns-inline-size, 272px); + inline-size: var(--spectrum-millercolumns-inline-size); vertical-align: top; outline: none; margin: 0; padding: 0; - margin-inline-end: var(--mod-millercolumns-margin-inline-end, var(--spectrum-spacing-100)); + margin-inline-end: var(--spectrum-spacing-100); overflow: auto; block-size: 100%; &:first-child { - margin-inline-start: var(--mod-millercolumns-margin-inline-start, var(--spectrum-spacing-100)); + margin-inline-start: var(--spectrum-spacing-100); } } diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index c27c44872d7..cdf5978f2aa 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -11,18 +11,6 @@ ".spectrum-Modal-wrapper.is-open", ".spectrum-Modal.is-open" ], - "modifiers": [ - "--mod-modal-background-color", - "--mod-modal-confirm-border-radius", - "--mod-modal-confirm-entry-animation-delay", - "--mod-modal-confirm-entry-animation-duration", - "--mod-modal-confirm-exit-animation-delay", - "--mod-modal-confirm-exit-animation-duration", - "--mod-modal-fullscreen-margin", - "--mod-modal-max-height", - "--mod-modal-max-width", - "--mod-modal-transition-animation-duration" - ], "component": [ "--spectrum-modal-background-color", "--spectrum-modal-confirm-border-radius", diff --git a/components/modal/index.css b/components/modal/index.css index 312c204caea..5df98a24b38 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -12,11 +12,11 @@ */ .spectrum-Modal { - --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500)); - --spectrum-modal-confirm-entry-animation-delay: var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200)); + --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500); + --spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200); - --spectrum-modal-confirm-exit-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)); + --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0); /* Distance between top and bottom of modal and edge of window for fullscreen modal */ --spectrum-modal-fullscreen-margin: var(--spectrum-window-to-edge); @@ -24,10 +24,10 @@ --spectrum-modal-max-height: 90vh; --spectrum-modal-max-width: 90%; - --spectrum-modal-background-color: var(--mod-modal-background-color, transparent); - --spectrum-modal-confirm-border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default)); + --spectrum-modal-background-color: transparent; + --spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-extra-large-default); - --spectrum-modal-transition-animation-duration: var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100)); + --spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100); } /* Used to position the modal */ @@ -82,8 +82,8 @@ z-index: 2; /* Don't be bigger than the screen */ - max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height)); - max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width)); + max-block-size: var(--spectrum-modal-max-height); + max-inline-size: var(--spectrum-modal-max-width); background: var(--spectrum-modal-background-color); border-radius: var(--spectrum-modal-confirm-border-radius); @@ -129,8 +129,8 @@ /** @unofficial */ .spectrum-Modal--fullscreen { position: fixed; - inset-block: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin)); - inset-inline: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin)); + inset-block: var(--spectrum-modal-fullscreen-margin); + inset-inline: var(--spectrum-modal-fullscreen-margin); max-inline-size: none; max-block-size: none; } diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js index 23901ba9aaf..4ca3691f0af 100644 --- a/components/modal/stories/modal.stories.js +++ b/components/modal/stories/modal.stories.js @@ -62,7 +62,7 @@ export default { }; /** - * The default modal does not include a background color itself, other than `transparent`. If implementations are in need of a background color, and one is not supported within the modal's child component (for example, the dialog defines its own background color), `--mod-modal-background-color` may be set on the `.spectrum-Modal` class. + * The default modal does not include a background color itself, other than `transparent`. If implementations are in need of a background color, and one is not supported within the modal's child component (for example, the dialog defines its own background color), `--spectrum-modal-background-color` may be set on the `.spectrum-Modal` class. */ export const Default = ModalGroup.bind({}); Default.args = { diff --git a/components/opacitycheckerboard/dist/metadata.json b/components/opacitycheckerboard/dist/metadata.json index 31fd76317b9..f7f61a6b8cf 100644 --- a/components/opacitycheckerboard/dist/metadata.json +++ b/components/opacitycheckerboard/dist/metadata.json @@ -4,12 +4,6 @@ ".spectrum-OpacityCheckerboard", ".spectrum-OpacityCheckerboard--sizeS" ], - "modifiers": [ - "--mod-opacity-checkerboard-dark", - "--mod-opacity-checkerboard-light", - "--mod-opacity-checkerboard-position", - "--mod-opacity-checkerboard-size" - ], "component": [ "--spectrum-opacity-checkerboard-dark", "--spectrum-opacity-checkerboard-light", diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css index 8f1700294f0..5c4fb7c953f 100644 --- a/components/opacitycheckerboard/index.css +++ b/components/opacitycheckerboard/index.css @@ -12,15 +12,15 @@ */ .spectrum-OpacityCheckerboard { - --spectrum-opacity-checkerboard-dark: var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark)); - --spectrum-opacity-checkerboard-light: var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light)); - --spectrum-opacity-checkerboard-size: var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-medium)); + --spectrum-opacity-checkerboard-dark: var(--spectrum-opacity-checkerboard-square-dark); + --spectrum-opacity-checkerboard-light: var(--spectrum-opacity-checkerboard-square-light); + --spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size-medium); - --spectrum-opacity-checkerboard-position: var(--mod-opacity-checkerboard-position, left top); + --spectrum-opacity-checkerboard-position: left top; } .spectrum-OpacityCheckerboard--sizeS { - --spectrum-opacity-checkerboard-size: var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-small)); + --spectrum-opacity-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size-small); } .spectrum-OpacityCheckerboard { diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index c56f424b990..6f52ee02044 100644 --- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js +++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js @@ -18,7 +18,7 @@ export default { category: "Component", }, control: "text", - description: "Value for --mod-opacity-checkerboard-position. Accepts any valid CSS background-position property value.", + description: "Value for --spectrum-opacity-checkerboard-position. Accepts any valid CSS background-position property value.", }, size: { name: "Size", @@ -69,7 +69,7 @@ CheckerboardPosition.parameters = { docs: { description: { story: - "An example of using the --mod-opacity-checkerboard-position custom property to adjust the position of the checkerboard pattern.", + "An example of using the --spectrum-opacity-checkerboard-position custom property to adjust the position of the checkerboard pattern.", }, }, chromatic: { diff --git a/components/opacitycheckerboard/stories/template.js b/components/opacitycheckerboard/stories/template.js index 733789c5f3a..01b8836b110 100644 --- a/components/opacitycheckerboard/stories/template.js +++ b/components/opacitycheckerboard/stories/template.js @@ -22,7 +22,7 @@ export const Template = ({ ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${ifDefined(styleMap({ - "--mod-opacity-checkerboard-position": backgroundPosition, + "--spectrum-opacity-checkerboard-position": backgroundPosition, ...customStyles, }))} role=${ifDefined(role)} diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json index 4e3ac035552..2d7d3fe8f65 100644 --- a/components/page/dist/metadata.json +++ b/components/page/dist/metadata.json @@ -1,7 +1,6 @@ { "sourceFile": "index.css", "selectors": [":root"], - "modifiers": ["--mod-page-background", "--mod-page-content-tap-highlight"], "component": [ "--spectrum-page-background-color", "--spectrum-page-content-tap-highlight" diff --git a/components/page/index.css b/components/page/index.css index 1e6b3996eaa..cb54cbd008e 100644 --- a/components/page/index.css +++ b/components/page/index.css @@ -12,8 +12,8 @@ */ :root { - --spectrum-page-background-color: var(--mod-page-background, var(--spectrum-gray-75)); - --spectrum-page-content-tap-highlight: var(--mod-page-content-tap-highlight, var(--spectrum-transparent-black-25)); + --spectrum-page-background-color: var(--spectrum-gray-75); + --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-25); background: var(--spectrum-page-background-color); diff --git a/components/pagination/dist/metadata.json b/components/pagination/dist/metadata.json index 6c52ad62e8c..d96eb65d605 100644 --- a/components/pagination/dist/metadata.json +++ b/components/pagination/dist/metadata.json @@ -12,13 +12,6 @@ ".spectrum-Pagination-textfield", ".spectrum-Pagination:dir(rtl)" ], - "modifiers": [ - "--mod-pagination-counter-color", - "--mod-pagination-counter-font-size", - "--mod-pagination-counter-line-height", - "--mod-pagination-page-button-inline-spacing", - "--mod-pagination-textfield-width" - ], "component": [ "--spectrum-pagination-counter-color", "--spectrum-pagination-counter-font-size", @@ -31,8 +24,10 @@ "--spectrum-font-size-100", "--spectrum-line-height-100", "--spectrum-logical-rotation", - "--spectrum-neutral-subdued-content-color-default" + "--spectrum-neutral-subdued-content-color-default", + "--spectrum-textfield-min-width", + "--spectrum-textfield-width" ], - "passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"], + "passthroughs": [], "high-contrast": [] } diff --git a/components/pagination/index.css b/components/pagination/index.css index 1c9a9b7f43c..5549f26fc60 100644 --- a/components/pagination/index.css +++ b/components/pagination/index.css @@ -12,10 +12,10 @@ */ .spectrum-Pagination { - --spectrum-pagination-counter-color: var(--mod-pagination-counter-color, var(--spectrum-neutral-subdued-content-color-default)); - --spectrum-pagination-counter-font-size: var(--mod-pagination-counter-font-size, var(--spectrum-font-size-100)); - --spectrum-pagination-counter-line-height: var(--mod-pagination-counter-line-height, var(--spectrum-line-height-100)); - --spectrum-pagination-counter-inline-spacing: var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-item-inline-spacing)); + --spectrum-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-pagination-counter-font-size: var(--spectrum-font-size-100); + --spectrum-pagination-counter-line-height: var(--spectrum-line-height-100); + --spectrum-pagination-counter-inline-spacing: var(--spectrum-pagination-item-inline-spacing); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); @@ -32,8 +32,8 @@ /* Explicit variant elements */ .spectrum-Pagination-textfield { /* @passthrough start */ - --mod-textfield-width: var(--mod-pagination-textfield-width, var(--spectrum-pagination-textfield-width)); - --mod-textfield-min-width: var(--mod-pagination-textfield-width, var(--spectrum-pagination-textfield-width)); + --spectrum-textfield-width: var(--spectrum-pagination-textfield-width); + --spectrum-textfield-min-width: var(--spectrum-pagination-textfield-width); /* @passthrough end */ } diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 09740dc9174..ec2df3899dd 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -63,67 +63,6 @@ ".spectrum-Picker:lang(ko) .spectrum-Picker-label", ".spectrum-Picker:lang(zh) .spectrum-Picker-label" ], - "modifiers": [ - "--mod-picker-animation-duration", - "--mod-picker-background-color-active", - "--mod-picker-background-color-default", - "--mod-picker-background-color-default-open", - "--mod-picker-background-color-hover", - "--mod-picker-background-color-hover-open", - "--mod-picker-background-color-key-focus", - "--mod-picker-block-size", - "--mod-picker-border-active", - "--mod-picker-border-color-default", - "--mod-picker-border-color-error-active", - "--mod-picker-border-color-error-default", - "--mod-picker-border-color-error-default-open", - "--mod-picker-border-color-error-hover", - "--mod-picker-border-color-error-hover-open", - "--mod-picker-border-color-error-key-focus", - "--mod-picker-border-color-hover", - "--mod-picker-border-color-hover-open", - "--mod-picker-border-color-key-focus", - "--mod-picker-border-default-open", - "--mod-picker-border-radius", - "--mod-picker-border-width", - "--mod-picker-focus-indicator-color", - "--mod-picker-focus-indicator-gap", - "--mod-picker-focus-indicator-thickness", - "--mod-picker-font-color-active", - "--mod-picker-font-color-default", - "--mod-picker-font-color-default-open", - "--mod-picker-font-color-disabled", - "--mod-picker-font-color-hover", - "--mod-picker-font-color-hover-open", - "--mod-picker-font-color-key-focus", - "--mod-picker-font-size", - "--mod-picker-font-weight", - "--mod-picker-icon-color-active", - "--mod-picker-icon-color-default", - "--mod-picker-icon-color-default-open", - "--mod-picker-icon-color-disabled", - "--mod-picker-icon-color-error", - "--mod-picker-icon-color-hover", - "--mod-picker-icon-color-hover-open", - "--mod-picker-icon-color-key-focus", - "--mod-picker-inline-size", - "--mod-picker-line-height", - "--mod-picker-line-height-cjk", - "--mod-picker-min-inline-size", - "--mod-picker-placeholder-font-style", - "--mod-picker-placeholder-font-weight", - "--mod-picker-spacing-bottom-to-text", - "--mod-picker-spacing-edge-to-disclosure-icon", - "--mod-picker-spacing-edge-to-text", - "--mod-picker-spacing-icon-to-disclosure-icon", - "--mod-picker-spacing-label-to-picker", - "--mod-picker-spacing-starting-icon-to-text", - "--mod-picker-spacing-text-to-icon-inline-end", - "--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" - ], "component": [ "--spectrum-picker-animation-duration", "--spectrum-picker-background-color-active", @@ -268,6 +207,7 @@ "--spectrum-neutral-content-color-focus-hover", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-popover-animation-distance", "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", "--spectrum-text-to-visual-100", @@ -275,11 +215,7 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75" ], - "passthroughs": [ - "--mod-button-font-family", - "--mod-button-line-height", - "--mod-popover-animation-distance" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-picker-background-color", "--highcontrast-picker-border-color-default", diff --git a/components/picker/index.css b/components/picker/index.css index dddf46479fb..4d55ed0d54f 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -37,7 +37,7 @@ /* Dimensions */ --spectrum-picker-block-size: var(--spectrum-component-height-100); --spectrum-picker-inline-size: var(--spectrum-field-default-width-medium); - --spectrum-picker-min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size))); + --spectrum-picker-min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--spectrum-picker-block-size)); /* Border */ --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-medium); @@ -102,7 +102,7 @@ /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */ --spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-medium); - --mod-popover-animation-distance: var(--spectrum-picker-popover-animation-distance); + --spectrum-popover-animation-distance: var(--spectrum-picker-popover-animation-distance); } .spectrum-Picker--sizeS { @@ -201,27 +201,27 @@ -webkit-appearance: button; max-inline-size: 100%; - min-inline-size: var(--mod-picker-min-inline-size, var(--spectrum-picker-min-inline-size)); - inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size)); - block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size)); + min-inline-size: var(--spectrum-picker-min-inline-size); + inline-size: var(--spectrum-picker-inline-size); + block-size: var(--spectrum-picker-block-size); - margin-block-start: var(--mod-picker-spacing-label-to-picker, var(--spectrum-picker-spacing-label-to-picker)); + margin-block-start: var(--spectrum-picker-spacing-label-to-picker); padding-block: 0; - padding-inline-start: var(--mod-picker-spacing-edge-to-text, var(--spectrum-picker-spacing-edge-to-text)); - padding-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon, var(--spectrum-picker-spacing-edge-to-disclosure-icon)); + padding-inline-start: var(--spectrum-picker-spacing-edge-to-text); + padding-inline-end: var(--spectrum-picker-spacing-edge-to-disclosure-icon); - border-width: var(--mod-picker-border-width, var(--spectrum-picker-border-width)); + border-width: var(--spectrum-picker-border-width); border-style: solid; - border-radius: var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)); + border-radius: var(--spectrum-picker-border-radius); transition: - background-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), - box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), - border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; + background-color var(--spectrum-picker-animation-duration), + box-shadow var(--spectrum-picker-animation-duration), + border-color var(--spectrum-picker-animation-duration) ease-in-out; - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-default)); + background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-default)); + border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-default)); /* Fix Firefox */ &::-moz-focus-inner { @@ -244,18 +244,18 @@ } &:hover { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover, var(--spectrum-picker-background-color-hover))); - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover, var(--spectrum-picker-border-color-hover))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-hover)); + background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-hover)); + border-color: var(--highcontrast-picker-border-color-hover, var(--spectrum-picker-border-color-hover)); .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover, var(--spectrum-picker-icon-color-hover))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-hover)); } } &:active { - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-active, var(--spectrum-picker-background-color-active))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-active, var(--spectrum-picker-border-color-active))); + background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-active)); + border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-active)); transform: perspective(max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down))) translateZ(var(--spectrum-component-size-difference-down)); /* Focus indicator */ @@ -264,20 +264,20 @@ } .spectrum-Picker-label.is-placeholder { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-active)); } } &:focus-visible, &.is-keyboardFocused { outline: none; - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-key-focus, var(--spectrum-picker-background-color-key-focus))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-key-focus, var(--spectrum-picker-border-color-key-focus))); - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus))); + background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-key-focus)); + border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-key-focus)); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-key-focus)); /* Focus indicator */ &::after { - border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); + border-color: var(--highcontrast-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color)); } /* Focus indicator */ @@ -285,77 +285,77 @@ pointer-events: none; content: ""; position: absolute; - block-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); + block-size: calc(100% + (var(--spectrum-picker-focus-indicator-gap) * 2) + (var(--spectrum-picker-border-width) * 2)); - inline-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); + inline-size: calc(100% + (var(--spectrum-picker-focus-indicator-gap) * 2) + (var(--spectrum-picker-border-width) * 2)); - margin-block-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); + margin-block-start: calc((var(--spectrum-picker-focus-indicator-gap) + var(--spectrum-picker-focus-indicator-thickness) + var(--spectrum-picker-border-width)) * -1); - margin-inline-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); + margin-inline-start: calc((var(--spectrum-picker-focus-indicator-gap) + var(--spectrum-picker-focus-indicator-thickness) + var(--spectrum-picker-border-width)) * -1); inset-inline: 0; inset-block: 0; border-style: solid; - border-width: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)); + border-width: var(--spectrum-picker-focus-indicator-thickness); border-color: transparent; - border-radius: calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + border-radius: calc(var(--spectrum-picker-border-radius) + var(--spectrum-picker-focus-indicator-gap) + var(--spectrum-picker-border-width)); } .spectrum-Picker-label.is-placeholder { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-key-focus)); } .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-key-focus, var(--spectrum-picker-icon-color-key-focus))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-key-focus)); } } &.is-open:not(:disabled, .is-disabled, .is-loading) { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open))); - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-default-open)); + background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-default-open)); + border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-default-open)); &:hover { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover-open, var(--spectrum-picker-font-color-hover-open))); - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover-open, var(--spectrum-picker-background-color-hover-open))); - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover-open, var(--spectrum-picker-border-color-hover-open))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-hover-open)); + background-color: var(--highcontrast-picker-background-color, var(--spectrum-picker-background-color-hover-open)); + border-color: var(--highcontrast-picker-border-color-hover, var(--spectrum-picker-border-color-hover-open)); .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover-open, var(--spectrum-picker-icon-color-hover-open))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-hover-open)); } } .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default-open, var(--spectrum-picker-icon-color-default-open))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-default-open)); } } &.is-invalid:not(:disabled, .is-disabled) { - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default, var(--spectrum-picker-border-color-error-default))); + border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-error-default)); .spectrum-Picker-validationIcon { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-error, var(--spectrum-picker-icon-color-error))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-error)); } &:hover { - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover, var(--spectrum-picker-border-color-error-hover))); + border-color: var(--highcontrast-picker-border-color-hover, var(--spectrum-picker-border-color-error-hover)); } &:active { - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-active, var(--spectrum-picker-border-color-error-active))); + border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-error-active)); } &.is-open { - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default-open, var(--spectrum-picker-border-color-error-default-open))); + border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-error-default-open)); } &.is-open:hover { - border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open))); + border-color: var(--highcontrast-picker-border-color-hover, var(--spectrum-picker-border-color-error-hover-open)); } &:focus-visible, &.is-keyboardFocused { - border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))); + border-color: var(--highcontrast-picker-border-color-default, var(--spectrum-picker-border-color-error-key-focus)); } } } @@ -363,7 +363,7 @@ /* Optional workflow icon that appears before the text within the picker. */ .spectrum-Picker .spectrum-Picker-icon { flex-shrink: 0; - margin-inline-end: var(--mod-picker-spacing-starting-icon-to-text, var(--spectrum-picker-spacing-starting-icon-to-text)); + margin-inline-end: var(--spectrum-picker-spacing-starting-icon-to-text); } /* Value: the text within the Picker (current value or placeholder) */ @@ -372,29 +372,29 @@ white-space: nowrap; overflow: hidden; - font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size)); - line-height: var(--mod-picker-line-height, var(--spectrum-picker-line-height)); - font-weight: var(--mod-picker-font-weight, var(--spectrum-picker-font-weight)); + font-size: var(--spectrum-picker-font-size); + line-height: var(--spectrum-picker-line-height); + font-weight: var(--spectrum-picker-font-weight); text-overflow: ellipsis; text-align: start; - margin-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text)); - margin-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); - margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--spectrum-picker-spacing-text-to-icon-inline-end)); + margin-block-start: var(--spectrum-picker-spacing-top-to-text); + margin-block-end: calc(var(--spectrum-picker-spacing-bottom-to-text) - var(--spectrum-picker-border-width)); + margin-inline-end: var(--spectrum-picker-spacing-text-to-icon-inline-end); &.is-placeholder { - font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight)); - font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style)); - transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); + font-weight: var(--spectrum-picker-font-weight); + font-style: var(--spectrum-picker-placeholder-font-style); + transition: color var(--spectrum-picker-animation-duration) ease-in-out; + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-default)); &:hover { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-hover)); } &:active { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-font-color-active)); } } @@ -402,7 +402,7 @@ .spectrum-Picker:lang(ja) &, .spectrum-Picker:lang(zh) &, .spectrum-Picker:lang(ko) & { - line-height: var(--mod-picker-line-height-cjk, var(--spectrum-picker-line-height-cjk)); + line-height: var(--spectrum-picker-line-height-cjk); } } @@ -412,26 +412,26 @@ position: relative; vertical-align: top; flex-shrink: 0; - margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon)); - transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out; - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default))); + margin-block: var(--spectrum-picker-spacing-top-to-disclosure-icon); + transition: color var(--spectrum-picker-animation-duration) ease-out; + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-default)); &:active { - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-active, var(--spectrum-picker-icon-color-active))); + color: var(--highcontrast-picker-content-color-default, var(--spectrum-picker-icon-color-active)); } } .spectrum-Picker-validationIcon { - margin-block-start: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); - margin-block-end: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); - margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); + margin-block-start: calc(var(--spectrum-picker-spacing-top-to-alert-icon) - var(--spectrum-picker-border-width)); + margin-block-end: calc(var(--spectrum-picker-spacing-top-to-alert-icon) - var(--spectrum-picker-border-width)); + margin-inline-end: var(--spectrum-picker-spacing-icon-to-disclosure-icon); flex-shrink: 0; } .spectrum-Picker .spectrum-ProgressCircle { - margin-block-start: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); - margin-block-end: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); - margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); + margin-block-start: calc(var(--spectrum-picker-spacing-top-to-progress-circle) - var(--spectrum-picker-border-width)); + margin-block-end: calc(var(--spectrum-picker-spacing-top-to-progress-circle) - var(--spectrum-picker-border-width)); + margin-inline-end: var(--spectrum-picker-spacing-icon-to-disclosure-icon); flex-shrink: 0; } @@ -441,23 +441,23 @@ } /* Disabled and loading states: - Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves - all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */ + Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves + all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */ .spectrum-Picker-button:disabled, .spectrum-Picker-button.is-disabled { cursor: default; transform: none; border-color: var(--highcontrast-picker-border-color-disabled, transparent); - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); + color: var(--highcontrast-picker-content-color-disabled, var(--spectrum-picker-font-color-disabled)); .spectrum-Picker-icon, .spectrum-Picker-menuIcon, .spectrum-Picker-validationIcon { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); + color: var(--highcontrast-picker-content-color-disabled, var(--spectrum-picker-icon-color-disabled)); } .spectrum-Picker-label.is-placeholder { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); + color: var(--highcontrast-picker-content-color-disabled, var(--spectrum-picker-font-color-disabled)); } } @@ -465,7 +465,7 @@ transform: none; .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); + color: var(--highcontrast-picker-content-color-disabled, var(--spectrum-picker-icon-color-disabled)); } } diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index 3e3025029f7..649af4c553a 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -129,7 +129,7 @@ export const Template = ({ customPopoverStyles = { // Demonstrate popover at 100% of the width of the Picker. minInlineSize: "100%", - "--mod-menu-inline-size": "100%", + "--spectrum-menu-inline-size": "100%", // Helps ensure that Popover appears below the Picker, with side labels layout. display: "block", }, diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index 4b3d33be65e..0683c954396 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -24,30 +24,6 @@ ".spectrum-PickerButton:not(:disabled):focus-visible", ".spectrum-PickerButton:not(:disabled):hover" ], - "modifiers": [ - "--mod-picker-button-background-animation-duration", - "--mod-picker-button-background-color", - "--mod-picker-button-background-color-disabled", - "--mod-picker-button-background-color-down", - "--mod-picker-button-background-color-down-disabled", - "--mod-picker-button-background-color-down-quiet", - "--mod-picker-button-background-color-hover", - "--mod-picker-button-background-color-hover-disabled", - "--mod-picker-button-background-color-hover-quiet", - "--mod-picker-button-background-color-quiet", - "--mod-picker-button-background-color-quiet-disabled", - "--mod-picker-button-border-radius", - "--mod-picker-button-fill-padding", - "--mod-picker-button-height", - "--mod-picker-button-icon-color", - "--mod-picker-button-icon-color-disabled", - "--mod-picker-button-icon-color-down", - "--mod-picker-button-icon-color-down-disabled", - "--mod-picker-button-icon-color-hover", - "--mod-picker-button-icon-color-hover-disabled", - "--mod-picker-button-padding", - "--mod-picker-button-width" - ], "component": [ "--spectrum-picker-button-background-animation-duration", "--spectrum-picker-button-background-color", diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index fe472764fa2..a03cb62d595 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -32,33 +32,33 @@ --spectrum-picker-button-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); &:disabled { - --mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color)); - --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); - --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); + --spectrum-picker-button-background-color: var(--spectrum-disabled-background-color); + --spectrum-picker-button-background-color-hover: var(--spectrum-disabled-background-color); + --spectrum-picker-button-background-color-down: var(--spectrum-disabled-background-color); - --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color)); - --mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); - --mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); + --spectrum-picker-button-icon-color: var(--spectrum-disabled-content-color); + --spectrum-picker-button-icon-color-hover: var(--spectrum-disabled-content-color); + --spectrum-picker-button-icon-color-down: var(--spectrum-disabled-content-color); } &:hover { - --mod-picker-button-background-color: var(--mod-picker-button-background-color-hover, var(--spectrum-picker-button-background-color-hover)); - --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-hover, var(--spectrum-picker-button-icon-color-hover)); + --spectrum-picker-button-background-color: var(--spectrum-picker-button-background-color-hover); + --spectrum-picker-button-icon-color: var(--spectrum-picker-button-icon-color-hover); } &:active, &.is-open { - --mod-picker-button-background-color: var(--mod-picker-button-background-color-down, var(--spectrum-picker-button-background-color-down)); - --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-down, var(--spectrum-picker-button-icon-color-down)); + --spectrum-picker-button-background-color: var(--spectrum-picker-button-background-color-down); + --spectrum-picker-button-icon-color: var(--spectrum-picker-button-icon-color-down); } &.spectrum-PickerButton--quiet { - --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent); - --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent); - --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent); + --spectrum-picker-button-background-color: transparent; + --spectrum-picker-button-background-color-hover: transparent; + --spectrum-picker-button-background-color-down: transparent; &:disabled { - --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet-disabled, transparent); + --spectrum-picker-button-background-color: transparent; } } @@ -96,10 +96,10 @@ justify-content: center; align-items: center; - block-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height)); - inline-size: var(--mod-picker-button-width, var(--spectrum-picker-button-width)); + block-size: var(--spectrum-picker-button-height); + inline-size: var(--spectrum-picker-button-width); - padding: var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)); + padding: var(--spectrum-picker-button-padding); &:disabled { cursor: auto; @@ -118,10 +118,10 @@ block-size: 100%; inline-size: 100%; - background-color: var(--highcontrast-picker-button-background-color, var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color))); - border-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); + background-color: var(--highcontrast-picker-button-background-color, var(--spectrum-picker-button-background-color)); + border-radius: var(--spectrum-picker-button-border-radius); - padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding))); + padding: calc(var(--spectrum-picker-button-fill-padding) - var(--spectrum-picker-button-padding)); display: flex; align-items: center; @@ -129,7 +129,7 @@ box-sizing: border-box; - transition: background-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out; + transition: background-color var(--spectrum-picker-button-background-animation-duration) ease-in-out; .spectrum-PickerButton--workflowicon & { /* don't use padding tokens, rely on flexbox to center icons */ @@ -140,7 +140,7 @@ .spectrum-PickerButton-icon { /* don't be small, ever */ flex-shrink: 0; - color: var(--highcontrast-picker-button-icon-color, var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color))); + color: var(--highcontrast-picker-button-icon-color, var(--spectrum-picker-button-icon-color)); } @media (forced-colors: active) { diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js index dbd1e670aaa..c635a7453f8 100644 --- a/components/pickerbutton/stories/pickerbutton.stories.js +++ b/components/pickerbutton/stories/pickerbutton.stories.js @@ -153,7 +153,7 @@ Open.parameters = { }; /** - * These examples use custom icons. The icon on the left is a custom UI icon, and the icon on the right is a custom workflow icon. The size of the icon can also be modified by using the `--mod-icon-size` custom property. Here, `--mod-icon-size` is set to `14px`. + * These examples use custom icons. The icon on the left is a custom UI icon, and the icon on the right is a custom workflow icon. The size of the icon can also be modified by using the `--spectrum-icon-size` custom property. Here, `--spectrum-icon-size` is set to `14px`. * * By default, the picker button supports a UI icon. If using a workflow icon, please apply the `.spectrum-PickerButton--workflowicon` class to the picker button to best support the use of a workflow icon. */ @@ -162,7 +162,7 @@ CustomIcon.args = { uiIconName: "ArrowDown100", workflowIconName: "Calendar", customStyles: { - "--mod-icon-size": "14px", + "--spectrum-icon-size": "14px", } }; CustomIcon.storyName = "With custom icon"; diff --git a/components/pickerbutton/stories/pickerbutton.test.js b/components/pickerbutton/stories/pickerbutton.test.js index cec58a01e37..7ee6337855f 100644 --- a/components/pickerbutton/stories/pickerbutton.test.js +++ b/components/pickerbutton/stories/pickerbutton.test.js @@ -17,7 +17,7 @@ export const PickerGroup = Variants({ iconName: "Calendar", iconSet: "workflow", customStyles: { - "--mod-icon-size": "var(--spectrum-workflow-icon-size-50)", + "--spectrum-icon-size": "var(--spectrum-workflow-icon-size-50)", }, } ], diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json index f78a1db58ae..5d5cb869742 100644 --- a/components/popover/dist/metadata.json +++ b/components/popover/dist/metadata.json @@ -85,25 +85,6 @@ ".spectrum-Popover.spectrum-Popover--withTip", ".spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle" ], - "modifiers": [ - "--mod-overlay-animation-duration", - "--mod-overlay-animation-duration-opened", - "--mod-popover-animation-distance", - "--mod-popover-background-color", - "--mod-popover-border-color", - "--mod-popover-border-width", - "--mod-popover-box-shadow", - "--mod-popover-content-area-spacing", - "--mod-popover-corner-radius", - "--mod-popover-drop-shadow-blur", - "--mod-popover-drop-shadow-color", - "--mod-popover-drop-shadow-x", - "--mod-popover-drop-shadow-y", - "--mod-popover-filter", - "--mod-popover-pointer-edge-spacing", - "--mod-popover-pointer-height", - "--mod-popover-pointer-width" - ], "component": [ "--spectrum-popover-animation-distance", "--spectrum-popover-background-color", diff --git a/components/popover/index.css b/components/popover/index.css index 38556e2b628..91d727ba100 100644 --- a/components/popover/index.css +++ b/components/popover/index.css @@ -49,10 +49,10 @@ .spectrum-Popover { /* filter is for popovers with a tip. we divide the blur by 2 to match the box-shadow rendering better. */ - --spectrum-popover-filter: drop-shadow(var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) calc(var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) / 2) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color))); + --spectrum-popover-filter: drop-shadow(var(--spectrum-popover-drop-shadow-x) var(--spectrum-popover-drop-shadow-y) calc(var(--spectrum-popover-drop-shadow-blur) / 2) var(--spectrum-popover-drop-shadow-color)); /* box-shadow is for popovers without a tip. */ - --spectrum-popover-box-shadow: var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color)); + --spectrum-popover-box-shadow: var(--spectrum-popover-drop-shadow-x) var(--spectrum-popover-drop-shadow-y) var(--spectrum-popover-drop-shadow-blur) var(--spectrum-popover-drop-shadow-color); pointer-events: none; visibility: hidden; @@ -67,25 +67,25 @@ outline: none; /* Hide focus outline */ - padding: var(--mod-popover-content-area-spacing, var(--spectrum-popover-content-area-spacing)); + padding: var(--spectrum-popover-content-area-spacing); display: inline-flex; flex-direction: column; border-style: solid; - border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius)); - border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency))); + border-radius: var(--spectrum-popover-corner-radius); + border-color: var(--highcontrast-popover-border-color, var(--spectrum-popover-border-color-with-transparency)); - border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); + border-width: var(--spectrum-popover-border-width); - background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color)); - box-shadow: var(--mod-popover-box-shadow, var(--spectrum-popover-box-shadow)); + background-color: var(--spectrum-popover-background-color); + box-shadow: var(--spectrum-popover-box-shadow); /* has tip triangle */ &.spectrum-Popover--withTip { /* Prevents clipping of the tip */ overflow: visible; - filter: var(--mod-popover-filter, var(--spectrum-popover-filter)); + filter: var(--spectrum-popover-filter); box-shadow: none; .spectrum-Popover-tip { @@ -93,9 +93,9 @@ .spectrum-Popover-tip-triangle { stroke-linecap: square; stroke-linejoin: miter; - fill: var(--mod-popover-background-color, var(--spectrum-popover-background-color)); - stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency))); - stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); + fill: var(--spectrum-popover-background-color); + stroke: var(--highcontrast-popover-border-color, var(--spectrum-popover-border-color-with-transparency)); + stroke-width: var(--spectrum-popover-border-width); } } } @@ -121,13 +121,13 @@ /* spacing to include tip in calculation of offset from source */ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ - margin-block-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-block-end: calc(var(--spectrum-popover-pointer-height) - var(--spectrum-popover-border-width)); } /* popover animates upward ⬆ */ &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateY(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))) translateZ(0); + transform: translateY(calc(-1 * var(--spectrum-popover-animation-distance))) translateZ(0); } } @@ -140,13 +140,13 @@ /* spacing to include tip in calculation of offset from source */ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ - margin-block-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-block-start: calc(var(--spectrum-popover-pointer-height) - var(--spectrum-popover-border-width)); } /* popover animates downward ⬇ */ &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateY(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0); + transform: translateY(var(--spectrum-popover-animation-distance)) translateZ(0); } } @@ -158,13 +158,13 @@ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ /* stylelint-disable-next-line csstools/use-logical -- intentional, right stays on the same side even for RTL */ - margin-left: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-left: calc(var(--spectrum-popover-pointer-height) - var(--spectrum-popover-border-width)); } /* popover animates towards right ⮕ */ &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0); + transform: translateX(var(--spectrum-popover-animation-distance)) translateZ(0); } } @@ -176,13 +176,13 @@ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ /* stylelint-disable-next-line csstools/use-logical -- intentional, left stays on the same side even for RTL */ - margin-right: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-right: calc(var(--spectrum-popover-pointer-height) - var(--spectrum-popover-border-width)); } /* popover animates towards left ⬅ */ &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))) translateZ(0); + transform: translateX(calc(-1 * var(--spectrum-popover-animation-distance))) translateZ(0); } } @@ -193,18 +193,18 @@ /* spacing to include tip in calculation of offset from source */ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ - margin-inline-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-inline-end: calc(var(--spectrum-popover-pointer-height) - var(--spectrum-popover-border-width)); } /* LTR read, popover animates towards left ⬅ */ &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))) translateZ(0); + transform: translateX(calc(-1 * var(--spectrum-popover-animation-distance))) translateZ(0); } /* RTL read, popover animates towards right ⮕ */ &.is-open:dir(rtl) { - transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0); + transform: translateX(var(--spectrum-popover-animation-distance)) translateZ(0); } } @@ -215,20 +215,20 @@ /* spacing to include tip in calculation of offset from source */ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ - margin-inline-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-inline-start: calc(var(--spectrum-popover-pointer-height) - var(--spectrum-popover-border-width)); } /* LTR read, popover animates towards right ⮕ */ &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0); + transform: translateX(var(--spectrum-popover-animation-distance)) translateZ(0); } /* RTL read, popover animates towards left ⬅ */ &:dir(rtl) { &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))) translateZ(0); + transform: translateX(calc(-1 * var(--spectrum-popover-animation-distance))) translateZ(0); } } } @@ -248,8 +248,8 @@ &.spectrum-Popover--bottom-start, &.spectrum-Popover--bottom-end { .spectrum-Popover-tip { - inline-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)); - block-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)); + inline-size: var(--spectrum-popover-pointer-width); + block-size: var(--spectrum-popover-pointer-height); position: absolute; inset-block-start: 100%; inset-inline: 0; @@ -264,7 +264,7 @@ &.spectrum-Popover--top-left { .spectrum-Popover-tip { /* stylelint-disable-next-line csstools/use-logical -- intentional, left stays on the same side even for RTL */ - left: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + left: var(--spectrum-popover-pointer-edge-spacing); right: auto; } } @@ -274,21 +274,21 @@ .spectrum-Popover-tip { /* stylelint-disable-next-line csstools/use-logical -- intentional, right stays on the same side even for RTL */ left: auto; - right: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + right: var(--spectrum-popover-pointer-edge-spacing); } } /* logical property - popover is above, source and tip are at start, tip pointing down ▽ */ &.spectrum-Popover--top-start { .spectrum-Popover-tip { - margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + margin-inline-start: var(--spectrum-popover-pointer-edge-spacing); } } /* logical property - popover is above, source and tip are at end, tip pointing down ▽ */ &.spectrum-Popover--top-end { .spectrum-Popover-tip { - margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + margin-inline-end: var(--spectrum-popover-pointer-edge-spacing); } } @@ -310,7 +310,7 @@ &.spectrum-Popover--bottom-left { .spectrum-Popover-tip { /* stylelint-disable-next-line csstools/use-logical -- intentional, left stays on the same side even for RTL */ - left: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + left: var(--spectrum-popover-pointer-edge-spacing); right: auto; } } @@ -320,21 +320,21 @@ .spectrum-Popover-tip { /* stylelint-disable-next-line csstools/use-logical -- intentional, right stays on the same side even for RTL */ left: auto; - right: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + right: var(--spectrum-popover-pointer-edge-spacing); } } /* logical property - popover is below, source is at start, tip pointing up △ */ &.spectrum-Popover--bottom-start { .spectrum-Popover-tip { - margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + margin-inline-start: var(--spectrum-popover-pointer-edge-spacing); } } /* logical property - popover is below, source is at end, tip pointing up △ */ &.spectrum-Popover--bottom-end { .spectrum-Popover-tip { - margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + margin-inline-end: var(--spectrum-popover-pointer-edge-spacing); } } @@ -353,8 +353,8 @@ &.spectrum-Popover--end-bottom { .spectrum-Popover-tip { /* swap height and width for vertical triangle */ - inline-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)); - block-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)); + inline-size: var(--spectrum-popover-pointer-height); + block-size: var(--spectrum-popover-pointer-width); inset-block: 0; } } @@ -390,7 +390,7 @@ &.spectrum-Popover--start-top, &.spectrum-Popover--end-top { .spectrum-Popover-tip { - inset-block: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; + inset-block: var(--spectrum-popover-pointer-edge-spacing) auto; } } @@ -400,7 +400,7 @@ &.spectrum-Popover--start-bottom, &.spectrum-Popover--end-bottom { .spectrum-Popover-tip { - inset-block: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + inset-block: auto var(--spectrum-popover-pointer-edge-spacing); } } diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js index 0640d69bb4f..52047a70800 100644 --- a/components/popover/stories/popover.stories.js +++ b/components/popover/stories/popover.stories.js @@ -148,8 +148,8 @@ Nested.args = { ...passthroughs, }, context), customStyles: { - "--mod-popover-width": "0px", - "--mod-popover-height": "0px", + "--spectrum-popover-width-override": "0px", + "--spectrum-popover-height-override": "0px", }, content: [ (passthroughs, context) => Menu({ diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js index 6cfc12e6c93..e06d8fc1ab4 100644 --- a/components/popover/stories/template.js +++ b/components/popover/stories/template.js @@ -21,7 +21,7 @@ export const Template = ({ if (isOpen) { if (["top", "bottom"].some((e) => position.startsWith(e))) { customWrapperStyles["min-inline-size"] = "var(--spectrum-popover-width)"; - customWrapperStyles["min-block-size"] = "calc(var(--spectrum-popover-height) + var(--spectrum-popover-trigger-height, 0px) + var(--mod-popover-wrapper-spacing, var(--spectrum-spacing-100) * 2))"; + customWrapperStyles["min-block-size"] = "calc(var(--spectrum-popover-height) + var(--spectrum-popover-trigger-height, 0px) + var(--spectrum-popover-wrapper-spacing, var(--spectrum-spacing-100) * 2))"; } else { customWrapperStyles["min-inline-size"] = "calc(var(--spectrum-popover-width) + var(--spectrum-popover-trigger-width, 0px))"; @@ -143,8 +143,8 @@ export const Popover = ({ // Write the actual height and width of the popover to the CSS custom properties if (isPopover) { - if (size.width) entry.target.parentElement.style.setProperty("--spectrum-popover-width", `var(--mod-popover-width, ${parseInt(size.width, 10)}px)`); - if (size.height) entry.target.parentElement.style.setProperty("--spectrum-popover-height", `var(--mod-popover-height, ${parseInt(size.height, 10)}px)`); + if (size.width) entry.target.parentElement.style.setProperty("--spectrum-popover-width", `var(--spectrum-popover-width-override, ${parseInt(size.width, 10)}px)`); + if (size.height) entry.target.parentElement.style.setProperty("--spectrum-popover-height", `var(--spectrum-popover-height-override, ${parseInt(size.height, 10)}px)`); } else { if (size.width) entry.target.parentElement.style.setProperty("--spectrum-popover-trigger-width", `${parseInt(size.width, 10)}px`); diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 3caa917a2a5..343c3036651 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -31,29 +31,6 @@ ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track", ".spectrum-ProgressBar-track" ], - "modifiers": [ - "--mod-progressbar-animation-duration-indeterminate", - "--mod-progressbar-animation-ease-in-out-indeterminate", - "--mod-progressbar-fill-color", - "--mod-progressbar-fill-color-black", - "--mod-progressbar-fill-color-white", - "--mod-progressbar-fill-size-indeterminate", - "--mod-progressbar-font-size", - "--mod-progressbar-inline-size", - "--mod-progressbar-label-and-value-black", - "--mod-progressbar-label-and-value-white", - "--mod-progressbar-line-height", - "--mod-progressbar-line-height-cjk", - "--mod-progressbar-max-size", - "--mod-progressbar-min-size", - "--mod-progressbar-spacing-label-to-progressbar", - "--mod-progressbar-spacing-label-to-text", - "--mod-progressbar-spacing-top-to-text", - "--mod-progressbar-text-color", - "--mod-progressbar-thickness", - "--mod-progressbar-track-color", - "--mod-spacing-progressbar-label-to-text" - ], "component": [ "--spectrum-progress-bar-maximum-width", "--spectrum-progress-bar-minimum-width", diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 637340f999a..94626bc9adc 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -78,26 +78,26 @@ vertical-align: top; overflow-wrap: break-word; - inline-size: var(--mod-progressbar-inline-size, var(--spectrum-progressbar-inline-size)); - max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size)); - min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size)); + inline-size: var(--spectrum-progressbar-inline-size); + max-inline-size: var(--spectrum-progressbar-max-size); + min-inline-size: var(--spectrum-progressbar-min-size); /* Label and Percentage */ .spectrum-ProgressBar-label, .spectrum-ProgressBar-percentage { text-align: start; - margin-block-start: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-spacing-top-to-text)); - margin-block-end: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-progressbar-spacing-label-to-progressbar)); - line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height)); - font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size)); + margin-block-start: var(--spectrum-progressbar-spacing-top-to-text); + margin-block-end: var(--spectrum-progressbar-spacing-label-to-progressbar); + line-height: var(--spectrum-progressbar-line-height); + font-size: var(--spectrum-progressbar-font-size); &:lang(ja), &:lang(zh), &:lang(ko) { - line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk)); + line-height: var(--spectrum-progressbar-line-height-cjk); } - color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color)); + color: var(--spectrum-progressbar-text-color); } /* Label */ @@ -108,7 +108,7 @@ /* Percentage */ .spectrum-ProgressBar-percentage { align-self: flex-start; - margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); + margin-inline-start: var(--spectrum-progressbar-spacing-label-to-text); word-break: normal; } @@ -117,25 +117,25 @@ /* Visually apply border radius to child elements */ overflow: hidden; inline-size: 100%; - block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); + block-size: var(--spectrum-progressbar-thickness); border-radius: var(--spectrum-progressbar-corner-radius); - background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); + background: var(--highcontrast-progressbar-track-color, var(--spectrum-progressbar-track-color)); } .spectrum-ProgressBar-fill { border: none; - block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); + block-size: var(--spectrum-progressbar-thickness); transition: width 1s; - background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); + background: var(--highcontrast-progressbar-fill-color, var(--spectrum-progressbar-fill-color)); border-radius: var(--spectrum-progressbar-corner-radius); } } .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill { - inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)); + inline-size: var(--spectrum-progressbar-fill-size-indeterminate); position: relative; - animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate)); + animation-timing-function: var(--spectrum-progressbar-animation-ease-in-out-indeterminate); will-change: transform; } @@ -148,12 +148,12 @@ word-break: normal; .spectrum-ProgressBar-track { - flex: 1 1 var(--mod-progressbar-inline-size, var(--spectrum-progressbar-inline-size)); + flex: 1 1 var(--spectrum-progressbar-inline-size); } .spectrum-ProgressBar-label { flex-grow: 0; - margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); + margin-inline-end: var(--spectrum-progressbar-spacing-label-to-text); margin-block-end: 0; margin-block-start: 0; } @@ -161,7 +161,7 @@ .spectrum-ProgressBar-percentage { order: 3; text-align: end; - margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); + margin-inline-start: var(--spectrum-progressbar-spacing-label-to-text); margin-block-end: 0; margin-block-start: 0; align-self: center; @@ -171,13 +171,13 @@ /* Static White */ .spectrum-ProgressBar--staticWhite { .spectrum-ProgressBar-fill { - color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); - background: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white))); + color: var(--spectrum-progressbar-label-and-value-white); + background: var(--highcontrast-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)); } .spectrum-ProgressBar-label, .spectrum-ProgressBar-percentage { - color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); + color: var(--spectrum-progressbar-label-and-value-white); } .spectrum-ProgressBar-track { @@ -188,13 +188,13 @@ /* Static Black -- Only used for the meter component in S2 */ .spectrum-ProgressBar--staticBlack { .spectrum-ProgressBar-fill { - color: var(--mod-progressbar-label-and-value-black, var(--spectrum-progressbar-label-and-value-black)); - background: var(--highcontrast-progressbar-fill-color-black, var(--mod-progressbar-fill-color-black, var(--spectrum-progressbar-fill-color-black))); + color: var(--spectrum-progressbar-label-and-value-black); + background: var(--highcontrast-progressbar-fill-color-black, var(--spectrum-progressbar-fill-color-black)); } .spectrum-ProgressBar-label, .spectrum-ProgressBar-percentage { - color: var(--mod-progressbar-label-and-value-black, var(--spectrum-progressbar-label-and-value-black)); + color: var(--spectrum-progressbar-label-and-value-black); } .spectrum-ProgressBar-track { @@ -204,11 +204,11 @@ /* Animations */ .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill { - animation: indeterminate-loop-ltr var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite; + animation: indeterminate-loop-ltr var(--spectrum-progressbar-animation-duration-indeterminate) infinite; } .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl) { - animation: indeterminate-loop-rtl var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite; + animation: indeterminate-loop-rtl var(--spectrum-progressbar-animation-duration-indeterminate) infinite; } @keyframes indeterminate-loop-ltr { diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js index 7a127b668a4..0f4ae693eca 100644 --- a/components/progressbar/stories/progressbar.stories.js +++ b/components/progressbar/stories/progressbar.stories.js @@ -128,14 +128,14 @@ Indeterminate.parameters = { }; /** - * By default, the progress bar has a minimum, maximum, and fixed size. The progress bar may be displayed at a custom width by setting `--mod-progressbar-inline-size` to the desired width. The progress bar below is displayed at `400px` using that modifiable custom property. + * By default, the progress bar has a minimum, maximum, and fixed size. The progress bar may be displayed at a custom width by setting `--spectrum-progressbar-inline-size` to the desired width. The progress bar below is displayed at `400px` using that modifiable custom property. */ export const CustomWidth = Template.bind({}); CustomWidth.storyName = "Custom width"; CustomWidth.args = { value: 83, customStyles: { - "--mod-progressbar-inline-size": "400px", + "--spectrum-progressbar-inline-size": "400px", }, }; CustomWidth.tags = ["!dev"]; diff --git a/components/progressbar/stories/progressbar.test.js b/components/progressbar/stories/progressbar.test.js index 5767a4d25ce..27580b8afde 100644 --- a/components/progressbar/stories/progressbar.test.js +++ b/components/progressbar/stories/progressbar.test.js @@ -24,8 +24,8 @@ export const ProgressBarGroup = Variants({ testHeading: "Without value label", showValueLabel: false, }, - /* The gradient story below supports linear-gradients used by Express. For use cases that require a custom - linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS. + /* The gradient story below supports linear-gradients used by Express. For use cases that require a custom + linear-gradient for any --spectrum-*-{fill} properties, set those custom properties in CSS. */ { testHeading: "Gradient support", diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js index 1a2addab9aa..f1822cba731 100644 --- a/components/progressbar/stories/template.js +++ b/components/progressbar/stories/template.js @@ -37,8 +37,8 @@ export const Template = ({ })} style=${ifDefined(styleMap({ ...customStyles, - "--mod-progressbar-track-color": trackFill, - "--mod-progressbar-fill-color": progressBarFill, + "--spectrum-progressbar-track-color": trackFill, + "--spectrum-progressbar-fill-color": progressBarFill, }))} value=${ifDefined(value ? `${value}%` : undefined)} aria-valuenow=${ifDefined(value ? `${value}%` : undefined)} diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json index a252d2638db..decc48ab1d9 100644 --- a/components/progresscircle/dist/metadata.json +++ b/components/progresscircle/dist/metadata.json @@ -12,15 +12,9 @@ ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-innerCircle", ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle" ], - "modifiers": [ - "--mod-progress-circle-fill-border-color", - "--mod-progress-circle-position", - "--mod-progress-circle-size", - "--mod-progress-circle-thickness", - "--mod-progress-circle-track-border-color" - ], "component": [ "--spectrum-progress-circle-fill-border-color", + "--spectrum-progress-circle-position", "--spectrum-progress-circle-size", "--spectrum-progress-circle-size-large", "--spectrum-progress-circle-size-medium", diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index d2adf1c18dd..f3c988ceada 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -36,9 +36,9 @@ governing permissions and limitations under the License. .spectrum-ProgressCircle { display: inline-block; - inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); - block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); - position: var(--mod-progress-circle-position, relative); + inline-size: var(--spectrum-progress-circle-size); + block-size: var(--spectrum-progress-circle-size); + position: var(--spectrum-progress-circle-position, relative); direction: ltr; /* Fix for Safari rendering bug */ @@ -59,19 +59,19 @@ governing permissions and limitations under the License. .spectrum-ProgressCircle-track, .spectrum-ProgressCircle-fill { box-sizing: border-box; - inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); - block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + inline-size: var(--spectrum-progress-circle-size); + block-size: var(--spectrum-progress-circle-size); } .spectrum-ProgressCircle-track { - stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness)); - stroke: var(--highcontrast-progress-circle-track-color, var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color))); + stroke-width: var(--spectrum-progress-circle-thickness); + stroke: var(--highcontrast-progress-circle-track-color, var(--spectrum-progress-circle-track-border-color)); } /* circle progress filled */ .spectrum-ProgressCircle-fill { - stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness)); - stroke: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))); + stroke-width: var(--spectrum-progress-circle-thickness); + stroke: var(--highcontrast-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color)); transform: rotate(-90deg); transform-origin: center; } diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index 5671fe2386a..75e627b30a6 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -50,38 +50,6 @@ ".spectrum-Radio:lang(zh)", ".spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button" ], - "modifiers": [ - "--mod-radio-animation-duration", - "--mod-radio-border-width", - "--mod-radio-button-background-color", - "--mod-radio-button-border-color-default", - "--mod-radio-button-border-color-down", - "--mod-radio-button-border-color-focus", - "--mod-radio-button-border-color-hover", - "--mod-radio-button-checked-border-color-default", - "--mod-radio-button-checked-border-color-down", - "--mod-radio-button-checked-border-color-focus", - "--mod-radio-button-checked-border-color-hover", - "--mod-radio-button-control-size", - "--mod-radio-button-top-to-control", - "--mod-radio-disabled-border-color", - "--mod-radio-disabled-content-color", - "--mod-radio-emphasized-accent-color", - "--mod-radio-emphasized-accent-color-down", - "--mod-radio-emphasized-accent-color-focus", - "--mod-radio-emphasized-accent-color-hover", - "--mod-radio-focus-indicator-color", - "--mod-radio-focus-indicator-thickness", - "--mod-radio-font-size", - "--mod-radio-height", - "--mod-radio-line-height", - "--mod-radio-line-height-cjk", - "--mod-radio-neutral-content-color", - "--mod-radio-neutral-content-color-down", - "--mod-radio-neutral-content-color-focus", - "--mod-radio-neutral-content-color-hover", - "--mod-radio-text-to-control" - ], "component": [ "--spectrum-radio-animation-duration", "--spectrum-radio-border-width", diff --git a/components/radio/index.css b/components/radio/index.css index c3878f77634..0ae6be41f6c 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -115,22 +115,22 @@ position: relative; vertical-align: top; - min-block-size: var(--mod-radio-height, var(--spectrum-radio-height)); + min-block-size: var(--spectrum-radio-height); max-inline-size: 100%; &:hover { /* selection indicator hover */ .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-border-color-hover, var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover))); + border-color: var(--highcontrast-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover)); } /* checked selection indicator hover */ .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-border-color-hover))); + border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--spectrum-radio-button-border-color-hover)); } .spectrum-Radio-label { - color: var(--highcontrast-radio-neutral-content-color-hover, var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover))); + color: var(--highcontrast-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover)); } } @@ -144,30 +144,30 @@ &.is-active { /* selection indicator active */ .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down))); + border-color: var(--highcontrast-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down)); } /* checked selection indicator active */ .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-border-color-down))); + border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--spectrum-radio-button-border-color-down)); } .spectrum-Radio-label { - color: var(--highcontrast-radio-neutral-content-color-down, var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down))); + color: var(--highcontrast-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down)); } } &:focus { /* selection indicator is focused state */ .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-border-color-focus, var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus))); + border-color: var(--highcontrast-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus)); } /* focus ring is focused state */ .spectrum-Radio-button::after { border-style: solid; - border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))); - border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness)); + border-color: var(--highcontrast-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color)); + border-width: var(--spectrum-radio-focus-indicator-thickness); inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); @@ -175,11 +175,11 @@ /* selected selection indicator is focused state */ .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-border-color-focus))); + border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--spectrum-radio-button-border-color-focus)); } .spectrum-Radio-label { - color: var(--highcontrast-radio-neutral-content-color-focus, var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus))); + color: var(--highcontrast-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus)); } } @@ -192,7 +192,7 @@ /* ensure disabled readonly has normal text color */ & .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, & .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label { - color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))); + color: var(--highcontrast-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)); } } } @@ -200,22 +200,22 @@ .spectrum-Radio--emphasized { /* selection indicator emphasized */ .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color, var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color))); + border-color: var(--highcontrast-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color)); } /* selection indicator emphasized hover */ &:hover .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color-hover, var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover))); + border-color: var(--highcontrast-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover)); } /* selection indicator emphasized active */ &:active .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color-down, var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down))); + border-color: var(--highcontrast-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down)); } /* selection indicator emphasized focus */ &:focus .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-emphasized-accent-color-focus, var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus))); + border-color: var(--highcontrast-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus)); } } @@ -224,11 +224,11 @@ .spectrum-Radio .spectrum-Radio-input:checked:disabled { /* selection indicator */ & + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-disabled-border-color, var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))); + border-color: var(--highcontrast-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color)); } & ~ .spectrum-Radio-label { - color: var(--highcontrast-radio-disabled-content-color, var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))); + color: var(--highcontrast-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color)); } } @@ -236,7 +236,7 @@ /* Change the font styles in all browsers for input. */ font-family: inherit; font-size: 100%; - line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height)); + line-height: var(--spectrum-radio-line-height); /* Remove the margin for input in Firefox and Safari. */ margin: 0; @@ -268,15 +268,15 @@ &::before { /* half of element width minus half of indicator width is checked border width */ border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2)); - border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-border-color-default))); + border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--spectrum-radio-button-border-color-default)); } } /* focused state */ &:focus-visible { + .spectrum-Radio-button::after { - border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness)); - border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))); + border-width: var(--spectrum-radio-focus-indicator-thickness); + border-color: var(--highcontrast-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color)); border-style: solid; inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2)); @@ -287,33 +287,33 @@ .spectrum-Radio-label { text-align: start; - margin-inline-start: var(--mod-radio-text-to-control, var(--spectrum-radio-text-to-control)); + margin-inline-start: var(--spectrum-radio-text-to-control); margin-block-start: var(--spectrum-radio-label-top-to-text); margin-block-end: var(--spectrum-radio-label-bottom-to-text); - font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size)); + font-size: var(--spectrum-radio-font-size); font-weight: var(--spectrum-radio-text-font-weight); font-style: var(--spectrum-radio-text-font-style); - color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))); - line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height)); + color: var(--highcontrast-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)); + line-height: var(--spectrum-radio-line-height); - transition: color var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out; + transition: color var(--spectrum-radio-animation-duration) ease-in-out; /* CJK language support */ &:lang(ja), &:lang(zh), &:lang(ko) { - line-height: var(--mod-radio-line-height-cjk, var(--spectrum-radio-line-height-cjk)); + line-height: var(--spectrum-radio-line-height-cjk); } } .spectrum-Radio-button { position: relative; box-sizing: border-box; - inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size)); - block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size)); - margin-block-start: var(--mod-radio-button-top-to-control, var(--spectrum-radio-button-top-to-control)); + inline-size: var(--spectrum-radio-button-control-size); + block-size: var(--spectrum-radio-button-control-size); + margin-block-start: var(--spectrum-radio-button-top-to-control); flex-grow: 0; flex-shrink: 0; @@ -326,19 +326,19 @@ box-sizing: border-box; position: absolute; - inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size)); - block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size)); + inline-size: var(--spectrum-radio-button-control-size); + block-size: var(--spectrum-radio-button-control-size); - background-color: var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color)); + background-color: var(--spectrum-radio-button-background-color); border-radius: 50%; - border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width)); - border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default))); + border-width: var(--spectrum-radio-border-width); + border-color: var(--highcontrast-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default)); border-style: solid; transition: - border var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out, - box-shadow var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out; + border var(--spectrum-radio-animation-duration) ease-in-out, + box-shadow var(--spectrum-radio-animation-duration) ease-in-out; } /* focus ring is not focused state */ @@ -353,8 +353,8 @@ transform: translateX(-50%) translateY(-50%); transition: - opacity var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out, - margin var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out; + opacity var(--spectrum-radio-animation-duration) ease-out, + margin var(--spectrum-radio-animation-duration) ease-out; .spectrum-Radio:dir(rtl) & { transform: translateX(50%) translateY(-50%); diff --git a/components/rating/dist/metadata.json b/components/rating/dist/metadata.json index 591d987a853..e360d25bc71 100644 --- a/components/rating/dist/metadata.json +++ b/components/rating/dist/metadata.json @@ -38,29 +38,6 @@ ".spectrum-Rating:hover .spectrum-Rating-starInactive", ".spectrum-Rating:not(.is-readOnly) .spectrum-Rating-input:not(:disabled) ~ .spectrum-Rating-icon:active" ], - "modifiers": [ - "--mod-rating-border-radius", - "--mod-rating-bottom-to-content-area", - "--mod-rating-edge-to-content-area", - "--mod-rating-emphasized-icon-color-default", - "--mod-rating-emphasized-icon-color-down", - "--mod-rating-emphasized-icon-color-hover", - "--mod-rating-emphasized-icon-color-key-focus", - "--mod-rating-focus-indicator-color", - "--mod-rating-focus-indicator-gap", - "--mod-rating-focus-indicator-thickness", - "--mod-rating-height", - "--mod-rating-icon-color-default", - "--mod-rating-icon-color-disabled", - "--mod-rating-icon-color-down", - "--mod-rating-icon-color-hover", - "--mod-rating-icon-fill", - "--mod-rating-icon-height", - "--mod-rating-icon-spacing", - "--mod-rating-icon-width", - "--mod-rating-top-to-content-area", - "--mod-rating-width" - ], "component": [ "--spectrum-rating-border-radius", "--spectrum-rating-bottom-to-content-area", diff --git a/components/rating/index.css b/components/rating/index.css index 8e53c47d3e0..609f6c4bb0d 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -52,16 +52,16 @@ flex: 0 0 auto; justify-content: center; align-items: center; - gap: var(--mod-rating-icon-spacing, var(--spectrum-rating-icon-spacing)); - padding-block: var(--mod-rating-top-to-content-area, var(--spectrum-rating-top-to-content-area)) var(--mod-rating-bottom-to-content-area, var(--spectrum-rating-bottom-to-content-area)); - padding-inline: var(--mod-rating-edge-to-content-area, var(--spectrum-rating-edge-to-content-area)); + gap: var(--spectrum-rating-icon-spacing); + padding-block: var(--spectrum-rating-top-to-content-area) var(--spectrum-rating-bottom-to-content-area); + padding-inline: var(--spectrum-rating-edge-to-content-area); - border-radius: var(--mod-rating-border-radius, var(--spectrum-rating-border-radius)); + border-radius: var(--spectrum-rating-border-radius); cursor: pointer; - block-size: var(--mod-rating-height, var(--spectrum-rating-height)); - inline-size: var(--mod-rating-width, var(--spectrum-rating-width)); + block-size: var(--spectrum-rating-height); + inline-size: var(--spectrum-rating-width); &:not(.is-readOnly) { .spectrum-Rating-input:not(:disabled) ~ .spectrum-Rating-icon:active { @@ -70,23 +70,23 @@ } &.is-focused { - outline: var(--mod-rating-focus-indicator-thickness, var(--spectrum-rating-focus-indicator-thickness)) solid var(--mod-rating-focus-indicator-color, var(--spectrum-rating-focus-indicator-color)); - outline-offset: var(--mod-rating-focus-indicator-gap, var(--spectrum-rating-focus-indicator-gap)); + outline: var(--spectrum-rating-focus-indicator-thickness) solid var(--spectrum-rating-focus-indicator-color); + outline-offset: var(--spectrum-rating-focus-indicator-gap); } &:hover { .spectrum-Rating-icon { /* Make all stars colored when the component is hovered */ - color: var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default)); + color: var(--spectrum-rating-icon-color-default); } /* The icon that's actually hovered is darker */ .spectrum-Rating-icon:hover { - color: var(--mod-rating-icon-color-hover, var(--spectrum-rating-icon-color-hover)); + color: var(--spectrum-rating-icon-color-hover); } .spectrum-Rating-icon:active { - color: var(--mod-rating-icon-color-down, var(--spectrum-rating-icon-color-down)); + color: var(--spectrum-rating-icon-color-down); } /* When the entire component is hovered, show all solid icons */ @@ -107,18 +107,18 @@ } .spectrum-Rating--sizeS { - --mod-rating-height: var(--spectrum-rating-height-small); - --mod-rating-width: var(--spectrum-rating-width-small); - --mod-rating-top-to-content-area: var(--spectrum-rating-top-to-content-area-small); - --mod-rating-edge-to-content-area: var(--spectrum-rating-edge-to-content-area-small); - --mod-rating-bottom-to-content-area: var(--spectrum-rating-bottom-to-content-area-small); + --spectrum-rating-height: var(--spectrum-rating-height-small); + --spectrum-rating-width: var(--spectrum-rating-width-small); + --spectrum-rating-top-to-content-area: var(--spectrum-rating-top-to-content-area-small); + --spectrum-rating-edge-to-content-area: var(--spectrum-rating-edge-to-content-area-small); + --spectrum-rating-bottom-to-content-area: var(--spectrum-rating-bottom-to-content-area-small); /* Icon */ - --mod-rating-icon-height: var(--spectrum-workflow-icon-size-75); - --mod-rating-icon-width: var(--spectrum-workflow-icon-size-75); + --spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-75); + --spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-75); /* Focus ring */ - --mod-rating-border-radius: var(--spectrum-corner-radius-medium-size-small); + --spectrum-rating-border-radius: var(--spectrum-corner-radius-medium-size-small); } .spectrum-Rating-input { @@ -132,17 +132,17 @@ } .spectrum-Rating-icon { - --spectrum-rating-icon-fill: var(--mod-rating-icon-fill, 100%); + --spectrum-rating-icon-fill: 100%; position: relative; background-size: contain; background-repeat: no-repeat; - inline-size: var(--mod-rating-icon-width, var(--spectrum-rating-icon-width)); - block-size: var(--mod-rating-icon-height, var(--spectrum-rating-icon-height)); + inline-size: var(--spectrum-rating-icon-width); + block-size: var(--spectrum-rating-icon-height); svg { - inline-size: var(--mod-rating-icon-width, var(--spectrum-rating-icon-width)); - block-size: var(--mod-rating-icon-height, var(--spectrum-rating-icon-height)); + inline-size: var(--spectrum-rating-icon-width); + block-size: var(--spectrum-rating-icon-height); } .spectrum-Rating-starActive { @@ -192,16 +192,16 @@ } .spectrum-Rating-icon { - color: var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default)); + color: var(--spectrum-rating-icon-color-default); &.is-selected { - color: var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default)); + color: var(--spectrum-rating-icon-color-default); } &:hover { /* All stars following the hovered star */ & ~ .spectrum-Rating-icon { - color: var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default)); + color: var(--spectrum-rating-icon-color-default); } } } @@ -209,38 +209,38 @@ .spectrum-Rating--emphasized { &.is-focused { .spectrum-Rating-icon.is-selected { - color: var(--mod-rating-emphasized-icon-color-key-focus, var(--spectrum-rating-emphasized-icon-color-key-focus)); + color: var(--spectrum-rating-emphasized-icon-color-key-focus); } } .spectrum-Rating-icon { - color: var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default)); + color: var(--spectrum-rating-icon-color-default); &.is-selected { - color: var(--highcontrast-rating-emphasized-icon-color-default, var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))); + color: var(--highcontrast-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default)); } /* All stars following the hovered star */ &:hover ~ .spectrum-Rating-icon { - color: var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default)); + color: var(--spectrum-rating-icon-color-default); } } &:hover .spectrum-Rating-icon { /* Make all stars selected when the component is hovered */ - color: var(--highcontrast-rating-emphasized-icon-color-default, var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))); + color: var(--highcontrast-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default)); &:hover { /* The icon that's actually hovered is darker */ - color: var(--highcontrast-rating-emphasized-icon-color-hover, var(--mod-rating-emphasized-icon-color-hover, var(--spectrum-rating-emphasized-icon-color-hover))); + color: var(--highcontrast-rating-emphasized-icon-color-hover, var(--spectrum-rating-emphasized-icon-color-hover)); } &:hover ~ .spectrum-Rating-icon { - color: var(--mod-rating-icon-color-default, var(--spectrum-rating-icon-color-default)); + color: var(--spectrum-rating-icon-color-default); } &:active { - color: var(--highcontrast-rating-emphasized-icon-color-down, var(--mod-rating-emphasized-icon-color-down, var(--spectrum-rating-emphasized-icon-color-down))); + color: var(--highcontrast-rating-emphasized-icon-color-down, var(--spectrum-rating-emphasized-icon-color-down)); } } } @@ -248,10 +248,10 @@ /* Disabled */ .spectrum-Rating.is-disabled { .spectrum-Rating-icon { - color: var(--highcontrast-rating-icon-color-disabled, var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))); + color: var(--highcontrast-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled)); &.is-selected { - color: var(--highcontrast-rating-icon-color-disabled, var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))); + color: var(--highcontrast-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled)); } } } diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js index a7def3b170c..abddb58f6b5 100644 --- a/components/rating/stories/rating.stories.js +++ b/components/rating/stories/rating.stories.js @@ -13,7 +13,7 @@ import { Template } from "./template.js"; * - All active stars have the class `is-selected` applied. * - The current value (the last active star) has the class `is-currentValue` applied. * - When the rating receives focus, the class `is-focused` should be added to the component's root element (`.spectrum-Rating`). - * - A rating may have a partially filled star. The width and fill of this star is controlled by adding `.is-partial` to the parent `span` with classes of `spectrum-Rating-icon` and `is-selected` and then setting `--mod-rating-icon-fill` to the necessary fill percentage (e.g. `50%`). + * - A rating may have a partially filled star. The width and fill of this star is controlled by adding `.is-partial` to the parent `span` with classes of `spectrum-Rating-icon` and `is-selected` and then setting `--spectrum-rating-icon-fill` to the necessary fill percentage (e.g. `50%`). */ export default { title: "Rating", @@ -187,7 +187,7 @@ WithTooltip.parameters = { }; /** - * To implement a partially filled rating star, the star must have the `is-selected` class applied to its parent and the `is-partial` and `spectrum-Rating-starActive` classes applied. The fill can then be adjusted by setting `--mod-rating-icon-fill` to a valid percentage (e.g. 50%). + * To implement a partially filled rating star, the star must have the `is-selected` class applied to its parent and the `is-partial` and `spectrum-Rating-starActive` classes applied. The fill can then be adjusted by setting `--spectrum-rating-icon-fill` to a valid percentage (e.g. 50%). */ export const WithPartial = Template.bind({}); WithPartial.tags = ["!dev"]; @@ -195,7 +195,7 @@ WithPartial.args = { isPartial: true, value: 5, customStyles: { - "--mod-rating-icon-fill": "50%" + "--spectrum-rating-icon-fill": "50%" } }; WithPartial.parameters = { diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json index 0d4bd84abfe..f4f3b763e2d 100644 --- a/components/search/dist/metadata.json +++ b/components/search/dist/metadata.json @@ -29,43 +29,6 @@ ".spectrum-Search:lang(ko)", ".spectrum-Search:lang(zh)" ], - "modifiers": [ - "--mod-search-background-color", - "--mod-search-background-color-disabled", - "--mod-search-block-size", - "--mod-search-border-color-default", - "--mod-search-border-color-disabled", - "--mod-search-border-color-focus", - "--mod-search-border-color-focus-hover", - "--mod-search-border-color-hover", - "--mod-search-border-color-key-focus", - "--mod-search-border-radius", - "--mod-search-border-width", - "--mod-search-bottom-to-text", - "--mod-search-button-inline-size", - "--mod-search-collapsed-animation-duration", - "--mod-search-color-default", - "--mod-search-color-disabled", - "--mod-search-color-focus", - "--mod-search-color-focus-hover", - "--mod-search-color-hover", - "--mod-search-color-key-focus", - "--mod-search-edge-to-visual", - "--mod-search-focus-indicator-color", - "--mod-search-focus-indicator-gap", - "--mod-search-focus-indicator-thickness", - "--mod-search-font-family", - "--mod-search-font-style", - "--mod-search-font-weight", - "--mod-search-icon-size", - "--mod-search-inline-size", - "--mod-search-line-height", - "--mod-search-min-inline-size", - "--mod-search-text-to-icon", - "--mod-search-to-help-text", - "--mod-search-top-to-icon", - "--mod-search-top-to-text" - ], "component": [ "--spectrum-search-background-color", "--spectrum-search-background-color-disabled", @@ -159,35 +122,34 @@ "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75", + "--spectrum-textfield-background-color", + "--spectrum-textfield-background-color-disabled", + "--spectrum-textfield-border-color", + "--spectrum-textfield-border-color-disabled", + "--spectrum-textfield-border-color-focus", + "--spectrum-textfield-border-color-focus-hover", + "--spectrum-textfield-border-color-hover", + "--spectrum-textfield-border-color-keyboard-focus", + "--spectrum-textfield-border-width", + "--spectrum-textfield-corner-radius", + "--spectrum-textfield-focus-indicator-color", + "--spectrum-textfield-focus-indicator-gap", + "--spectrum-textfield-focus-indicator-width", + "--spectrum-textfield-font-family", + "--spectrum-textfield-font-weight", + "--spectrum-textfield-placeholder-font-size", + "--spectrum-textfield-text-color-default", + "--spectrum-textfield-text-color-disabled", + "--spectrum-textfield-text-color-focus", + "--spectrum-textfield-text-color-focus-hover", + "--spectrum-textfield-text-color-hover", + "--spectrum-textfield-text-color-keyboard-focus", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-textfield-background-color", - "--mod-textfield-background-color-disabled", - "--mod-textfield-border-color", - "--mod-textfield-border-color-disabled", - "--mod-textfield-border-color-focus", - "--mod-textfield-border-color-focus-hover", - "--mod-textfield-border-color-hover", - "--mod-textfield-border-color-keyboard-focus", - "--mod-textfield-border-width", - "--mod-textfield-corner-radius", - "--mod-textfield-focus-indicator-color", - "--mod-textfield-focus-indicator-gap", - "--mod-textfield-focus-indicator-width", - "--mod-textfield-font-family", - "--mod-textfield-font-weight", - "--mod-textfield-placeholder-font-size", - "--mod-textfield-text-color-default", - "--mod-textfield-text-color-disabled", - "--mod-textfield-text-color-focus", - "--mod-textfield-text-color-focus-hover", - "--mod-textfield-text-color-hover", - "--mod-textfield-text-color-keyboard-focus" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-search-color-default", "--highcontrast-search-color-disabled", diff --git a/components/search/index.css b/components/search/index.css index 675279bb8f0..4d99033e56c 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -76,33 +76,33 @@ } /* /* @passthrough start: nested Textfield component. */ - --mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family)); - --mod-textfield-font-weight: var(--mod-search-font-weight, var(--spectrum-search-font-weight)); - --mod-textfield-placeholder-font-size: var(--spectrum-font-size-100); - - --mod-textfield-corner-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius)); - --mod-textfield-border-width: var(--mod-search-border-width, var(--spectrum-search-border-width)); - - --mod-textfield-focus-indicator-gap: var(--mod-search-focus-indicator-gap, var(--spectrum-search-focus-indicator-gap)); - --mod-textfield-focus-indicator-width: var(--mod-search-focus-indicator-thickness, var(--spectrum-search-focus-indicator-thickness)); - --mod-textfield-focus-indicator-color: var(--mod-search-focus-indicator-color, var(--spectrum-search-focus-indicator-color)); - - --mod-textfield-text-color-default: var(--mod-search-color-default, var(--spectrum-search-color-default)); - --mod-textfield-text-color-hover: var(--mod-search-color-hover, var(--spectrum-search-color-hover)); - --mod-textfield-text-color-focus: var(--mod-search-color-focus, var(--spectrum-search-color-focus)); - --mod-textfield-text-color-focus-hover: var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover)); - --mod-textfield-text-color-keyboard-focus: var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus)); - --mod-textfield-text-color-disabled: var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)); - - --mod-textfield-border-color: var(--mod-search-border-color-default, var(--spectrum-search-border-color-default)); - --mod-textfield-border-color-hover: var(--mod-search-border-color-hover, var(--spectrum-search-border-color-hover)); - --mod-textfield-border-color-focus: var(--mod-search-border-color-focus, var(--spectrum-search-border-color-focus)); - --mod-textfield-border-color-focus-hover: var(--mod-search-border-color-focus-hover, var(--spectrum-search-border-color-focus-hover)); - --mod-textfield-border-color-keyboard-focus: var(--mod-search-border-color-key-focus, var(--spectrum-search-border-color-key-focus)); - --mod-textfield-border-color-disabled: var(--mod-search-border-color-disabled, var(--spectrum-search-border-color-disabled)); - - --mod-textfield-background-color: var(--mod-search-background-color, var(--spectrum-search-background-color)); - --mod-textfield-background-color-disabled: var(--mod-search-background-color-disabled, var(--spectrum-search-background-color-disabled)); + --spectrum-textfield-font-family: var(--spectrum-search-font-family); + --spectrum-textfield-font-weight: var(--spectrum-search-font-weight); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); + + --spectrum-textfield-corner-radius: var(--spectrum-search-border-radius); + --spectrum-textfield-border-width: var(--spectrum-search-border-width); + + --spectrum-textfield-focus-indicator-gap: var(--spectrum-search-focus-indicator-gap); + --spectrum-textfield-focus-indicator-width: var(--spectrum-search-focus-indicator-thickness); + --spectrum-textfield-focus-indicator-color: var(--spectrum-search-focus-indicator-color); + + --spectrum-textfield-text-color-default: var(--spectrum-search-color-default); + --spectrum-textfield-text-color-hover: var(--spectrum-search-color-hover); + --spectrum-textfield-text-color-focus: var(--spectrum-search-color-focus); + --spectrum-textfield-text-color-focus-hover: var(--spectrum-search-color-focus-hover); + --spectrum-textfield-text-color-keyboard-focus: var(--spectrum-search-color-key-focus); + --spectrum-textfield-text-color-disabled: var(--spectrum-search-color-disabled); + + --spectrum-textfield-border-color: var(--spectrum-search-border-color-default); + --spectrum-textfield-border-color-hover: var(--spectrum-search-border-color-hover); + --spectrum-textfield-border-color-focus: var(--spectrum-search-border-color-focus); + --spectrum-textfield-border-color-focus-hover: var(--spectrum-search-border-color-focus-hover); + --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-search-border-color-key-focus); + --spectrum-textfield-border-color-disabled: var(--spectrum-search-border-color-disabled); + + --spectrum-textfield-background-color: var(--spectrum-search-background-color); + --spectrum-textfield-background-color-disabled: var(--spectrum-search-background-color-disabled); /* @passthrough end */ } @@ -115,7 +115,7 @@ --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --mod-textfield-placeholder-font-size: var(--spectrum-font-size-75); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75); } .spectrum-Search--sizeL { @@ -127,7 +127,7 @@ --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --mod-textfield-placeholder-font-size: var(--spectrum-font-size-200); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200); } .spectrum-Search--sizeXL { @@ -139,31 +139,31 @@ --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-300); --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-300); - --mod-textfield-placeholder-font-size: var(--spectrum-font-size-300); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300); } /* Standard / Default */ .spectrum-Search { display: inline-block; position: relative; - inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size)); - min-inline-size: var(--mod-search-min-inline-size, var(--spectrum-search-min-inline-size)); + inline-size: var(--spectrum-search-inline-size); + min-inline-size: var(--spectrum-search-min-inline-size); .spectrum-HelpText { - margin-block-start: var(--mod-search-to-help-text, var(--spectrum-search-to-help-text)); + margin-block-start: var(--spectrum-search-to-help-text); } /* Animation for collapsible search expansion */ &.is-collapsed { - transition: inline-size var(--mod-search-collapsed-animation-duration, var(--spectrum-search-collapsed-animation-duration)) ease-in-out; - inline-size: var(--mod-search-button-inline-size, var(--spectrum-search-block-size)); - min-inline-size: var(--mod-search-button-inline-size, var(--spectrum-search-block-size)); + transition: inline-size var(--spectrum-search-collapsed-animation-duration) ease-in-out; + inline-size: var(--spectrum-search-block-size); + min-inline-size: var(--spectrum-search-block-size); transform-origin: left center; } &.is-expanded { - transition: inline-size var(--mod-search-collapsed-animation-duration, var(--spectrum-search-collapsed-animation-duration)) ease-in-out; - inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size)); + transition: inline-size var(--spectrum-search-collapsed-animation-duration) ease-in-out; + inline-size: var(--spectrum-search-inline-size); min-inline-size: auto; transform-origin: left center; } @@ -173,10 +173,10 @@ position: absolute; inset-inline-end: 0; inset-block-start: 0; - border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius)); + border-radius: var(--spectrum-search-border-radius); .spectrum-ClearButton-fill { - border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius)); + border-radius: var(--spectrum-search-border-radius); } .spectrum-Search.is-disabled & { @@ -189,34 +189,34 @@ } .spectrum-Search-icon { - --spectrum-search-color: var(--highcontrast-search-color-default, var(--mod-search-color-default, var(--spectrum-search-color-default))); + --spectrum-search-color: var(--highcontrast-search-color-default, var(--spectrum-search-color-default)); display: block; position: absolute; inset-block: 0; - inset-inline-start: var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)); - margin-block-start: var(--mod-search-top-to-icon, var(--spectrum-search-top-to-icon)); + inset-inline-start: var(--spectrum-search-edge-to-visual); + margin-block-start: var(--spectrum-search-top-to-icon); color: var(--spectrum-search-color); .spectrum-Search-textfield:hover & { - --spectrum-search-color: var(--highcontrast-search-color-hover, var(--mod-search-color-hover, var(--spectrum-search-color-hover))); + --spectrum-search-color: var(--highcontrast-search-color-hover, var(--spectrum-search-color-hover)); } .spectrum-Search-textfield.is-focused & { - --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-focus, var(--spectrum-search-color-focus))); + --spectrum-search-color: var(--highcontrast-search-color-focus, var(--spectrum-search-color-focus)); } .spectrum-Search-textfield.is-focused:hover & { - --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover))); + --spectrum-search-color: var(--highcontrast-search-color-focus, var(--spectrum-search-color-focus-hover)); } .spectrum-Search-textfield.is-keyboardFocused & { - --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus))); + --spectrum-search-color: var(--highcontrast-search-color-focus, var(--spectrum-search-color-key-focus)); } .spectrum-Search-textfield.is-disabled &, .spectrum-Search-textfield.is-disabled:hover & { - --spectrum-search-color: var(--highcontrast-search-color-disabled, var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))); + --spectrum-search-color: var(--highcontrast-search-color-disabled, var(--spectrum-search-color-disabled)); } } @@ -225,14 +225,14 @@ /* Without this, it gets overridden by .spectrum-Textfield */ appearance: none; - block-size: var(--mod-search-block-size, var(--spectrum-search-block-size)); - padding-block-start: calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width))); - padding-block-end: calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width))); - padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon))); - padding-inline-end: calc(var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size)) - var(--mod-search-border-width, var(--spectrum-search-border-width))); + block-size: var(--spectrum-search-block-size); + padding-block-start: calc(var(--spectrum-search-top-to-text) - var(--spectrum-search-border-width)); + padding-block-end: calc(var(--spectrum-search-bottom-to-text) - var(--spectrum-search-border-width)); + padding-inline-start: calc(var(--spectrum-search-edge-to-visual) - var(--spectrum-search-border-width) + var(--spectrum-search-icon-size) + var(--spectrum-search-text-to-icon)); + padding-inline-end: calc(var(--spectrum-search-button-inline-size) - var(--spectrum-search-border-width)); - font-style: var(--mod-search-font-style, var(--spectrum-search-font-style)); - line-height: var(--mod-search-line-height, var(--spectrum-search-line-height)); + font-style: var(--spectrum-search-font-style); + line-height: var(--spectrum-search-line-height); /* Remove the inner padding and cancel buttons for input[type="search"] in Chrome and Safari on macOS. */ &::-webkit-search-cancel-button, diff --git a/components/sidenav/dist/metadata.json b/components/sidenav/dist/metadata.json index 0215529e384..848c0d35096 100644 --- a/components/sidenav/dist/metadata.json +++ b/components/sidenav/dist/metadata.json @@ -27,62 +27,6 @@ ".spectrum-SideNav:lang(ko)", ".spectrum-SideNav:lang(zh)" ], - "modifiers": [ - "--mod-sidenav-background-default", - "--mod-sidenav-background-disabled", - "--mod-sidenav-background-hover", - "--mod-sidenav-background-hover-selected", - "--mod-sidenav-background-key-focus", - "--mod-sidenav-background-key-focus-selected", - "--mod-sidenav-border-radius", - "--mod-sidenav-bottom-to-label", - "--mod-sidenav-content-color-default", - "--mod-sidenav-content-color-default-selected", - "--mod-sidenav-content-color-down", - "--mod-sidenav-content-color-down-selected", - "--mod-sidenav-content-color-hover", - "--mod-sidenav-content-color-hover-selected", - "--mod-sidenav-content-color-key-focus", - "--mod-sidenav-content-color-key-focus-selected", - "--mod-sidenav-content-disabled-color", - "--mod-sidenav-focus-ring-color", - "--mod-sidenav-focus-ring-gap", - "--mod-sidenav-focus-ring-size", - "--mod-sidenav-gap", - "--mod-sidenav-header-color", - "--mod-sidenav-header-font-size", - "--mod-sidenav-header-font-style", - "--mod-sidenav-header-font-weight", - "--mod-sidenav-header-line-height", - "--mod-sidenav-heading-bottom-margin", - "--mod-sidenav-heading-top-margin", - "--mod-sidenav-icon-size", - "--mod-sidenav-icon-spacing", - "--mod-sidenav-inline-padding", - "--mod-sidenav-item-background-default-selected", - "--mod-sidenav-item-background-down", - "--mod-sidenav-item-background-down-selected", - "--mod-sidenav-max-width", - "--mod-sidenav-min-height", - "--mod-sidenav-min-width", - "--mod-sidenav-start-to-content-second-level", - "--mod-sidenav-start-to-content-third-level", - "--mod-sidenav-start-to-content-with-icon-second-level", - "--mod-sidenav-start-to-content-with-icon-third-level", - "--mod-sidenav-text-font-family", - "--mod-sidenav-text-font-size", - "--mod-sidenav-text-font-style", - "--mod-sidenav-text-font-weight", - "--mod-sidenav-text-line-height", - "--mod-sidenav-top-level-font-family", - "--mod-sidenav-top-level-font-size", - "--mod-sidenav-top-level-font-style", - "--mod-sidenav-top-level-font-weight", - "--mod-sidenav-top-level-line-height", - "--mod-sidenav-top-to-icon", - "--mod-sidenav-top-to-label", - "--mod-sidenav-width" - ], "component": [ "--spectrum-side-navigation-bottom-to-text", "--spectrum-side-navigation-header-to-item", diff --git a/components/sidenav/index.css b/components/sidenav/index.css index c408228f7ca..46e9f833d4e 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -108,8 +108,8 @@ &.is-disabled { /* Disable all children */ .spectrum-SideNav-itemLink { - background-color: var(--mod-sidenav-background-disabled, var(--spectrum-sidenav-background-disabled)); - color: var(--highcontrast-sidenav-content-disabled-color, var(--mod-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color))); + background-color: var(--spectrum-sidenav-background-disabled); + color: var(--highcontrast-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color)); cursor: default; pointer-events: none; @@ -118,31 +118,31 @@ &.is-selected { .spectrum-SideNav-itemLink { - background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected))); - color: var(--highcontrast-sidenav-content-color-default-selected, var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected))); + background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected)); + color: var(--highcontrast-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected)); &:hover { - background-color: var(--highcontrast-sidenav-background-hover-selected, var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected))); - color: var(--mod-sidenav-content-color-hover-selected, var(--spectrum-sidenav-content-color-hover-selected)); + background-color: var(--highcontrast-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected)); + color: var(--spectrum-sidenav-content-color-hover-selected); } &:active { - background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected))); - color: var(--mod-sidenav-content-color-down-selected, var(--spectrum-sidenav-content-color-down-selected)); + background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected)); + color: var(--spectrum-sidenav-content-color-down-selected); } &.is-keyboardFocused, &:focus-visible { - background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected))); - color: var(--mod-sidenav-content-color-key-focus-selected, var(--spectrum-sidenav-content-color-key-focus-selected)); + background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected)); + color: var(--spectrum-sidenav-content-color-key-focus-selected); } } } } .spectrum-SideNav-itemLink { - padding-inline: var(--mod-sidenav-inline-padding, var(--spectrum-sidenav-inline-padding)); - margin-block-end: var(--mod-sidenav-gap, var(--spectrum-sidenav-gap)); + padding-inline: var(--spectrum-sidenav-inline-padding); + margin-block-end: var(--spectrum-sidenav-gap); position: relative; display: inline-flex; justify-content: start; @@ -154,88 +154,88 @@ background-color var(--spectrum-animation-duration-100) ease-out, color var(--spectrum-animation-duration-100) ease-out; - border-radius: var(--mod-sidenav-border-radius, var(--spectrum-sidenav-border-radius)); + border-radius: var(--spectrum-sidenav-border-radius); - background-color: var(--mod-sidenav-background-default, var(--spectrum-sidenav-background-default)); - color: var(--highcontrast-sidenav-content-color-default, var(--mod-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default))); + background-color: var(--spectrum-sidenav-background-default); + color: var(--highcontrast-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default)); - inline-size: var(--mod-sidenav-width, var(--spectrum-sidenav-width)); - min-inline-size: var(--mod-sidenav-min-width, var(--spectrum-sidenav-min-width)); - max-inline-size: var(--mod-sidenav-max-width, var(--spectrum-sidenav-max-width)); - min-block-size: var(--mod-sidenav-min-height, var(--spectrum-sidenav-min-height)); + inline-size: var(--spectrum-sidenav-width); + min-inline-size: var(--spectrum-sidenav-min-width); + max-inline-size: var(--spectrum-sidenav-max-width); + min-block-size: var(--spectrum-sidenav-min-height); - font-family: var(--mod-sidenav-text-font-family, var(--spectrum-sidenav-text-font-family)); - font-size: var(--mod-sidenav-text-font-size, var(--spectrum-sidenav-text-font-size)); - font-weight: var(--mod-sidenav-text-font-weight, var(--spectrum-sidenav-text-font-weight)); - font-style: var(--mod-sidenav-text-font-style, var(--spectrum-sidenav-text-font-style)); + font-family: var(--spectrum-sidenav-text-font-family); + font-size: var(--spectrum-sidenav-text-font-size); + font-weight: var(--spectrum-sidenav-text-font-weight); + font-style: var(--spectrum-sidenav-text-font-style); text-decoration: none; - line-height: var(--mod-sidenav-text-line-height, var(--spectrum-sidenav-text-line-height)); + line-height: var(--spectrum-sidenav-text-line-height); .spectrum-SideNav-link-text { - margin-block-start: var(--mod-sidenav-top-to-label, var(--spectrum-sidenav-top-to-label)); - margin-block-end: var(--mod-sidenav-bottom-to-label, var(--spectrum-sidenav-bottom-to-label)); + margin-block-start: var(--spectrum-sidenav-top-to-label); + margin-block-end: var(--spectrum-sidenav-bottom-to-label); /* Allow overflow-wrap to work and prevent text overflow */ inline-size: 100%; } .spectrum-Icon { - inline-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size)); - block-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size)); - margin-inline-end: var(--mod-sidenav-icon-spacing, var(--spectrum-sidenav-icon-spacing)); - margin-block-start: var(--mod-sidenav-top-to-icon, var(--spectrum-sidenav-top-to-icon)); + inline-size: var(--spectrum-sidenav-icon-size); + block-size: var(--spectrum-sidenav-icon-size); + margin-inline-end: var(--spectrum-sidenav-icon-spacing); + margin-block-start: var(--spectrum-sidenav-top-to-icon); flex-shrink: 0; } &:hover { - background-color: var(--highcontrast-sidenav-background-hover, var(--mod-sidenav-background-hover, var(--spectrum-sidenav-background-hover))); - color: var(--highcontrast-sidenav-content-color-hover, var(--mod-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover))); + background-color: var(--highcontrast-sidenav-background-hover, var(--spectrum-sidenav-background-hover)); + color: var(--highcontrast-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover)); } &:active { - background-color: var(--highcontrast-sidenav-item-background-down, var(--mod-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down))); - color: var(--highcontrast-sidenav-content-color-down, var(--mod-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down))); + background-color: var(--highcontrast-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down)); + color: var(--highcontrast-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down)); } &.is-keyboardFocused, &:focus-visible { - outline: var(--highcontrast-sidenav-focus-ring-color, var(--mod-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color))) solid var(--mod-sidenav-focus-ring-size, var(--spectrum-sidenav-focus-ring-size)); - outline-offset: var(--mod-sidenav-focus-ring-gap, var(--spectrum-sidenav-focus-ring-gap)); - background-color: var(--highcontrast-sidenav-background-key-focus, var(--mod-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus))); - color: var(--mod-sidenav-content-color-key-focus, var(--spectrum-sidenav-content-color-key-focus)); + outline: var(--highcontrast-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color)) solid var(--spectrum-sidenav-focus-ring-size); + outline-offset: var(--spectrum-sidenav-focus-ring-gap); + background-color: var(--highcontrast-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus)); + color: var(--spectrum-sidenav-content-color-key-focus); } } .spectrum-SideNav-heading { - margin-block-start: calc(var(--mod-sidenav-heading-top-margin, var(--spectrum-sidenav-heading-top-margin)) - var(--mod-sidenav-gap, var(--spectrum-sidenav-gap))); - margin-block-end: var(--mod-sidenav-heading-bottom-margin, var(--spectrum-sidenav-heading-bottom-margin)); - padding-inline: var(--mod-sidenav-inline-padding, var(--spectrum-sidenav-inline-padding)); - color: var(--mod-sidenav-header-color, var(--spectrum-sidenav-header-color)); + margin-block-start: calc(var(--spectrum-sidenav-heading-top-margin) - var(--spectrum-sidenav-gap)); + margin-block-end: var(--spectrum-sidenav-heading-bottom-margin); + padding-inline: var(--spectrum-sidenav-inline-padding); + color: var(--spectrum-sidenav-header-color); font-family: var(--spectrum-sidenav-header-font-family); - font-size: var(--mod-sidenav-header-font-size, var(--spectrum-sidenav-header-font-size)); - font-weight: var(--mod-sidenav-header-font-weight, var(--spectrum-sidenav-header-font-weight)); - font-style: var(--mod-sidenav-header-font-style, var(--spectrum-sidenav-header-font-style)); - line-height: var(--mod-sidenav-header-line-height, var(--spectrum-sidenav-header-line-height)); + font-size: var(--spectrum-sidenav-header-font-size); + font-weight: var(--spectrum-sidenav-header-font-weight); + font-style: var(--spectrum-sidenav-header-font-style); + line-height: var(--spectrum-sidenav-header-line-height); } .spectrum-SideNav--multiLevel { .spectrum-SideNav-itemLink { color: var(--highcontrast-sidenav-top-level-font-color); - font-family: var(--mod-sidenav-top-level-font-family, var(--spectrum-sidenav-top-level-font-family)); - font-weight: var(--mod-sidenav-top-level-font-weight, var(--spectrum-sidenav-top-level-font-weight)); - font-style: var(--mod-sidenav-top-level-font-style, var(--spectrum-sidenav-top-level-font-style)); - font-size: var(--mod-sidenav-top-level-font-size, var(--spectrum-sidenav-top-level-font-size)); - line-height: var(--mod-sidenav-top-level-line-height, var(--spectrum-sidenav-top-level-line-height)); + font-family: var(--spectrum-sidenav-top-level-font-family); + font-weight: var(--spectrum-sidenav-top-level-font-weight); + font-style: var(--spectrum-sidenav-top-level-font-style); + font-size: var(--spectrum-sidenav-top-level-font-size); + line-height: var(--spectrum-sidenav-top-level-line-height); } .spectrum-SideNav { .spectrum-SideNav-itemLink { - font-weight: var(--mod-sidenav-text-font-weight, var(--spectrum-sidenav-text-font-weight)); - padding-inline-start: var(--mod-sidenav-start-to-content-second-level, var(--spectrum-sidenav-start-to-content-second-level)); + font-weight: var(--spectrum-sidenav-text-font-weight); + padding-inline-start: var(--spectrum-sidenav-start-to-content-second-level); } .spectrum-SideNav .spectrum-SideNav-itemLink { - padding-inline-start: var(--mod-sidenav-start-to-content-third-level, var(--spectrum-sidenav-start-to-content-third-level)); + padding-inline-start: var(--spectrum-sidenav-start-to-content-third-level); } } } @@ -243,11 +243,11 @@ .spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel { .spectrum-SideNav { .spectrum-SideNav-itemLink { - padding-inline-start: var(--mod-sidenav-start-to-content-with-icon-second-level, var(--spectrum-sidenav-start-to-content-with-icon-second-level)); + padding-inline-start: var(--spectrum-sidenav-start-to-content-with-icon-second-level); } .spectrum-SideNav .spectrum-SideNav-itemLink { - padding-inline-start: var(--mod-sidenav-start-to-content-with-icon-third-level, var(--spectrum-sidenav-start-to-content-with-icon-third-level)); + padding-inline-start: var(--spectrum-sidenav-start-to-content-with-icon-third-level); } } } diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 7eaea714d74..e37086dfff5 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -117,64 +117,6 @@ ".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)" ], - "modifiers": [ - "--mod-animation-duration-100", - "--mod-focus-indicator-gap", - "--mod-font-size-75", - "--mod-line-height-100", - "--mod-slider-cjk-line-height", - "--mod-slider-control-height", - "--mod-slider-control-to-side-field-label", - "--mod-slider-control-to-text-field", - "--mod-slider-controls-margin", - "--mod-slider-disabled-border-color", - "--mod-slider-editable-field-inline-size", - "--mod-slider-emphasized-tick-mark-color", - "--mod-slider-emphasized-track-fill-color", - "--mod-slider-font-size", - "--mod-slider-handle-background-color", - "--mod-slider-handle-background-color-disabled", - "--mod-slider-handle-border-color", - "--mod-slider-handle-border-color-disabled", - "--mod-slider-handle-border-color-down", - "--mod-slider-handle-border-color-hover", - "--mod-slider-handle-border-color-key-focus", - "--mod-slider-handle-border-radius", - "--mod-slider-handle-border-width", - "--mod-slider-handle-disabled-background-color", - "--mod-slider-handle-focus-ring-color-key-focus", - "--mod-slider-handle-size", - "--mod-slider-inline-size", - "--mod-slider-input-left", - "--mod-slider-input-top-size", - "--mod-slider-label-font-family", - "--mod-slider-label-font-style", - "--mod-slider-label-font-weight", - "--mod-slider-label-margin-start", - "--mod-slider-label-text-color", - "--mod-slider-label-text-color-disabled", - "--mod-slider-ramp-track-color", - "--mod-slider-ramp-track-color-disabled", - "--mod-slider-ramp-track-fill-color", - "--mod-slider-ramp-track-height", - "--mod-slider-range-track-reset", - "--mod-slider-tick-label-color", - "--mod-slider-tick-mark-border-radius", - "--mod-slider-tick-mark-color", - "--mod-slider-tick-mark-color-filled-track", - "--mod-slider-tick-mark-height", - "--mod-slider-tick-mark-width", - "--mod-slider-ticks-handle-background-color", - "--mod-slider-track-color", - "--mod-slider-track-color-disabled", - "--mod-slider-track-corner-radius", - "--mod-slider-track-fill-color", - "--mod-slider-track-fill-color-disabled", - "--mod-slider-track-fill-thickness", - "--mod-slider-track-height-medium", - "--mod-slider-track-thickness", - "--mod-slider-value-inline-size" - ], "component": [ "--spectrum-slider-cjk-line-height", "--spectrum-slider-control-height", @@ -289,6 +231,8 @@ "--spectrum-field-default-width-large", "--spectrum-field-default-width-medium", "--spectrum-field-default-width-small", + "--spectrum-fieldlabel-bottom-to-text", + "--spectrum-fieldlabel-top-to-text", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -310,13 +254,10 @@ "--spectrum-sans-font-family-stack", "--spectrum-spacing-300", "--spectrum-text-to-visual-75", + "--spectrum-textfield-width", "--spectrum-track-color" ], - "passthroughs": [ - "--mod-fieldlabel-bottom-to-text", - "--mod-fieldlabel-top-to-text", - "--mod-textfield-width" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-slider-filled-track-fill-color", "--highcontrast-slider-handle-background-color", diff --git a/components/slider/index.css b/components/slider/index.css index ed933f03039..a5fa66398db 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -74,11 +74,11 @@ --spectrum-slider-handle-border-radius: var(--spectrum-slider-handle-size); /* Textfield passthrough */ - --mod-textfield-width: var(--mod-slider-editable-field-inline-size, var(--spectrum-slider-editable-field-inline-size-medium)); + --spectrum-textfield-width: var(--spectrum-slider-editable-field-inline-size-medium); /* Field label passthrough */ - --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); - --mod-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); } .spectrum-Slider--sizeS { @@ -92,9 +92,9 @@ --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-small); --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-small); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-small); - --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-small); - --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); - --mod-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-textfield-width: var(--spectrum-slider-editable-field-inline-size-small); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); } .spectrum-Slider--sizeL { @@ -109,9 +109,9 @@ --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-large); --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-large); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-large); - --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-large); - --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); - --mod-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-textfield-width: var(--spectrum-slider-editable-field-inline-size-large); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; @@ -128,9 +128,9 @@ --spectrum-slider-precision-handle-height: var(--spectrum-slider-precision-handle-height-extra-large); --spectrum-slider-control-to-text-field: var(--spectrum-slider-control-to-text-field-extra-large); --spectrum-slider-editable-control-to-field-label: var(--spectrum-slider-control-to-field-label-editable-extra-large); - --mod-textfield-width: var(--spectrum-slider-editable-field-inline-size-extra-large); - --mod-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-300); - --mod-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-textfield-width: var(--spectrum-slider-editable-field-inline-size-extra-large); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-300); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 22px; @@ -142,7 +142,7 @@ /* Don't let z-index'd child elements float above other things on the page */ z-index: 0; display: block; - inline-size: var(--mod-slider-inline-size, var(--spectrum-slider-inline-size)); + inline-size: var(--spectrum-slider-inline-size); user-select: none; @@ -152,7 +152,7 @@ } &:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp) { - margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2); + margin-block-start: calc(var(--spectrum-slider-ramp-track-height) / 2); } } @@ -168,7 +168,7 @@ inline-size: var(--spectrum-slider-precision-handle-width); block-size: var(--spectrum-slider-precision-handle-height); margin-inline: 0; - inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--spectrum-slider-precision-handle-height) / 2); + inset-block-start: calc(var(--spectrum-slider-control-height) / 2 - var(--spectrum-slider-precision-handle-height) / 2); margin-inline-start: calc((var(--spectrum-slider-precision-handle-width) + var(--spectrum-slider-handle-border-width)) * -0.5); } } @@ -184,7 +184,7 @@ flex: 1; .spectrum-Slider-label { - margin-inline-end: var(--mod-slider-control-to-side-field-label, var(--spectrum-slider-control-to-side-field-label)); + margin-inline-end: var(--spectrum-slider-control-to-side-field-label); } } @@ -193,8 +193,8 @@ } .spectrum-Slider-value { - margin-inline-start: var(--mod-slider-control-to-text-field, var(--spectrum-slider-control-to-text-field)); - inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size)); + margin-inline-start: var(--spectrum-slider-control-to-text-field); + inline-size: var(--spectrum-slider-value-inline-size); text-align: start; } } @@ -206,7 +206,7 @@ .spectrum-Slider-content--editable { display: flex; align-items: center; - gap: var(--mod-slider-control-to-text-field, var(--spectrum-slider-control-to-text-field)); + gap: var(--spectrum-slider-control-to-text-field); .spectrum-Slider-controls { /* This allows the text field to grow to design spec inline size */ @@ -227,7 +227,7 @@ align-items: center; } - block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); + block-size: var(--spectrum-slider-control-height); vertical-align: top; } @@ -243,17 +243,17 @@ As of February 2023 we do not have tokens yet tokens for Ramp and Tick variants, using control-height here instead. */ .spectrum-Slider--tick { - margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); + margin-block-end: var(--spectrum-slider-control-height); } .spectrum-Slider-track, .spectrum-Slider-fill { - block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)); + block-size: var(--spectrum-slider-track-fill-thickness); box-sizing: border-box; position: absolute; z-index: 1; - inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)) / 2); + inset-block-start: calc(var(--spectrum-slider-control-height) / 2 - var(--spectrum-slider-track-fill-thickness) / 2); inset-inline-start: 0; inset-inline-end: auto; pointer-events: none; @@ -280,25 +280,25 @@ .spectrum-Slider-track { &:first-of-type { &::before { - border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-start-start-radius: var(--spectrum-slider-track-corner-radius); + border-end-start-radius: var(--spectrum-slider-track-corner-radius); } } &:last-of-type { &::before { - border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-start-end-radius: var(--spectrum-slider-track-corner-radius); + border-end-end-radius: var(--spectrum-slider-track-corner-radius); } } } .spectrum-Slider-track ~ .spectrum-Slider-track { inset-inline-start: auto; - inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + inset-inline-end: var(--spectrum-slider-range-track-reset); padding-block: 0; padding-inline-end: 0; - margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + margin-inline-start: var(--spectrum-slider-range-track-reset); user-select: none; touch-action: none; /* Disable touch scrolling on touch devices to allow dragging slider handle */ } @@ -307,7 +307,7 @@ .spectrum-Slider--range { .spectrum-Slider-track ~ .spectrum-Slider-track { inset-inline: auto; - margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + margin-inline: var(--spectrum-slider-range-track-reset); } } @@ -320,7 +320,7 @@ .spectrum-Slider-fill--right { padding-block: 0; padding-inline-start: 0; - padding-inline-end: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))); + padding-inline-end: calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-handle-gap)); } .spectrum-Slider--range { @@ -331,30 +331,30 @@ .spectrum-Slider-track { &:first-of-type { padding-inline-start: 0; - inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + inset-inline-start: var(--spectrum-slider-range-track-reset); inset-inline-end: auto; } &:first-of-type::before { - border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-start-start-radius: var(--spectrum-slider-track-corner-radius); + border-end-start-radius: var(--spectrum-slider-track-corner-radius); } &:last-of-type { padding-inline-end: 0; inset-inline-start: auto; - inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + inset-inline-end: var(--spectrum-slider-range-track-reset); } &:last-of-type::before { - border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-start-end-radius: var(--spectrum-slider-track-corner-radius); + border-end-end-radius: var(--spectrum-slider-track-corner-radius); } } } .spectrum-Slider-ramp { - block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)); + block-size: var(--spectrum-slider-ramp-track-height); position: absolute; inline-size: 100%; @@ -368,36 +368,36 @@ } .spectrum-Slider-handle { - border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))); - background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); + border-color: var(--highcontrast-slider-handle-border-color, var(--spectrum-slider-handle-border-color)); + background: var(--highcontrast-slider-handle-background-color, var(--spectrum-slider-handle-background-color)); position: absolute; inset-inline-start: 0; z-index: 2; display: inline-block; box-sizing: border-box; - inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); - block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + inline-size: var(--spectrum-slider-handle-size); + block-size: var(--spectrum-slider-handle-size); - inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2); + inset-block-start: calc(var(--spectrum-slider-control-height) / 2 - var(--spectrum-slider-handle-size) / 2); margin-block: 0; - margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0; - border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width)); + margin-inline: calc(var(--spectrum-slider-handle-size) / -2) 0; + border-width: var(--spectrum-slider-handle-border-width); border-style: solid; - border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-size)); + border-radius: var(--spectrum-slider-handle-size); - transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + transition: border-width var(--spectrum-animation-duration-100) ease-in-out; outline: none; &:hover { - border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))); + border-color: var(--highcontrast-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover)); } &:active, &.is-dragged { - border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); + border-color: var(--highcontrast-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)); transform: perspective(var(--spectrum-slider-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } @@ -417,12 +417,12 @@ inset-block-start: 50%; transition: - box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, - inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, - block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; + box-shadow var(--spectrum-animation-duration-100) ease-out, + inline-size var(--spectrum-animation-duration-100) ease-out, + block-size var(--spectrum-animation-duration-100) ease-out; - inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); - block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + inline-size: var(--spectrum-slider-handle-size); + block-size: var(--spectrum-slider-handle-size); border-radius: 100%; transform: translate(-50%, -50%); @@ -436,13 +436,13 @@ .spectrum-Slider:not(.is-disabled) &.is-focused, .spectrum-Slider:not(.is-disabled) &:focus, .spectrum-Slider:not(.is-disabled) &:focus-visible { - border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))); + border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus)); outline: 0; &::before { - box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))); - inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-slider-focus-indicator-gap)) * 2); - block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-slider-focus-indicator-gap)) * 2); + box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus)); + inline-size: calc(var(--spectrum-slider-handle-size) + var(--spectrum-slider-focus-indicator-gap) * 2); + block-size: calc(var(--spectrum-slider-handle-size) + var(--spectrum-slider-focus-indicator-gap) * 2); } } } @@ -455,13 +455,13 @@ /* Remove the margin for input in Firefox and Safari. */ margin: 0; - inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); - block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + inline-size: var(--spectrum-slider-handle-size); + block-size: var(--spectrum-slider-handle-size); padding: 0; position: absolute; - inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size)); - inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left)); + inset-block-start: var(--spectrum-slider-input-top-size); + inset-inline-start: var(--spectrum-slider-input-left); overflow: hidden; opacity: 0; @@ -482,23 +482,23 @@ position: relative; inline-size: auto; - font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); - line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - font-weight: var(--mod-slider-label-font-weight, var(--spectrum-slider-label-font-weight)); - font-style: var(--mod-slider-label-font-style, var(--spectrum-slider-label-font-style)); - font-family: var(--mod-slider-label-font-family, var(--spectrum-slider-label-font-family)); + font-size: var(--spectrum-slider-font-size); + line-height: var(--spectrum-line-height-100); + font-weight: var(--spectrum-slider-label-font-weight); + font-style: var(--spectrum-slider-label-font-style); + font-family: var(--spectrum-slider-label-font-family); /* international support */ &:lang(ja), &:lang(zh), &:lang(ko) { - line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height)); + line-height: var(--spectrum-slider-cjk-line-height); } } .spectrum-Slider-label { padding-inline-start: 0; - font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); + font-size: var(--spectrum-slider-font-size); } .spectrum-Slider-value { @@ -510,17 +510,17 @@ } .spectrum-Slider-value { - margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start)); + margin-inline-start: var(--spectrum-slider-label-margin-start); } /* setting tick marks in relation to label */ .spectrum-Slider--tick { .spectrum-Slider-controls { - margin-block-start: calc(var(--spectrum-text-to-visual-75) - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - var(--mod-slider-track-height-medium, var(--spectrum-slider-track-height-medium)) / 2); + margin-block-start: calc(var(--spectrum-text-to-visual-75) - var(--spectrum-slider-tick-mark-height) / 2 - var(--spectrum-slider-track-height-medium) / 2); } .spectrum-Slider-tickLabel { - margin-block-start: calc(var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) + var(--spectrum-text-to-visual-75)); + margin-block-start: calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-text-to-visual-75)); } } @@ -534,27 +534,27 @@ /* TODO: missing core-token for handle fill-color */ & ~ .spectrum-Slider-handleContainer { .spectrum-Slider-handle { - background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color)); + background: var(--spectrum-slider-ticks-handle-background-color); } } } .spectrum-Slider-tick { position: relative; - inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)); + inline-size: var(--spectrum-slider-tick-mark-width); /* tick marks are centered half based on slider control height and tick height */ - inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2); + inset-block-start: calc(var(--spectrum-slider-control-height) / 2 - var(--spectrum-slider-tick-mark-height) / 2); &::after { display: block; position: absolute; inset-block-start: 0; - inset-inline-start: calc(50% - calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2)); + inset-inline-start: calc(50% - calc(var(--spectrum-slider-tick-mark-width) / 2)); content: ""; - inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)); - block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)); - border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius)); + inline-size: var(--spectrum-slider-tick-mark-width); + block-size: var(--spectrum-slider-tick-mark-height); + border-radius: var(--spectrum-slider-tick-mark-border-radius); } &.spectrum-Slider-tick--track-height-large { @@ -568,9 +568,9 @@ display: flex; align-items: center; justify-content: center; - font-size: var(--mod-font-size-75, var(--spectrum-font-size-75)); - line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - color: var(--highcontrast-slider-label-text-color, var(--mod-slider-tick-label-color, var(--spectrum-slider-tick-label-color))); + font-size: var(--spectrum-font-size-75); + line-height: var(--spectrum-line-height-100); + color: var(--highcontrast-slider-label-text-color, var(--spectrum-slider-tick-label-color)); } &:first-of-type, @@ -591,7 +591,7 @@ &:first-of-type { /* fix off-by-one alignment */ - inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2); + inset-inline-start: calc(var(--spectrum-slider-tick-mark-width) / -2); .spectrum-Slider-tickLabel { inset-inline-start: 0; @@ -600,7 +600,7 @@ &:last-of-type { /* fix off-by-one alignment */ - inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2); + inset-inline-end: calc(var(--spectrum-slider-tick-mark-width) / -2); .spectrum-Slider-tickLabel { inset-inline-end: 0; @@ -618,7 +618,7 @@ } .spectrum-Slider-trackContainer { - block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); + block-size: var(--spectrum-slider-control-height); /* stop edges from peeking out */ overflow: hidden; @@ -627,40 +627,40 @@ /* Applies to the filled-offset variant to keep track the same color for highcontrast mode */ .spectrum-Slider-track { &::before { - background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); + background: var(--highcontrast-slider-track-color-static, var(--spectrum-slider-track-color)); } /* Styles below are applied to the sibling spectrum-Slider-track when filled-offset variant is activated */ & ~ .spectrum-Slider-track::before { - border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-start-end-radius: var(--spectrum-slider-track-corner-radius); + border-end-end-radius: var(--spectrum-slider-track-corner-radius); } } /* All variants other than filled-offset get a new track color for highcontrast mode */ .spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)) { &::before { - background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); + background: var(--highcontrast-slider-track-color, var(--spectrum-slider-track-color)); } } .spectrum-Slider-labelContainer { - color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))); + color: var(--highcontrast-slider-label-text-color, var(--spectrum-slider-label-text-color)); } .spectrum-Slider--filled { .spectrum-Slider-track:first-child { &::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + background: var(--highcontrast-slider-filled-track-fill-color, var(--spectrum-slider-track-fill-color)); } } } .spectrum-Slider-fill { &::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); - border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); - border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + background: var(--highcontrast-slider-filled-track-fill-color, var(--spectrum-slider-track-fill-color)); + border-start-start-radius: var(--spectrum-slider-track-corner-radius); + border-end-start-radius: var(--spectrum-slider-track-corner-radius); } } @@ -669,7 +669,7 @@ &.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type), .spectrum-Slider-fill { &::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-emphasized-track-fill-color, var(--spectrum-slider-emphasized-track-fill-color))); + background: var(--highcontrast-slider-filled-track-fill-color, var(--spectrum-slider-emphasized-track-fill-color)); } } @@ -680,11 +680,11 @@ .spectrum-Slider-ramp { .spectrum-Slider-ramp-track { - fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-track-color))); + fill: var(--highcontrast-slider-ramp-track-color, var(--spectrum-slider-track-color)); } .spectrum-Slider-ramp-track-fill { - fill: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-ramp-track-fill-color, var(--spectrum-slider-track-fill-color))); + fill: var(--highcontrast-slider-filled-track-fill-color, var(--spectrum-slider-track-fill-color)); } } @@ -695,7 +695,7 @@ .spectrum-Slider--emphasized { .spectrum-Slider-tick:nth-child(-n + 4) { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--mod-slider-emphasized-tick-mark-color, var(--spectrum-slider-emphasized-tick-mark-color))); + background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--spectrum-slider-emphasized-tick-mark-color)); } } } @@ -704,7 +704,7 @@ .spectrum-Slider--offset { &:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4) { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); + background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track)); } } } @@ -714,7 +714,7 @@ .spectrum-Slider-tick:nth-child(4), .spectrum-Slider-tick:nth-child(5) { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))); + background-color: var(--highcontrast-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track)); } } } @@ -722,13 +722,13 @@ .spectrum-Slider--range { .spectrum-Slider-track { &:not(:first-of-type, :last-of-type)::before { - background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + background: var(--highcontrast-slider-filled-track-fill-color, var(--spectrum-slider-track-fill-color)); border-start-end-radius: 0; border-end-end-radius: 0; } &:first-of-type::before { - background: var(--highcontrast-slider-track-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-color))); + background: var(--highcontrast-slider-track-color, var(--spectrum-slider-track-color)); } } } @@ -736,7 +736,7 @@ .spectrum-Slider-tick, .spectrum-Slider.is-disabled .spectrum-Slider-tick { &::after { - background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))); + background-color: var(--highcontrast-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)); } } @@ -748,59 +748,59 @@ } .spectrum-Slider-tickLabel { - color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))); + color: var(--highcontrast-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)); } .spectrum-Slider-labelContainer { - color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))); + color: var(--highcontrast-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)); } .spectrum-Slider-handle { - border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled))); - background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-background-color-disabled))); + border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)); + background: var(--highcontrast-slider-handle-disabled-background-color, var(--spectrum-slider-handle-background-color-disabled)); cursor: default; pointer-events: none; &:hover, &:active { - border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-disabled-border-color, var(--spectrum-slider-handle-border-color-disabled))); - background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))); + border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)); + background: var(--highcontrast-slider-handle-disabled-background-color, var(--spectrum-slider-handle-background-color-disabled)); } } .spectrum-Slider-track { &::before { - background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))); + background: var(--highcontrast-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)); } } &.spectrum-Slider--filled { .spectrum-Slider-track:first-child::before { - background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))); + background: var(--highcontrast-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)); } } .spectrum-Slider-fill { &::before { - background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))); + background: var(--highcontrast-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)); } } .spectrum-Slider-ramp { path { - fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled))); + fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled)); } } .spectrum-Slider-tick { &::after { - background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))); + background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color)); } } &.spectrum-Slider--range { .spectrum-Slider-track:not(:first-of-type, :last-of-type)::before { - background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))); + background: var(--highcontrast-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)); } } } diff --git a/components/splitview/dist/metadata.json b/components/splitview/dist/metadata.json index c6925723f7c..bd7a6308e59 100644 --- a/components/splitview/dist/metadata.json +++ b/components/splitview/dist/metadata.json @@ -35,24 +35,6 @@ ".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper", ".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before" ], - "modifiers": [ - "--mod-splitview-background-color", - "--mod-splitview-content-color", - "--mod-splitview-gripper-border-radius", - "--mod-splitview-gripper-border-width-horizontal", - "--mod-splitview-gripper-border-width-vertical", - "--mod-splitview-gripper-height", - "--mod-splitview-gripper-width", - "--mod-splitview-handle-background-color", - "--mod-splitview-handle-background-color-down", - "--mod-splitview-handle-background-color-focus", - "--mod-splitview-handle-background-color-hover", - "--mod-splitview-handle-width", - "--mod-splitview-vertical-gripper-outer-width", - "--mod-splitview-vertical-gripper-reset", - "--mod-splitview-vertical-gripper-width", - "--mod-splitview-vertical-width" - ], "component": [ "--spectrum-splitview-background-color", "--spectrum-splitview-content-color", diff --git a/components/splitview/index.css b/components/splitview/index.css index 990108806d3..667ff32ec5d 100644 --- a/components/splitview/index.css +++ b/components/splitview/index.css @@ -39,8 +39,8 @@ .spectrum-SplitView-pane { block-size: 100%; - background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color)); - color: var(--mod-splitview-content-color, var(--spectrum-splitview-content-color)); + background-color: var(--spectrum-splitview-background-color); + color: var(--spectrum-splitview-content-color); } .spectrum-SplitView-gripper { @@ -48,8 +48,8 @@ display: block; position: absolute; border-style: solid; - border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius)); - border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); + border-radius: var(--spectrum-splitview-gripper-border-radius); + border-color: var(--highcontrast-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)); inset-block-start: 50%; transform: translate(0, -50%); @@ -58,14 +58,14 @@ touch-action: none; /* half of (width + horizontal border - handle width) * -1 (for negative opposite) */ - inset-inline-start: calc(((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2) * -1); - inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)); - block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height)); - border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical)); - border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal)); + inset-inline-start: calc(((var(--spectrum-splitview-gripper-width) + (2 * var(--spectrum-splitview-gripper-border-width-vertical)) - var(--spectrum-splitview-gripper-width)) / 2) * -1); + inline-size: var(--spectrum-splitview-gripper-width); + block-size: var(--spectrum-splitview-gripper-height); + border-block-width: var(--spectrum-splitview-gripper-border-width-vertical); + border-inline-width: var(--spectrum-splitview-gripper-border-width-horizontal); &::before { - background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); + background-color: var(--highcontrast-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)); } } @@ -73,12 +73,12 @@ /* Contains the gripper */ position: relative; - background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); + background-color: var(--highcontrast-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)); /* Prevent text selection while dragging */ user-select: none; - inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); + inline-size: var(--spectrum-splitview-handle-width); block-size: 100%; z-index: 1; @@ -90,8 +90,8 @@ position: absolute; inset-block-start: 0; - inset-inline-start: calc(50% - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)); - inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); + inset-inline-start: calc(50% - calc(var(--spectrum-splitview-handle-width) / 2)); + inline-size: var(--spectrum-splitview-handle-width); block-size: 100%; } } @@ -112,28 +112,28 @@ &.is-draggable { &:hover, &.is-hovered { - background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); + background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)); .spectrum-SplitView-gripper { - border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); + border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)); } .spectrum-SplitView-gripper::before { - background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); + background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)); } } &:active, &.is-active { - background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); + background-color: var(--highcontrast-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)); .spectrum-SplitView-gripper { - border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); + border-color: var(--highcontrast-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)); } /* Center line of gripper */ .spectrum-SplitView-gripper::before { - background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); + background-color: var(--highcontrast-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)); } } @@ -143,15 +143,15 @@ &:focus-visible { outline: none; - background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); + background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)); .spectrum-SplitView-gripper { - border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); - box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); + border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)); + box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)); } .spectrum-SplitView-gripper::before { - background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); + background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)); } } } @@ -162,53 +162,53 @@ .spectrum-SplitView-pane { block-size: auto; - inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width)); + inline-size: var(--spectrum-splitview-vertical-width); } .spectrum-SplitView-gripper { /* half of (height + vertical border - handle width) * -1 (for negative opposite) */ - inset-block-start: calc(((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2) * -1); + inset-block-start: calc(((var(--spectrum-splitview-gripper-width) + (2 * var(--spectrum-splitview-gripper-border-width-vertical)) - var(--spectrum-splitview-gripper-width)) / 2) * -1); - transform: translate(calc(-1 * var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width))), 0); - inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)); - inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height)); - block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)); + transform: translate(calc(-1 * var(--spectrum-splitview-vertical-gripper-width)), 0); + inset-inline-start: var(--spectrum-splitview-vertical-gripper-width); + inline-size: var(--spectrum-splitview-gripper-height); + block-size: var(--spectrum-splitview-gripper-width); /* opposite of default border-width */ - border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal)); - border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical)); + border-block-width: var(--spectrum-splitview-gripper-border-width-horizontal); + border-inline-width: var(--spectrum-splitview-gripper-border-width-vertical); } .spectrum-SplitView-splitter { - inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width)); - block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); + inline-size: var(--spectrum-splitview-vertical-width); + block-size: var(--spectrum-splitview-handle-width); } .spectrum-SplitView-splitter.is-collapsed-start, .spectrum-SplitView-splitter.is-collapsed-end { .spectrum-SplitView-gripper { - inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)); + inset-inline-start: var(--spectrum-splitview-vertical-gripper-width); } /* make the center line of the gripper */ .spectrum-SplitView-gripper::before { - inset-block-start: calc(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)); - inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset)); - inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width)); - block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); + inset-block-start: calc(var(--spectrum-splitview-vertical-gripper-width) - calc(var(--spectrum-splitview-handle-width) / 2)); + inset-inline-start: var(--spectrum-splitview-vertical-gripper-reset); + inline-size: var(--spectrum-splitview-vertical-gripper-outer-width); + block-size: var(--spectrum-splitview-handle-width); } } .spectrum-SplitView-splitter.is-collapsed-start { .spectrum-SplitView-gripper { - inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset)); + inset-block-start: var(--spectrum-splitview-vertical-gripper-reset); } } .spectrum-SplitView-splitter.is-collapsed-end { .spectrum-SplitView-gripper { inset-block-start: auto; - inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset)); + inset-block-end: var(--spectrum-splitview-vertical-gripper-reset); } } } diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json index 07f3510d851..2a7fbc36799 100644 --- a/components/statuslight/dist/metadata.json +++ b/components/statuslight/dist/metadata.json @@ -35,48 +35,6 @@ ".spectrum-StatusLight:lang(ko)", ".spectrum-StatusLight:lang(zh)" ], - "modifiers": [ - "--mod-statuslight-border-width", - "--mod-statuslight-content-color-default", - "--mod-statuslight-corner-radius", - "--mod-statuslight-dot-size", - "--mod-statuslight-font-family", - "--mod-statuslight-font-size", - "--mod-statuslight-font-style", - "--mod-statuslight-font-weight", - "--mod-statuslight-height", - "--mod-statuslight-line-height", - "--mod-statuslight-line-height-cjk", - "--mod-statuslight-nonsemantic-blue-color", - "--mod-statuslight-nonsemantic-brown-color", - "--mod-statuslight-nonsemantic-celery-color", - "--mod-statuslight-nonsemantic-chartreuse-color", - "--mod-statuslight-nonsemantic-cinnamon-color", - "--mod-statuslight-nonsemantic-cyan-color", - "--mod-statuslight-nonsemantic-fuchsia-color", - "--mod-statuslight-nonsemantic-gray-color", - "--mod-statuslight-nonsemantic-green-color", - "--mod-statuslight-nonsemantic-indigo-color", - "--mod-statuslight-nonsemantic-magenta-color", - "--mod-statuslight-nonsemantic-orange-color", - "--mod-statuslight-nonsemantic-pink-color", - "--mod-statuslight-nonsemantic-purple-color", - "--mod-statuslight-nonsemantic-red-color", - "--mod-statuslight-nonsemantic-seafoam-color", - "--mod-statuslight-nonsemantic-silver-color", - "--mod-statuslight-nonsemantic-turquoise-color", - "--mod-statuslight-nonsemantic-yellow-color", - "--mod-statuslight-semantic-info-color", - "--mod-statuslight-semantic-negative-color", - "--mod-statuslight-semantic-neutral-color", - "--mod-statuslight-semantic-notice-color", - "--mod-statuslight-semantic-positive-color", - "--mod-statuslight-spacing-bottom-to-label", - "--mod-statuslight-spacing-dot-to-label", - "--mod-statuslight-spacing-top-to-dot", - "--mod-statuslight-spacing-top-to-label", - "--mod-statuslight-subdued-content-color-default" - ], "component": [ "--spectrum-status-light-dot-size-extra-large", "--spectrum-status-light-dot-size-large", diff --git a/components/statuslight/index.css b/components/statuslight/index.css index db810c053b9..3ba39103348 100644 --- a/components/statuslight/index.css +++ b/components/statuslight/index.css @@ -134,143 +134,143 @@ flex-direction: row; align-items: flex-start; - min-block-size: var(--mod-statuslight-height, var(--spectrum-statuslight-height)); + min-block-size: var(--spectrum-statuslight-height); - padding-block-start: var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)); - padding-block-end: var(--mod-statuslight-spacing-bottom-to-label, var(--spectrum-statuslight-spacing-bottom-to-label)); + padding-block-start: var(--spectrum-statuslight-spacing-top-to-label); + padding-block-end: var(--spectrum-statuslight-spacing-bottom-to-label); padding-inline: 0; box-sizing: border-box; - font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size)); - font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight)); - font-family: var(--mod-statuslight-font-family, var(--spectrum-statuslight-font-family)); - font-style: var(--mod-statuslight-font-style, var(--spectrum-statuslight-font-style)); + font-size: var(--spectrum-statuslight-font-size); + font-weight: var(--spectrum-statuslight-font-weight); + font-family: var(--spectrum-statuslight-font-family); + font-style: var(--spectrum-statuslight-font-style); - line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height)); + line-height: var(--spectrum-statuslight-line-height); - color: var(--highcontrast-statuslight-content-color-default, var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default))); + color: var(--highcontrast-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default)); &:lang(ja), &:lang(zh), &:lang(ko) { - line-height: var(--mod-statuslight-line-height-cjk, var(--spectrum-statuslight-line-height-cjk)); + line-height: var(--spectrum-statuslight-line-height-cjk); } /* Dot */ &::before { - --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label))); + --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--spectrum-statuslight-spacing-top-to-dot) - var(--spectrum-statuslight-spacing-top-to-label)); content: ""; flex-grow: 0; flex-shrink: 0; display: inline-block; - inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); - block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); - border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius)); + inline-size: var(--spectrum-statuslight-dot-size); + block-size: var(--spectrum-statuslight-dot-size); + border-radius: var(--spectrum-statuslight-corner-radius); margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot); - margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label)); + margin-inline-end: var(--spectrum-statuslight-spacing-dot-to-label); } } /* Semantic Colors */ .spectrum-StatusLight--neutral { - color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default))); + color: var(--highcontrast-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default)); &::before { - background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color)); + background-color: var(--spectrum-statuslight-semantic-neutral-color); } } .spectrum-StatusLight--info::before { - background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color)); + background-color: var(--spectrum-statuslight-semantic-info-color); } .spectrum-StatusLight--negative::before { - background-color: var(--mod-statuslight-semantic-negative-color, var(--spectrum-statuslight-semantic-negative-color)); + background-color: var(--spectrum-statuslight-semantic-negative-color); } .spectrum-StatusLight--notice::before { - background-color: var(--mod-statuslight-semantic-notice-color, var(--spectrum-statuslight-semantic-notice-color)); + background-color: var(--spectrum-statuslight-semantic-notice-color); } .spectrum-StatusLight--positive::before { - background-color: var(--mod-statuslight-semantic-positive-color, var(--spectrum-statuslight-semantic-positive-color)); + background-color: var(--spectrum-statuslight-semantic-positive-color); } /* Non-Semantic Colors */ .spectrum-StatusLight--gray::before { - background-color: var(--mod-statuslight-nonsemantic-gray-color, var(--spectrum-statuslight-nonsemantic-gray-color)); + background-color: var(--spectrum-statuslight-nonsemantic-gray-color); } .spectrum-StatusLight--red::before { - background-color: var(--mod-statuslight-nonsemantic-red-color, var(--spectrum-statuslight-nonsemantic-red-color)); + background-color: var(--spectrum-statuslight-nonsemantic-red-color); } .spectrum-StatusLight--orange::before { - background-color: var(--mod-statuslight-nonsemantic-orange-color, var(--spectrum-statuslight-nonsemantic-orange-color)); + background-color: var(--spectrum-statuslight-nonsemantic-orange-color); } .spectrum-StatusLight--yellow::before { - background-color: var(--mod-statuslight-nonsemantic-yellow-color, var(--spectrum-statuslight-nonsemantic-yellow-color)); + background-color: var(--spectrum-statuslight-nonsemantic-yellow-color); } .spectrum-StatusLight--chartreuse::before { - background-color: var(--mod-statuslight-nonsemantic-chartreuse-color, var(--spectrum-statuslight-nonsemantic-chartreuse-color)); + background-color: var(--spectrum-statuslight-nonsemantic-chartreuse-color); } .spectrum-StatusLight--celery::before { - background-color: var(--mod-statuslight-nonsemantic-celery-color, var(--spectrum-statuslight-nonsemantic-celery-color)); + background-color: var(--spectrum-statuslight-nonsemantic-celery-color); } .spectrum-StatusLight--green::before { - background-color: var(--mod-statuslight-nonsemantic-green-color, var(--spectrum-statuslight-nonsemantic-green-color)); + background-color: var(--spectrum-statuslight-nonsemantic-green-color); } .spectrum-StatusLight--seafoam::before { - background-color: var(--mod-statuslight-nonsemantic-seafoam-color, var(--spectrum-statuslight-nonsemantic-seafoam-color)); + background-color: var(--spectrum-statuslight-nonsemantic-seafoam-color); } .spectrum-StatusLight--cyan::before { - background-color: var(--mod-statuslight-nonsemantic-cyan-color, var(--spectrum-statuslight-nonsemantic-cyan-color)); + background-color: var(--spectrum-statuslight-nonsemantic-cyan-color); } .spectrum-StatusLight--blue::before { - background-color: var(--mod-statuslight-nonsemantic-blue-color, var(--spectrum-statuslight-nonsemantic-blue-color)); + background-color: var(--spectrum-statuslight-nonsemantic-blue-color); } .spectrum-StatusLight--indigo::before { - background-color: var(--mod-statuslight-nonsemantic-indigo-color, var(--spectrum-statuslight-nonsemantic-indigo-color)); + background-color: var(--spectrum-statuslight-nonsemantic-indigo-color); } .spectrum-StatusLight--purple::before { - background-color: var(--mod-statuslight-nonsemantic-purple-color, var(--spectrum-statuslight-nonsemantic-purple-color)); + background-color: var(--spectrum-statuslight-nonsemantic-purple-color); } .spectrum-StatusLight--fuchsia::before { - background-color: var(--mod-statuslight-nonsemantic-fuchsia-color, var(--spectrum-statuslight-nonsemantic-fuchsia-color)); + background-color: var(--spectrum-statuslight-nonsemantic-fuchsia-color); } .spectrum-StatusLight--magenta::before { - background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color)); + background-color: var(--spectrum-statuslight-nonsemantic-magenta-color); } .spectrum-StatusLight--pink::before { - background-color: var(--mod-statuslight-nonsemantic-pink-color, var(--spectrum-statuslight-nonsemantic-pink-color)); + background-color: var(--spectrum-statuslight-nonsemantic-pink-color); } .spectrum-StatusLight--turquoise::before { - background-color: var(--mod-statuslight-nonsemantic-turquoise-color, var(--spectrum-statuslight-nonsemantic-turquoise-color)); + background-color: var(--spectrum-statuslight-nonsemantic-turquoise-color); } .spectrum-StatusLight--cinnamon::before { - background-color: var(--mod-statuslight-nonsemantic-cinnamon-color, var(--spectrum-statuslight-nonsemantic-cinnamon-color)); + background-color: var(--spectrum-statuslight-nonsemantic-cinnamon-color); } .spectrum-StatusLight--brown::before { - background-color: var(--mod-statuslight-nonsemantic-brown-color, var(--spectrum-statuslight-nonsemantic-brown-color)); + background-color: var(--spectrum-statuslight-nonsemantic-brown-color); } .spectrum-StatusLight--silver::before { - background-color: var(--mod-statuslight-nonsemantic-silver-color, var(--spectrum-statuslight-nonsemantic-silver-color)); + background-color: var(--spectrum-statuslight-nonsemantic-silver-color); } @media (forced-colors: active) { @@ -282,7 +282,7 @@ /* Dot */ &::before { forced-color-adjust: none; - border: var(--mod-statuslight-border-width, var(--spectrum-statuslight-border-width)) solid ButtonText; + border: var(--spectrum-statuslight-border-width) solid ButtonText; } } } diff --git a/components/steplist/dist/metadata.json b/components/steplist/dist/metadata.json index 27faf429c11..efaf6f86bd3 100644 --- a/components/steplist/dist/metadata.json +++ b/components/steplist/dist/metadata.json @@ -42,26 +42,6 @@ ".spectrum-Steplist-markerContainer", ".spectrum-Steplist-segment" ], - "modifiers": [ - "--mod-steplist-complete-label-text-color", - "--mod-steplist-complete-marker-background-color", - "--mod-steplist-complete-segment-border-block-end-color", - "--mod-steplist-current-label-text-color", - "--mod-steplist-current-marker-color", - "--mod-steplist-current-marker-color-key-focus", - "--mod-steplist-incomplete-label-color", - "--mod-steplist-incomplete-marker-border-color", - "--mod-steplist-incomplete-segment-border-block-end-color", - "--mod-steplist-label-labelOffset", - "--mod-steplist-label-text-size", - "--mod-steplist-marker-diameter", - "--mod-steplist-marker-hitArea", - "--mod-steplist-segment-height", - "--mod-steplist-sidePadding", - "--mod-steplist-small-topPadding", - "--mod-steplist-step-width", - "--mod-steplist-topPadding" - ], "component": [ "--spectrum-steplist-complete-label-text-color", "--spectrum-steplist-complete-marker-background-color", @@ -72,15 +52,15 @@ "--spectrum-steplist-incomplete-label-color", "--spectrum-steplist-incomplete-marker-border-color", "--spectrum-steplist-incomplete-segment-border-block-end-color", - "--spectrum-steplist-label-labelOffset", + "--spectrum-steplist-label-label-offset", "--spectrum-steplist-label-text-size", "--spectrum-steplist-marker-diameter", - "--spectrum-steplist-marker-hitArea", + "--spectrum-steplist-marker-hit-area", "--spectrum-steplist-segment-height", - "--spectrum-steplist-sidePadding", - "--spectrum-steplist-small-topPadding", + "--spectrum-steplist-side-padding", + "--spectrum-steplist-small-top-padding", "--spectrum-steplist-step-width", - "--spectrum-steplist-topPadding" + "--spectrum-steplist-top-padding" ], "global": [ "--spectrum-gray-200", diff --git a/components/steplist/index.css b/components/steplist/index.css index 62900591018..95fb9c40247 100644 --- a/components/steplist/index.css +++ b/components/steplist/index.css @@ -22,20 +22,20 @@ --spectrum-steplist-marker-diameter: 8px; /* The width of the hit area */ - --spectrum-steplist-marker-hitArea: 20px; + --spectrum-steplist-marker-hit-area: 20px; /* The height of the line */ --spectrum-steplist-segment-height: 2px; /* This gives enough space for one line of text */ - --spectrum-steplist-topPadding: 22px; - --spectrum-steplist-small-topPadding: 11px; + --spectrum-steplist-top-padding: 22px; + --spectrum-steplist-small-top-padding: 11px; /* This gives enough space for the longest possible label */ - --spectrum-steplist-sidePadding: 60px; + --spectrum-steplist-side-padding: 60px; /* Offset from the BOTTOM of the steplist */ - --spectrum-steplist-label-labelOffset: 10px; + --spectrum-steplist-label-label-offset: 10px; /* Font size of the label */ --spectrum-steplist-label-text-size: 12px; @@ -53,9 +53,9 @@ display: block; margin: 0; - padding-block-start: var(--mod-steplist-topPadding, var(--spectrum-steplist-topPadding)); - padding-inline-start: var(--mod-steplist-sidePadding, var(--spectrum-steplist-sidePadding)); - padding-inline-end: var(--mod-steplist-sidePadding, var(--spectrum-steplist-sidePadding)); + padding-block-start: var(--spectrum-steplist-top-padding); + padding-inline-start: var(--spectrum-steplist-side-padding); + padding-inline-end: var(--spectrum-steplist-side-padding); text-align: center; white-space: nowrap; @@ -76,7 +76,7 @@ &.is-focused, *:focus { .spectrum-Steplist-marker { - background-color: var(--highcontrast-steplist-current-marker-color-key-focus, var(--mod-steplist-current-marker-color-key-focus, var(--spectrum-steplist-current-marker-color-key-focus))); + background-color: var(--highcontrast-steplist-current-marker-color-key-focus, var(--spectrum-steplist-current-marker-color-key-focus)); } } } @@ -84,7 +84,7 @@ /* Small (w/o label or tooltip) */ .spectrum-Steplist--small { - padding-block: var(--mod-steplist-small-topPadding, var(--spectrum-steplist-small-topPadding)); + padding-block: var(--spectrum-steplist-small-top-padding); padding-inline: 0; .spectrum-Steplist-item { @@ -127,24 +127,24 @@ vertical-align: bottom; box-sizing: content-box; - inline-size: var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)); + inline-size: var(--spectrum-steplist-step-width); padding-block: 0; - padding-inline: 0 calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) / 2); + padding-inline: 0 calc(var(--spectrum-steplist-step-width) / 2); /* Completed State */ &.is-complete { .spectrum-Steplist-label { - color: var(--mod-steplist-complete-label-text-color, var(--spectrum-steplist-complete-label-text-color)); + color: var(--spectrum-steplist-complete-label-text-color); } .spectrum-Steplist-marker { - background-color: var(--highcontrast-steplist-complete-marker-background-color, var(--mod-steplist-complete-marker-background-color, var(--spectrum-steplist-complete-marker-background-color))); + background-color: var(--highcontrast-steplist-complete-marker-background-color, var(--spectrum-steplist-complete-marker-background-color)); border: none; } /* The next step's line should be solid */ & + .spectrum-Steplist-item .spectrum-Steplist-segment { - border-block-end-width: var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)); + border-block-end-width: var(--spectrum-steplist-segment-height); border-block-end-style: solid; } } @@ -158,19 +158,19 @@ } .spectrum-Steplist-label { - color: var(--mod-steplist-current-label-text-color, var(--spectrum-steplist-current-label-text-color)); + color: var(--spectrum-steplist-current-label-text-color); } .spectrum-Steplist-marker { border: none; - background-color: var(--highcontrast-steplist-current-marker-color, var(--mod-steplist-current-marker-color, var(--spectrum-steplist-current-marker-color))); + background-color: var(--highcontrast-steplist-current-marker-color, var(--spectrum-steplist-current-marker-color)); } } &.is-complete, &.is-selected { .spectrum-Steplist-segment { - border-block-end-color: var(--mod-steplist-complete-segment-border-block-end-color, var(--spectrum-steplist-complete-segment-border-block-end-color)); + border-block-end-color: var(--spectrum-steplist-complete-segment-border-block-end-color); } } } @@ -178,17 +178,17 @@ .spectrum-Steplist-label { position: absolute; inset-inline-start: 50%; - inset-block-end: var(--mod-steplist-label-labelOffset, var(--spectrum-steplist-label-labelOffset)); + inset-block-end: var(--spectrum-steplist-label-label-offset); display: block; - inline-size: calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5); + inline-size: calc(var(--spectrum-steplist-step-width) * 1.5); - font-size: var(--mod-steplist-label-text-size, var(--spectrum-steplist-label-text-size)); + font-size: var(--spectrum-steplist-label-text-size); white-space: normal; transform: translateX(-50%); - color: var(--mod-steplist-incomplete-label-color, var(--spectrum-steplist-incomplete-label-color)); + color: var(--spectrum-steplist-incomplete-label-color); &:dir(rtl) { transform: translateX(50%); @@ -203,10 +203,10 @@ inset-block-end: -10px; inset-inline-start: 50%; - inline-size: var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)); - block-size: var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)); + inline-size: var(--spectrum-steplist-marker-hit-area); + block-size: var(--spectrum-steplist-marker-hit-area); - margin-inline-start: calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); + margin-inline-start: calc(-1 * calc(var(--spectrum-steplist-marker-hit-area) / 2)); } /* Circle step marker */ @@ -217,16 +217,16 @@ position: absolute; inset-block-start: 50%; inset-inline-start: 50%; - margin-block-start: calc(-1 * calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) / 2)); - margin-inline-start: calc(-1 * calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) / 2)); + margin-block-start: calc(-1 * calc(var(--spectrum-steplist-marker-diameter) / 2)); + margin-inline-start: calc(-1 * calc(var(--spectrum-steplist-marker-diameter) / 2)); - inline-size: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); - block-size: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); + inline-size: var(--spectrum-steplist-marker-diameter); + block-size: var(--spectrum-steplist-marker-diameter); - border-radius: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); + border-radius: var(--spectrum-steplist-marker-diameter); border: 2px solid; - border-color: var(--mod-steplist-incomplete-marker-border-color, var(--spectrum-steplist-incomplete-marker-border-color)); + border-color: var(--spectrum-steplist-incomplete-marker-border-color); background: transparent; } @@ -235,17 +235,17 @@ display: block; z-index: 1; position: absolute; - inset-inline-end: calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 1.5)); + inset-inline-end: calc(var(--spectrum-steplist-step-width) - calc(var(--spectrum-steplist-marker-diameter) * 1.5)); box-sizing: content-box; - inline-size: calc(calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 2)); - inset-block-end: calc(-1 * calc(var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)) / 2)); + inline-size: calc(calc(var(--spectrum-steplist-step-width) * 1.5) - calc(var(--spectrum-steplist-marker-diameter) * 2)); + inset-block-end: calc(-1 * calc(var(--spectrum-steplist-segment-height) / 2)); /* Default is dashed */ - border-block-end-width: var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)); + border-block-end-width: var(--spectrum-steplist-segment-height); border-block-end-style: dashed; - border-block-end-color: var(--mod-steplist-incomplete-segment-border-block-end-color, var(--spectrum-steplist-incomplete-segment-border-block-end-color)); + border-block-end-color: var(--spectrum-steplist-incomplete-segment-border-block-end-color); } /* First step overrides */ @@ -282,18 +282,18 @@ inset-inline-end: 0; margin-inline-start: 0; - margin-inline-end: calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); + margin-inline-end: calc(-1 * calc(var(--spectrum-steplist-marker-hit-area) / 2)); } .spectrum-Steplist-segment { - inset-inline-end: var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)); + inset-inline-end: var(--spectrum-steplist-marker-diameter); inset-inline-start: auto; } } .spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child { - inline-size: calc(calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) / 2) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 2.5)); + inline-size: calc(calc(var(--spectrum-steplist-step-width) / 2) - calc(var(--spectrum-steplist-marker-diameter) * 2.5)); } /* Single step */ @@ -316,7 +316,7 @@ /* Override last-child bits */ margin-inline-end: 0; - margin-inline-start: calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2)); + margin-inline-start: calc(-1 * calc(var(--spectrum-steplist-marker-hit-area) / 2)); } } diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index a8b7ec49b01..19736dbe37d 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -67,51 +67,6 @@ ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus:hover", ".spectrum-NumberField:not(.is-disabled, .is-readOnly):hover" ], - "modifiers": [ - "--mod-numberfield-background-color", - "--mod-numberfield-background-color-disabled", - "--mod-numberfield-block-size", - "--mod-numberfield-border-color", - "--mod-numberfield-border-color-disabled", - "--mod-numberfield-border-color-focus", - "--mod-numberfield-border-color-focus-hover", - "--mod-numberfield-border-color-focus-hover-invalid", - "--mod-numberfield-border-color-focus-invalid", - "--mod-numberfield-border-color-hover", - "--mod-numberfield-border-color-hover-invalid", - "--mod-numberfield-border-color-invalid", - "--mod-numberfield-border-color-invalid-default", - "--mod-numberfield-border-color-invalid-focus", - "--mod-numberfield-border-color-invalid-focus-hover", - "--mod-numberfield-border-color-invalid-hover", - "--mod-numberfield-border-color-invalid-keyboard-focus", - "--mod-numberfield-border-color-keyboard-focus", - "--mod-numberfield-border-color-keyboard-focus-invalid", - "--mod-numberfield-border-radius", - "--mod-numberfield-border-width", - "--mod-numberfield-button-inline-offset", - "--mod-numberfield-focus-indicator-color", - "--mod-numberfield-focus-indicator-gap", - "--mod-numberfield-focus-indicator-width", - "--mod-numberfield-font-family", - "--mod-numberfield-font-size", - "--mod-numberfield-font-style", - "--mod-numberfield-font-weight", - "--mod-numberfield-hidden-stepper-min-inline-size", - "--mod-numberfield-inline-size", - "--mod-numberfield-label-to-field", - "--mod-numberfield-line-height", - "--mod-numberfield-min-inline-size", - "--mod-numberfield-spacing-block-end-edge-to-text", - "--mod-numberfield-spacing-block-start-edge-to-text", - "--mod-numberfield-spacing-field-to-helptext", - "--mod-numberfield-text-color", - "--mod-numberfield-text-color-disabled", - "--mod-numberfield-text-color-focus", - "--mod-numberfield-text-color-focus-hover", - "--mod-numberfield-text-color-hover", - "--mod-numberfield-text-color-keyboard-focus" - ], "component": [], "global": [ "--spectrum-border-width-200", @@ -196,6 +151,7 @@ "--spectrum-numberfield-background-color", "--spectrum-numberfield-background-color-disabled", "--spectrum-numberfield-block-size", + "--spectrum-numberfield-border-color", "--spectrum-numberfield-border-color-default", "--spectrum-numberfield-border-color-disabled", "--spectrum-numberfield-border-color-focus", @@ -247,27 +203,26 @@ "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75", + "--spectrum-textfield-background-color", + "--spectrum-textfield-background-color-disabled", + "--spectrum-textfield-font-family", + "--spectrum-textfield-font-size", + "--spectrum-textfield-font-style", + "--spectrum-textfield-font-weight", + "--spectrum-textfield-height", + "--spectrum-textfield-icon-spacing-block-invalid", + "--spectrum-textfield-spacing-block-end", + "--spectrum-textfield-spacing-block-start", + "--spectrum-textfield-text-color-default", + "--spectrum-textfield-text-color-disabled", + "--spectrum-textfield-text-color-focus", + "--spectrum-textfield-width", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-textfield-background-color", - "--mod-textfield-background-color-disabled", - "--mod-textfield-font-family", - "--mod-textfield-font-size", - "--mod-textfield-font-style", - "--mod-textfield-font-weight", - "--mod-textfield-height", - "--mod-textfield-icon-spacing-block-invalid", - "--mod-textfield-spacing-block-end", - "--mod-textfield-spacing-block-start", - "--mod-textfield-text-color-default", - "--mod-textfield-text-color-disabled", - "--mod-textfield-text-color-focus", - "--mod-textfield-width" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-numberfield-background-color", "--highcontrast-numberfield-border-color", diff --git a/components/stepper/index.css b/components/stepper/index.css index 90dcf6864f9..20cc05e7e79 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -14,54 +14,52 @@ /* --- Component-level definitions --- */ .spectrum-NumberField { /* Border */ - --spectrum-numberfield-border-radius: var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-medium)); - --spectrum-numberfield-border-width: var(--mod-numberfield-border-width, var(--spectrum-border-width-200)); - --spectrum-numberfield-border-color-default: var(--highcontrast-numberfield-border-color, var(--mod-numberfield-border-color, var(--spectrum-gray-300))); - --spectrum-numberfield-border-color-hover: var(--highcontrast-numberfield-border-color-hover, var(--mod-numberfield-border-color-hover, var(--spectrum-gray-400))); - --spectrum-numberfield-border-color-focus: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-gray-800))); - --spectrum-numberfield-border-color-keyboard-focus: var(--highcontrast-numberfield-border-color-keyboard-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800))); - --spectrum-numberfield-border-color-focus-hover: var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-gray-900))); - --spectrum-numberfield-border-color-disabled: var(--mod-numberfield-border-color-disabled, var(--spectrum-disabled-border-color)); + --spectrum-numberfield-border-radius: var(--spectrum-corner-radius-medium-size-medium); + --spectrum-numberfield-border-width: var(--spectrum-border-width-200); + --spectrum-numberfield-border-color-default: var(--highcontrast-numberfield-border-color, var(--spectrum-gray-300)); + --spectrum-numberfield-border-color-hover: var(--highcontrast-numberfield-border-color-hover, var(--spectrum-gray-400)); + --spectrum-numberfield-border-color-focus: var(--highcontrast-numberfield-border-color-focus, var(--spectrum-gray-800)); + --spectrum-numberfield-border-color-keyboard-focus: var(--highcontrast-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800)); + --spectrum-numberfield-border-color-focus-hover: var(--highcontrast-numberfield-border-color-focus-hover, var(--spectrum-gray-900)); + --spectrum-numberfield-border-color-disabled: var(--spectrum-disabled-border-color); /* Invalid border */ - --spectrum-numberfield-border-color-invalid-default: var(--mod-numberfield-border-color-invalid-default, var(--spectrum-negative-border-color-default)); - --spectrum-numberfield-border-color-invalid-hover: var(--mod-numberfield-border-color-invalid-hover, var(--spectrum-negative-border-color-hover)); - --spectrum-numberfield-border-color-invalid-focus: var(--mod-numberfield-border-color-invalid-focus, var(--spectrum-negative-border-color-focus)); - --spectrum-numberfield-border-color-invalid-focus-hover: var(--mod-numberfield-border-color-invalid-focus-hover, var(--spectrum-negative-border-color-focus-hover)); - --spectrum-numberfield-border-color-invalid-keyboard-focus: var(--mod-numberfield-border-color-invalid-keyboard-focus, var(--spectrum-negative-border-color-key-focus)); + --spectrum-numberfield-border-color-invalid-default: var(--spectrum-negative-border-color-default); + --spectrum-numberfield-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); + --spectrum-numberfield-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); + --spectrum-numberfield-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); + --spectrum-numberfield-border-color-invalid-keyboard-focus: var(--spectrum-negative-border-color-key-focus); /* Text color */ - --spectrum-numberfield-text-color: var(--mod-numberfield-text-color, var(--spectrum-neutral-content-color-default)); - --spectrum-numberfield-text-color-hover: var(--mod-numberfield-text-color-hover, var(--spectrum-neutral-content-color-hover)); + --spectrum-numberfield-text-color: var(--spectrum-neutral-content-color-default); + --spectrum-numberfield-text-color-hover: var(--spectrum-neutral-content-color-hover); /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */ - --spectrum-numberfield-text-color-focus: var(--mod-numberfield-text-color-focus, var(--spectrum-neutral-content-color-focus)); + --spectrum-numberfield-text-color-focus: var(--spectrum-neutral-content-color-focus); /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */ - --spectrum-numberfield-text-color-focus-hover: var(--mod-numberfield-text-color-focus-hover, var(--spectrum-neutral-content-color-focus-hover)); - --spectrum-numberfield-text-color-keyboard-focus: var(--mod-numberfield-text-color-keyboard-focus, var(--spectrum-neutral-content-color-key-focus)); - --spectrum-numberfield-text-color-disabled: var(--mod-numberfield-text-color-disabled, var(--spectrum-disabled-content-color)); + --spectrum-numberfield-text-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); + --spectrum-numberfield-text-color-keyboard-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-numberfield-text-color-disabled: var(--spectrum-disabled-content-color); /* Background */ - --spectrum-numberfield-background-color: var(--highcontrast-numberfield-background-color, var(--mod-numberfield-background-color, var(--spectrum-gray-25))); - - /* --spectrum-numberfield-background-color-disabled: var(--mod-numberfield-background-color-disabled, var(--spectrum-disabled-background-color)); */ - --spectrum-numberfield-background-color-disabled: var(--mod-numberfield-background-color-disabled, var(--spectrum-gray-25)); + --spectrum-numberfield-background-color: var(--highcontrast-numberfield-background-color, var(--spectrum-gray-25)); + --spectrum-numberfield-background-color-disabled: var(--spectrum-gray-25); /* Font */ - --spectrum-numberfield-font-family: var(--mod-numberfield-font-family, var(--spectrum-sans-font-family-stack)); - --spectrum-numberfield-font-weight: var(--mod-numberfield-font-weight, var(--spectrum-regular-font-weight)); - --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-100)); - --spectrum-numberfield-font-style: var(--mod-numberfield-font-style, var(--spectrum-default-font-style)); - --spectrum-numberfield-line-height: var(--mod-numberfield-line-height, var(--spectrum-line-height-100)); + --spectrum-numberfield-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-numberfield-font-weight: var(--spectrum-regular-font-weight); + --spectrum-numberfield-font-size: var(--spectrum-font-size-100); + --spectrum-numberfield-font-style: var(--spectrum-default-font-style); + --spectrum-numberfield-line-height: var(--spectrum-line-height-100); /* Focus indicator */ - --spectrum-numberfield-focus-indicator-width: var(--mod-numberfield-focus-indicator-width, var(--spectrum-focus-indicator-thickness)); - --spectrum-numberfield-focus-indicator-gap: var(--mod-numberfield-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); - --spectrum-numberfield-focus-indicator-color: var(--highcontrast-numberfield-focus-indicator-color, var(--mod-numberfield-focus-indicator-color, var(--spectrum-focus-indicator-color))); + --spectrum-numberfield-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --spectrum-numberfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-numberfield-focus-indicator-color: var(--highcontrast-numberfield-focus-indicator-color, var(--spectrum-focus-indicator-color)); /* Dimensions */ - --spectrum-numberfield-block-size: var(--mod-numberfield-block-size, var(--spectrum-component-height-100)); - --spectrum-numberfield-inline-size: var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-medium)); - --spectrum-numberfield-min-inline-size: var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-medium)); + --spectrum-numberfield-block-size: var(--spectrum-component-height-100); + --spectrum-numberfield-inline-size: var(--spectrum-field-default-width-medium); + --spectrum-numberfield-min-inline-size: var(--spectrum-number-field-with-stepper-minimum-width-medium); --spectrum-numberfield-hidden-stepper-min-inline-size: calc(var(--spectrum-number-field-minimum-width-multiplier) * var(--spectrum-numberfield-block-size)); /* Icons */ @@ -75,7 +73,7 @@ /* Button size and offset (to properly position the validation icons/padding) */ --spectrum-numberfield-button-inline-padding: var(--spectrum-in-field-button-side-edge-to-fill-medium); --spectrum-numberfield-button-container-size: calc((var(--spectrum-component-height-100) - var(--spectrum-in-field-button-edge-to-fill-medium)) * 2); - --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-medium)); + --spectrum-numberfield-button-inline-offset: var(--spectrum-in-field-stepper-to-end-medium); /* the input to the stepper buttons spacing accommodates the built-in padding on the infield buttons */ --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: calc(var(--spectrum-text-to-visual-100) - var(--spectrum-numberfield-button-inline-padding)); @@ -91,12 +89,12 @@ --spectrum-numberfield-spacing-block-end-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-100); &.spectrum-NumberField--sizeS { - --spectrum-numberfield-border-radius: var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-small)); - --spectrum-numberfield-block-size: var(--mod-numberfield-block-size, var(--spectrum-component-height-75)); - --spectrum-numberfield-inline-size: var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-small)); - --spectrum-numberfield-min-inline-size: var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-small)); + --spectrum-numberfield-border-radius: var(--spectrum-corner-radius-medium-size-small); + --spectrum-numberfield-block-size: var(--spectrum-component-height-75); + --spectrum-numberfield-inline-size: var(--spectrum-field-default-width-small); + --spectrum-numberfield-min-inline-size: var(--spectrum-number-field-with-stepper-minimum-width-small); --spectrum-numberfield-spacing-inline-edge-to-text: calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-numberfield-border-width)); - --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-75)); + --spectrum-numberfield-font-size: var(--spectrum-font-size-75); --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: calc(var(--spectrum-text-to-visual-75) - var(--spectrum-numberfield-button-inline-padding)); @@ -107,7 +105,7 @@ /* this 👇 container size does not include the infield buttons' inline-padding */ --spectrum-numberfield-button-container-size: calc(var(--spectrum-component-height-75) * 2); - --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-small)); + --spectrum-numberfield-button-inline-offset: var(--spectrum-in-field-stepper-to-end-small); --spectrum-numberfield-spacing-block-start-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-75); @@ -117,12 +115,12 @@ } &.spectrum-NumberField--sizeL { - --spectrum-numberfield-border-radius: var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-large)); - --spectrum-numberfield-block-size: var(--mod-numberfield-block-size, var(--spectrum-component-height-200)); - --spectrum-numberfield-inline-size: var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-large)); - --spectrum-numberfield-min-inline-size: var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-large)); + --spectrum-numberfield-border-radius: var(--spectrum-corner-radius-medium-size-large); + --spectrum-numberfield-block-size: var(--spectrum-component-height-200); + --spectrum-numberfield-inline-size: var(--spectrum-field-default-width-large); + --spectrum-numberfield-min-inline-size: var(--spectrum-number-field-with-stepper-minimum-width-large); --spectrum-numberfield-spacing-inline-edge-to-text: calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-numberfield-border-width)); - --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-200)); + --spectrum-numberfield-font-size: var(--spectrum-font-size-200); --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: calc(var(--spectrum-text-to-visual-200) - var(--spectrum-numberfield-button-inline-padding)); @@ -131,7 +129,7 @@ --spectrum-numberfield-button-inline-padding: var(--spectrum-in-field-button-side-edge-to-fill-large); --spectrum-numberfield-button-container-size: calc((var(--spectrum-component-height-200) - var(--spectrum-in-field-button-edge-to-fill-large)) * 2); - --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-large)); + --spectrum-numberfield-button-inline-offset: var(--spectrum-in-field-stepper-to-end-large); --spectrum-numberfield-spacing-block-start-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-200); @@ -141,12 +139,12 @@ } &.spectrum-NumberField--sizeXL { - --spectrum-numberfield-border-radius: var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-extra-large)); - --spectrum-numberfield-block-size: var(--mod-numberfield-block-size, var(--spectrum-component-height-300)); - --spectrum-numberfield-inline-size: var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-extra-large)); - --spectrum-numberfield-min-inline-size: var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-extra-large)); + --spectrum-numberfield-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); + --spectrum-numberfield-block-size: var(--spectrum-component-height-300); + --spectrum-numberfield-inline-size: var(--spectrum-field-default-width-extra-large); + --spectrum-numberfield-min-inline-size: var(--spectrum-number-field-with-stepper-minimum-width-extra-large); --spectrum-numberfield-spacing-inline-edge-to-text: calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-numberfield-border-width)); - --spectrum-numberfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-font-size-300)); + --spectrum-numberfield-font-size: var(--spectrum-font-size-300); --spectrum-numberfield-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); --spectrum-numberfield-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); --spectrum-numberfield-spacing-min-inline-end-text-to-stepper: calc(var(--spectrum-text-to-visual-300) - var(--spectrum-numberfield-button-inline-padding)); @@ -155,7 +153,7 @@ --spectrum-numberfield-button-inline-padding: var(--spectrum-in-field-button-side-edge-to-fill-extra-large); --spectrum-numberfield-button-container-size: calc((var(--spectrum-component-height-300) - var(--spectrum-in-field-button-edge-to-fill-extra-large)) * 2); - --spectrum-numberfield-button-inline-offset: var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-extra-large)); + --spectrum-numberfield-button-inline-offset: var(--spectrum-in-field-stepper-to-end-extra-large); --spectrum-numberfield-spacing-block-start-edge-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-300); @@ -166,46 +164,46 @@ &:not(.is-disabled, .is-readOnly).is-hover, &:not(.is-disabled, .is-readOnly):hover { - --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-hover, var(--mod-numberfield-border-color-hover, var(--spectrum-numberfield-border-color-hover))); + --spectrum-numberfield-border-color: var(--highcontrast-numberfield-border-color-hover, var(--spectrum-numberfield-border-color-hover)); } &.is-invalid { - --mod-numberfield-border-color: var(--mod-numberfield-border-color-invalid, var(--spectrum-numberfield-border-color-invalid-default)); - --mod-numberfield-border-color-hover: var(--mod-numberfield-border-color-hover-invalid, var(--spectrum-numberfield-border-color-invalid-hover)); - --mod-numberfield-border-color-focus: var(--mod-numberfield-border-color-focus-invalid, var(--spectrum-numberfield-border-color-invalid-focus)); - --mod-numberfield-border-color-focus-hover: var(--mod-numberfield-border-color-focus-hover-invalid, var(--spectrum-numberfield-border-color-invalid-focus-hover)); - --mod-numberfield-border-color-keyboard-focus: var(--mod-numberfield-border-color-keyboard-focus-invalid, var(--spectrum-numberfield-border-color-invalid-keyboard-focus)); + --spectrum-numberfield-border-color: var(--spectrum-numberfield-border-color-invalid-default); + --spectrum-numberfield-border-color-hover: var(--spectrum-numberfield-border-color-invalid-hover); + --spectrum-numberfield-border-color-focus: var(--spectrum-numberfield-border-color-invalid-focus); + --spectrum-numberfield-border-color-focus-hover: var(--spectrum-numberfield-border-color-invalid-focus-hover); + --spectrum-numberfield-border-color-keyboard-focus: var(--spectrum-numberfield-border-color-invalid-keyboard-focus); } &:not(.is-disabled, .is-readOnly).is-focused, &:not(.is-disabled, .is-readOnly):focus, &:not(.is-disabled, .is-readOnly):focus-within { - --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-numberfield-border-color-focus))); + --spectrum-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--spectrum-numberfield-border-color-focus)); &.is-hover, &:hover { - --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-numberfield-border-color-focus-hover))); + --spectrum-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus-hover, var(--spectrum-numberfield-border-color-focus-hover)); } } &:not(.is-disabled, .is-readOnly).is-keyboardFocused, &:not(.is-disabled, .is-readOnly):focus-visible, &:not(.is-disabled, .is-readOnly):focus-within { - --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-numberfield-border-color-keyboard-focus))); + --spectrum-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus, var(--spectrum-numberfield-border-color-keyboard-focus)); &.is-hover, &:hover { - --mod-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-numberfield-border-color-focus-hover))); + --spectrum-numberfield-border-color: var(--highcontrast-numberfield-border-color-focus-hover, var(--spectrum-numberfield-border-color-focus-hover)); } } &.is-readOnly { - --mod-numberfield-border-color: var(--spectrum-numberfield-border-color-disabled); + --spectrum-numberfield-border-color: var(--spectrum-numberfield-border-color-disabled); } &.is-disabled { - --mod-numberfield-border-color: var(--spectrum-numberfield-border-color-disabled); - --mod-numberfield-background-color: var(--spectrum-numberfield-background-color-disabled); + --spectrum-numberfield-border-color: var(--spectrum-numberfield-border-color-disabled); + --spectrum-numberfield-background-color: var(--spectrum-numberfield-background-color-disabled); } &:lang(ja), @@ -216,44 +214,44 @@ /* @passthrough start -- MODS for sub components */ /* nested textfield */ - --mod-textfield-spacing-block-start: var(--mod-numberfield-spacing-block-start-edge-to-text, var(--spectrum-numberfield-spacing-block-start-edge-to-text)); - --mod-textfield-spacing-block-end: var(--mod-numberfield-spacing-block-end-edge-to-text, var(--spectrum-numberfield-spacing-block-end-edge-to-text)); - --mod-textfield-icon-spacing-block-invalid: calc(var(--spectrum-numberfield-spacing-block-start-edge-to-alert-icon) - var(--spectrum-numberfield-border-width)); + --spectrum-textfield-spacing-block-start: var(--spectrum-numberfield-spacing-block-start-edge-to-text); + --spectrum-textfield-spacing-block-end: var(--spectrum-numberfield-spacing-block-end-edge-to-text); + --spectrum-textfield-icon-spacing-block-invalid: calc(var(--spectrum-numberfield-spacing-block-start-edge-to-alert-icon) - var(--spectrum-numberfield-border-width)); /* this mod overrides the inline-size of the nested textfield */ - --mod-textfield-width: 100%; - --mod-textfield-height: calc(var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size)) - var(--mod-numberfield-border-width, var(--spectrum-numberfield-border-width)) * 2); - --mod-textfield-background-color: var(--mod-numberfield-background-color, var(--spectrum-numberfield-background-color, transparent)); - --mod-textfield-text-color-default: var(--mod-numberfield-text-color, var(--spectrum-numberfield-text-color)); - --mod-textfield-text-color-disabled: var(--mod-numberfield-text-color-disabled, var(--spectrum-numberfield-text-color-disabled)); - --mod-textfield-background-color-disabled: var(--mod-numberfield-background-color-disabled, var(--spectrum-numberfield-background-color-disabled)); - --mod-textfield-font-family: var(--mod-numberfield-font-family, var(--spectrum-numberfield-font-family)); - --mod-textfield-font-weight: var(--mod-numberfield-font-weight, var(--spectrum-numberfield-font-weight)); - --mod-textfield-font-style: var(--mod-numberfield-font-style, var(--spectrum-numberfield-font-style)); - --mod-textfield-font-size: var(--mod-numberfield-font-size, var(--spectrum-numberfield-font-size)); + --spectrum-textfield-width: 100%; + --spectrum-textfield-height: calc(var(--spectrum-numberfield-block-size) - var(--spectrum-numberfield-border-width) * 2); + --spectrum-textfield-background-color: var(--spectrum-numberfield-background-color, transparent); + --spectrum-textfield-text-color-default: var(--spectrum-numberfield-text-color); + --spectrum-textfield-text-color-disabled: var(--spectrum-numberfield-text-color-disabled); + --spectrum-textfield-background-color-disabled: var(--spectrum-numberfield-background-color-disabled); + --spectrum-textfield-font-family: var(--spectrum-numberfield-font-family); + --spectrum-textfield-font-weight: var(--spectrum-numberfield-font-weight); + --spectrum-textfield-font-style: var(--spectrum-numberfield-font-style); + --spectrum-textfield-font-size: var(--spectrum-numberfield-font-size); &:not(.is-disabled).is-hover, &:not(.is-disabled):hover { /* overrides the textfield mod */ - --mod-textfield-text-color-default: var(--mod-numberfield-text-color-hover, var(--spectrum-numberfield-text-color-hover)); + --spectrum-textfield-text-color-default: var(--spectrum-numberfield-text-color-hover); } &:not(.is-disabled).is-keyboardFocused, &:not(.is-disabled):focus-visible, &:not(.is-disabled):focus-within { /* overrides the textfield mod */ - --mod-textfield-text-color-default: var(--mod-numberfield-text-color-keyboard-focus, var(--spectrum-numberfield-text-color-keyboard-focus)); + --spectrum-textfield-text-color-default: var(--spectrum-numberfield-text-color-keyboard-focus); } &:not(.is-disabled).is-focused, &:not(.is-disabled):focus, &:not(.is-disabled):focus-within { - --mod-textfield-text-color-focus: var(--mod-numberfield-text-color-focus, var(--spectrum-numberfield-text-color-focus)); + --spectrum-textfield-text-color-focus: var(--spectrum-numberfield-text-color-focus); &.is-hover, &:hover { /* overrides the textfield mod */ - --mod-textfield-text-color-focus: var(--mod-numberfield-text-color-focus-hover, var(--spectrum-numberfield-text-color-focus-hover)); + --spectrum-textfield-text-color-focus: var(--spectrum-numberfield-text-color-focus-hover); } } /* @passthrough end */ @@ -278,7 +276,7 @@ } &.spectrum-NumberField--hiddenStepper { - min-inline-size: var(--mod-numberfield-hidden-stepper-min-inline-size, var(--spectrum-numberfield-hidden-stepper-min-inline-size)); + min-inline-size: var(--spectrum-numberfield-hidden-stepper-min-inline-size); .spectrum-NumberField-textfield { padding-inline-end: var(--spectrum-numberfield-spacing-inline-edge-to-text); @@ -324,12 +322,12 @@ /* Number field label */ .spectrum-NumberField-fieldLabel { - margin-block-end: var(--mod-numberfield-label-to-field, var(--spectrum-numberfield-spacing-label-to-field)); + margin-block-end: var(--spectrum-numberfield-spacing-label-to-field); } /* Number field help text */ .spectrum-NumberField-helpText { - margin-block-start: var(--mod-numberfield-spacing-field-to-helptext, var(--spectrum-numberfield-spacing-field-to-helptext)); + margin-block-start: var(--spectrum-numberfield-spacing-field-to-helptext); } /* Number field container includes .spectrum-Textfield and .spectrum-InfieldButtons */ @@ -387,7 +385,7 @@ /* container for stepUp and stepDown buttons */ .spectrum-NumberField-buttons { position: absolute; - inset-inline-end: calc(var(--mod-numberfield-button-inline-offset, var(--spectrum-numberfield-button-inline-offset, 0px))); + inset-inline-end: calc(var(--spectrum-numberfield-button-inline-offset, 0px)); } /* --- High contrast settings --- */ diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json index 5b40e74c96e..d1cff8f63cf 100644 --- a/components/swatch/dist/metadata.json +++ b/components/swatch/dist/metadata.json @@ -55,33 +55,6 @@ ".spectrum-Swatch[disabled]", ".spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon" ], - "modifiers": [ - "--mod-add-button-background", - "--mod-add-button-background-down", - "--mod-add-button-background-hover", - "--mod-add-button-background-keyboard-focus", - "--mod-animation-duration-100", - "--mod-corner-radius-full", - "--mod-mixed-button-background", - "--mod-swatch-border", - "--mod-swatch-border-color", - "--mod-swatch-border-color-selected", - "--mod-swatch-border-opacity", - "--mod-swatch-border-radius", - "--mod-swatch-border-thickness", - "--mod-swatch-border-thickness-selected", - "--mod-swatch-disabled-icon-color", - "--mod-swatch-disabled-icon-size", - "--mod-swatch-focus-indicator-color", - "--mod-swatch-focus-indicator-gap", - "--mod-swatch-focus-indicator-thickness", - "--mod-swatch-icon-border-color", - "--mod-swatch-icon-color", - "--mod-swatch-inner-border-color-selected", - "--mod-swatch-size", - "--mod-swatch-slash-icon-color", - "--mod-swatch-slash-thickness" - ], "component": [ "--spectrum-swatch-border", "--spectrum-swatch-border-color", diff --git a/components/swatch/index.css b/components/swatch/index.css index f5f261a3fa0..8824277998c 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -13,22 +13,22 @@ .spectrum-Swatch { /* Placeholder tokens */ - --spectrum-swatch-icon-border-color: var(--mod-swatch-icon-border-color, rgb(0 0 0 / var(--spectrum-swatch-disabled-icon-border-opacity))); + --spectrum-swatch-icon-border-color: rgb(0 0 0 / var(--spectrum-swatch-disabled-icon-border-opacity)); /* Size */ - --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-medium)); - --spectrum-swatch-border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-100)); - --spectrum-swatch-border-thickness: var(--mod-swatch-border-thickness, var(--spectrum-border-width-100)); - --spectrum-swatch-border-thickness-selected: var(--mod-swatch-border-thickness-selected, var(--spectrum-border-width-200)); - --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-75)); - --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-medium)); + --spectrum-swatch-size: var(--spectrum-swatch-size-medium); + --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100); + --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); + --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); /* Color */ - --spectrum-swatch-border-color-selected: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-gray-1000))); - --spectrum-swatch-inner-border-color-selected: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25))); - --spectrum-swatch-disabled-icon-color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-white))); - --spectrum-swatch-icon-color: var(--highcontrast-swatch-icon-color, var(--mod-swatch-icon-color, var(--spectrum-neutral-content-color-default))); - --spectrum-swatch-slash-icon-color: var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-negative-visual-color))); + --spectrum-swatch-border-color-selected: var(--highcontrast-swatch-border-color-selected, var(--spectrum-gray-1000)); + --spectrum-swatch-inner-border-color-selected: var(--highcontrast-swatch-background-color-selected, var(--spectrum-gray-25)); + --spectrum-swatch-disabled-icon-color: var(--highcontrast-swatch-disabled-icon-color, var(--spectrum-white)); + --spectrum-swatch-icon-color: var(--highcontrast-swatch-icon-color, var(--spectrum-neutral-content-color-default)); + --spectrum-swatch-slash-icon-color: var(--highcontrast-swatch-fill-foreground-color, var(--spectrum-negative-visual-color)); --spectrum-mixed-button-background: var(--spectrum-gray-25); --spectrum-add-button-background: var(--spectrum-gray-100); --spectrum-add-button-background-hover: var(--spectrum-gray-200); @@ -36,12 +36,12 @@ --spectrum-add-button-background-keyboard-focus: var(--spectrum-gray-200); /* TODO update to use tokens once available */ - --spectrum-swatch-border: rgb(from var(--mod-swatch-border-color, var(--spectrum-swatch-border-color)) r g b / var(--mod-swatch-border-opacity, var(--spectrum-swatch-border-opacity))); + --spectrum-swatch-border: rgb(from var(--spectrum-swatch-border-color) r g b / var(--spectrum-swatch-border-opacity)); /* Focus ring */ - --spectrum-swatch-focus-indicator-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color))); - --spectrum-swatch-focus-indicator-thickness: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - --spectrum-swatch-focus-indicator-gap: var(--mod-swatch-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); + --spectrum-swatch-focus-indicator-color: var(--highcontrast-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color)); + --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); } /* The add-swatch's border color is the same as its background color for all states. */ @@ -58,21 +58,21 @@ } .spectrum-Swatch--sizeXS { - --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-extra-small)); - --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-50)); - --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-extra-small)); + --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); } .spectrum-Swatch--sizeS { - --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-small)); - --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-75)); - --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-small)); + --spectrum-swatch-size: var(--spectrum-swatch-size-small); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); } .spectrum-Swatch--sizeL { - --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-large)); - --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-200)); - --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-large)); + --spectrum-swatch-size: var(--spectrum-swatch-size-large); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large); } .spectrum-Swatch { @@ -104,22 +104,22 @@ } &.is-mixedValue { - --spectrum-picked-color: var(--mod-mixed-button-background, var(--spectrum-mixed-button-background)); + --spectrum-picked-color: var(--spectrum-mixed-button-background); } &.is-addSwatch { - --spectrum-picked-color: var(--mod-add-button-background, var(--spectrum-add-button-background)); + --spectrum-picked-color: var(--spectrum-add-button-background); .spectrum-Swatch-fill { background: var(--spectrum-picked-color); } &:hover { - --spectrum-picked-color: var(--mod-add-button-background-hover, var(--spectrum-add-button-background-hover)); + --spectrum-picked-color: var(--spectrum-add-button-background-hover); } &:active { - --spectrum-picked-color: var(--mod-add-button-background-down, var(--spectrum-add-button-background-down)); + --spectrum-picked-color: var(--spectrum-add-button-background-down); } &:hover, @@ -129,7 +129,7 @@ &.is-keyboardFocused, &:focus-visible { - --spectrum-picked-color: var(--mod-add-button-background-keyboard-focus, var(--spectrum-add-button-background-keyboard-focus)); + --spectrum-picked-color: var(--spectrum-add-button-background-keyboard-focus); } .spectrum-Swatch-icon { @@ -140,11 +140,11 @@ &.is-keyboardFocused, &:focus-visible { - outline-width: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-swatch-focus-indicator-thickness)); - outline-color: var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color)); - outline-offset: var(--mod-swatch-focus-indicator-gap, var(--spectrum-swatch-focus-indicator-gap)); + outline-width: var(--spectrum-swatch-focus-indicator-thickness); + outline-color: var(--spectrum-swatch-focus-indicator-color); + outline-offset: var(--spectrum-swatch-focus-indicator-gap); - transition: outline-color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + transition: outline-color var(--spectrum-animation-duration-100) ease-in-out; } &.is-selected { @@ -248,7 +248,7 @@ overflow: hidden; - border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); + border-radius: var(--spectrum-swatch-border-radius); /* Swatch fill: Default */ &::before { @@ -261,8 +261,8 @@ background: var(--spectrum-picked-color, transparent); /* Swatch border */ - box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--mod-swatch-border, var(--spectrum-swatch-border))); - border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); + box-shadow: inset 0 0 0 var(--spectrum-swatch-border-thickness) var(--highcontrast-swatch-border-color, var(--spectrum-swatch-border)); + border-radius: var(--spectrum-swatch-border-radius); } } @@ -322,7 +322,7 @@ .spectrum-Swatch-fill::before, &.is-selected .spectrum-Swatch-fill, &.is-selected .spectrum-Swatch-fill::before { - border-radius: var(--mod-corner-radius-full, var(--spectrum-corner-radius-full)); + border-radius: var(--spectrum-corner-radius-full); } &.is-selected .spectrum-Swatch-fill { @@ -338,18 +338,18 @@ block-size: 100%; transition: - width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, - height var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + width var(--spectrum-animation-duration-100) ease-in-out, + height var(--spectrum-animation-duration-100) ease-in-out; } /* Windows high contrast mode */ @media (forced-colors: active) { .spectrum-Swatch { - --mod-mixed-button-background: ButtonFace; + --spectrum-mixed-button-background: ButtonFace; - --mod-add-button-background: ButtonFace; - --mod-add-button-background-hover: ButtonText; - --mod-add-button-background-down: ButtonText; + --spectrum-add-button-background: ButtonFace; + --spectrum-add-button-background-hover: ButtonText; + --spectrum-add-button-background-down: ButtonText; --highcontrast-swatch-disabled-icon-color: GrayText; --highcontrast-swatch-focus-indicator-color: ButtonText; diff --git a/components/swatchgroup/dist/metadata.json b/components/swatchgroup/dist/metadata.json index 73ac1e248a6..2e8d530d644 100644 --- a/components/swatchgroup/dist/metadata.json +++ b/components/swatchgroup/dist/metadata.json @@ -6,7 +6,6 @@ ".spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeM, .spectrum-Swatch--sizeL)", ".spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeXS, .spectrum-Swatch--sizeS)" ], - "modifiers": ["--mod-swatchgroup-spacing"], "component": [ "--spectrum-swatch-group-spacing-spacious", "--spectrum-swatchgroup-spacing" @@ -14,8 +13,9 @@ "global": [ "--spectrum-spacing-100", "--spectrum-spacing-50", - "--spectrum-spacing-75" + "--spectrum-spacing-75", + "--spectrum-swatch-border-opacity" ], - "passthroughs": ["--mod-swatch-border-opacity"], + "passthroughs": [], "high-contrast": [] } diff --git a/components/swatchgroup/index.css b/components/swatchgroup/index.css index c90ada7453c..cc88f6779cf 100644 --- a/components/swatchgroup/index.css +++ b/components/swatchgroup/index.css @@ -14,7 +14,7 @@ .spectrum-SwatchGroup { --spectrum-swatchgroup-spacing: var(--spectrum-spacing-75); - --mod-swatch-border-opacity: 0.2; + --spectrum-swatch-border-opacity: 0.2; } .spectrum-SwatchGroup { @@ -22,7 +22,7 @@ flex-flow: row wrap; align-items: flex-start; justify-content: flex-start; - gap: var(--mod-swatchgroup-spacing, var(--spectrum-swatchgroup-spacing)); + gap: var(--spectrum-swatchgroup-spacing); } .spectrum-SwatchGroup--compact { diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 03beda3b924..bc61a8e77f6 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -65,54 +65,6 @@ ".spectrum-Switch:hover .spectrum-Switch-switch:before", ".spectrum-Switch:hover ~ .spectrum-Switch-label" ], - "modifiers": [ - "--mod-switch-animation-duration-switch", - "--mod-switch-background-color", - "--mod-switch-background-color-disabled", - "--mod-switch-background-color-selected-default", - "--mod-switch-background-color-selected-disabled", - "--mod-switch-background-color-selected-down", - "--mod-switch-background-color-selected-focus", - "--mod-switch-background-color-selected-hover", - "--mod-switch-border-color-default", - "--mod-switch-border-color-disabled", - "--mod-switch-border-color-down", - "--mod-switch-border-color-focus", - "--mod-switch-border-color-hover", - "--mod-switch-border-color-selected-default", - "--mod-switch-border-color-selected-down", - "--mod-switch-border-color-selected-focus", - "--mod-switch-border-color-selected-hover", - "--mod-switch-border-radius", - "--mod-switch-border-width", - "--mod-switch-cjk-line-height", - "--mod-switch-control-height", - "--mod-switch-control-label-spacing", - "--mod-switch-control-width", - "--mod-switch-focus-indicator-color", - "--mod-switch-focus-indicator-gap", - "--mod-switch-focus-indicator-thickness", - "--mod-switch-font-size", - "--mod-switch-handle-background-color-default", - "--mod-switch-handle-background-color-disabled", - "--mod-switch-handle-background-color-down", - "--mod-switch-handle-background-color-focus", - "--mod-switch-handle-background-color-hover", - "--mod-switch-handle-background-color-selected", - "--mod-switch-handle-background-color-selected-disabled", - "--mod-switch-handle-selected-size", - "--mod-switch-handle-size", - "--mod-switch-height", - "--mod-switch-label-color-default", - "--mod-switch-label-color-disabled", - "--mod-switch-label-color-down", - "--mod-switch-label-color-focus", - "--mod-switch-label-color-hover", - "--mod-switch-line-height", - "--mod-switch-spacing-bottom-to-label", - "--mod-switch-spacing-top-to-control", - "--mod-switch-spacing-top-to-label" - ], "component": [ "--spectrum-switch-animation-duration-label", "--spectrum-switch-animation-duration-switch", diff --git a/components/switch/index.css b/components/switch/index.css index f5d230cb767..30ea1945e9e 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -140,7 +140,7 @@ display: inline-flex; align-items: flex-start; position: relative; - min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height)); + min-block-size: var(--spectrum-switch-min-height); max-inline-size: 100%; vertical-align: top; } @@ -167,30 +167,30 @@ } .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))); - margin-inline: var(--mod-switch-control-label-spacing, var(--spectrum-switch-control-label-spacing)); - margin-block-start: var(--mod-switch-spacing-top-to-label, var(--spectrum-switch-spacing-top-to-label)); - margin-block-end: var(--mod-switch-spacing-bottom-to-label, var(--spectrum-switch-spacing-bottom-to-label)); - font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size)); - line-height: var(--mod-switch-line-height, var(--spectrum-switch-line-height)); + color: var(--highcontrast-switch-label-color-default, var(--spectrum-switch-label-color-default)); + margin-inline: var(--spectrum-switch-control-label-spacing); + margin-block-start: var(--spectrum-switch-spacing-top-to-label); + margin-block-end: var(--spectrum-switch-spacing-bottom-to-label); + font-size: var(--spectrum-switch-font-size); + line-height: var(--spectrum-switch-line-height); transition: color var(--spectrum-switch-animation-duration-label) ease-in-out; &:lang(ja), &:lang(zh), &:lang(ko) { - line-height: var(--mod-switch-cjk-line-height, var(--spectrum-switch-cjk-line-height)); + line-height: var(--spectrum-switch-cjk-line-height); } .spectrum-Switch:hover ~ & { - color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))); + color: var(--highcontrast-switch-label-color-hover, var(--spectrum-switch-label-color-hover)); } .spectrum-Switch:active ~ & { - color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))); + color: var(--highcontrast-switch-label-color-down, var(--spectrum-switch-label-color-down)); } .spectrum-Switch-input:focus-visible ~ & { - color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))); + color: var(--highcontrast-switch-label-color-focus, var(--spectrum-switch-label-color-focus)); } } @@ -200,10 +200,10 @@ position: relative; - inline-size: var(--mod-switch-control-width, var(--spectrum-switch-control-width)); + inline-size: var(--spectrum-switch-control-width); /* Fix vertical alignment when not wrapping since we're flex-start */ - margin-block: calc(var(--mod-switch-height, var(--spectrum-switch-min-height)) - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control, var(--spectrum-switch-spacing-top-to-control))); + margin-block: calc(var(--spectrum-switch-min-height) - var(--spectrum-switch-control-height) - var(--spectrum-switch-spacing-top-to-control)); margin-inline: 0; flex-grow: 0; flex-shrink: 0; @@ -211,53 +211,53 @@ vertical-align: middle; transition: - background var(--mod-switch-animation-duration-switch, var(--spectrum-switch-animation-duration-switch)) ease-in-out, - border var(--mod-switch-animation-duration-switch, var(--spectrum-switch-animation-duration-switch)) ease-in-out; + background var(--spectrum-switch-animation-duration-switch) ease-in-out, + border var(--spectrum-switch-animation-duration-switch) ease-in-out; - block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); + block-size: var(--spectrum-switch-control-height); inset-inline-start: 0; inset-inline-end: 0; - background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color))); - border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius)); - border-width: var(--mod-switch-border-width, var(--spectrum-switch-border-width)); - border-color: var(--highcontrast-switch-border-color-default, var(--mod-switch-border-color-default, var(--spectrum-switch-border-color-default))); + background-color: var(--highcontrast-switch-background-color, var(--spectrum-switch-background-color)); + border-radius: var(--spectrum-switch-border-radius); + border-width: var(--spectrum-switch-border-width); + border-color: var(--highcontrast-switch-border-color-default, var(--spectrum-switch-border-color-default)); border-style: solid; .spectrum-Switch:hover & { - border-color: var(--highcontrast-switch-border-color-hover, var(--mod-switch-border-color-hover, var(--spectrum-switch-border-color-hover))); + border-color: var(--highcontrast-switch-border-color-hover, var(--spectrum-switch-border-color-hover)); } .spectrum-Switch.spectrum-Switch:active &, .spectrum-Switch--active { - border-color: var(--highcontrast-switch-border-color-down, var(--mod-switch-border-color-down, var(--spectrum-switch-border-color-down))); + border-color: var(--highcontrast-switch-border-color-down, var(--spectrum-switch-border-color-down)); } .spectrum-Switch-input:focus-visible + & { - border-color: var(--highcontrast-switch-border-color-focus, var(--mod-switch-border-color-focus, var(--spectrum-switch-border-color-focus))); + border-color: var(--highcontrast-switch-border-color-focus, var(--spectrum-switch-border-color-focus)); } .spectrum-Switch-input:checked + & { - background-color: var(--highcontrast-switch-background-color-selected-default, var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))); - border-color: var(--highcontrast-switch-border-color-selected-default, var(--mod-switch-border-color-selected-default, var(--spectrum-switch-border-color-selected-default))); + background-color: var(--highcontrast-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default)); + border-color: var(--highcontrast-switch-border-color-selected-default, var(--spectrum-switch-border-color-selected-default)); .spectrum-Switch:hover & { - background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))); - border-color: var(--highcontrast-switch-border-color-selected-hover, var(--mod-switch-border-color-selected-hover, var(--spectrum-switch-border-color-selected-hover))); + background-color: var(--highcontrast-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover)); + border-color: var(--highcontrast-switch-border-color-selected-hover, var(--spectrum-switch-border-color-selected-hover)); } /* Added specifity to ensure active state takes precedence over hover media queries */ .spectrum-Switch.spectrum-Switch:active &, .spectrum-Switch--active & { - background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))); - border-color: var(--highcontrast-switch-border-color-selected-down, var(--mod-switch-border-color-selected-down, var(--spectrum-switch-border-color-selected-down))); + background-color: var(--highcontrast-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down)); + border-color: var(--highcontrast-switch-border-color-selected-down, var(--spectrum-switch-border-color-selected-down)); } } .spectrum-Switch-input:checked:focus-visible + & { - background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))); - border-color: var(--highcontrast-switch-border-color-selected-focus, var(--mod-switch-border-color-selected-focus, var(--spectrum-switch-border-color-selected-focus))); + background-color: var(--highcontrast-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus)); + border-color: var(--highcontrast-switch-border-color-selected-focus, var(--spectrum-switch-border-color-selected-focus)); } /* :before is used for the handle of the switch */ @@ -273,50 +273,50 @@ transform var(--spectrum-switch-animation-duration-switch) ease-in-out, box-shadow var(--spectrum-switch-animation-duration-switch) ease-in-out; - inline-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size)); - block-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size)); + inline-size: var(--spectrum-switch-handle-size); + block-size: var(--spectrum-switch-handle-size); - inset-block-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-handle-size, var(--spectrum-switch-handle-size))) * 0.25); - inset-inline-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-handle-size, var(--spectrum-switch-handle-size))) * 0.25); + inset-block-start: calc((var(--spectrum-switch-control-height) - var(--spectrum-switch-handle-size)) * 0.25); + inset-inline-start: calc((var(--spectrum-switch-control-height) - var(--spectrum-switch-handle-size)) * 0.25); - background-color: var(--highcontrast-switch-handle-background-color-default, var(--mod-switch-handle-background-color-default, var(--spectrum-switch-handle-background-color-default))); - border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius)); + background-color: var(--highcontrast-switch-handle-background-color-default, var(--spectrum-switch-handle-background-color-default)); + border-radius: var(--spectrum-switch-border-radius); .spectrum-Switch:hover & { - background-color: var(--highcontrast-switch-handle-background-color-hover, var(--mod-switch-handle-background-color-hover, var(--spectrum-switch-handle-background-color-hover))); + background-color: var(--highcontrast-switch-handle-background-color-hover, var(--spectrum-switch-handle-background-color-hover)); } .spectrum-Switch.spectrum-Switch:active & { - background-color: var(--highcontrast-switch-handle-background-color-down, var(--mod-switch-handle-background-color-down, var(--spectrum-switch-handle-background-color-down))); + background-color: var(--highcontrast-switch-handle-background-color-down, var(--spectrum-switch-handle-background-color-down)); } .spectrum-Switch-input:focus-visible + & { - background-color: var(--highcontrast-switch-handle-background-color-focus, var(--mod-switch-handle-background-color-focus, var(--spectrum-switch-handle-background-color-focus))); + background-color: var(--highcontrast-switch-handle-background-color-focus, var(--spectrum-switch-handle-background-color-focus)); } /* Handle size changes when selected/checked */ .spectrum-Switch-input:checked + & { - background-color: var(--highcontrast-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))); + background-color: var(--highcontrast-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected)); - inline-size: var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size)); - block-size: var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size)); + inline-size: var(--spectrum-switch-handle-selected-size); + block-size: var(--spectrum-switch-handle-selected-size); - inset-block-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-border-width, var(--spectrum-switch-border-width)) - var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size))) * 0.25); - inset-inline-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-border-width, var(--spectrum-switch-border-width)) - var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size))) * 0.25); + inset-block-start: calc((var(--spectrum-switch-control-height) - var(--spectrum-switch-border-width) - var(--spectrum-switch-handle-selected-size)) * 0.25); + inset-inline-start: calc((var(--spectrum-switch-control-height) - var(--spectrum-switch-border-width) - var(--spectrum-switch-handle-selected-size)) * 0.25); - transform: translateX(calc(100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25))); + transform: translateX(calc(100% + (var(--spectrum-switch-border-width) * 0.25))); &:dir(rtl) { - transform: translateX(calc(-1 * (100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25)))); + transform: translateX(calc(-1 * (100% + (var(--spectrum-switch-border-width) * 0.25)))); } .spectrum-Switch:hover & { - background-color: var(--highcontrast-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))); + background-color: var(--highcontrast-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected)); } .spectrum-Switch.spectrum-Switch:active &, .spectrum-Switch--active & { - background-color: var(--spectrum-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))); + background-color: var(--spectrum-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected)); } } @@ -328,18 +328,18 @@ .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + &, .spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + & { /* Add down state without overriding translateX */ - transform: translateX(calc(100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25))) perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); + transform: translateX(calc(100% + (var(--spectrum-switch-border-width) * 0.25))) perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); &:dir(rtl) { /* Add down state without overriding translateX */ - transform: translateX(calc(-1 * (100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25)))) perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); + transform: translateX(calc(-1 * (100% + (var(--spectrum-switch-border-width) * 0.25)))) perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); } } } /* :after is used for the track of the switch and the focus */ &::after { - border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius)); + border-radius: var(--spectrum-switch-border-radius); content: ""; display: block; position: absolute; @@ -355,8 +355,8 @@ border var(--spectrum-switch-animation-duration-switch) ease-in-out; .spectrum-Switch-input:focus-visible + & { - outline: var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) solid var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))); - outline-offset: calc(var(--mod-switch-focus-indicator-gap, var(--spectrum-switch-focus-indicator-gap)) + var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness))); + outline: var(--spectrum-switch-focus-indicator-thickness) solid var(--highcontrast-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)); + outline-offset: calc(var(--spectrum-switch-focus-indicator-gap) + var(--spectrum-switch-focus-indicator-thickness)); } } } @@ -367,28 +367,28 @@ .spectrum-Switch:hover .spectrum-Switch-input:disabled, .spectrum-Switch:hover .spectrum-Switch-input[disabled] { & + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))); - border-color: var(--highcontrast-switch-border-color-disabled, var(--mod-switch-border-color-disabled, var(--spectrum-switch-border-color-disabled))); + background-color: var(--highcontrast-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled)); + border-color: var(--highcontrast-switch-border-color-disabled, var(--spectrum-switch-border-color-disabled)); &::before { - background-color: var(--highcontrast-switch-handle-background-color-disabled, var(--mod-switch-handle-background-color-disabled, var(--spectrum-switch-handle-background-color-disabled))); + background-color: var(--highcontrast-switch-handle-background-color-disabled, var(--spectrum-switch-handle-background-color-disabled)); } } & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); + color: var(--highcontrast-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)); } &:checked + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))); + background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled)); &::before { - background-color: var(--highcontrast-switch-handle-background-color-selected-disabled, var(--mod-switch-handle-background-color-selected-disabled, var(--spectrum-switch-handle-background-color-selected-disabled))); + background-color: var(--highcontrast-switch-handle-background-color-selected-disabled, var(--spectrum-switch-handle-background-color-selected-disabled)); } } & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); + color: var(--highcontrast-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)); } } diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json index cf66742117b..c703cadf0b5 100644 --- a/components/table/dist/metadata.json +++ b/components/table/dist/metadata.json @@ -163,106 +163,6 @@ ".spectrum-Table:lang(zh)", ".spectrum-Table:not(.spectrum-Table-scroller)" ], - "modifiers": [ - "--mod-table-avatar-size", - "--mod-table-avatar-size-compact", - "--mod-table-avatar-size-spacious", - "--mod-table-border-color", - "--mod-table-border-radius", - "--mod-table-border-radius-quiet", - "--mod-table-border-width", - "--mod-table-cell-inline-spacing", - "--mod-table-checkbox-to-cell-content", - "--mod-table-collapsible-disclosure-inline-spacing", - "--mod-table-collapsible-icon-animation-duration", - "--mod-table-current-header-height", - "--mod-table-cursor-header-default", - "--mod-table-cursor-header-sortable", - "--mod-table-cursor-row-default", - "--mod-table-cursor-section-header", - "--mod-table-default-vertical-align", - "--mod-table-disclosure-icon-size", - "--mod-table-divider-color", - "--mod-table-drop-zone-background-color", - "--mod-table-drop-zone-outline-color", - "--mod-table-focus-indicator-color", - "--mod-table-focus-indicator-thickness", - "--mod-table-header-background-color", - "--mod-table-header-background-color-scrollable", - "--mod-table-header-font-family", - "--mod-table-header-font-size", - "--mod-table-header-font-style", - "--mod-table-header-font-weight", - "--mod-table-header-icons-color-active", - "--mod-table-header-icons-color-default", - "--mod-table-header-icons-color-hover", - "--mod-table-header-icons-color-key-focus", - "--mod-table-header-line-height", - "--mod-table-header-row-bottom-to-text", - "--mod-table-header-row-checkbox-block-spacing", - "--mod-table-header-row-top-to-text", - "--mod-table-header-text-color", - "--mod-table-header-text-transform", - "--mod-table-header-vertical-align", - "--mod-table-icon-color-active", - "--mod-table-icon-color-default", - "--mod-table-icon-color-focus", - "--mod-table-icon-color-focus-hover", - "--mod-table-icon-color-hover", - "--mod-table-icon-color-key-focus", - "--mod-table-min-header-height", - "--mod-table-min-row-height", - "--mod-table-min-row-height-compact", - "--mod-table-min-row-height-spacious", - "--mod-table-outer-border-inline-width", - "--mod-table-outer-border-inline-width-quiet", - "--mod-table-row-background-color", - "--mod-table-row-background-color-active", - "--mod-table-row-background-color-hover", - "--mod-table-row-bottom-to-text", - "--mod-table-row-checkbox-block-spacing", - "--mod-table-row-checkbox-block-spacing-compact", - "--mod-table-row-checkbox-block-spacing-spacious", - "--mod-table-row-font-family", - "--mod-table-row-font-size", - "--mod-table-row-font-style", - "--mod-table-row-font-weight", - "--mod-table-row-line-height", - "--mod-table-row-text-color", - "--mod-table-row-text-color-active", - "--mod-table-row-text-color-hover", - "--mod-table-row-top-to-text", - "--mod-table-section-header-background-color", - "--mod-table-section-header-block-end-spacing", - "--mod-table-section-header-block-start-spacing", - "--mod-table-section-header-font-family", - "--mod-table-section-header-font-size", - "--mod-table-section-header-font-style", - "--mod-table-section-header-font-weight", - "--mod-table-section-header-inline-start-spacing", - "--mod-table-section-header-line-height", - "--mod-table-section-header-min-height", - "--mod-table-section-header-text-color", - "--mod-table-selected-row-background-color", - "--mod-table-selected-row-background-color-focus", - "--mod-table-selected-row-background-color-non-emphasized", - "--mod-table-selected-row-background-color-non-emphasized-focus", - "--mod-table-summary-row-background-color", - "--mod-table-summary-row-bottom-to-text", - "--mod-table-summary-row-font-family", - "--mod-table-summary-row-font-size", - "--mod-table-summary-row-font-style", - "--mod-table-summary-row-font-weight", - "--mod-table-summary-row-line-height", - "--mod-table-summary-row-min-height", - "--mod-table-summary-row-text-color", - "--mod-table-summary-row-top-to-text", - "--mod-table-thumbnail-size", - "--mod-table-thumbnail-size-compact", - "--mod-table-thumbnail-size-spacious", - "--mod-table-transition-duration", - "--mod-table-visual-to-text" - ], "component": [ "--spectrum-table-avatar-size", "--spectrum-table-border-color", @@ -278,6 +178,7 @@ "--spectrum-table-collapsible-tier-indent", "--spectrum-table-column-header-row-bottom-to-text-medium", "--spectrum-table-column-header-row-top-to-text-medium", + "--spectrum-table-current-header-height", "--spectrum-table-default-vertical-align", "--spectrum-table-disclosure-icon-size", "--spectrum-table-divider-color", @@ -364,12 +265,32 @@ "global": [ "--spectrum-accent-visual-color", "--spectrum-animation-duration-100", + "--spectrum-avatar-block-size", + "--spectrum-avatar-inline-size", + "--spectrum-avatar-size", "--spectrum-avatar-size-100", "--spectrum-avatar-size-50", "--spectrum-avatar-size-75", "--spectrum-body-color", "--spectrum-bold-font-weight", + "--spectrum-button-background-color-default", + "--spectrum-button-background-color-down", + "--spectrum-button-background-color-focus", + "--spectrum-button-background-color-hover", + "--spectrum-button-border-radius", + "--spectrum-button-content-color-default", + "--spectrum-button-content-color-down", + "--spectrum-button-content-color-focus", + "--spectrum-button-content-color-hover", + "--spectrum-button-edge-to-text", + "--spectrum-button-focus-ring-border-radius", + "--spectrum-button-font-family", + "--spectrum-button-font-size", + "--spectrum-button-font-weight", + "--spectrum-button-line-height", + "--spectrum-button-padding-label-to-icon", "--spectrum-checkbox-control-size-small", + "--spectrum-checkbox-margin-block", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-height-100", @@ -388,6 +309,7 @@ "--spectrum-gray-700-rgb", "--spectrum-gray-75", "--spectrum-gray-900-rgb", + "--spectrum-icon-color", "--spectrum-line-height-100", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", @@ -403,33 +325,12 @@ "--spectrum-side-focus-indicator", "--spectrum-spacing-300", "--spectrum-text-to-visual-300", + "--spectrum-thumbnail-size", "--spectrum-thumbnail-size-100", "--spectrum-thumbnail-size-200", "--spectrum-thumbnail-size-75" ], - "passthroughs": [ - "--mod-avatar-block-size", - "--mod-avatar-inline-size", - "--mod-button-background-color-default", - "--mod-button-background-color-down", - "--mod-button-background-color-focus", - "--mod-button-background-color-hover", - "--mod-button-border-radius", - "--mod-button-content-color-default", - "--mod-button-content-color-down", - "--mod-button-content-color-focus", - "--mod-button-content-color-hover", - "--mod-button-edge-to-text", - "--mod-button-focus-ring-border-radius", - "--mod-button-font-family", - "--mod-button-font-size", - "--mod-button-font-weight", - "--mod-button-line-height", - "--mod-button-padding-label-to-icon", - "--mod-checkbox-margin-block", - "--mod-icon-color", - "--mod-thumbnail-size" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-table-border-color", "--highcontrast-table-cell-focus-indicator-color", diff --git a/components/table/index.css b/components/table/index.css index 9f358a08f3f..49c51161bb5 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -29,8 +29,8 @@ --spectrum-table-selected-row-background-color-active: rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); --spectrum-table-selected-row-background-color-non-emphasized-focus: rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover)); - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); - --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--spectrum-table-row-background-color)); + --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color-non-emphasized)); --spectrum-table-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); @@ -57,7 +57,7 @@ /* Individual focused table cells still have a border-radius */ --spectrum-table-focused-cell-border-radius: var(--spectrum-corner-radius-small-default); - --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus))); + --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus)); /* Visual (avatar, icons, thumbnails) */ --spectrum-table-icon-color-default: var(--spectrum-neutral-content-color-default); @@ -65,7 +65,7 @@ --spectrum-table-icon-color-active: var(--spectrum-neutral-content-color-down); --spectrum-table-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100); - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default))); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--spectrum-table-icon-color-default)); --spectrum-table-header-icons-color-default: var(--spectrum-neutral-subdued-content-color-default); --spectrum-table-header-icons-color-hover: var(--spectrum-neutral-subdued-content-color-hover); @@ -120,27 +120,27 @@ --spectrum-table-collapsible-icon-animation-duration: var(--spectrum-animation-duration-100); /* @passthrough */ - --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)); - --mod-avatar-block-size: var(--mod-table-avatar-size, var(--spectrum-table-avatar-size)); - --mod-avatar-inline-size: var(--mod-table-avatar-size, var(--spectrum-table-avatar-size)); + --spectrum-thumbnail-size: var(--spectrum-table-thumbnail-size); + --spectrum-avatar-block-size: var(--spectrum-table-avatar-size); + --spectrum-avatar-inline-size: var(--spectrum-table-avatar-size); /* Button for menus in header cells */ - --mod-button-font-weight: var(--mod-table-header-font-weight, var(--spectrum-table-header-font-weight)); - --mod-button-font-size: var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)); - --mod-button-font-family: var(--mod-table-header-font-family, var(--spectrum-table-row-font-family)); - --mod-button-line-height: var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)); - --mod-button-background-color-default: transparent; - --mod-button-background-color-hover: transparent; - --mod-button-background-color-focus: transparent; - --mod-button-background-color-down: transparent; - --mod-button-content-color-default: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)); - --mod-button-content-color-hover: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)); - --mod-button-content-color-focus: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)); - --mod-button-content-color-down: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)); - --mod-button-edge-to-text: var(--mod-table-cell-inline-spacing, var(--spectrum-table-cell-inline-spacing)); - --mod-button-padding-label-to-icon: var(--mod-table-visual-to-text, var(--spectrum-table-visual-to-text)); - --mod-button-border-radius: calc(var(--mod-table-border-radius, var(--spectrum-table-focused-cell-border-radius)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); - --mod-button-focus-ring-border-radius: calc(var(--mod-table-border-radius, var(--spectrum-table-focused-cell-border-radius)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + --spectrum-button-font-weight: var(--spectrum-table-header-font-weight); + --spectrum-button-font-size: var(--spectrum-table-row-font-size); + --spectrum-button-font-family: var(--spectrum-table-row-font-family); + --spectrum-button-line-height: var(--spectrum-table-row-line-height); + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: transparent; + --spectrum-button-background-color-focus: transparent; + --spectrum-button-background-color-down: transparent; + --spectrum-button-content-color-default: var(--spectrum-table-header-text-color); + --spectrum-button-content-color-hover: var(--spectrum-table-header-text-color); + --spectrum-button-content-color-focus: var(--spectrum-table-header-text-color); + --spectrum-button-content-color-down: var(--spectrum-table-header-text-color); + --spectrum-button-edge-to-text: var(--spectrum-table-cell-inline-spacing); + --spectrum-button-padding-label-to-icon: var(--spectrum-table-visual-to-text); + --spectrum-button-border-radius: calc(var(--spectrum-table-focused-cell-border-radius) - var(--spectrum-table-border-width)); + --spectrum-button-focus-ring-border-radius: calc(var(--spectrum-table-focused-cell-border-radius) - var(--spectrum-table-border-width)); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); @@ -156,45 +156,45 @@ /********* VARIANTS *********/ .spectrum-Table--compact { /* Size and Spacing */ - --spectrum-table-min-row-height: var(--mod-table-min-row-height-compact, var(--spectrum-table-row-height-medium-compact)); + --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-compact); --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-compact); --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-compact); /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing-compact, var(--spectrum-table-row-checkbox-to-top-medium-compact)); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-compact); /* Visuals */ - --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-75)); - --mod-table-avatar-size: var(--mod-table-avatar-size-compact, var(--spectrum-avatar-size-50)); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); + --spectrum-avatar-size: var(--spectrum-avatar-size-50); } .spectrum-Table--spacious { /* Size and Spacing */ - --spectrum-table-min-row-height: var(--mod-table-min-row-height-spacious, var(--spectrum-table-row-height-medium-spacious)); + --spectrum-table-min-row-height: var(--spectrum-table-row-height-medium-spacious); --spectrum-table-row-top-to-text: var(--spectrum-table-row-top-to-text-medium-spacious); --spectrum-table-row-bottom-to-text: var(--spectrum-table-row-bottom-to-text-medium-spacious); /* Row Selection */ - --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing-spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious)); + --spectrum-table-row-checkbox-block-spacing: var(--spectrum-table-row-checkbox-to-top-medium-spacious); /* Visuals */ - --mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-200)); - --mod-table-avatar-size: var(--mod-table-avatar-size-spacious, var(--spectrum-avatar-size-100)); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); + --spectrum-avatar-size: var(--spectrum-avatar-size-100); } .spectrum-Table--emphasized, .spectrum-Table-row .is-emphasized { - --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color))); - --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-hover))); + --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color)); + --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-hover)); } .spectrum-Table--quiet { - --spectrum-table-border-radius: var(--mod-table-border-radius-quiet, 0px); - --spectrum-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width-quiet, 0px); + --spectrum-table-border-radius: 0px; + --spectrum-table-outer-border-inline-width: 0px; } .spectrum-Table-scroller { - --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-gray-75)); + --spectrum-table-header-background-color: var(--spectrum-gray-75); } .spectrum-Table-row { @@ -211,15 +211,15 @@ &:hover { --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover); --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover); - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover))); - --spectrum-table-row-text-color: var(--highcontrast-table-row-text-color-hover, var(--mod-table-row-text-color-hover, var(--spectrum-table-row-text-color-hover))); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover)); + --spectrum-table-row-text-color: var(--highcontrast-table-row-text-color-hover, var(--spectrum-table-row-text-color-hover)); } &:active { --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover); --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover); - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-active, var(--spectrum-table-row-background-color-active))); - --spectrum-table-row-text-color: var(--highcontrast-table-row-text-color-hover, var(--mod-table-row-text-color-active, var(--spectrum-table-row-text-color-active))); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--spectrum-table-row-background-color-active)); + --spectrum-table-row-text-color: var(--highcontrast-table-row-text-color-hover, var(--spectrum-table-row-text-color-active)); } &.is-selected { @@ -245,7 +245,7 @@ .spectrum-Table-body.is-drop-target & { --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); - --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))); + --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--spectrum-table-drop-zone-background-color)); } } @@ -253,20 +253,20 @@ &.is-sortable, &.spectrum-Table-hasMenuButton, .spectrum-Table-sortButton { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-header-icons-color-default, var(--spectrum-table-header-icons-color-default))); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--spectrum-table-header-icons-color-default)); &:hover { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-header-icons-color-hover, var(--spectrum-table-header-icons-color-hover))); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--spectrum-table-header-icons-color-hover)); } &:active { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-header-icons-color-active, var(--spectrum-table-header-icons-color-active))); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--spectrum-table-header-icons-color-active)); } &:focus, &:focus-visible, &.is-keyboardFocused { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-header-icons-color-key-focus, var(--spectrum-table-header-icons-color-key-focus))); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--spectrum-table-header-icons-color-key-focus)); } } @@ -279,38 +279,38 @@ /* These styles get applied to the icon within that menu button. */ & .spectrum-Table-menuButton { - --mod-icon-color: var(--spectrum-table-header-icons-color-default); + --spectrum-icon-color: var(--spectrum-table-header-icons-color-default); &:hover { - --mod-icon-color: var(--spectrum-table-header-icons-color-hover); + --spectrum-icon-color: var(--spectrum-table-header-icons-color-hover); } &:active { - --mod-icon-color: var(--spectrum-table-header-icons-color-active); + --spectrum-icon-color: var(--spectrum-table-header-icons-color-active); } &:focus, &:focus:hover, &:focus-visible { - --mod-icon-color: var(--spectrum-table-header-icons-color-key-focus); + --spectrum-icon-color: var(--spectrum-table-header-icons-color-key-focus); } } } .spectrum-Table-row--summary { - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--spectrum-table-summary-row-background-color)); &:hover { - --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--spectrum-table-summary-row-background-color)); } } .spectrum-Table-row--sectionHeader { - --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))); + --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--spectrum-table-section-header-background-color)); &:hover { --highcontrast-table-row-text-color: var(--highcontrast-table-section-header-text-color); - --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))); + --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--spectrum-table-section-header-background-color)); } } @@ -327,30 +327,30 @@ .spectrum-Table-headCell { box-sizing: border-box; text-align: start; - vertical-align: var(--mod-table-header-vertical-align, var(--spectrum-table-default-vertical-align)); + vertical-align: var(--spectrum-table-default-vertical-align); - font-family: var(--mod-table-header-font-family, var(--spectrum-table-row-font-family)); - font-size: var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)); - font-weight: var(--mod-table-header-font-weight, var(--spectrum-table-header-font-weight)); - font-style: var(--mod-table-header-font-style, var(--spectrum-table-row-font-style)); - line-height: var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)); - text-transform: var(--mod-table-header-text-transform, none); + font-family: var(--spectrum-table-row-font-family); + font-size: var(--spectrum-table-row-font-size); + font-weight: var(--spectrum-table-header-font-weight); + font-style: var(--spectrum-table-row-font-style); + line-height: var(--spectrum-table-row-line-height); + text-transform: none; /* block-size functions as min-block-size when using display table-cell. */ - block-size: var(--mod-table-min-header-height, var(--spectrum-table-min-header-row-height)); + block-size: var(--spectrum-table-min-header-row-height); - padding-block: var(--mod-table-header-row-top-to-text, var(--spectrum-table-header-row-top-to-text)) var(--mod-table-header-row-bottom-to-text, var(--spectrum-table-header-row-bottom-to-text)); - padding-inline: var(--mod-table-cell-inline-spacing, var(--spectrum-table-cell-inline-spacing)); + padding-block: var(--spectrum-table-header-row-top-to-text) var(--spectrum-table-header-row-bottom-to-text); + padding-inline: var(--spectrum-table-cell-inline-spacing); - color: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)); - background-color: var(--mod-table-header-background-color, var(--spectrum-table-header-background-color)); - border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + color: var(--spectrum-table-header-text-color); + background-color: var(--spectrum-table-header-background-color); + border-block-start: var(--spectrum-table-border-width) solid var(--highcontrast-table-border-color, var(--spectrum-table-border-color)); - cursor: var(--mod-table-cursor-header-default, initial); + cursor: initial; outline: 0; &.is-sortable { - cursor: var(--mod-table-cursor-header-sortable, pointer); + cursor: pointer; } } @@ -360,26 +360,26 @@ } &:first-child .spectrum-Table-headCell:first-child { - border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border-inline-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-start-start-radius: var(--spectrum-table-border-radius); + border-inline-start: var(--spectrum-table-border-width) solid var(--highcontrast-table-border-color, var(--spectrum-table-border-color)); } &:last-child .spectrum-Table-headCell:last-child { - border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-start-end-radius: var(--spectrum-table-border-radius); + border-inline-end: var(--spectrum-table-border-width) solid var(--highcontrast-table-border-color, var(--spectrum-table-border-color)); } /* Checkbox cell in header row */ .spectrum-Table-checkboxCell { - padding-inline-start: calc(var(--mod-table-cell-inline-spacing, var(--spectrum-table-cell-inline-spacing)) - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width))); + padding-inline-start: calc(var(--spectrum-table-cell-inline-spacing) - var(--spectrum-table-outer-border-inline-width)); /* the calc subtraction is because the --spectrum-table-checkbox-to-text spacing value includes the inline start padding in the adjacent cell. */ - padding-inline-end: calc(var(--mod-table-checkbox-to-cell-content, var(--spectrum-table-checkbox-to-cell-content)) - var(--mod-table-cell-inline-spacing, var(--spectrum-table-cell-inline-spacing))); - padding-block: var(--mod-table-header-row-checkbox-block-spacing, var(--spectrum-table-header-row-checkbox-block-spacing)); + padding-inline-end: calc(var(--spectrum-table-checkbox-to-cell-content) - var(--spectrum-table-cell-inline-spacing)); + padding-block: var(--spectrum-table-header-row-checkbox-block-spacing); .spectrum-Table-checkbox { - --mod-checkbox-margin-block: 0px; + --spectrum-checkbox-margin-block: 0px; min-block-size: initial; } @@ -410,7 +410,7 @@ /* Ensure the button text color is the same as the header text color, particularly in high contrast mode. */ .spectrum-Table-sortButton { - color: var(--highcontrast-table-header-text-color, var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))); + color: var(--highcontrast-table-header-text-color, var(--spectrum-table-header-text-color)); /* Avoids flash of a different text color from the button in WHCM. */ forced-color-adjust: none; @@ -419,19 +419,19 @@ &:focus, &:focus-visible, &:active { - color: var(--highcontrast-table-header-text-color-hover, var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))); + color: var(--highcontrast-table-header-text-color-hover, var(--spectrum-table-header-text-color)); } } /* Focus indicator- brings the focus indicator above the border and matches the table cell dimensions. */ .spectrum-Table-sortButton::after { - inset: calc(3 * var(--mod-table-border-width, var(--spectrum-table-border-width))); + inset: calc(3 * var(--spectrum-table-border-width)); z-index: 1; } .spectrum-Table-sortButton .spectrum-Icon { color: var(--spectrum-table-icon-color); - transition: transform var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; + transition: transform var(--highcontrast-table-transition-duration, var(--spectrum-table-transition-duration)) ease-in-out; } } @@ -440,25 +440,25 @@ .spectrum-Table-sortButton { min-inline-size: 100%; justify-content: flex-start; - color: var(--highcontrast-table-header-text-color, var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))); + color: var(--highcontrast-table-header-text-color, var(--spectrum-table-header-text-color)); /* Avoids flash of a different text color from the button in WHCM. */ forced-color-adjust: none; &:hover { - color: var(--highcontrast-table-header-text-color-hover, var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))); + color: var(--highcontrast-table-header-text-color-hover, var(--spectrum-table-header-text-color)); } /* Focus indicator- brings the focus indicator above the cell borders and matches the table cell dimensions. */ &:focus-visible::after { - inset: var(--mod-table-border-width, var(--spectrum-table-border-width)); + inset: var(--spectrum-table-border-width); z-index: 1; /* Remove the box-shadow of .spectrum-Button, which was generating a different corner radius for the focus indicator. */ box-shadow: none; /* Add focus indicator border to match the other table cell focus indicators. */ - border: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) solid var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))); + border: var(--spectrum-table-focus-indicator-thickness) solid var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))); } .spectrum-Button-label { @@ -479,11 +479,11 @@ background-color: var(--spectrum-table-icon-color); transform: rotate(90deg); vertical-align: middle; - margin-inline-start: var(--mod-table-visual-to-text, var(--spectrum-table-visual-to-text)); + margin-inline-start: var(--spectrum-table-visual-to-text); } & .spectrum-Icon { - transition: transform var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; + transition: transform var(--highcontrast-table-transition-duration, var(--spectrum-table-transition-duration)) ease-in-out; color: var(--spectrum-table-icon-color); } } @@ -503,13 +503,13 @@ .spectrum-Table-body { position: relative; border: none; - border-end-start-radius: calc(var(--mod-table-border-radius, var(--spectrum-table-border-radius)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); - border-end-end-radius: calc(var(--mod-table-border-radius, var(--spectrum-table-border-radius)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + border-end-start-radius: calc(var(--spectrum-table-border-radius) - var(--spectrum-table-border-width)); + border-end-end-radius: calc(var(--spectrum-table-border-radius) - var(--spectrum-table-border-width)); display: table-row-group; &.is-drop-target { /* Make sure borders are not visible behind the pseudo-element */ - --mod-table-border-color: transparent; + --spectrum-table-border-color: transparent; /* Remove the outline since we'll replace it with an ::after pseudo-element */ outline: none; @@ -520,9 +520,9 @@ content: ""; position: absolute; inset: 0; - border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) solid var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); + border-end-start-radius: var(--spectrum-table-border-radius); + border-end-end-radius: var(--spectrum-table-border-radius); + border: var(--spectrum-table-focus-indicator-thickness) solid var(--highcontrast-table-focus-indicator-color, var(--spectrum-table-drop-zone-outline-color)); pointer-events: none; z-index: 1; } @@ -536,25 +536,25 @@ instead applied to the individual cells around the outside, while using border-collapse: separate. */ /* Row divider lines */ - border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); + border-block-start: var(--spectrum-table-border-width) solid var(--highcontrast-table-divider-color, var(--spectrum-table-divider-color)); /* Cells within table body */ box-sizing: border-box; - font-family: var(--mod-table-row-font-family, var(--spectrum-table-row-font-family)); - font-style: var(--mod-table-row-font-style, var(--spectrum-table-row-font-style)); - font-size: var(--mod-table-row-font-size, var(--spectrum-table-row-font-size)); - font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight)); - line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)); - vertical-align: var(--mod-table-default-vertical-align, var(--spectrum-table-default-vertical-align)); - color: var(--highcontrast-table-row-text-color, var(--mod-table-row-text-color, var(--spectrum-table-row-text-color))); + font-family: var(--spectrum-table-row-font-family); + font-style: var(--spectrum-table-row-font-style); + font-size: var(--spectrum-table-row-font-size); + font-weight: var(--spectrum-table-row-font-weight); + line-height: var(--spectrum-table-row-line-height); + vertical-align: var(--spectrum-table-default-vertical-align); + color: var(--highcontrast-table-row-text-color, var(--spectrum-table-row-text-color)); background-color: var(--spectrum-table-cell-background-color); /* block-size functions as min-block-size when using display table-cell. */ - block-size: var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)); + block-size: var(--spectrum-table-min-row-height); - padding-block-start: calc(var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); - padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text)); - padding-inline: calc(var(--mod-table-cell-inline-spacing, var(--spectrum-table-cell-inline-spacing)) - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width))); + padding-block-start: calc(var(--spectrum-table-row-top-to-text) - var(--spectrum-table-border-width)); + padding-block-end: var(--spectrum-table-row-bottom-to-text); + padding-inline: calc(var(--spectrum-table-cell-inline-spacing) - var(--spectrum-table-outer-border-inline-width)); } /* Focus Indicator (Ring) */ @@ -574,9 +574,9 @@ &::after { content: ""; position: absolute; - inset: calc(-1 * var(--mod-table-border-width, var(--spectrum-table-border-width))); - border-radius: calc(var(--mod-table-border-radius, var(--spectrum-table-focused-cell-border-radius)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); - border: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) solid var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))); + inset: calc(-1 * var(--spectrum-table-border-width)); + border-radius: calc(var(--spectrum-table-focused-cell-border-radius) - var(--spectrum-table-border-width)); + border: var(--spectrum-table-focus-indicator-thickness) solid var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))); pointer-events: none; } } @@ -584,26 +584,26 @@ /* Cells that display a column divider (vertical border). */ .spectrum-Table-cell--divider { - border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); + border-inline-end: var(--spectrum-table-border-width) solid var(--highcontrast-table-divider-color, var(--spectrum-table-divider-color)); } /********* ROWS *********/ /* Outside border (the table's border) */ .spectrum-Table-body .spectrum-Table-row { &:first-child .spectrum-Table-cell { - border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); + border-block-start: var(--spectrum-table-border-width) solid var(--highcontrast-table-border-color, var(--spectrum-table-divider-color)); } &:last-child .spectrum-Table-cell { - border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-block-end: var(--spectrum-table-border-width) solid var(--highcontrast-table-border-color, var(--spectrum-table-border-color)); } .spectrum-Table-cell:first-child { - border-inline-start: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-inline-start: var(--spectrum-table-outer-border-inline-width) solid var(--highcontrast-table-border-color, var(--spectrum-table-border-color)); } .spectrum-Table-cell:last-child { - border-inline-end: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-inline-end: var(--spectrum-table-outer-border-inline-width) solid var(--highcontrast-table-border-color, var(--spectrum-table-border-color)); } } @@ -611,8 +611,8 @@ .spectrum-Table-row { /* Rows within table body */ position: relative; - transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; - cursor: var(--mod-table-cursor-row-default, pointer); + transition: background-color var(--highcontrast-table-transition-duration, var(--spectrum-table-transition-duration)) ease-in-out; + cursor: pointer; border-block-start: none; /* most cells within the table body have no border-radius */ @@ -627,23 +627,23 @@ /* first cell of last row in table body */ &:last-child .spectrum-Table-cell:first-child { - border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + border-end-start-radius: var(--spectrum-table-border-radius); } /* last cell of last row in table body */ &:last-child .spectrum-Table-cell:last-child { - border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + border-end-end-radius: var(--spectrum-table-border-radius); } &:first-child { /* Ensure that 'outline' will match the border-radius, when used on rows. */ - border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + border-start-start-radius: var(--spectrum-table-border-radius); + border-start-end-radius: var(--spectrum-table-border-radius); } &:last-child { - border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + border-end-start-radius: var(--spectrum-table-border-radius); + border-end-end-radius: var(--spectrum-table-border-radius); } /* Selected rows */ @@ -656,7 +656,7 @@ /* Adding the bottom border only to the last selected row in a sequence achieves 1px border between adjacent selected rows */ &.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell { - border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))); + border-block-end: var(--spectrum-table-border-width) solid var(--highcontrast-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)); } /* Row focus indicator */ @@ -670,7 +670,7 @@ border-inline-start: 0; /* Because the ::before element technically removes the table's inline border, the first cell needs the entire cell-inline-padding padding to avoid horizontal layout shift when a row is focused. */ - padding-inline-start: var(--mod-table-cell-inline-spacing, var(--spectrum-table-cell-inline-spacing)); + padding-inline-start: var(--spectrum-table-cell-inline-spacing); /* The side row focus indicator line */ &::before { @@ -687,64 +687,64 @@ /* In a focused row that is last in the table, the first cell needs rounded corners at the bottom of the row focus indicator line */ &:last-child .spectrum-Table-cell:first-child::before { - border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + border-end-start-radius: var(--spectrum-table-border-radius); } } &.is-drop-target { /* Make sure negative offset outline is not covered by borders. */ - --mod-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent); + --spectrum-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent); border-start-start-radius: 0; border-start-end-radius: 0; - outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); + outline-width: var(--spectrum-table-focus-indicator-thickness); outline-style: solid; - outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); - outline-offset: calc(-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))); + outline-color: var(--highcontrast-table-focus-indicator-color, var(--spectrum-table-drop-zone-outline-color)); + outline-offset: calc(-1 * var(--spectrum-table-focus-indicator-thickness)); .spectrum-Table-cell { - border-block-start-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); + border-block-start-color: var(--highcontrast-table-focus-indicator-color, var(--spectrum-table-drop-zone-outline-color)); } } } .spectrum-Table-row--summary { .spectrum-Table-cell { - font-weight: var(--mod-table-summary-row-font-weight, var(--spectrum-table-summary-row-font-weight)); + font-weight: var(--spectrum-table-summary-row-font-weight); /* Summary rows are typically the same dimensions as other non-header rows, but we make mods available to override the default row styles */ - block-size: var(--mod-table-summary-row-min-height, var(--spectrum-table-min-row-height)); - padding-block-start: calc(var(--mod-table-summary-row-top-to-text, var(--spectrum-table-row-top-to-text)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); - padding-block-end: var(--mod-table-summary-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text)); - font-size: var(--mod-table-summary-row-font-size, var(--spectrum-table-row-font-size)); - font-family: var(--mod-table-summary-row-font-family, var(--spectrum-table-row-font-family)); - font-style: var(--mod-table-summary-row-font-style, var(--spectrum-table-row-font-style)); - line-height: var(--mod-table-summary-row-line-height, var(--spectrum-table-row-line-height)); - color: var(--highcontrast-table-row-text-color, var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color))); + block-size: var(--spectrum-table-min-row-height); + padding-block-start: calc(var(--spectrum-table-row-top-to-text) - var(--spectrum-table-border-width)); + padding-block-end: var(--spectrum-table-row-bottom-to-text); + font-size: var(--spectrum-table-row-font-size); + font-family: var(--spectrum-table-row-font-family); + font-style: var(--spectrum-table-row-font-style); + line-height: var(--spectrum-table-row-line-height); + color: var(--highcontrast-table-row-text-color, var(--spectrum-table-row-text-color)); } } .spectrum-Table-row--sectionHeader { - cursor: var(--mod-table-cursor-section-header, initial); + cursor: initial; .spectrum-Table-cell { - font-weight: var(--mod-table-section-header-font-weight, var(--spectrum-table-section-header-font-weight)); + font-weight: var(--spectrum-table-section-header-font-weight); text-align: start; /* block-size functions as min-block-size when using display table-cell. */ - block-size: var(--mod-table-section-header-min-height, var(--spectrum-table-section-header-min-height)); + block-size: var(--spectrum-table-section-header-min-height); - padding-block-start: calc(var(--mod-table-section-header-block-start-spacing, var(--spectrum-table-section-header-block-start-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); - padding-block-end: var(--mod-table-section-header-block-end-spacing, var(--spectrum-table-section-header-block-end-spacing)); + padding-block-start: calc(var(--spectrum-table-section-header-block-start-spacing) - var(--spectrum-table-border-width)); + padding-block-end: var(--spectrum-table-section-header-block-end-spacing); /* Make unique section header mods available to these default row styles: */ - padding-inline-start: calc(var(--mod-table-section-header-inline-start-spacing, var(--spectrum-table-cell-inline-spacing)) - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width))); - font-size: var(--mod-table-section-header-font-size, var(--spectrum-table-row-font-size)); - font-family: var(--mod-table-section-header-font-family, var(--spectrum-table-row-font-family)); - font-style: var(--mod-table-section-header-font-style, var(--spectrum-table-row-font-style)); - line-height: var(--mod-table-section-header-line-height, var(--spectrum-table-row-line-height)); - color: var(--highcontrast-table-section-header-text-color, var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color))); + padding-inline-start: calc(var(--spectrum-table-cell-inline-spacing) - var(--spectrum-table-outer-border-inline-width)); + font-size: var(--spectrum-table-row-font-size); + font-family: var(--spectrum-table-row-font-family); + font-style: var(--spectrum-table-row-font-style); + line-height: var(--spectrum-table-row-line-height); + color: var(--highcontrast-table-section-header-text-color, var(--spectrum-table-row-text-color)); } } @@ -756,12 +756,12 @@ /* The calc subtraction is because the --spectrum-table-checkbox-to-text spacing value includes the inline start padding in the adjacent cell. */ - padding-inline-end: calc(var(--mod-table-checkbox-to-cell-content, var(--spectrum-table-checkbox-to-cell-content)) - var(--mod-table-cell-inline-spacing, var(--spectrum-table-cell-inline-spacing))); - padding-block-start: calc(var(--mod-table-row-checkbox-block-spacing, var(--spectrum-table-row-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); - padding-block-end: var(--mod-table-row-checkbox-block-spacing, var(--spectrum-table-row-checkbox-block-spacing)); + padding-inline-end: calc(var(--spectrum-table-checkbox-to-cell-content) - var(--spectrum-table-cell-inline-spacing)); + padding-block-start: calc(var(--spectrum-table-row-checkbox-block-spacing) - var(--spectrum-table-border-width)); + padding-block-end: var(--spectrum-table-row-checkbox-block-spacing); .spectrum-Table-checkbox { - --mod-checkbox-margin-block: 0px; + --spectrum-checkbox-margin-block: 0px; min-block-size: initial; } @@ -786,13 +786,13 @@ position: relative; overflow: auto; - border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); - border-block: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-radius: var(--spectrum-table-border-radius); + border-block: var(--spectrum-table-border-width) solid var(--highcontrast-table-border-color, var(--spectrum-table-border-color)); + border-inline: var(--spectrum-table-outer-border-inline-width) solid var(--highcontrast-table-border-color, var(--spectrum-table-border-color)); /* Make sure shift-tab reverse keyboard navigation keeps the whole cell in focus. - --mod-table-current-header-height should be dynamically updated with JS to match the table header height. */ - scroll-padding-top: var(--mod-table-current-header-height, calc((var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + var(--mod-table-header-row-top-to-text, var(--spectrum-table-header-row-top-to-text)) + var(--mod-table-header-row-bottom-to-text, var(--spectrum-table-header-row-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width)))); + --spectrum-table-current-header-height should be dynamically updated with JS to match the table header height. */ + scroll-padding-top: var(--spectrum-table-current-header-height, calc((var(--spectrum-table-row-line-height) * var(--spectrum-table-row-font-size)) + var(--spectrum-table-header-row-top-to-text) + var(--spectrum-table-header-row-bottom-to-text) + var(--spectrum-table-border-width))); .spectrum-Table-head { position: sticky; @@ -802,7 +802,7 @@ /* Remove borders that have been replaced by borders on scroller wrapper or pseudo elements. */ .spectrum-Table-headRow:first-child .spectrum-Table-headCell { - border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); + border-block-end: var(--spectrum-table-border-width) solid var(--highcontrast-table-border-color, var(--spectrum-table-border-color)); border-block-start: 0; border-inline: 0; border-radius: 0; @@ -864,7 +864,7 @@ &.is-last-tier { .spectrum-Table-cell--collapsible { /* Last tier rows need additional space as wide as the disclosure icon, to be indented from previous tier. */ - padding-inline-start: calc((var(--spectrum-table-row-tier) * var(--spectrum-table-collapsible-tier-indent)) + var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) + (var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing)) * 2)); + padding-inline-start: calc((var(--spectrum-table-row-tier) * var(--spectrum-table-collapsible-tier-indent)) + var(--spectrum-table-disclosure-icon-size) + (var(--spectrum-table-collapsible-disclosure-inline-spacing) * 2)); } .spectrum-Table-disclosureIcon { @@ -873,8 +873,8 @@ } .spectrum-Table-disclosureIcon { - margin-inline: var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing)); - margin-block-start: max(0px, calc((var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)) - var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size))) / 2)); + margin-inline: var(--spectrum-table-collapsible-disclosure-inline-spacing); + margin-block-start: max(0px, calc((var(--spectrum-table-min-row-height) - var(--spectrum-table-disclosure-icon-size)) / 2)); } &[hidden] { @@ -895,13 +895,13 @@ } .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default))); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--spectrum-table-icon-color-default)); - block-size: var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)); - flex-basis: var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)); + block-size: var(--spectrum-table-disclosure-icon-size); + flex-basis: var(--spectrum-table-disclosure-icon-size); flex-grow: 0; flex-shrink: 0; - transition: transform ease var(--mod-table-collapsible-icon-animation-duration, var(--spectrum-table-collapsible-icon-animation-duration)); + transition: transform ease var(--spectrum-table-collapsible-icon-animation-duration); border-radius: 0; background: transparent; @@ -919,29 +919,29 @@ } &:hover { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-hover, var(--spectrum-table-icon-color-hover))); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--spectrum-table-icon-color-hover)); } &:active { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-active, var(--spectrum-table-icon-color-active))); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--spectrum-table-icon-color-active)); } &:focus { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-focus, var(--spectrum-table-icon-color-key-focus))); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--spectrum-table-icon-color-key-focus)); &:hover { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-key-focus))); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--spectrum-table-icon-color-key-focus)); } } &:focus-visible, &.is-keyboardFocused { - --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--spectrum-table-icon-color-key-focus)); - outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); + outline-width: var(--spectrum-table-focus-indicator-thickness); outline-style: solid; - outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))); - outline-offset: calc((-1 * var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness))) - 2px); + outline-color: var(--highcontrast-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)); + outline-offset: calc((-1 * var(--spectrum-table-focus-indicator-thickness)) - 2px); } } @@ -959,8 +959,8 @@ .spectrum-Avatar { flex-grow: 0; flex-shrink: 0; - margin-inline-end: var(--mod-table-visual-to-text, var(--spectrum-table-visual-to-text)); - line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)); + margin-inline-end: var(--spectrum-table-visual-to-text); + line-height: var(--spectrum-table-row-line-height); } } diff --git a/components/table/stories/table.stories.js b/components/table/stories/table.stories.js index 3979b332cce..2fc4fcc3ca3 100644 --- a/components/table/stories/table.stories.js +++ b/components/table/stories/table.stories.js @@ -625,9 +625,9 @@ SectionHeaderQuiet.tags = ["!dev"]; /** * A table can be wrapped in a fixed height `div` with the `.spectrum-Table-scroller` class. This allows scrolling of the table body and makes the column headers sticky (i.e. fixed to the top on scroll). * - * When using the scrollable wrapper, the column headers must have a solid background color set. This can be customized to match the parent background with the custom property `--mod-table-header-background-color-scrollable`. + * When using the scrollable wrapper, the column headers must have a solid background color set. This can be customized to match the parent background with the custom property `--spectrum-table-header-background-color-scrollable`. * - * To make sure that reverse keyboard link navigation (shift-tab) keeps the whole cell in focus, `--mod-table-current-header-height` should be dynamically updated with JS to match the height of `.spectrum-Table-head`. + * To make sure that reverse keyboard link navigation (shift-tab) keeps the whole cell in focus, `--spectrum-table-current-header-height` should be dynamically updated with JS to match the height of `.spectrum-Table-head`. * * This example is showing the use of the scrollable wrapper element with table markup. This allows a fixed height and scrolling, along with column headers that are fixed to the top when scrolled. */ diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json index 879d8bd7440..b484ee33ed0 100644 --- a/components/tabs/dist/metadata.json +++ b/components/tabs/dist/metadata.json @@ -38,48 +38,6 @@ ".spectrum-Tabs-selectionIndicator", ".spectrum-Tabs.spectrum-Tabs--compact" ], - "modifiers": [ - "--mod-tabs-animation-duration", - "--mod-tabs-animation-ease", - "--mod-tabs-bottom-to-text", - "--mod-tabs-bottom-to-text-compact", - "--mod-tabs-color", - "--mod-tabs-color-disabled", - "--mod-tabs-color-hover", - "--mod-tabs-color-key-focus", - "--mod-tabs-color-selected", - "--mod-tabs-color-selected-hover", - "--mod-tabs-color-selected-key-focus", - "--mod-tabs-focus-indicator-border-radius", - "--mod-tabs-focus-indicator-color", - "--mod-tabs-focus-indicator-gap", - "--mod-tabs-focus-indicator-width", - "--mod-tabs-font-family", - "--mod-tabs-font-size", - "--mod-tabs-font-style", - "--mod-tabs-font-weight", - "--mod-tabs-icon-size", - "--mod-tabs-icon-to-text", - "--mod-tabs-item-border-radius", - "--mod-tabs-item-height", - "--mod-tabs-item-height-compact", - "--mod-tabs-item-horizontal-spacing", - "--mod-tabs-item-horizontal-spacing-compact", - "--mod-tabs-label-to-selection-indicator", - "--mod-tabs-label-to-selection-indicator-compact", - "--mod-tabs-line-height", - "--mod-tabs-selection-indicator-border-radius", - "--mod-tabs-selection-indicator-color", - "--mod-tabs-selection-indicator-color-disabled", - "--mod-tabs-selection-indicator-thickness", - "--mod-tabs-side-to-icon", - "--mod-tabs-side-to-icon-compact", - "--mod-tabs-start-to-edge", - "--mod-tabs-top-to-icon", - "--mod-tabs-top-to-icon-compact", - "--mod-tabs-top-to-text", - "--mod-tabs-top-to-text-compact" - ], "component": [ "--spectrum-tab-selection-indicator-thickness", "--spectrum-tabs-animation-duration", @@ -137,6 +95,7 @@ "--spectrum-neutral-subdued-content-color-down", "--spectrum-neutral-subdued-content-color-hover", "--spectrum-neutral-subdued-content-color-key-focus", + "--spectrum-picker-block-size", "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", "--spectrum-spacing-200", @@ -157,7 +116,7 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "passthroughs": ["--mod-picker-block-size"], + "passthroughs": [], "high-contrast": [ "--highcontrast-tabs-background-color-selected", "--highcontrast-tabs-color", diff --git a/components/tabs/index.css b/components/tabs/index.css index 0b86ec831b5..0645824742a 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -12,61 +12,61 @@ */ .spectrum-Tabs { - --spectrum-tabs-item-height: var(--mod-tabs-item-height, var(--spectrum-tab-item-height-medium)); - --spectrum-tabs-start-to-edge: var(--mod-tabs-start-to-edge, var(--spectrum-tab-item-start-to-edge-medium)); - --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text, var(--spectrum-tab-item-top-to-text-medium)); - --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text, var(--spectrum-tab-item-bottom-to-text-medium)); - --spectrum-tabs-label-to-selection-indicator: var(--mod-tabs-label-to-selection-indicator, var(--spectrum-spacing-200)); - --spectrum-tabs-item-horizontal-spacing: var(--mod-tabs-item-horizontal-spacing, var(--spectrum-tab-item-to-tab-item-horizontal-medium)); - - --spectrum-tabs-icon-size: var(--mod-tabs-icon-size, var(--spectrum-workflow-icon-size-100)); - --spectrum-tabs-icon-to-text: var(--mod-tabs-icon-to-text, var(--spectrum-text-to-visual-100)); - --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon, var(--spectrum-tab-item-top-to-workflow-icon-medium)); - --spectrum-tabs-side-to-icon: var(--mod-tabs-side-to-icon, var(--spectrum-tab-item-side-to-workflow-icon-medium)); - - --spectrum-tabs-item-border-radius: var(--mod-tabs-item-border-radius, var(--spectrum-corner-radius-0)); - - --spectrum-tabs-color: var(--highcontrast-tabs-color, var(--mod-tabs-color, var(--spectrum-neutral-subdued-content-color-default))); - --spectrum-tabs-color-hover: var(--highcontrast-tabs-color-hover, var(--mod-tabs-color-hover, var(--spectrum-neutral-subdued-content-color-hover))); - --spectrum-tabs-color-key-focus: var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-neutral-subdued-content-color-key-focus))); - --spectrum-tabs-color-selected: var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-neutral-content-color-default))); - --spectrum-tabs-color-selected-hover: var(--highcontrast-tabs-color-selected-hover, var(--mod-tabs-color-selected-hover, var(--spectrum-neutral-content-color-hover))); - --spectrum-tabs-color-selected-key-focus: var(--highcontrast-tabs-color-selected-key-focus, var(--mod-tabs-color-selected-key-focus, var(--spectrum-neutral-content-color-key-focus))); - --spectrum-tabs-color-disabled: var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-disabled-content-color))); - --spectrum-tabs-selection-indicator-color-disabled: var(--highcontrast-tabs-selection-indicator-color-disabled, var(--mod-tabs-selection-indicator-color-disabled, var(--spectrum-disabled-border-color))); - - --spectrum-tabs-font-weight: var(--mod-tabs-font-weight, var(--spectrum-regular-font-weight)); - --spectrum-tabs-font-family: var(--mod-tabs-font-family, var(--spectrum-sans-font-family-stack)); - --spectrum-tabs-font-style: var(--mod-tabs-font-style, var(--spectrum-default-font-style)); - --spectrum-tabs-font-size: var(--mod-tabs-font-size, var(--spectrum-font-size-100)); - --spectrum-tabs-line-height: var(--mod-tabs-line-height, var(--spectrum-line-height-100)); - - --spectrum-tabs-focus-indicator-width: var(--mod-tabs-focus-indicator-width, var(--spectrum-focus-indicator-thickness)); - --spectrum-tabs-focus-indicator-border-radius: var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-corner-radius-100)); /* component rounding + focus indicator thickness + focus indicator gap = 0 + 2px + 2px = 4px */ - --spectrum-tabs-focus-indicator-gap: var(--mod-tabs-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); - --spectrum-tabs-focus-indicator-color: var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color))); - - --spectrum-tabs-selection-indicator-color: var(--highcontrast-tabs-selection-indicator-color, var(--mod-tabs-selection-indicator-color, var(--spectrum-neutral-subdued-content-color-down))); - --spectrum-tabs-selection-indicator-thickness: var(--mod-tabs-selection-indicator-thickness, var(--spectrum-tab-selection-indicator-thickness)); - --spectrum-tabs-selection-indicator-border-radius: var(--mod-tabs-selection-indicator-border-radius, var(--spectrum-corner-radius-full)); - - --spectrum-tabs-animation-duration: var(--mod-tabs-animation-duration, var(--spectrum-animation-duration-100)); - --spectrum-tabs-animation-ease: var(--mod-tabs-animation-ease, var(--spectrum-animation-ease-in-out)); + --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium); + --spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); + --spectrum-tabs-label-to-selection-indicator: var(--spectrum-spacing-200); + --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); + + --spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium); + --spectrum-tabs-side-to-icon: var(--spectrum-tab-item-side-to-workflow-icon-medium); + + --spectrum-tabs-item-border-radius: var(--spectrum-corner-radius-0); + + --spectrum-tabs-color: var(--highcontrast-tabs-color, var(--spectrum-neutral-subdued-content-color-default)); + --spectrum-tabs-color-hover: var(--highcontrast-tabs-color-hover, var(--spectrum-neutral-subdued-content-color-hover)); + --spectrum-tabs-color-key-focus: var(--highcontrast-tabs-color-key-focus, var(--spectrum-neutral-subdued-content-color-key-focus)); + --spectrum-tabs-color-selected: var(--highcontrast-tabs-color-selected, var(--spectrum-neutral-content-color-default)); + --spectrum-tabs-color-selected-hover: var(--highcontrast-tabs-color-selected-hover, var(--spectrum-neutral-content-color-hover)); + --spectrum-tabs-color-selected-key-focus: var(--highcontrast-tabs-color-selected-key-focus, var(--spectrum-neutral-content-color-key-focus)); + --spectrum-tabs-color-disabled: var(--highcontrast-tabs-color-disabled, var(--spectrum-disabled-content-color)); + --spectrum-tabs-selection-indicator-color-disabled: var(--highcontrast-tabs-selection-indicator-color-disabled, var(--spectrum-disabled-border-color)); + + --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight); + --spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-tabs-font-style: var(--spectrum-default-font-style); + --spectrum-tabs-font-size: var(--spectrum-font-size-100); + --spectrum-tabs-line-height: var(--spectrum-line-height-100); + + --spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness); + --spectrum-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100); /* component rounding + focus indicator thickness + focus indicator gap = 0 + 2px + 2px = 4px */ + --spectrum-tabs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-tabs-focus-indicator-color: var(--highcontrast-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color)); + + --spectrum-tabs-selection-indicator-color: var(--highcontrast-tabs-selection-indicator-color, var(--spectrum-neutral-subdued-content-color-down)); + --spectrum-tabs-selection-indicator-thickness: var(--spectrum-tab-selection-indicator-thickness); + --spectrum-tabs-selection-indicator-border-radius: var(--spectrum-corner-radius-full); + + --spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out); } .spectrum-Tabs.spectrum-Tabs--compact { - --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium)); - --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); - --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-bottom-to-text-compact-medium)); - --spectrum-tabs-label-to-selection-indicator: var(--mod-tabs-label-to-selection-indicator-compact, var(--spectrum-spacing-75)); - --spectrum-tabs-item-horizontal-spacing: var(--mod-tabs-item-horizontal-spacing-compact, var(--spectrum-tab-item-to-tab-item-compact-horizontal-medium)); - --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)); - --spectrum-tabs-side-to-icon: var(--mod-tabs-side-to-icon-compact, var(--spectrum-tab-item-side-to-workflow-icon-compact-medium)); + --spectrum-tabs-item-height: var(--spectrum-tab-item-compact-height-medium); + --spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-compact-medium); + --spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-compact-medium); + --spectrum-tabs-label-to-selection-indicator: var(--spectrum-spacing-75); + --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-compact-horizontal-medium); + --spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-compact-medium); + --spectrum-tabs-side-to-icon: var(--spectrum-tab-item-side-to-workflow-icon-compact-medium); } /* @passthrough -- picker styling for overflow tabs */ .spectrum-Tabs .spectrum-Picker-button { - --mod-picker-block-size: var(--spectrum-tabs-item-height); + --spectrum-picker-block-size: var(--spectrum-tabs-item-height); } .spectrum-Tabs { diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index e4503014031..b95d6073d3d 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -25,65 +25,6 @@ ".spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after", ".spectrum-Tag:not(.is-disabled, .is-readOnly):hover" ], - "modifiers": [ - "--mod-tag-animation-duration", - "--mod-tag-avatar-size", - "--mod-tag-avatar-spacing-block-end", - "--mod-tag-avatar-spacing-block-start", - "--mod-tag-background-color", - "--mod-tag-background-color-active", - "--mod-tag-background-color-disabled", - "--mod-tag-background-color-emphasized", - "--mod-tag-background-color-emphasized-active", - "--mod-tag-background-color-emphasized-focus", - "--mod-tag-background-color-emphasized-hover", - "--mod-tag-background-color-focus", - "--mod-tag-background-color-hover", - "--mod-tag-background-color-selected", - "--mod-tag-background-color-selected-active", - "--mod-tag-background-color-selected-focus", - "--mod-tag-background-color-selected-hover", - "--mod-tag-border-color", - "--mod-tag-border-color-active", - "--mod-tag-border-color-disabled", - "--mod-tag-border-color-emphasized", - "--mod-tag-border-color-focus", - "--mod-tag-border-color-hover", - "--mod-tag-border-color-selected", - "--mod-tag-border-width", - "--mod-tag-clear-button-size", - "--mod-tag-clear-button-spacing-block", - "--mod-tag-content-color", - "--mod-tag-content-color-active", - "--mod-tag-content-color-disabled", - "--mod-tag-content-color-emphasized", - "--mod-tag-content-color-focus", - "--mod-tag-content-color-hover", - "--mod-tag-content-color-selected", - "--mod-tag-corner-radius", - "--mod-tag-edge-to-clear-icon", - "--mod-tag-focus-ring-color", - "--mod-tag-focus-ring-gap", - "--mod-tag-focus-ring-thickness", - "--mod-tag-font-size", - "--mod-tag-height", - "--mod-tag-icon-size", - "--mod-tag-icon-spacing-block-end", - "--mod-tag-icon-spacing-block-start", - "--mod-tag-label-font-family", - "--mod-tag-label-font-style", - "--mod-tag-label-font-weight", - "--mod-tag-label-line-height", - "--mod-tag-label-line-height-cjk", - "--mod-tag-label-spacing-block", - "--mod-tag-label-spacing-inline", - "--mod-tag-label-to-clear-icon", - "--mod-tag-maximum-width-multiplier", - "--mod-tag-min-inline-size", - "--mod-tag-thumbnail-size", - "--mod-tag-visual-spacing-inline-end", - "--mod-tag-visual-spacing-inline-start" - ], "component": [ "--spectrum-tag-animation-duration", "--spectrum-tag-avatar-size", @@ -149,12 +90,20 @@ "--spectrum-accent-background-color-hover", "--spectrum-accent-background-color-key-focus", "--spectrum-animation-duration-100", + "--spectrum-avatar-block-size", + "--spectrum-avatar-inline-size", "--spectrum-avatar-opacity-disabled", "--spectrum-avatar-size-100", "--spectrum-avatar-size-50", "--spectrum-avatar-size-75", "--spectrum-border-width-100", "--spectrum-cjk-line-height-100", + "--spectrum-clear-button-background-color", + "--spectrum-clear-button-height", + "--spectrum-clear-button-icon-color", + "--spectrum-clear-button-icon-color-hover", + "--spectrum-clear-button-icon-color-key-focus", + "--spectrum-clear-button-width", "--spectrum-component-edge-to-text-100", "--spectrum-component-edge-to-text-200", "--spectrum-component-edge-to-text-75", @@ -192,6 +141,7 @@ "--spectrum-gray-100", "--spectrum-gray-200", "--spectrum-gray-25", + "--spectrum-icon-size", "--spectrum-line-height-100", "--spectrum-medium-font-weight", "--spectrum-neutral-background-color-default", @@ -207,6 +157,7 @@ "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-75", "--spectrum-thumbnail-opacity-disabled", + "--spectrum-thumbnail-size", "--spectrum-thumbnail-size-100", "--spectrum-thumbnail-size-50", "--spectrum-thumbnail-size-75", @@ -215,20 +166,7 @@ "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-75" ], - "passthroughs": [ - "--mod-avatar-block-size", - "--mod-avatar-inline-size", - "--mod-avatar-opacity-disabled", - "--mod-clear-button-background-color", - "--mod-clear-button-height", - "--mod-clear-button-icon-color", - "--mod-clear-button-icon-color-hover", - "--mod-clear-button-icon-color-key-focus", - "--mod-clear-button-width", - "--mod-icon-size", - "--mod-thumbnail-opacity-disabled", - "--mod-thumbnail-size" - ], + "passthroughs": [], "high-contrast": [ "--highcontrast-tag-background-color", "--highcontrast-tag-background-color-active", diff --git a/components/tag/index.css b/components/tag/index.css index 48f1e3237dc..99f5e200133 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -16,27 +16,27 @@ /* border color - transparent unless modified or high contrast mode */ --spectrum-tag-border-width: var(--spectrum-border-width-100); - --spectrum-tag-border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, transparent)); - --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-hover, var(--mod-tag-border-color-hover, transparent)); - --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-active, var(--mod-tag-border-color-active, transparent)); - --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-focus, var(--mod-tag-border-color-focus, transparent)); + --spectrum-tag-border-color: var(--highcontrast-tag-border-color, transparent); + --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-hover, transparent); + --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-active, transparent); + --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-focus, transparent); /* background color */ - --spectrum-tag-background-color: var(--highcontrast-tag-background-color, var(--mod-tag-background-color, var(--spectrum-gray-100))); - --spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-hover, var(--mod-tag-background-color-hover, var(--spectrum-gray-200))); - --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-active, var(--mod-tag-background-color-active, var(--spectrum-gray-200))); - --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-focus, var(--mod-tag-background-color-focus, var(--spectrum-gray-200))); + --spectrum-tag-background-color: var(--highcontrast-tag-background-color, var(--spectrum-gray-100)); + --spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-hover, var(--spectrum-gray-200)); + --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-active, var(--spectrum-gray-200)); + --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-focus, var(--spectrum-gray-200)); /* content color */ - --spectrum-tag-content-color: var(--highcontrast-tag-content-color, var(--mod-tag-content-color, var(--spectrum-neutral-content-color-default))); - --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-hover, var(--mod-tag-content-color-hover, var(--spectrum-neutral-content-color-hover))); - --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-active, var(--mod-tag-content-color-active, var(--spectrum-neutral-content-color-down))); - --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-focus, var(--mod-tag-content-color-focus, var(--spectrum-neutral-content-color-key-focus))); + --spectrum-tag-content-color: var(--highcontrast-tag-content-color, var(--spectrum-neutral-content-color-default)); + --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-hover, var(--spectrum-neutral-content-color-hover)); + --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-active, var(--spectrum-neutral-content-color-down)); + --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-focus, var(--spectrum-neutral-content-color-key-focus)); /* focus ring */ --spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-tag-focus-ring-color: var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-focus-indicator-color))); + --spectrum-tag-focus-ring-color: var(--highcontrast-tag-focus-ring-color, var(--spectrum-focus-indicator-color)); /* label */ --spectrum-tag-label-line-height: var(--spectrum-line-height-100); @@ -73,69 +73,69 @@ --spectrum-tag-label-spacing-inline: var(--spectrum-component-edge-to-text-75); /* @passthrough start for nested components */ - --mod-avatar-inline-size: var(--mod-tag-avatar-size, var(--spectrum-tag-avatar-size)); - --mod-avatar-block-size: var(--mod-tag-avatar-size, var(--spectrum-tag-avatar-size)); - --mod-thumbnail-size: var(--mod-tag-thumbnail-size, var(--spectrum-tag-thumbnail-size)); - --mod-clear-button-background-color: transparent; - --mod-clear-button-icon-color: currentColor; - --mod-clear-button-icon-color-hover: currentColor; - --mod-clear-button-icon-color-key-focus: currentColor; + --spectrum-avatar-inline-size: var(--spectrum-tag-avatar-size); + --spectrum-avatar-block-size: var(--spectrum-tag-avatar-size); + --spectrum-thumbnail-size: var(--spectrum-tag-thumbnail-size); + --spectrum-clear-button-background-color: transparent; + --spectrum-clear-button-icon-color: currentColor; + --spectrum-clear-button-icon-color-hover: currentColor; + --spectrum-clear-button-icon-color-key-focus: currentColor; - --mod-icon-size: var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size)); + --spectrum-icon-size: var(--spectrum-tag-clear-button-size); /* clear icon inline spacing + icon size */ - --mod-clear-button-width: calc(var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon)) + var(--mod-tag-edge-to-clear-icon, var(--spectrum-tag-edge-to-clear-icon)) + var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size))); + --spectrum-clear-button-width: calc(var(--spectrum-tag-label-to-clear-icon) + var(--spectrum-tag-edge-to-clear-icon) + var(--spectrum-tag-clear-button-size)); /* clear icon block spacing + icon size */ - --mod-clear-button-height: calc(2 * var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) + var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size))); + --spectrum-clear-button-height: calc(2 * var(--spectrum-tag-clear-button-spacing-block) + var(--spectrum-tag-clear-button-size)); /* @passthrough end */ &:lang(ja), &:lang(zh), &:lang(ko) { - --mod-tag-label-line-height: var(--mod-tag-label-line-height-cjk, var(--spectrum-tag-label-line-height-cjk)); + --spectrum-tag-label-line-height: var(--spectrum-tag-label-line-height-cjk); } &.is-selected:not(.is-disabled, .is-readOnly) { - --spectrum-tag-border-color: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); - --spectrum-tag-background-color: var(--highcontrast-tag-background-color-selected, var(--mod-tag-background-color-selected, var(--spectrum-neutral-background-color-default))); - --spectrum-tag-content-color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); + --spectrum-tag-border-color: var(--highcontrast-tag-border-color-selected, transparent); + --spectrum-tag-background-color: var(--highcontrast-tag-background-color-selected, var(--spectrum-neutral-background-color-default)); + --spectrum-tag-content-color: var(--highcontrast-tag-content-color-selected, var(--spectrum-gray-25)); - --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); - --spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-selected-hover, var(--mod-tag-background-color-selected-hover, var(--spectrum-neutral-background-color-hover))); - --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); + --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-selected, transparent); + --spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-selected-hover, var(--spectrum-neutral-background-color-hover)); + --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-selected, var(--spectrum-gray-25)); - --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); - --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-selected-active, var(--mod-tag-background-color-selected-active, var(--spectrum-neutral-background-color-down))); - --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); + --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-selected, transparent); + --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-selected-active, var(--spectrum-neutral-background-color-down)); + --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-selected, var(--spectrum-gray-25)); - --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, transparent)); - --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-selected-focus, var(--mod-tag-background-color-selected-focus, var(--spectrum-neutral-background-color-key-focus))); - --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-gray-25))); + --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-selected, transparent); + --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-selected-focus, var(--spectrum-neutral-background-color-key-focus)); + --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-selected, var(--spectrum-gray-25)); } &.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly) { - --spectrum-tag-border-color: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); - --spectrum-tag-background-color: var(--highcontrast-tag-background-color-emphasized, var(--mod-tag-background-color-emphasized, var(--spectrum-accent-background-color-default))); - --spectrum-tag-content-color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + --spectrum-tag-border-color: var(--highcontrast-tag-border-color-emphasized, transparent); + --spectrum-tag-background-color: var(--highcontrast-tag-background-color-emphasized, var(--spectrum-accent-background-color-default)); + --spectrum-tag-content-color: var(--highcontrast-tag-content-color-emphasized, var(--spectrum-white)); - --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); - --spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover))); - --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + --spectrum-tag-border-color-hover: var(--highcontrast-tag-border-color-emphasized, transparent); + --spectrum-tag-background-color-hover: var(--highcontrast-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover)); + --spectrum-tag-content-color-hover: var(--highcontrast-tag-content-color-emphasized, var(--spectrum-white)); - --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); - --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down))); - --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + --spectrum-tag-border-color-active: var(--highcontrast-tag-border-color-emphasized, transparent); + --spectrum-tag-background-color-active: var(--highcontrast-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down)); + --spectrum-tag-content-color-active: var(--highcontrast-tag-content-color-emphasized, var(--spectrum-white)); - --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent)); - --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus))); - --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white))); + --spectrum-tag-border-color-focus: var(--highcontrast-tag-border-color-emphasized, transparent); + --spectrum-tag-background-color-focus: var(--highcontrast-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus)); + --spectrum-tag-content-color-focus: var(--highcontrast-tag-content-color-emphasized, var(--spectrum-white)); } &.spectrum-Tag.is-disabled { - --spectrum-tag-border-color: var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, transparent)); - --spectrum-tag-background-color: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color))); - --spectrum-tag-content-color: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color))); + --spectrum-tag-border-color: var(--highcontrast-tag-border-color-disabled, transparent); + --spectrum-tag-background-color: var(--highcontrast-tag-background-color-disabled, var(--spectrum-disabled-background-color)); + --spectrum-tag-content-color: var(--highcontrast-tag-content-color-disabled, var(--spectrum-disabled-content-color)); } } @@ -202,40 +202,40 @@ background-color: var(--spectrum-tag-background-color); color: var(--spectrum-tag-content-color); - border-radius: var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)); - border-width: var(--mod-tag-border-width, var(--spectrum-tag-border-width)); + border-radius: var(--spectrum-tag-corner-radius); + border-width: var(--spectrum-tag-border-width); border-style: solid; - padding-inline-start: calc(var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + padding-inline-start: calc(var(--spectrum-tag-label-spacing-inline) - var(--spectrum-tag-border-width)); padding-inline-end: 0; - block-size: var(--mod-tag-height, var(--spectrum-tag-height)); - min-inline-size: var(--mod-tag-min-inline-size, var(--spectrum-tag-min-inline-size)); + block-size: var(--spectrum-tag-height); + min-inline-size: var(--spectrum-tag-min-inline-size); position: relative; display: inline-flex; align-items: center; box-sizing: border-box; vertical-align: bottom; - max-inline-size: calc(var(--mod-tag-height, var(--spectrum-tag-height)) * var(--mod-tag-maximum-width-multiplier, var(--spectrum-tag-maximum-width-multiplier))); + max-inline-size: calc(var(--spectrum-tag-height) * var(--spectrum-tag-maximum-width-multiplier)); outline: none; transition: - border-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, - color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, - background-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out; + border-color var(--spectrum-tag-animation-duration) ease-in-out, + color var(--spectrum-tag-animation-duration) ease-in-out, + background-color var(--spectrum-tag-animation-duration) ease-in-out; .spectrum-Tag-itemIcon { - block-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); - inline-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); + block-size: var(--spectrum-tag-icon-size); + inline-size: var(--spectrum-tag-icon-size); - margin-block-start: calc(var(--mod-tag-icon-spacing-block-start, var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - margin-block-end: calc(var(--mod-tag-icon-spacing-block-end, var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-block-start: calc(var(--spectrum-tag-icon-spacing-block-start) - var(--spectrum-tag-border-width)); + margin-block-end: calc(var(--spectrum-tag-icon-spacing-block-end) - var(--spectrum-tag-border-width)); flex-shrink: 0; } .spectrum-Avatar { - margin-block-start: calc(var(--mod-tag-avatar-spacing-block-start, var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - margin-block-end: calc(var(--mod-tag-avatar-spacing-block-end, var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-block-start: calc(var(--spectrum-tag-avatar-spacing-block-start) - var(--spectrum-tag-border-width)); + margin-block-end: calc(var(--spectrum-tag-avatar-spacing-block-end) - var(--spectrum-tag-border-width)); } .spectrum-Thumbnail { @@ -247,8 +247,8 @@ .spectrum-Avatar, .spectrum-Thumbnail { /* set visual inline-start spacing, but take away label spacing, this will result in negative margin - this calc does not need border width */ - margin-inline-start: calc(var(--mod-tag-visual-spacing-inline-start, var(--spectrum-tag-visual-spacing-inline-start)) - var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline))); - margin-inline-end: var(--mod-tag-visual-spacing-inline-end, var(--spectrum-tag-visual-spacing-inline-end)); + margin-inline-start: calc(var(--spectrum-tag-visual-spacing-inline-start) - var(--spectrum-tag-label-spacing-inline)); + margin-inline-end: var(--spectrum-tag-visual-spacing-inline-end); } /* clear button */ @@ -257,21 +257,21 @@ flex-shrink: 0; /* remove label inline-end spacing with negative margin */ - margin-inline-start: calc((var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))) * -1); + margin-inline-start: calc((var(--spectrum-tag-label-spacing-inline) - var(--spectrum-tag-border-width)) * -1); /* remove border width from clear button */ - margin-inline-end: calc(var(--mod-tag-border-width, var(--spectrum-tag-border-width)) * -1); + margin-inline-end: calc(var(--spectrum-tag-border-width) * -1); } .spectrum-Tag-itemLabel { block-size: 100%; box-sizing: border-box; - line-height: var(--mod-tag-label-line-height, var(--spectrum-tag-label-line-height)); - font-family: var(--mod-tag-label-font-family, var(--spectrum-tag-label-font-family)); - font-style: var(--mod-tag-label-font-style, var(--spectrum-tag-label-font-style)); - font-weight: var(--mod-tag-label-font-weight, var(--spectrum-tag-label-font-weight)); - font-size: var(--mod-tag-font-size, var(--spectrum-tag-font-size)); + line-height: var(--spectrum-tag-label-line-height); + font-family: var(--spectrum-tag-label-font-family); + font-style: var(--spectrum-tag-label-font-style); + font-weight: var(--spectrum-tag-label-font-weight); + font-size: var(--spectrum-tag-font-size); flex: 1 1 auto; cursor: default; @@ -279,10 +279,10 @@ white-space: nowrap; text-overflow: ellipsis; - padding-block-start: calc(var(--mod-tag-label-spacing-block, var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + padding-block-start: calc(var(--spectrum-tag-label-spacing-block) - var(--spectrum-tag-border-width)); /* space from label text to end edge */ - margin-inline-end: calc(var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-inline-end: calc(var(--spectrum-tag-label-spacing-inline) - var(--spectrum-tag-border-width)); } &:not(.is-disabled, .is-readOnly):hover { @@ -311,10 +311,10 @@ content: ""; display: inline-block; position: absolute; - inset: calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); + inset: calc(-1 * var(--spectrum-tag-focus-ring-gap) - var(--spectrum-tag-border-width) - var(--spectrum-tag-focus-ring-thickness)); border-color: var(--spectrum-tag-focus-ring-color); /* mod/highcontrast specified at top */ - border-radius: calc(var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width, var(--spectrum-tag-border-width))); - border-width: var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)); + border-radius: calc(var(--spectrum-tag-corner-radius) + var(--spectrum-tag-focus-ring-gap) + var(--spectrum-tag-border-width)); + border-width: var(--spectrum-tag-focus-ring-thickness); border-style: solid; pointer-events: none; } @@ -327,11 +327,11 @@ user-select: none; .spectrum-Avatar { - opacity: var(--mod-avatar-opacity-disabled, var(--spectrum-avatar-opacity-disabled)); + opacity: var(--spectrum-avatar-opacity-disabled); } .spectrum-Thumbnail { - opacity: var(--mod-thumbnail-opacity-disabled, var(--spectrum-thumbnail-opacity-disabled)); + opacity: var(--spectrum-thumbnail-opacity-disabled); } } diff --git a/components/taggroup/dist/metadata.json b/components/taggroup/dist/metadata.json index 28ca5140d81..af384ce0858 100644 --- a/components/taggroup/dist/metadata.json +++ b/components/taggroup/dist/metadata.json @@ -17,18 +17,6 @@ ".spectrum-TagGroup:lang(ko)", ".spectrum-TagGroup:lang(zh)" ], - "modifiers": [ - "--mod-body-cjk-line-height", - "--mod-body-font-size", - "--mod-body-line-height", - "--mod-body-margin-end", - "--mod-body-margin-start", - "--mod-tag-group-block-spacing-label-to-tags", - "--mod-tag-group-block-tag-spacing", - "--mod-tag-group-inline-spacing-label-to-tags", - "--mod-tag-group-inline-tag-spacing", - "--mod-tag-group-spacing-help-text-to-tags" - ], "component": [ "--spectrum-tag-group-block-spacing-label-to-tags", "--spectrum-tag-group-block-tag-spacing", @@ -37,6 +25,11 @@ "--spectrum-tag-group-spacing-help-text-to-tags" ], "global": [ + "--spectrum-body-cjk-line-height", + "--spectrum-body-font-size", + "--spectrum-body-line-height", + "--spectrum-body-margin-end", + "--spectrum-body-margin-start", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", diff --git a/components/taggroup/index.css b/components/taggroup/index.css index 6975c5186ba..ae81fa56cc3 100644 --- a/components/taggroup/index.css +++ b/components/taggroup/index.css @@ -19,15 +19,15 @@ --spectrum-tag-group-spacing-help-text-to-tags: var(--spectrum-help-text-to-component); /* passthroughs for body typography element in empty state */ - --mod-body-line-height: var(--spectrum-line-height-100); - --mod-body-font-size: var(--spectrum-font-size-100); - --mod-body-margin-start: var(--spectrum-component-top-to-text-100); - --mod-body-margin-end: var(--spectrum-component-bottom-to-text-100); + --spectrum-body-line-height: var(--spectrum-line-height-100); + --spectrum-body-font-size: var(--spectrum-font-size-100); + --spectrum-body-margin-start: var(--spectrum-component-top-to-text-100); + --spectrum-body-margin-end: var(--spectrum-component-bottom-to-text-100); &:lang(ja), &:lang(zh), &:lang(ko) { - --mod-body-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-100); } } @@ -36,9 +36,9 @@ --spectrum-tag-group-block-tag-spacing: var(--spectrum-spacing-100); /* passthroughs for body typography element in empty state */ - --mod-body-font-size: var(--spectrum-font-size-75); - --mod-body-margin-start: var(--spectrum-component-top-to-text-75); - --mod-body-margin-end: var(--spectrum-component-bottom-to-text-75); + --spectrum-body-font-size: var(--spectrum-font-size-75); + --spectrum-body-margin-start: var(--spectrum-component-top-to-text-75); + --spectrum-body-margin-end: var(--spectrum-component-bottom-to-text-75); } .spectrum-TagGroup--sizeL { @@ -46,9 +46,9 @@ --spectrum-tag-group-block-tag-spacing: var(--spectrum-spacing-200); /* passthroughs for body typography element in empty state */ - --mod-body-font-size: var(--spectrum-font-size-200); - --mod-body-margin-start: var(--spectrum-component-top-to-text-200); - --mod-body-margin-end: var(--spectrum-component-bottom-to-text-200); + --spectrum-body-font-size: var(--spectrum-font-size-200); + --spectrum-body-margin-start: var(--spectrum-component-top-to-text-200); + --spectrum-body-margin-end: var(--spectrum-component-bottom-to-text-200); } .spectrum-TagGroup { @@ -59,13 +59,13 @@ .spectrum-TagGroup-tags { display: inline-flex; flex-wrap: wrap; - column-gap: var(--mod-tag-group-inline-tag-spacing, var(--spectrum-tag-group-inline-tag-spacing)); - row-gap: var(--mod-tag-group-block-tag-spacing, var(--spectrum-tag-group-block-tag-spacing)); - margin-block-end: var(--mod-tag-group-block-tag-spacing, var(--spectrum-tag-group-block-tag-spacing)); + column-gap: var(--spectrum-tag-group-inline-tag-spacing); + row-gap: var(--spectrum-tag-group-block-tag-spacing); + margin-block-end: var(--spectrum-tag-group-block-tag-spacing); } .spectrum-TagGroup-label { - margin-block-end: var(--mod-tag-group-block-spacing-label-to-tags, var(--spectrum-tag-group-block-spacing-label-to-tags)); + margin-block-end: var(--spectrum-tag-group-block-spacing-label-to-tags); } .spectrum-TagGroup-actionButton { @@ -73,7 +73,7 @@ } .spectrum-TagGroup-helpText { - margin-block-start: var(--mod-tag-group-spacing-help-text-to-tags, var(--spectrum-tag-group-spacing-help-text-to-tags)); + margin-block-start: var(--spectrum-tag-group-spacing-help-text-to-tags); } .spectrum-TagGroup--sideLabel { @@ -84,7 +84,7 @@ grid-row: 1; grid-column: 1; margin-block-end: 0; - margin-inline-end: var(--mod-tag-group-inline-spacing-label-to-tags, var(--spectrum-tag-group-inline-spacing-label-to-tags)); + margin-inline-end: var(--spectrum-tag-group-inline-spacing-label-to-tags); } .spectrum-TagGroup-tags { diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json index 073bc68dfb2..857d75eca32 100644 --- a/components/textfield/dist/metadata.json +++ b/components/textfield/dist/metadata.json @@ -92,68 +92,6 @@ ".spectrum-Textfield:hover .spectrum-Textfield-input", ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder" ], - "modifiers": [ - "--mod-text-area-min-block-size", - "--mod-text-area-min-inline-size", - "--mod-textfield-animation-duration", - "--mod-textfield-background-color", - "--mod-textfield-background-color-disabled", - "--mod-textfield-border-color", - "--mod-textfield-border-color-disabled", - "--mod-textfield-border-color-focus", - "--mod-textfield-border-color-focus-hover", - "--mod-textfield-border-color-hover", - "--mod-textfield-border-color-invalid-default", - "--mod-textfield-border-color-invalid-focus", - "--mod-textfield-border-color-invalid-focus-hover", - "--mod-textfield-border-color-invalid-hover", - "--mod-textfield-border-color-invalid-keyboard-focus", - "--mod-textfield-border-color-keyboard-focus", - "--mod-textfield-border-width", - "--mod-textfield-character-count-color", - "--mod-textfield-character-count-spacing-block", - "--mod-textfield-character-count-spacing-block-side", - "--mod-textfield-character-count-spacing-inline", - "--mod-textfield-character-count-spacing-inline-side", - "--mod-textfield-corner-radius", - "--mod-textfield-focus-indicator-color", - "--mod-textfield-focus-indicator-gap", - "--mod-textfield-focus-indicator-width", - "--mod-textfield-font-family", - "--mod-textfield-font-size", - "--mod-textfield-font-style", - "--mod-textfield-font-weight", - "--mod-textfield-height", - "--mod-textfield-helptext-spacing-block", - "--mod-textfield-icon-color-invalid", - "--mod-textfield-icon-color-valid", - "--mod-textfield-icon-size-invalid", - "--mod-textfield-icon-size-valid", - "--mod-textfield-icon-spacing-block-invalid", - "--mod-textfield-icon-spacing-block-valid", - "--mod-textfield-icon-spacing-inline-end-invalid", - "--mod-textfield-icon-spacing-inline-end-valid", - "--mod-textfield-icon-spacing-inline-start-invalid", - "--mod-textfield-icon-spacing-inline-start-valid", - "--mod-textfield-label-spacing-block", - "--mod-textfield-label-spacing-inline-side-label", - "--mod-textfield-line-height", - "--mod-textfield-line-height-cjk", - "--mod-textfield-min-width", - "--mod-textfield-spacing-block-end", - "--mod-textfield-spacing-block-start", - "--mod-textfield-spacing-inline", - "--mod-textfield-text-color-default", - "--mod-textfield-text-color-disabled", - "--mod-textfield-text-color-focus", - "--mod-textfield-text-color-focus-hover", - "--mod-textfield-text-color-hover", - "--mod-textfield-text-color-invalid", - "--mod-textfield-text-color-keyboard-focus", - "--mod-textfield-text-color-readonly", - "--mod-textfield-text-color-valid", - "--mod-textfield-width" - ], "component": [ "--spectrum-text-field-minimum-width-multiplier", "--spectrum-textfield-animation-duration", diff --git a/components/textfield/index.css b/components/textfield/index.css index 1117d3ca174..a008c002cfd 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -68,7 +68,7 @@ --spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); /*** Colors ***/ - --spectrum-textfield-background-color: var(--mod-textfield-background-color, var(--spectrum-gray-25)); + --spectrum-textfield-background-color: var(--spectrum-gray-25); --spectrum-textfield-border-color: var(--spectrum-gray-300); --spectrum-textfield-border-color-hover: var(--spectrum-gray-400); --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); @@ -86,8 +86,8 @@ --spectrum-textfield-text-color-readonly: var(--spectrum-neutral-content-color-default); /* Disabled Colors */ - --spectrum-textfield-background-color-disabled: var(--highcontrast-textfield-background-color-disabled, var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25))); - --spectrum-textfield-border-color-disabled: var(--highcontrast-textfield-border-color-disabled, var(--mod-textfield-border-color-disabled, var(--spectrum-disabled-border-color))); + --spectrum-textfield-background-color-disabled: var(--highcontrast-textfield-background-color-disabled, var(--spectrum-gray-25)); + --spectrum-textfield-border-color-disabled: var(--highcontrast-textfield-border-color-disabled, var(--spectrum-disabled-border-color)); --spectrum-textfield-text-color-disabled: var(--spectrum-disabled-content-color); /* Invalid Colors */ @@ -196,7 +196,7 @@ text-overflow: ellipsis; /* Prevent input from expanding to width of Help text */ - inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width)); + inline-size: var(--spectrum-textfield-width); /* Grid layout for child components */ display: inline-grid; @@ -232,22 +232,22 @@ /****** Validation Icon - Valid ✅ ******/ .spectrum-Textfield.is-valid & { /* validation icon does not need to account for border width */ - inset-block-start: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid)); - inset-block-end: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid)); - inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)); - color: var(--mod-textfield-icon-color-valid, var(--spectrum-textfield-icon-color-valid)); + inset-block-start: var(--spectrum-textfield-icon-spacing-block-valid); + inset-block-end: var(--spectrum-textfield-icon-spacing-block-valid); + inset-inline-end: var(--spectrum-textfield-icon-spacing-inline-end-valid); + color: var(--spectrum-textfield-icon-color-valid); } /****** Validation Icon - Invalid ⚠️ ******/ .spectrum-Textfield.is-invalid & { - block-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)); + block-size: var(--spectrum-textfield-icon-size-invalid); /* validation icon does not need to account for border width */ - inline-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)); - inset-block-start: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid)); - inset-block-end: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid)); - inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)); - color: var(--mod-textfield-icon-color-invalid, var(--spectrum-textfield-icon-color-invalid)); + inline-size: var(--spectrum-textfield-icon-size-invalid); + inset-block-start: var(--spectrum-textfield-icon-spacing-block-invalid); + inset-block-end: var(--spectrum-textfield-icon-spacing-block-invalid); + inset-inline-end: var(--spectrum-textfield-icon-spacing-inline-end-invalid); + color: var(--spectrum-textfield-icon-color-invalid); } .spectrum-Textfield.is-disabled &, @@ -260,56 +260,56 @@ /********* Child Component - Label *********/ .spectrum-FieldLabel { .spectrum-Textfield & { - margin-block-end: var(--mod-textfield-label-spacing-block, var(--spectrum-textfield-label-spacing-block)); + margin-block-end: var(--spectrum-textfield-label-spacing-block); grid-row: 1; grid-column: 1 / span 1; } .spectrum-Textfield.is-disabled & { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--highcontrast-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)); } } /********* Child Component - Help Text *********/ .spectrum-HelpText { .spectrum-Textfield & { - margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block)); + margin-block-start: var(--spectrum-textfield-helptext-spacing-block); grid-row: 3; grid-column: 1 / span 2; } .spectrum-Textfield.is-disabled & .spectrum-HelpText-text { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--highcontrast-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)); } } /********* Child Element - Character Count *********/ .spectrum-Textfield-characterCount { - color: var(--mod-textfield-character-count-color, var(--spectrum-textfield-character-count-color)); + color: var(--spectrum-textfield-character-count-color); display: inline-flex; align-items: flex-end; justify-content: flex-end; inline-size: auto; - margin-block-end: var(--mod-textfield-character-count-spacing-block, var(--spectrum-textfield-character-count-spacing-block)); - margin-inline-start: var(--mod-textfield-character-count-spacing-inline, var(--spectrum-textfield-character-count-spacing-inline)); + margin-block-end: var(--spectrum-textfield-character-count-spacing-block); + margin-inline-start: var(--spectrum-textfield-character-count-spacing-inline); margin-inline-end: 0; - font-size: var(--mod-textfield-font-size, var(--spectrum-textfield-font-size)); - font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family)); - font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight)); - font-style: var(--mod-textfield-font-style, var(--spectrum-textfield-font-style)); - line-height: var(--mod-textfield-line-height, var(--spectrum-textfield-line-height)); + font-size: var(--spectrum-textfield-font-size); + font-family: var(--spectrum-textfield-font-family); + font-weight: var(--spectrum-textfield-font-weight); + font-style: var(--spectrum-textfield-font-style); + line-height: var(--spectrum-textfield-line-height); grid-row: 1; grid-column: 2 / span 1; - padding-inline-end: calc(var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)) / 2); + padding-inline-end: calc(var(--spectrum-textfield-corner-radius) / 2); .spectrum-Textfield.is-disabled & { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--highcontrast-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)); } &:lang(ja), &:lang(zh), &:lang(ko) { - --spectrum-textfield-line-height: var(--mod-textfield-line-height-cjk, var(--spectrum-textfield-line-height-cjk)); + --spectrum-textfield-line-height: var(--spectrum-textfield-line-height-cjk); } } @@ -319,26 +319,26 @@ line-height: var(--spectrum-textfield-input-line-height); box-sizing: border-box; inline-size: 100%; - min-inline-size: var(--mod-textfield-min-width, var(--spectrum-textfield-min-width)); - block-size: var(--mod-textfield-height, var(--spectrum-textfield-height)); - padding-block-start: calc(var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); - padding-block-end: calc(var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); - padding-inline: calc(var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + min-inline-size: var(--spectrum-textfield-min-width); + block-size: var(--spectrum-textfield-height); + padding-block-start: calc(var(--spectrum-textfield-spacing-block-start) - var(--spectrum-textfield-border-width)); + padding-block-end: calc(var(--spectrum-textfield-spacing-block-end) - var(--spectrum-textfield-border-width)); + padding-inline: calc(var(--spectrum-textfield-spacing-inline) - var(--spectrum-textfield-border-width)); vertical-align: top; /* used to align them correctly in forms. */ outline: none; background-color: var(--highcontrast-textfield-background-color, var(--spectrum-textfield-background-color)); - border-width: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)); + border-width: var(--spectrum-textfield-border-width); border-style: solid; - border-color: var(--highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color))); - border-radius: var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)); - transition: border-color var(--mod-textfield-animation-duration, var(--spectrum-textfield-animation-duration)) ease-in-out; - - font-size: var(--mod-textfield-font-size, var(--spectrum-textfield-font-size)); - font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family)); - font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight)); - font-style: var(--mod-textfield-font-style, var(--spectrum-textfield-font-style)); - color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))); + border-color: var(--highcontrast-textfield-border-color, var(--spectrum-textfield-border-color)); + border-radius: var(--spectrum-textfield-corner-radius); + transition: border-color var(--spectrum-textfield-animation-duration) ease-in-out; + + font-size: var(--spectrum-textfield-font-size); + font-family: var(--spectrum-textfield-font-family); + font-weight: var(--spectrum-textfield-font-weight); + font-style: var(--spectrum-textfield-font-style); + color: var(--highcontrast-textfield-text-color-default, var(--spectrum-textfield-text-color-default)); text-overflow: ellipsis; /* place in same cell: input, focus indicator, and grows sizer */ @@ -374,42 +374,42 @@ &::placeholder { /* Normalize opacity between browsers. */ opacity: 1; - font-size: var(--mod-textfield-font-size, var(--spectrum-textfield-font-size)); - font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family)); - font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight)); - font-style: var(--mod-textfield-font-style, var(--spectrum-textfield-font-style)); - color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))); - transition: color var(--mod-textfield-animation-duration, var(--spectrum-textfield-animation-duration)) ease-in-out; + font-size: var(--spectrum-textfield-font-size); + font-family: var(--spectrum-textfield-font-family); + font-weight: var(--spectrum-textfield-font-weight); + font-style: var(--spectrum-textfield-font-style); + color: var(--highcontrast-textfield-text-color-default, var(--spectrum-textfield-text-color-default)); + transition: color var(--spectrum-textfield-animation-duration) ease-in-out; } /* hover */ .spectrum-Textfield:hover &, &:hover { - border-color: var(--highcontrast-textfield-border-color-hover, var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover))); - color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))); + border-color: var(--highcontrast-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover)); + color: var(--highcontrast-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover)); &::placeholder { - color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))); + color: var(--highcontrast-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover)); } } /* mouse focus */ .spectrum-Textfield.is-focused &, &:focus { - border-color: var(--highcontrast-textfield-border-color-focus, var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus))); - color: var(--highcontrast-textfield-text-color-focus, var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))); + border-color: var(--highcontrast-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus)); + color: var(--highcontrast-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus)); &::placeholder { - color: var(--highcontrast-textfield-text-color-focus, var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))); + color: var(--highcontrast-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus)); } /* focus hover */ &:hover { - border-color: var(--highcontrast-textfield-border-color-focus-hover, var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover))); - color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + border-color: var(--highcontrast-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover)); + color: var(--highcontrast-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)); &::placeholder { - color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + color: var(--highcontrast-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)); } } } @@ -419,71 +419,71 @@ .spectrum-Textfield.is-focused:hover &, .spectrum-Textfield.is-keyboardFocused:hover &, &:focus:hover { - border-color: var(--highcontrast-textfield-border-color-focus-hover, var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover))); - color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + border-color: var(--highcontrast-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover)); + color: var(--highcontrast-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)); &::placeholder { - color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + color: var(--highcontrast-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover)); } } /* keyboard focus */ .spectrum-Textfield.is-keyboardFocused & { - border-color: var(--highcontrast-textfield-border-color-keyboard-focus, var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus))); - color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))); + border-color: var(--highcontrast-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus)); + color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)); &::placeholder { - color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))); + color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus)); } /* focus indicator is focused state */ - outline: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)) solid; - outline-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))); - outline-offset: var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)); + outline: var(--spectrum-textfield-focus-indicator-width) solid; + outline-color: var(--highcontrast-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color)); + outline-offset: var(--spectrum-textfield-focus-indicator-gap); } /*** Input Valid ✅ ***/ .spectrum-Textfield.is-valid & { /* creates spacing between text end and icon start, sum of icon start spacing + icon size + icon end spacing - border */ - padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); - color: var(--highcontrast-textfield-text-color-valid, var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid))); + padding-inline-end: calc(var(--spectrum-textfield-icon-spacing-inline-start-valid) + var(--spectrum-textfield-icon-size-valid) + var(--spectrum-textfield-icon-spacing-inline-end-valid) - var(--spectrum-textfield-border-width)); + color: var(--highcontrast-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid)); } /*** Input Invalid ⚠️ ***/ .spectrum-Textfield.is-invalid & { /* creates spacing between text end and icon start, sum of icon start spacing + icon size + icon end spacing - border */ - padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); - color: var(--highcontrast-textfield-text-color-invalid, var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid))); - border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default))); + padding-inline-end: calc(var(--spectrum-textfield-icon-spacing-inline-start-invalid) + var(--spectrum-textfield-icon-size-invalid) + var(--spectrum-textfield-icon-spacing-inline-end-invalid) - var(--spectrum-textfield-border-width)); + color: var(--highcontrast-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid)); + border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default)); } /* Invalid hover */ .spectrum-Textfield.is-invalid:hover:not(.is-disabled, .is-readOnly) &, .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) &:hover { - border-color: var(--highcontrast-textfield-border-color-invalid-hover, var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))); + border-color: var(--highcontrast-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover)); } /* Invalid mouse focus */ .spectrum-Textfield.is-invalid.is-focused &, .spectrum-Textfield.is-invalid:focus &, .spectrum-Textfield.is-invalid &:focus { - border-color: var(--highcontrast-textfield-border-color-invalid-focus, var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus))); + border-color: var(--highcontrast-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus)); /* focus hover */ &:hover { - border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover, var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover))); + border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover)); } } .spectrum-Textfield.is-invalid:focus:hover &, .spectrum-Textfield.is-invalid.is-focused:hover &, .spectrum-Textfield.is-invalid.is-keyboardFocused:hover & { - border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover, var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover))); + border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover)); } /* invalid keyboard focus */ .spectrum-Textfield.is-invalid.is-keyboardFocused & { - border-color: var(--highcontrast-textfield-border-color-invalid-keyboard-focus, var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus))); + border-color: var(--highcontrast-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus)); } /****** Input Disabled 🚫 ******/ @@ -492,7 +492,7 @@ &:disabled { background-color: var(--spectrum-textfield-background-color-disabled); border-color: var(--spectrum-textfield-border-color-disabled); - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--highcontrast-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)); /* Disable the resize functionality when disabled */ resize: none; @@ -501,7 +501,7 @@ opacity: 1; &::placeholder { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--highcontrast-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)); } } @@ -511,16 +511,16 @@ &:read-only { background-color: transparent; border-color: var(--highcontrast-textfield-border-color-readonly, transparent); - color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); + color: var(--highcontrast-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)); outline: none; &::placeholder { - color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); + color: var(--highcontrast-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly)); background-color: transparent; .spectrum-Textfield.is-disabled &, .spectrum-Textfield.is-disabled:hover & { - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--highcontrast-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)); } } } @@ -528,7 +528,7 @@ /****** ReadOnly & Disabled ******/ .spectrum-Textfield.is-readOnly.is-disabled & { border-color: var(--highcontrast-textfield-border-color-disabled, transparent); - color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + color: var(--highcontrast-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled)); } } @@ -538,15 +538,15 @@ grid-template-rows: auto auto; .spectrum-FieldLabel { - margin-inline-end: var(--mod-textfield-label-spacing-inline-side-label, var(--spectrum-textfield-label-spacing-inline-side-label)); + margin-inline-end: var(--spectrum-textfield-label-spacing-inline-side-label); grid-row: 1 / span 2; grid-column: 1 / span 1; } .spectrum-Textfield-characterCount { align-items: flex-start; - margin-block-start: var(--mod-textfield-character-count-spacing-block-side, var(--spectrum-textfield-character-count-spacing-block-side)); - margin-inline-start: var(--mod-textfield-character-count-spacing-inline-side, var(--spectrum-textfield-character-count-spacing-inline-side)); + margin-block-start: var(--spectrum-textfield-character-count-spacing-block-side); + margin-inline-start: var(--spectrum-textfield-character-count-spacing-inline-side); grid-row: 1; grid-column: 3 / span 1; } @@ -570,15 +570,15 @@ /*** Text Area ***/ .spectrum-Textfield--multiline { .spectrum-Textfield-input { - line-height: var(--mod-textfield-line-height, var(--spectrum-textfield-line-height)); - min-inline-size: var(--mod-text-area-min-inline-size, var(--spectrum-text-area-min-inline-size)); - min-block-size: var(--mod-text-area-min-block-size, var(--spectrum-text-area-min-block-size)); + line-height: var(--spectrum-textfield-line-height); + min-inline-size: var(--spectrum-text-area-min-inline-size); + min-block-size: var(--spectrum-text-area-min-block-size); resize: inherit; &:lang(ja), &:lang(zh), &:lang(ko) { - --spectrum-textfield-line-height: var(--mod-textfield-line-height-cjk, var(--spectrum-textfield-line-height-cjk)); + --spectrum-textfield-line-height: var(--spectrum-textfield-line-height-cjk); } } diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json index 2a5fa051ef2..131df67821a 100644 --- a/components/thumbnail/dist/metadata.json +++ b/components/thumbnail/dist/metadata.json @@ -28,22 +28,6 @@ ".spectrum-Thumbnail.is-focused:after", ".spectrum-Thumbnail:before" ], - "modifiers": [ - "--mod-thumbnail-border-color", - "--mod-thumbnail-border-color-selected", - "--mod-thumbnail-border-radius", - "--mod-thumbnail-border-width", - "--mod-thumbnail-border-width-selected", - "--mod-thumbnail-color-opacity-disabled", - "--mod-thumbnail-focus-indicator-color", - "--mod-thumbnail-focus-indicator-gap", - "--mod-thumbnail-focus-indicator-thickness", - "--mod-thumbnail-layer-border-color-inner", - "--mod-thumbnail-layer-border-color-outer", - "--mod-thumbnail-layer-border-width-inner", - "--mod-thumbnail-layer-border-width-outer", - "--mod-thumbnail-size" - ], "component": [ "--spectrum-thumbnail-border-color", "--spectrum-thumbnail-border-color-selected", @@ -86,9 +70,10 @@ "--spectrum-focus-indicator-thickness", "--spectrum-gray-500", "--spectrum-gray-800-rgb", + "--spectrum-opacity-checkerboard-size", "--spectrum-white" ], - "passthroughs": ["--mod-opacity-checkerboard-size"], + "passthroughs": [], "high-contrast": [ "--highcontrast-thumbnail-border-color", "--highcontrast-thumbnail-border-color-selected", diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 4e28f1892e2..338e8ee221c 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -34,7 +34,7 @@ --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); /* @passthrough -- custom sizing for opacity checkerboard */ - --mod-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size); + --spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size); } .spectrum-Thumbnail--size50 { @@ -93,10 +93,10 @@ padding: 0; display: block; - inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); - block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); + inline-size: var(--spectrum-thumbnail-size); + block-size: var(--spectrum-thumbnail-size); - border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + border-radius: var(--spectrum-thumbnail-border-radius); /* Friends should align to the top of the tabs */ vertical-align: top; @@ -109,12 +109,12 @@ position: absolute; inline-size: 100%; block-size: 100%; - border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); - box-shadow: inset 0 0 0 var(--mod-thumbnail-border-width, var(--spectrum-thumbnail-border-width)) var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, var(--spectrum-thumbnail-border-color))); + border-radius: var(--spectrum-thumbnail-border-radius); + box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) var(--highcontrast-thumbnail-border-color, var(--spectrum-thumbnail-border-color)); } &.is-disabled { - opacity: var(--mod-thumbnail-color-opacity-disabled, var(--spectrum-thumbnail-color-opacity-disabled)); + opacity: var(--spectrum-thumbnail-color-opacity-disabled); } &.is-focused { @@ -123,24 +123,24 @@ &::after { content: ""; border-style: solid; - border-width: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness)); - border-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-thumbnail-focus-indicator-color))); - border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + border-width: var(--spectrum-thumbnail-focus-indicator-thickness); + border-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--spectrum-thumbnail-focus-indicator-color)); + border-radius: var(--spectrum-thumbnail-border-radius); position: absolute; - inset: calc((var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness))) * -1); + inset: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); } .spectrum-Thumbnail-image-wrapper { overflow: hidden; - border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + border-radius: var(--spectrum-thumbnail-border-radius); } } } .spectrum-Thumbnail-layer { border-style: solid; - border-width: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer)); - border-color: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-thumbnail-layer-border-color-outer))); + border-width: var(--spectrum-thumbnail-layer-border-width-outer); + border-color: var(--highcontrast-thumbnail-layer-border-color-outer, var(--spectrum-thumbnail-layer-border-color-outer)); box-sizing: border-box; display: flex; @@ -153,9 +153,9 @@ &.is-selected { outline-style: solid; - outline-color: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-thumbnail-border-color-selected))); - outline-width: var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected)); - outline-offset: calc(var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner))); + outline-color: var(--highcontrast-thumbnail-border-color-selected, var(--spectrum-thumbnail-border-color-selected)); + outline-width: var(--spectrum-thumbnail-border-width-selected); + outline-offset: calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner)); } } @@ -164,11 +164,11 @@ align-items: center; justify-content: center; - inline-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2); - block-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2); + inline-size: calc(var(--spectrum-thumbnail-size) - ((var(--spectrum-thumbnail-layer-border-width-inner))) * 2); + block-size: calc(var(--spectrum-thumbnail-size) - ((var(--spectrum-thumbnail-layer-border-width-inner))) * 2); outline-style: solid; - outline-color: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-thumbnail-layer-border-color-inner))); - outline-width: calc(var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer))); + outline-color: var(--highcontrast-thumbnail-layer-border-color-inner, var(--spectrum-thumbnail-layer-border-color-inner)); + outline-width: calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer)); } .spectrum-Thumbnail-image-wrapper { @@ -206,7 +206,7 @@ inline-size: 100%; background-size: cover; background-position: center center; - border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + border-radius: var(--spectrum-thumbnail-border-radius); } /* Windows High Contrast Mode */ diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json index 50e0b73d5b1..04f69fd4089 100644 --- a/components/toast/dist/metadata.json +++ b/components/toast/dist/metadata.json @@ -17,31 +17,6 @@ ".spectrum-Toast.spectrum-Toast--noButton", ".spectrum-Toast:not(:has(.spectrum-Button))" ], - "modifiers": [ - "--mod-toast-background-color-default", - "--mod-toast-corner-radius", - "--mod-toast-font-family", - "--mod-toast-font-size", - "--mod-toast-font-style", - "--mod-toast-font-weight", - "--mod-toast-icon-block-size", - "--mod-toast-informative-background-color-default", - "--mod-toast-line-height", - "--mod-toast-line-height-cjk", - "--mod-toast-max-inline-size", - "--mod-toast-min-block-size", - "--mod-toast-negative-background-color-default", - "--mod-toast-positive-background-color-default", - "--mod-toast-spacing-block-close-button", - "--mod-toast-spacing-button-to-close-button-horizontal", - "--mod-toast-spacing-close-button-to-end-edge", - "--mod-toast-spacing-icon-to-text", - "--mod-toast-spacing-start-edge-to-text-and-icon", - "--mod-toast-spacing-text-to-button-vertical", - "--mod-toast-spacing-text-to-close-button", - "--mod-toast-spacing-toast-to-edge", - "--mod-toast-text-and-icon-color" - ], "component": [ "--spectrum-toast-background-color-default", "--spectrum-toast-bottom-to-text", @@ -78,6 +53,7 @@ ], "global": [ "--spectrum-cjk-line-height-100", + "--spectrum-closebutton-icon-color-default", "--spectrum-corner-radius-800", "--spectrum-default-font-style", "--spectrum-font-size-100", @@ -96,6 +72,6 @@ "--spectrum-white", "--spectrum-workflow-icon-size-100" ], - "passthroughs": ["--mod-closebutton-icon-color-default"], + "passthroughs": [], "high-contrast": [] } diff --git a/components/toast/index.css b/components/toast/index.css index 1072f5a2cb7..aa012b8a160 100644 --- a/components/toast/index.css +++ b/components/toast/index.css @@ -48,7 +48,7 @@ --spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); --spectrum-toast-text-and-icon-color: var(--spectrum-white); - --mod-closebutton-icon-color-default: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color)); + --spectrum-closebutton-icon-color-default: var(--spectrum-toast-text-and-icon-color); } .spectrum-Toast { @@ -56,63 +56,63 @@ display: inline-flex; flex-direction: row; align-items: stretch; - margin: var(--mod-toast-spacing-toast-to-edge, var(--spectrum-toast-spacing-toast-to-edge)); - min-block-size: var(--mod-toast-min-block-size, var(--spectrum-toast-min-block-size)); - max-inline-size: var(--mod-toast-max-inline-size, var(--spectrum-toast-max-inline-size)); + margin: var(--spectrum-toast-spacing-toast-to-edge); + min-block-size: var(--spectrum-toast-min-block-size); + max-inline-size: var(--spectrum-toast-max-inline-size); - border-radius: var(--mod-toast-corner-radius, var(--spectrum-toast-corner-radius)); + border-radius: var(--spectrum-toast-corner-radius); - padding-inline-start: var(--mod-toast-spacing-start-edge-to-text-and-icon, var(--spectrum-toast-spacing-start-edge-to-text-and-icon)); + padding-inline-start: var(--spectrum-toast-spacing-start-edge-to-text-and-icon); - font-family: var(--mod-toast-font-family, var(--spectrum-toast-font-family)); - font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size)); - font-style: var(--mod-toast-font-style, var(--spectrum-toast-font-style)); - font-weight: var(--mod-toast-font-weight, var(--spectrum-toast-font-weight)); + font-family: var(--spectrum-toast-font-family); + font-size: var(--spectrum-toast-font-size); + font-style: var(--spectrum-toast-font-style); + font-weight: var(--spectrum-toast-font-weight); -webkit-font-smoothing: antialiased; - background-color: var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default)); - color: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color)); + background-color: var(--spectrum-toast-background-color-default); + color: var(--spectrum-toast-text-and-icon-color); overflow-wrap: anywhere; &.spectrum-Toast--noButton, &:not(:has(.spectrum-Button)) { - column-gap: var(--mod-toast-spacing-text-to-close-button, var(--spectrum-toast-spacing-text-to-close-button)); + column-gap: var(--spectrum-toast-spacing-text-to-close-button); } .spectrum-CloseButton { - margin-block: var(--mod-toast-spacing-block-close-button, var(--spectrum-toast-spacing-block-close-button)); - margin-inline-end: var(--mod-toast-spacing-close-button-to-end-edge, var(--spectrum-toast-spacing-close-button-to-end-edge)); + margin-block: var(--spectrum-toast-spacing-block-close-button); + margin-inline-end: var(--spectrum-toast-spacing-close-button-to-end-edge); flex-shrink: 0; } } .spectrum-Toast--negative { - background-color: var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default)); + background-color: var(--spectrum-toast-negative-background-color-default); } .spectrum-Toast--info { - background-color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default)); + background-color: var(--spectrum-toast-informative-background-color-default); } .spectrum-Toast--positive { - background-color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default)); + background-color: var(--spectrum-toast-positive-background-color-default); } .spectrum-Toast-typeIcon { flex-shrink: 0; flex-grow: 0; - block-size: var(--mod-toast-icon-block-size, var(--spectrum-toast-icon-block-size)); + block-size: var(--spectrum-toast-icon-block-size); /* Similar to the spectrum-Toast-text calc, now the icon only has an extra margin to add the difference between spacing-200 (which is now around the entire toast) and the requested toast-top-to-workflow-icon token. */ margin-block-start: calc(var(--spectrum-toast-spacing-top-edge-to-icon) - var(--spectrum-toast-spacing-edge-to-button-vertical)); - margin-inline-end: var(--mod-toast-spacing-icon-to-text, var(--spectrum-toast-spacing-icon-to-text)); + margin-inline-end: var(--spectrum-toast-spacing-icon-to-text); margin-inline-start: 0; } .spectrum-Toast .spectrum-Button { - margin-inline-end: var(--mod-toast-spacing-button-to-close-button-horizontal, var(--spectrum-toast-spacing-button-to-close-button-horizontal)); + margin-inline-end: var(--spectrum-toast-spacing-button-to-close-button-horizontal); } .spectrum-Toast-body { @@ -120,7 +120,7 @@ flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto; - padding-block: var(--mod-toast-spacing-text-to-button-vertical, var(--spectrum-toast-spacing-edge-to-button-vertical)); + padding-block: var(--spectrum-toast-spacing-edge-to-button-vertical); column-gap: var(--spectrum-toast-spacing-text-to-button-horizontal); } @@ -129,14 +129,14 @@ display: inline-flex; align-items: start; box-sizing: border-box; - line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height)); + line-height: var(--spectrum-toast-line-height); text-align: start; - color: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color)); + color: var(--spectrum-toast-text-and-icon-color); &:lang(ja), &:lang(zh), &:lang(ko) { - line-height: var(--mod-toast-line-height-cjk, var(--spectrum-toast-line-height-cjk)); + line-height: var(--spectrum-toast-line-height-cjk); } } diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 9c7a37c1250..79c14f14a9b 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -249,32 +249,6 @@ ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-right", ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start" ], - "modifiers": [ - "--mod-overlay-animation-duration", - "--mod-overlay-animation-duration-opened", - "--mod-tooltip-animation-distance", - "--mod-tooltip-background-color-default", - "--mod-tooltip-background-color-informative", - "--mod-tooltip-background-color-negative", - "--mod-tooltip-border-radius", - "--mod-tooltip-cjk-line-height", - "--mod-tooltip-content-color", - "--mod-tooltip-font-size", - "--mod-tooltip-font-weight", - "--mod-tooltip-height", - "--mod-tooltip-line-height", - "--mod-tooltip-margin", - "--mod-tooltip-max-inline-size", - "--mod-tooltip-pointer-corner-spacing", - "--mod-tooltip-spacing-block-end", - "--mod-tooltip-spacing-block-start", - "--mod-tooltip-spacing-inline", - "--mod-tooltip-tip-antialiasing-inset", - "--mod-tooltip-tip-block-size", - "--mod-tooltip-tip-corner-radius", - "--mod-tooltip-tip-height-percentage", - "--mod-tooltip-tip-square-size" - ], "component": [ "--spectrum-tooltip-animation-distance", "--spectrum-tooltip-animation-duration", diff --git a/components/tooltip/index.css b/components/tooltip/index.css index f589e24725c..a4fe6696675 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -53,7 +53,7 @@ --spectrum-tooltip-tip-antialiasing-inset: 0.5px; /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ - --spectrum-tooltip-pointer-corner-spacing: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius)); + --spectrum-tooltip-pointer-corner-spacing: var(--spectrum-tooltip-border-radius); --highcontrast-tooltip-border-width: 0px; } @@ -77,20 +77,20 @@ vertical-align: top; inline-size: auto; - padding-inline: var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline)); + padding-inline: var(--spectrum-tooltip-spacing-inline); - border-radius: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius)); + border-radius: var(--spectrum-tooltip-border-radius); block-size: auto; - min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height)); - max-inline-size: var(--mod-tooltip-max-inline-size, var(--spectrum-tooltip-max-inline-size)); + min-block-size: var(--spectrum-tooltip-height); + max-inline-size: var(--spectrum-tooltip-max-inline-size); - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); - color: var(--mod-tooltip-content-color, var(--spectrum-tooltip-content-color)); + background-color: var(--highcontrast-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default)); + color: var(--spectrum-tooltip-content-color); - font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size)); - font-weight: var(--mod-tooltip-font-weight, var(--spectrum-tooltip-font-weight)); - line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); + font-size: var(--spectrum-tooltip-font-size); + font-weight: var(--spectrum-tooltip-font-weight); + line-height: var(--spectrum-tooltip-line-height); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; @@ -101,7 +101,7 @@ &:lang(ja), &:lang(zh), &:lang(ko) { - line-height: var(--mod-tooltip-cjk-line-height, var(--spectrum-tooltip-cjk-line-height)); + line-height: var(--spectrum-tooltip-cjk-line-height); } p { @@ -111,11 +111,11 @@ /****** Variants ******/ .spectrum-Tooltip--info { - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); + background-color: var(--highcontrast-tooltip-background-color-default, var(--spectrum-tooltip-background-color-informative)); } .spectrum-Tooltip--negative { - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); + background-color: var(--highcontrast-tooltip-background-color-default, var(--spectrum-tooltip-background-color-negative)); } .spectrum-Tooltip.is-open { @@ -129,27 +129,27 @@ .spectrum-Tooltip-tip { position: absolute; - block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); - inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); + block-size: var(--spectrum-tooltip-tip-square-size); + inline-size: var(--spectrum-tooltip-tip-square-size); - inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + inset-block-start: calc(100% - (0.5 * var(--spectrum-tooltip-tip-square-size)) - var(--spectrum-tooltip-tip-antialiasing-inset) + var(--highcontrast-tooltip-border-width)); /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ - left: calc(50% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)))); + left: calc(50% - (0.5 * var(--spectrum-tooltip-tip-square-size))); transform: rotate(-45deg); - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); + background-color: var(--highcontrast-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default)); /* Default: Pointing down ▽ */ - clip-path: polygon(0 0, 100% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 0 100%); + clip-path: polygon(0 0, 100% var(--spectrum-tooltip-tip-height-percentage), 0 100%); - border-radius: 0 0 0 var(--mod-tooltip-tip-corner-radius, var(--spectrum-tooltip-tip-corner-radius)); + border-radius: 0 0 0 var(--spectrum-tooltip-tip-corner-radius); .spectrum-Tooltip--info & { - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); + background-color: var(--highcontrast-tooltip-background-color-default, var(--spectrum-tooltip-background-color-informative)); } .spectrum-Tooltip--negative & { - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); + background-color: var(--highcontrast-tooltip-background-color-default, var(--spectrum-tooltip-background-color-negative)); } /*** Tip Placement ***/ @@ -159,7 +159,7 @@ .spectrum-Tooltip--top-right &, .spectrum-Tooltip--top-start &, .spectrum-Tooltip--top-end & { - inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + inset-block-start: calc(100% - (0.5 * var(--spectrum-tooltip-tip-square-size)) - var(--spectrum-tooltip-tip-antialiasing-inset) + var(--highcontrast-tooltip-border-width)); transform: rotate(-45deg); } @@ -169,29 +169,29 @@ .spectrum-Tooltip--bottom-right &, .spectrum-Tooltip--bottom-start &, .spectrum-Tooltip--bottom-end & { - inset-block: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + inset-block: auto calc(100% - (0.5 * var(--spectrum-tooltip-tip-square-size)) - var(--spectrum-tooltip-tip-antialiasing-inset) + var(--highcontrast-tooltip-border-width)); transform: rotate(135deg); } /* tip is horizontal at left △ ▽ */ .spectrum-Tooltip--top-left &, .spectrum-Tooltip--bottom-left & { - inset-inline-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + inset-inline-start: var(--spectrum-tooltip-pointer-corner-spacing); } /* tip is horizontal at right △ ▽ */ .spectrum-Tooltip--top-right &, .spectrum-Tooltip--bottom-right & { - inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + inset-inline: auto var(--spectrum-tooltip-pointer-corner-spacing); } /* logical property - tip is horizontal at start △ ▽ */ .spectrum-Tooltip--top-start &, .spectrum-Tooltip--bottom-start & { - inset-inline: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)) auto; + inset-inline: var(--spectrum-tooltip-pointer-corner-spacing) auto; &:dir(rtl) { - right: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + right: var(--spectrum-tooltip-pointer-corner-spacing); left: auto; } } @@ -199,10 +199,10 @@ /* logical property - tip is horizontal at end △ ▽ */ .spectrum-Tooltip--top-end &, .spectrum-Tooltip--bottom-end & { - inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + inset-inline: auto var(--spectrum-tooltip-pointer-corner-spacing); &:dir(rtl) { - left: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + left: var(--spectrum-tooltip-pointer-corner-spacing); right: auto; } } @@ -220,7 +220,7 @@ .spectrum-Tooltip--end &, .spectrum-Tooltip--end-top &, .spectrum-Tooltip--end-bottom & { - inset-block-start: calc(50% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)))); + inset-block-start: calc(50% - (0.5 * var(--spectrum-tooltip-tip-square-size))); } /* tip is vertical and at edge */ @@ -242,7 +242,7 @@ .spectrum-Tooltip--end &, .spectrum-Tooltip--end-top &, .spectrum-Tooltip--end-bottom & { - inset-inline: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + inset-inline: auto calc(100% - (0.5 * var(--spectrum-tooltip-tip-square-size)) - var(--spectrum-tooltip-tip-antialiasing-inset) + var(--highcontrast-tooltip-border-width)); transform: rotate(45deg); } @@ -253,7 +253,7 @@ .spectrum-Tooltip--start &, .spectrum-Tooltip--start-top &, .spectrum-Tooltip--start-bottom & { - inset-inline-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + inset-inline-start: calc(100% - (0.5 * var(--spectrum-tooltip-tip-square-size)) - var(--spectrum-tooltip-tip-antialiasing-inset) + var(--highcontrast-tooltip-border-width)); transform: rotate(-135deg); } @@ -262,7 +262,7 @@ .spectrum-Tooltip--left-top &, .spectrum-Tooltip--start-top &, .spectrum-Tooltip--end-top & { - inset-block-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + inset-block-start: var(--spectrum-tooltip-pointer-corner-spacing); } /* tip is vertical at bottom ◁ ▷ */ @@ -270,7 +270,7 @@ .spectrum-Tooltip--left-bottom &, .spectrum-Tooltip--start-bottom &, .spectrum-Tooltip--end-bottom & { - inset-block-end: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + inset-block-end: var(--spectrum-tooltip-pointer-corner-spacing); } /* tip logical property - Start pointing tip reversed to point toward end ▷ for RTL. */ @@ -283,7 +283,7 @@ &:dir(rtl) { transform: rotate(-135deg); right: auto; - left: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + left: calc(100% - (0.5 * var(--spectrum-tooltip-tip-square-size)) - var(--spectrum-tooltip-tip-antialiasing-inset) + var(--highcontrast-tooltip-border-width)); } } @@ -297,7 +297,7 @@ &:dir(rtl) { transform: rotate(45deg); left: auto; - right: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + right: calc(100% - (0.5 * var(--spectrum-tooltip-tip-square-size)) - var(--spectrum-tooltip-tip-antialiasing-inset) + var(--highcontrast-tooltip-border-width)); } } } @@ -305,9 +305,9 @@ /****** Label ******/ .spectrum-Tooltip-label { /* Make sure line height is correct to prevent problems in Windows */ - line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); - margin-block-start: var(--mod-tooltip-spacing-block-start, var(--spectrum-tooltip-spacing-block-start)); - margin-block-end: var(--mod-tooltip-spacing-block-end, var(--spectrum-tooltip-spacing-block-end)); + line-height: var(--spectrum-tooltip-line-height); + margin-block-start: var(--spectrum-tooltip-spacing-block-start); + margin-block-end: var(--spectrum-tooltip-spacing-block-end); /* Allow overflow-wrap to work and prevent text overflow */ inline-size: 100%; @@ -321,11 +321,11 @@ .spectrum-Tooltip--top-right, .spectrum-Tooltip--top-start, .spectrum-Tooltip--top-end { - margin-block-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + margin-block-end: calc(var(--spectrum-tooltip-tip-block-size) + var(--spectrum-tooltip-margin)); /* tooltip animates upward ⬆ */ &.is-open { - transform: translateY(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); + transform: translateY(calc(-1 * var(--spectrum-tooltip-animation-distance))); } } @@ -335,11 +335,11 @@ .spectrum-Tooltip--bottom-right, .spectrum-Tooltip--bottom-start, .spectrum-Tooltip--bottom-end { - margin-block-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + margin-block-start: calc(var(--spectrum-tooltip-tip-block-size) + var(--spectrum-tooltip-margin)); /* Tooltip animates downward ⬇ */ &.is-open { - transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + transform: translateY(var(--spectrum-tooltip-animation-distance)); } } @@ -348,11 +348,11 @@ .spectrum-Tooltip--right-bottom, .spectrum-Tooltip--right-top { /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ - margin-left: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + margin-left: calc(var(--spectrum-tooltip-tip-block-size) + var(--spectrum-tooltip-margin)); /* Tooltip animates to right ⮕ */ &.is-open { - transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + transform: translateX(var(--spectrum-tooltip-animation-distance)); } } @@ -361,11 +361,11 @@ .spectrum-Tooltip--left-bottom, .spectrum-Tooltip--left-top { /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ - margin-right: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + margin-right: calc(var(--spectrum-tooltip-tip-block-size) + var(--spectrum-tooltip-margin)); /* Tooltip animates to left ⬅ */ &.is-open { - transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); + transform: translateX(calc(-1 * var(--spectrum-tooltip-animation-distance))); } } @@ -373,17 +373,17 @@ .spectrum-Tooltip--start, .spectrum-Tooltip--start-top, .spectrum-Tooltip--start-bottom { - margin-inline-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + margin-inline-end: calc(var(--spectrum-tooltip-tip-block-size) + var(--spectrum-tooltip-margin)); /* LTR read, tooltip animates towards left ⬅ */ &.is-open { - transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); + transform: translateX(calc(-1 * var(--spectrum-tooltip-animation-distance))); } /* RTL read, tooltip animates towards right ⮕ */ &:dir(rtl) { &.is-open { - transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + transform: translateX(var(--spectrum-tooltip-animation-distance)); } } } @@ -392,17 +392,17 @@ .spectrum-Tooltip--end, .spectrum-Tooltip--end-top, .spectrum-Tooltip--end-bottom { - margin-inline-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + margin-inline-start: calc(var(--spectrum-tooltip-tip-block-size) + var(--spectrum-tooltip-margin)); /* LTR read, tooltip animates towards right ⮕ */ &.is-open { - transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + transform: translateX(var(--spectrum-tooltip-animation-distance)); } /* RTL read, tooltip animates towards left ⬅ */ &:dir(rtl) { &.is-open { - transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); + transform: translateX(calc(-1 * var(--spectrum-tooltip-animation-distance))); } } } @@ -529,7 +529,7 @@ .spectrum-Tooltip--top-right, .spectrum-Tooltip--top-start, .spectrum-Tooltip--top-end { - transform: translate(-50%, calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1)); + transform: translate(-50%, calc(var(--spectrum-tooltip-animation-distance) * -1)); } } @@ -542,7 +542,7 @@ .spectrum-Tooltip--bottom-right, .spectrum-Tooltip--bottom-start, .spectrum-Tooltip--bottom-end { - transform: translate(-50%, var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + transform: translate(-50%, var(--spectrum-tooltip-animation-distance)); } } @@ -556,7 +556,7 @@ .spectrum-Tooltip--start, .spectrum-Tooltip--start-top, .spectrum-Tooltip--start-bottom { - transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%); + transform: translate(calc(var(--spectrum-tooltip-animation-distance) * -1), -50%); } } @@ -569,7 +569,7 @@ .spectrum-Tooltip--start, .spectrum-Tooltip--start-top, .spectrum-Tooltip--start-bottom { - transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%); + transform: translate(var(--spectrum-tooltip-animation-distance), -50%); } } } @@ -584,7 +584,7 @@ .spectrum-Tooltip--end, .spectrum-Tooltip--end-top, .spectrum-Tooltip--end-bottom { - transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%); + transform: translate(var(--spectrum-tooltip-animation-distance), -50%); } } @@ -597,7 +597,7 @@ .spectrum-Tooltip--end, .spectrum-Tooltip--end-top, .spectrum-Tooltip--end-bottom { - transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%); + transform: translate(calc(var(--spectrum-tooltip-animation-distance) * -1), -50%); } } } diff --git a/components/tray/dist/metadata.json b/components/tray/dist/metadata.json index db6c152c441..4c2f116dfad 100644 --- a/components/tray/dist/metadata.json +++ b/components/tray/dist/metadata.json @@ -6,22 +6,10 @@ ".spectrum-Tray-wrapper", ".spectrum-Tray.is-open" ], - "modifiers": [ - "--mod-tray-background-color", - "--mod-tray-bottom-to-content-area", - "--mod-tray-corner-radius", - "--mod-tray-corner-radius-portrait", - "--mod-tray-entry-animation-delay", - "--mod-tray-entry-animation-duration", - "--mod-tray-exit-animation-delay", - "--mod-tray-exit-animation-duration", - "--mod-tray-max-inline-size", - "--mod-tray-spacing-edge-to-tray-safe-zone", - "--mod-tray-top-to-content-area" - ], "component": [ "--spectrum-tray-background-color", "--spectrum-tray-corner-radius", + "--spectrum-tray-corner-radius-portrait", "--spectrum-tray-entry-animation-delay", "--spectrum-tray-entry-animation-duration", "--spectrum-tray-exit-animation-delay", @@ -34,8 +22,9 @@ "--spectrum-animation-duration-100", "--spectrum-animation-duration-500", "--spectrum-background-layer-2-color", - "--spectrum-corner-radius-100" + "--spectrum-corner-radius-100", + "--spectrum-modal-max-width" ], - "passthroughs": ["--mod-modal-max-width"], + "passthroughs": [], "high-contrast": ["--highcontrast-tray-background-color"] } diff --git a/components/tray/index.css b/components/tray/index.css index 4915050ab91..5137a0b177a 100644 --- a/components/tray/index.css +++ b/components/tray/index.css @@ -24,20 +24,20 @@ .spectrum-Tray { /* Maximum width for landscape */ - --spectrum-tray-max-inline-size: var(--mod-tray-max-inline-size, 375px); + --spectrum-tray-max-inline-size: 375px; /* https://spectrum.adobe.com/page/tray/#Maximum-height */ - --spectrum-tray-spacing-edge-to-tray-safe-zone: var(--mod-tray-spacing-edge-to-tray-safe-zone, 64px); + --spectrum-tray-spacing-edge-to-tray-safe-zone: 64px; - --spectrum-tray-entry-animation-delay: var(--mod-tray-entry-animation-delay, 160ms); - --spectrum-tray-entry-animation-duration: var(--mod-tray-entry-animation-duration, var(--spectrum-animation-duration-500)); - --spectrum-tray-exit-animation-delay: var(--mod-tray-exit-animation-delay, 0ms); - --spectrum-tray-exit-animation-duration: var(--mod-tray-exit-animation-duration, var(--spectrum-animation-duration-100)); + --spectrum-tray-entry-animation-delay: 160ms; + --spectrum-tray-entry-animation-duration: var(--spectrum-animation-duration-500); + --spectrum-tray-exit-animation-delay: 0ms; + --spectrum-tray-exit-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-tray-corner-radius: var(--mod-tray-corner-radius, var(--spectrum-corner-radius-100)); - --spectrum-tray-background-color: var(--highcontrast-tray-background-color, var(--mod-tray-background-color, var(--spectrum-background-layer-2-color))); + --spectrum-tray-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-tray-background-color: var(--highcontrast-tray-background-color, var(--spectrum-background-layer-2-color)); - --mod-modal-max-width: 100%; + --spectrum-modal-max-width: 100%; /* Default to full width when the viewport is in portrait orientation */ inline-size: 100%; @@ -45,12 +45,12 @@ max-block-size: calc(100vh - var(--spectrum-tray-spacing-edge-to-tray-safe-zone)); margin-block-start: var(--spectrum-tray-spacing-edge-to-tray-safe-zone); - padding-block-start: var(--mod-tray-top-to-content-area, var(--spectrum-tray-top-to-content-area)); - padding-block-end: var(--mod-tray-bottom-to-content-area, var(--spectrum-tray-top-to-content-area)); + padding-block-start: var(--spectrum-tray-top-to-content-area); + padding-block-end: var(--spectrum-tray-top-to-content-area); box-sizing: border-box; overflow: auto; outline: none; - border-radius: var(--mod-tray-corner-radius-portrait, 0) var(--mod-tray-corner-radius-portrait, 0) 0 0; + border-radius: var(--spectrum-tray-corner-radius-portrait, 0) var(--spectrum-tray-corner-radius-portrait, 0) 0 0; /* Start offset by the animation distance */ transform: translateY(100%); diff --git a/components/treeview/dist/metadata.json b/components/treeview/dist/metadata.json index b8515093336..a2b4dbf8ea4 100644 --- a/components/treeview/dist/metadata.json +++ b/components/treeview/dist/metadata.json @@ -50,46 +50,6 @@ ".spectrum-TreeView.spectrum-TreeView--thumbnail", ".spectrum-TreeView:dir(rtl)" ], - "modifiers": [ - "--mod-treeview-font-size", - "--mod-treeview-heading-bottom-to-text", - "--mod-treeview-heading-color", - "--mod-treeview-heading-font-weight", - "--mod-treeview-indicator-animation-duration", - "--mod-treeview-indicator-margin-inline-start", - "--mod-treeview-indicator-padding-block", - "--mod-treeview-indicator-padding-inline", - "--mod-treeview-item-background-color-focus", - "--mod-treeview-item-background-color-hover", - "--mod-treeview-item-background-color-quiet-selected", - "--mod-treeview-item-background-color-selected", - "--mod-treeview-item-border-color-focus", - "--mod-treeview-item-border-color-selected", - "--mod-treeview-item-border-color-selected-quiet", - "--mod-treeview-item-border-radius", - "--mod-treeview-item-border-radius-detached", - "--mod-treeview-item-border-size", - "--mod-treeview-item-border-size-selected", - "--mod-treeview-item-icon-color", - "--mod-treeview-item-icon-color-disabled", - "--mod-treeview-item-icon-color-focus", - "--mod-treeview-item-icon-color-hover", - "--mod-treeview-item-icon-color-selected", - "--mod-treeview-item-icon-gap", - "--mod-treeview-item-indentation", - "--mod-treeview-item-min-block-size", - "--mod-treeview-item-min-block-size-thumbnail", - "--mod-treeview-item-padding-inline-end", - "--mod-treeview-item-padding-inline-start", - "--mod-treeview-item-text-color", - "--mod-treeview-item-text-color-disabled", - "--mod-treeview-item-text-color-focus", - "--mod-treeview-item-text-color-hover", - "--mod-treeview-item-text-color-selected", - "--mod-treeview-line-height", - "--mod-treeview-margin-block", - "--mod-treeview-section-spacing" - ], "component": [ "--spectrum-treeview-font-size", "--spectrum-treeview-heading-bottom-to-text", diff --git a/components/treeview/index.css b/components/treeview/index.css index 4e203633841..eec3f62058e 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -12,136 +12,136 @@ */ .spectrum-TreeView { - --spectrum-treeview-item-border-size: var(--mod-treeview-item-border-size, var(--spectrum-border-width-200)); - --spectrum-treeview-item-border-size-selected: var(--mod-treeview-item-border-size-selected, 1px); - --spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius, 0px); + --spectrum-treeview-item-border-size: var(--spectrum-border-width-200); + --spectrum-treeview-item-border-size-selected: 1px; + --spectrum-treeview-item-border-radius: 0px; - --spectrum-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-blue-800))); - --spectrum-treeview-item-border-color-focus: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-blue-700))); + --spectrum-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--spectrum-blue-800)); + --spectrum-treeview-item-border-color-focus: var(--highcontrast-treeview-item-border-color-focus, var(--spectrum-blue-700)); - --spectrum-treeview-item-border-color-quiet-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent)); + --spectrum-treeview-item-border-color-quiet-selected: var(--highcontrast-treeview-item-border-color-selected, transparent); --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); - --spectrum-treeview-item-icon-gap: var(--mod-treeview-item-icon-gap, var(--spectrum-text-to-visual-75)); - --spectrum-treeview-item-icon-color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-gray-700))); - --spectrum-treeview-item-icon-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-gray-900))); - --spectrum-treeview-item-icon-color-focus: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-gray-900))); - --spectrum-treeview-item-icon-color-selected: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-gray-900))); - --spectrum-treeview-item-icon-color-disabled: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color))); + --spectrum-treeview-item-icon-gap: var(--spectrum-text-to-visual-75); + --spectrum-treeview-item-icon-color: var(--highcontrast-treeview-item-icon-color, var(--spectrum-gray-700)); + --spectrum-treeview-item-icon-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--spectrum-gray-900)); + --spectrum-treeview-item-icon-color-focus: var(--highcontrast-treeview-item-icon-color-focus, var(--spectrum-gray-900)); + --spectrum-treeview-item-icon-color-selected: var(--highcontrast-treeview-item-icon-color-selected, var(--spectrum-gray-900)); + --spectrum-treeview-item-icon-color-disabled: var(--highcontrast-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color)); - --spectrum-treeview-item-text-color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-neutral-content-color-default))); - --spectrum-treeview-item-text-color-selected: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-gray-900))); - --spectrum-treeview-item-text-color-disabled: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-gray-500))); - --spectrum-treeview-item-text-color-focus: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-gray-900))); - --spectrum-treeview-item-text-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-gray-900))); + --spectrum-treeview-item-text-color: var(--highcontrast-treeview-item-text-color, var(--spectrum-neutral-content-color-default)); + --spectrum-treeview-item-text-color-selected: var(--highcontrast-treeview-item-text-color-selected, var(--spectrum-gray-900)); + --spectrum-treeview-item-text-color-disabled: var(--highcontrast-treeview-item-text-color-disabled, var(--spectrum-gray-500)); + --spectrum-treeview-item-text-color-focus: var(--highcontrast-treeview-item-text-color-focus, var(--spectrum-gray-900)); + --spectrum-treeview-item-text-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--spectrum-gray-900)); - --spectrum-treeview-indicator-animation-duration: var(--mod-treeview-indicator-animation-duration, var(--spectrum-animation-duration-100)); + --spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-sized-min-block-size)); + --spectrum-treeview-item-min-block-size: var(--spectrum-treeview-item-sized-min-block-size); - --spectrum-treeview-font-size: var(--mod-treeview-font-size, var(--spectrum-font-size-100)); + --spectrum-treeview-font-size: var(--spectrum-font-size-100); - --spectrum-treeview-item-sized-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-100)); + --spectrum-treeview-item-sized-min-block-size: var(--spectrum-component-height-100); --spectrum-treeview-item-sized-indentation: var(--spectrum-treeview-item-indentation-medium); - --spectrum-treeview-heading-bottom-to-text: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-component-edge-to-text-100)); + --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-treeview-item-padding-inline-start: var(--mod-treeview-item-padding-inline-start, var(--spectrum-component-height-100)); - --spectrum-treeview-item-padding-inline-end: var(--mod-treeview-item-padding-inline-end, var(--spectrum-component-edge-to-text-100)); - --spectrum-treeview-indicator-margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, calc(-1 * var(--spectrum-component-height-100))); + --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-100); + --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-100); + --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-100)); --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium); --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0); } .spectrum-TreeView--sizeS { - --spectrum-treeview-font-size: var(--mod-treeview-font-size, var(--spectrum-font-size-75)); + --spectrum-treeview-font-size: var(--spectrum-font-size-75); - --spectrum-treeview-item-sized-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-75)); + --spectrum-treeview-item-sized-min-block-size: var(--spectrum-component-height-75); --spectrum-treeview-item-sized-indentation: var(--spectrum-treeview-item-indentation-small); - --spectrum-treeview-heading-bottom-to-text: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-component-edge-to-text-75)); + --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-treeview-item-padding-inline-start: var(--mod-treeview-item-padding-inline-start, var(--spectrum-component-height-75)); - --spectrum-treeview-item-padding-inline-end: var(--mod-treeview-item-padding-inline-end, var(--spectrum-component-edge-to-text-75)); - --spectrum-treeview-indicator-margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, calc(-1 * var(--spectrum-component-height-75))); + --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-75); + --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-75); + --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-75)); --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small); --spectrum-treeview-item-min-block-size-thumbnail-offset: 6px; } .spectrum-TreeView--sizeL { - --spectrum-treeview-font-size: var(--mod-treeview-font-size, var(--spectrum-font-size-200)); + --spectrum-treeview-font-size: var(--spectrum-font-size-200); --spectrum-treeview-item-sized-indentation: var(--spectrum-treeview-item-indentation-large); - --spectrum-treeview-item-sized-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-200)); - --spectrum-treeview-heading-bottom-to-text: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-component-edge-to-text-200)); + --spectrum-treeview-item-sized-min-block-size: var(--spectrum-component-height-200); + --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-treeview-item-padding-inline-start: var(--mod-treeview-item-padding-inline-start, var(--spectrum-component-height-200)); - --spectrum-treeview-item-padding-inline-end: var(--mod-treeview-item-padding-inline-end, var(--spectrum-component-edge-to-text-200)); - --spectrum-treeview-indicator-margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, calc(-1 * var(--spectrum-component-height-200))); + --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-200); + --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-200); + --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-200)); --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large); --spectrum-treeview-item-min-block-size-thumbnail-offset: 0; } .spectrum-TreeView--sizeXL { - --spectrum-treeview-font-size: var(--mod-treeview-font-size, var(--spectrum-font-size-300)); + --spectrum-treeview-font-size: var(--spectrum-font-size-300); --spectrum-treeview-item-sized-indentation: var(--spectrum-treeview-item-indentation-extra-large); - --spectrum-treeview-item-sized-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-300)); - --spectrum-treeview-heading-bottom-to-text: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-component-edge-to-text-300)); + --spectrum-treeview-item-sized-min-block-size: var(--spectrum-component-height-300); + --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-treeview-item-padding-inline-start: var(--mod-treeview-item-padding-inline-start, var(--spectrum-component-height-300)); - --spectrum-treeview-item-padding-inline-end: var(--mod-treeview-item-padding-inline-end, var(--spectrum-component-edge-to-text-300)); - --spectrum-treeview-indicator-margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, calc(-1 * var(--spectrum-component-height-300))); + --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-300); + --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-300); + --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-300)); --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large); --spectrum-treeview-item-min-block-size-thumbnail-offset: 0; } .spectrum-TreeView { - --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))); + --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-sized-indentation); + --spectrum-treeview-section-spacing: var(--spectrum-treeview-item-indentation); + --spectrum-treeview-heading-color: var(--highcontrast-treeview-heading-color, var(--spectrum-heading-color)); - --spectrum-treeview-item-border-size: var(--mod-treeview-item-border-size, var(--spectrum-border-width-200)); - --spectrum-treeview-item-border-size-selected: var(--mod-treeview-item-border-size-selected, 1px); - --spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius, 0px); + --spectrum-treeview-item-border-size: var(--spectrum-border-width-200); + --spectrum-treeview-item-border-size-selected: 1px; + --spectrum-treeview-item-border-radius: 0px; - --spectrum-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-blue-800))); - --spectrum-treeview-item-border-color-focus: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-blue-700))); + --spectrum-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--spectrum-blue-800)); + --spectrum-treeview-item-border-color-focus: var(--highcontrast-treeview-item-border-color-focus, var(--spectrum-blue-700)); - --spectrum-treeview-item-border-color-quiet-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent)); + --spectrum-treeview-item-border-color-quiet-selected: var(--highcontrast-treeview-item-border-color-selected, transparent); - --spectrum-treeview-item-icon-gap: var(--mod-treeview-item-icon-gap, var(--spectrum-text-to-visual-75)); - --spectrum-treeview-item-icon-color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-gray-700))); - --spectrum-treeview-item-icon-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-gray-900))); - --spectrum-treeview-item-icon-color-focus: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-gray-900))); - --spectrum-treeview-item-icon-color-selected: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-gray-900))); - --spectrum-treeview-item-icon-color-disabled: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color))); + --spectrum-treeview-item-icon-gap: var(--spectrum-text-to-visual-75); + --spectrum-treeview-item-icon-color: var(--highcontrast-treeview-item-icon-color, var(--spectrum-gray-700)); + --spectrum-treeview-item-icon-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--spectrum-gray-900)); + --spectrum-treeview-item-icon-color-focus: var(--highcontrast-treeview-item-icon-color-focus, var(--spectrum-gray-900)); + --spectrum-treeview-item-icon-color-selected: var(--highcontrast-treeview-item-icon-color-selected, var(--spectrum-gray-900)); + --spectrum-treeview-item-icon-color-disabled: var(--highcontrast-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color)); - --spectrum-treeview-item-text-color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-neutral-content-color-default))); - --spectrum-treeview-item-text-color-selected: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-gray-900))); - --spectrum-treeview-item-text-color-disabled: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-gray-500))); - --spectrum-treeview-item-text-color-focus: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-gray-900))); - --spectrum-treeview-item-text-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-gray-900))); + --spectrum-treeview-item-text-color: var(--highcontrast-treeview-item-text-color, var(--spectrum-neutral-content-color-default)); + --spectrum-treeview-item-text-color-selected: var(--highcontrast-treeview-item-text-color-selected, var(--spectrum-gray-900)); + --spectrum-treeview-item-text-color-disabled: var(--highcontrast-treeview-item-text-color-disabled, var(--spectrum-gray-500)); + --spectrum-treeview-item-text-color-focus: var(--highcontrast-treeview-item-text-color-focus, var(--spectrum-gray-900)); + --spectrum-treeview-item-text-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--spectrum-gray-900)); - --spectrum-treeview-indicator-animation-duration: var(--mod-treeview-indicator-animation-duration, var(--spectrum-animation-duration-100)); + --spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-sized-min-block-size)); + --spectrum-treeview-item-min-block-size: var(--spectrum-treeview-item-sized-min-block-size); &.spectrum-TreeView--quiet { - --mod-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-quiet-selected, var(--spectrum-treeview-item-background-color-quiet-selected))); - --mod-treeview-item-border-color-selected: var(--spectrum-treeview-item-border-color-quiet-selected); + --spectrum-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-quiet-selected)); + --spectrum-treeview-item-border-color-selected: var(--spectrum-treeview-item-border-color-quiet-selected); } &.spectrum-TreeView--thumbnail { - --spectrum-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size-thumbnail, calc(var(--spectrum-treeview-item-sized-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset))); + --spectrum-treeview-item-min-block-size: calc(var(--spectrum-treeview-item-sized-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset)); } &.spectrum-TreeView--detached { - --mod-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100)); + --spectrum-treeview-item-border-radius: var(--spectrum-corner-radius-100); } display: block; @@ -150,8 +150,8 @@ list-style: none; outline: none; user-select: none; - line-height: var(--mod-treeview-line-height, var(--spectrum-line-height-200)); - margin-block: var(--mod-treeview-margin-block, 1em); + line-height: var(--spectrum-line-height-200); + margin-block: 1em; font-size: var(--spectrum-treeview-font-size); &:dir(rtl) { @@ -191,7 +191,7 @@ color: var(--spectrum-treeview-item-text-color-selected); &::before { - background-color: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected))); + background-color: var(--highcontrast-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected)); } & .spectrum-TreeView-itemIcon { @@ -271,7 +271,7 @@ color: var(--spectrum-treeview-item-text-color-focus); &::before { - background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-focus))); + background-color: var(--highcontrast-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-focus)); border-width: var(--spectrum-treeview-item-border-size); border-color: var(--spectrum-treeview-item-border-color-focus); } @@ -285,7 +285,7 @@ color: var(--spectrum-treeview-item-text-color-hover); &::before { - background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover))); + background-color: var(--highcontrast-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-hover)); } & .spectrum-TreeView-itemIcon { @@ -311,8 +311,8 @@ /* Make sure the hover background pseudo element doesn't block clicks on the chevron. */ z-index: 1; - padding-inline: var(--mod-treeview-indicator-padding-inline, var(--spectrum-treeview-indicator-padding)); - padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding)); + padding-inline: var(--spectrum-treeview-indicator-padding); + padding-block: var(--spectrum-treeview-indicator-padding); margin-inline-start: var(--spectrum-treeview-indicator-margin-inline-start); transition: transform ease var(--spectrum-treeview-indicator-animation-duration); @@ -333,7 +333,7 @@ .spectrum-TreeView-heading { padding-block-end: var(--spectrum-treeview-heading-bottom-to-text); - font-weight: var(--mod-treeview-heading-font-weight, var(--spectrum-bold-font-weight)); + font-weight: var(--spectrum-bold-font-weight); color: var(--spectrum-treeview-heading-color); } diff --git a/components/typography/dist/metadata.json b/components/typography/dist/metadata.json index 3ef566f741d..28e1f6ad3d6 100644 --- a/components/typography/dist/metadata.json +++ b/components/typography/dist/metadata.json @@ -298,208 +298,6 @@ ".spectrum-Typography:lang(ar)", ".spectrum-Typography:lang(he)" ], - "modifiers": [ - "--mod-body-cjk-emphasized-font-style", - "--mod-body-cjk-emphasized-font-weight", - "--mod-body-cjk-font-family", - "--mod-body-cjk-font-style", - "--mod-body-cjk-font-weight", - "--mod-body-cjk-letter-spacing", - "--mod-body-cjk-line-height", - "--mod-body-cjk-strong-emphasized-font-style", - "--mod-body-cjk-strong-emphasized-font-weight", - "--mod-body-cjk-strong-font-style", - "--mod-body-cjk-strong-font-weight", - "--mod-body-font-color", - "--mod-body-font-size", - "--mod-body-line-height", - "--mod-body-margin", - "--mod-body-margin-end", - "--mod-body-margin-start", - "--mod-body-sans-serif-emphasized-font-style", - "--mod-body-sans-serif-emphasized-font-weight", - "--mod-body-sans-serif-font-family", - "--mod-body-sans-serif-font-style", - "--mod-body-sans-serif-font-weight", - "--mod-body-sans-serif-strong-emphasized-font-style", - "--mod-body-sans-serif-strong-emphasized-font-weight", - "--mod-body-sans-serif-strong-font-style", - "--mod-body-sans-serif-strong-font-weight", - "--mod-body-serif-emphasized-font-style", - "--mod-body-serif-emphasized-font-weight", - "--mod-body-serif-font-family", - "--mod-body-serif-font-style", - "--mod-body-serif-font-weight", - "--mod-body-serif-strong-emphasized-font-style", - "--mod-body-serif-strong-emphasized-font-weight", - "--mod-body-serif-strong-font-style", - "--mod-body-serif-strong-font-weight", - "--mod-code-cjk-emphasized-font-style", - "--mod-code-cjk-emphasized-font-weight", - "--mod-code-cjk-font-family", - "--mod-code-cjk-font-style", - "--mod-code-cjk-font-weight", - "--mod-code-cjk-letter-spacing", - "--mod-code-cjk-line-height", - "--mod-code-cjk-strong-emphasized-font-style", - "--mod-code-cjk-strong-emphasized-font-weight", - "--mod-code-cjk-strong-font-style", - "--mod-code-cjk-strong-font-weight", - "--mod-code-emphasized-font-style", - "--mod-code-emphasized-font-weight", - "--mod-code-font-color", - "--mod-code-font-family", - "--mod-code-font-size", - "--mod-code-font-style", - "--mod-code-font-weight", - "--mod-code-line-height", - "--mod-code-margin-end", - "--mod-code-margin-start", - "--mod-code-strong-emphasized-font-style", - "--mod-code-strong-emphasized-font-weight", - "--mod-code-strong-font-style", - "--mod-code-strong-font-weight", - "--mod-detail-cjk-emphasized-font-style", - "--mod-detail-cjk-emphasized-font-weight", - "--mod-detail-cjk-font-family", - "--mod-detail-cjk-font-style", - "--mod-detail-cjk-font-weight", - "--mod-detail-cjk-light-emphasized-font-style", - "--mod-detail-cjk-light-emphasized-font-weight", - "--mod-detail-cjk-light-font-style", - "--mod-detail-cjk-light-font-weight", - "--mod-detail-cjk-light-strong-emphasized-font-style", - "--mod-detail-cjk-light-strong-emphasized-font-weight", - "--mod-detail-cjk-light-strong-font-style", - "--mod-detail-cjk-light-strong-font-weight", - "--mod-detail-cjk-line-height", - "--mod-detail-cjk-strong-emphasized-font-style", - "--mod-detail-cjk-strong-emphasized-font-weight", - "--mod-detail-cjk-strong-font-style", - "--mod-detail-cjk-strong-font-weight", - "--mod-detail-font-color", - "--mod-detail-font-size", - "--mod-detail-letter-spacing", - "--mod-detail-line-height", - "--mod-detail-margin-end", - "--mod-detail-margin-start", - "--mod-detail-sans-serif-emphasized-font-style", - "--mod-detail-sans-serif-emphasized-font-weight", - "--mod-detail-sans-serif-font-family", - "--mod-detail-sans-serif-font-style", - "--mod-detail-sans-serif-font-weight", - "--mod-detail-sans-serif-light-emphasized-font-style", - "--mod-detail-sans-serif-light-emphasized-font-weight", - "--mod-detail-sans-serif-light-font-style", - "--mod-detail-sans-serif-light-strong-emphasized-font-style", - "--mod-detail-sans-serif-light-strong-emphasized-font-weight", - "--mod-detail-sans-serif-light-strong-font-style", - "--mod-detail-sans-serif-light-strong-font-weight", - "--mod-detail-sans-serif-strong-emphasized-font-style", - "--mod-detail-sans-serif-strong-emphasized-font-weight", - "--mod-detail-sans-serif-strong-font-style", - "--mod-detail-sans-serif-strong-font-weight", - "--mod-detail-serif-emphasized-font-style", - "--mod-detail-serif-emphasized-font-weight", - "--mod-detail-serif-font-family", - "--mod-detail-serif-font-style", - "--mod-detail-serif-font-weight", - "--mod-detail-serif-light-emphasized-font-style", - "--mod-detail-serif-light-emphasized-font-weight", - "--mod-detail-serif-light-font-style", - "--mod-detail-serif-light-font-weight", - "--mod-detail-serif-light-strong-emphasized-font-style", - "--mod-detail-serif-light-strong-emphasized-font-weight", - "--mod-detail-serif-light-strong-font-style", - "--mod-detail-serif-light-strong-font-weight", - "--mod-detail-serif-strong-emphasized-font-style", - "--mod-detail-serif-strong-emphasized-font-weight", - "--mod-detail-serif-strong-font-style", - "--mod-detail-serif-strong-font-weight", - "--mod-heading-cjk-emphasized-font-style", - "--mod-heading-cjk-emphasized-font-weight", - "--mod-heading-cjk-font-family", - "--mod-heading-cjk-font-size", - "--mod-heading-cjk-font-style", - "--mod-heading-cjk-font-weight", - "--mod-heading-cjk-heavy-emphasized-font-style", - "--mod-heading-cjk-heavy-emphasized-font-weight", - "--mod-heading-cjk-heavy-font-style", - "--mod-heading-cjk-heavy-font-weight", - "--mod-heading-cjk-heavy-strong-emphasized-font-style", - "--mod-heading-cjk-heavy-strong-emphasized-font-weight", - "--mod-heading-cjk-heavy-strong-font-style", - "--mod-heading-cjk-heavy-strong-font-weight", - "--mod-heading-cjk-letter-spacing", - "--mod-heading-cjk-light-emphasized-font-style", - "--mod-heading-cjk-light-emphasized-font-weight", - "--mod-heading-cjk-light-font-style", - "--mod-heading-cjk-light-font-weight", - "--mod-heading-cjk-light-strong-emphasized-font-style", - "--mod-heading-cjk-light-strong-emphasized-font-weight", - "--mod-heading-cjk-light-strong-font-style", - "--mod-heading-cjk-light-strong-font-weight", - "--mod-heading-cjk-line-height", - "--mod-heading-cjk-strong-emphasized-font-style", - "--mod-heading-cjk-strong-emphasized-font-weight", - "--mod-heading-cjk-strong-font-style", - "--mod-heading-cjk-strong-font-weight", - "--mod-heading-font-color", - "--mod-heading-font-size", - "--mod-heading-line-height", - "--mod-heading-margin-end", - "--mod-heading-margin-start", - "--mod-heading-sans-serif-emphasized-font-style", - "--mod-heading-sans-serif-emphasized-font-weight", - "--mod-heading-sans-serif-font-family", - "--mod-heading-sans-serif-font-style", - "--mod-heading-sans-serif-font-weight", - "--mod-heading-sans-serif-heavy-emphasized-font-style", - "--mod-heading-sans-serif-heavy-emphasized-font-weight", - "--mod-heading-sans-serif-heavy-font-style", - "--mod-heading-sans-serif-heavy-font-weight", - "--mod-heading-sans-serif-heavy-strong-emphasized-font-style", - "--mod-heading-sans-serif-heavy-strong-emphasized-font-weight", - "--mod-heading-sans-serif-heavy-strong-font-style", - "--mod-heading-sans-serif-heavy-strong-font-weight", - "--mod-heading-sans-serif-light-emphasized-font-style", - "--mod-heading-sans-serif-light-emphasized-font-weight", - "--mod-heading-sans-serif-light-font-style", - "--mod-heading-sans-serif-light-font-weight", - "--mod-heading-sans-serif-light-strong-emphasized-font-style", - "--mod-heading-sans-serif-light-strong-emphasized-font-weight", - "--mod-heading-sans-serif-light-strong-font-style", - "--mod-heading-sans-serif-light-strong-font-weight", - "--mod-heading-sans-serif-strong-emphasized-font-style", - "--mod-heading-sans-serif-strong-emphasized-font-weight", - "--mod-heading-sans-serif-strong-font-style", - "--mod-heading-sans-serif-strong-font-weight", - "--mod-heading-serif-emphasized-font-style", - "--mod-heading-serif-emphasized-font-weight", - "--mod-heading-serif-font-family", - "--mod-heading-serif-font-style", - "--mod-heading-serif-font-weight", - "--mod-heading-serif-heavy-emphasized-font-style", - "--mod-heading-serif-heavy-emphasized-font-weight", - "--mod-heading-serif-heavy-font-style", - "--mod-heading-serif-heavy-font-weight", - "--mod-heading-serif-heavy-strong-emphasized-font-style", - "--mod-heading-serif-heavy-strong-emphasized-font-weight", - "--mod-heading-serif-heavy-strong-font-style", - "--mod-heading-serif-heavy-strong-font-weight", - "--mod-heading-serif-light-emphasized-font-style", - "--mod-heading-serif-light-emphasized-font-weight", - "--mod-heading-serif-light-font-style", - "--mod-heading-serif-light-font-weight", - "--mod-heading-serif-light-strong-emphasized-font-style", - "--mod-heading-serif-light-strong-emphasized-font-weight", - "--mod-heading-serif-light-strong-font-style", - "--mod-heading-serif-light-strong-font-weight", - "--mod-heading-serif-strong-emphasized-font-style", - "--mod-heading-serif-strong-emphasized-font-weight", - "--mod-heading-serif-strong-font-style", - "--mod-heading-serif-strong-font-weight" - ], "component": [], "global": [ "--spectrum-body-cjk-emphasized-font-style", @@ -519,6 +317,7 @@ "--spectrum-body-line-height", "--spectrum-body-margin-end", "--spectrum-body-margin-multiplier", + "--spectrum-body-margin-start", "--spectrum-body-sans-serif-emphasized-font-style", "--spectrum-body-sans-serif-emphasized-font-weight", "--spectrum-body-sans-serif-font-family", @@ -567,6 +366,8 @@ "--spectrum-code-font-style", "--spectrum-code-font-weight", "--spectrum-code-line-height", + "--spectrum-code-margin-end", + "--spectrum-code-margin-start", "--spectrum-code-size-l", "--spectrum-code-size-m", "--spectrum-code-size-s", diff --git a/components/typography/index.css b/components/typography/index.css index 25ffeaa8a2f..518dceb7e3e 100644 --- a/components/typography/index.css +++ b/components/typography/index.css @@ -27,17 +27,17 @@ /* Add margin when inside a Typography component */ .spectrum-Heading { - --spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier)); - --spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier)); + --spectrum-heading-margin-start: calc(var(--spectrum-heading-font-size) * var(--spectrum-heading-margin-top-multiplier)); + --spectrum-heading-margin-end: calc(var(--spectrum-heading-font-size) * var(--spectrum-heading-margin-bottom-multiplier)); } .spectrum-Body { - --spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier)); + --spectrum-body-margin-end: calc(var(--spectrum-body-font-size) * var(--spectrum-body-margin-multiplier)); } .spectrum-Detail { - --spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier)); - --spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier)); + --spectrum-detail-margin-start: calc(var(--spectrum-detail-font-size) * var(--spectrum-detail-margin-top-multiplier)); + --spectrum-detail-margin-end: calc(var(--spectrum-detail-font-size) * var(--spectrum-detail-margin-bottom-multiplier)); } } @@ -111,244 +111,244 @@ --spectrum-heading-font-color: var(--spectrum-heading-color); - --spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier)); - --spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier)); + --spectrum-heading-margin-start: calc(var(--spectrum-heading-font-size) * var(--spectrum-heading-margin-top-multiplier)); + --spectrum-heading-margin-end: calc(var(--spectrum-heading-font-size) * var(--spectrum-heading-margin-bottom-multiplier)); - font-family: var(--mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family)); - font-style: var(--mod-heading-sans-serif-font-style, var(--spectrum-heading-sans-serif-font-style)); - font-weight: var(--mod-heading-sans-serif-font-weight, var(--spectrum-heading-sans-serif-font-weight)); - font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); - color: var(--highcontrast-heading-font-color, var(--mod-heading-font-color, var(--spectrum-heading-font-color))); - line-height: var(--mod-heading-line-height, var(--spectrum-heading-line-height)); - margin-block-start: var(--mod-heading-margin-start, var(--spectrum-heading-margin-start, 0)); - margin-block-end: var(--mod-heading-margin-end, var(--spectrum-heading-margin-end, 0)); + font-family: var(--spectrum-heading-sans-serif-font-family); + font-style: var(--spectrum-heading-sans-serif-font-style); + font-weight: var(--spectrum-heading-sans-serif-font-weight); + font-size: var(--spectrum-heading-font-size); + color: var(--highcontrast-heading-font-color, var(--spectrum-heading-font-color)); + line-height: var(--spectrum-heading-line-height); + margin-block-start: var(--spectrum-heading-margin-start, 0); + margin-block-end: var(--spectrum-heading-margin-end, 0); strong, .spectrum-Heading-strong { - font-style: var(--mod-heading-sans-serif-strong-font-style, var(--spectrum-heading-sans-serif-strong-font-style)); - font-weight: var(--mod-heading-sans-serif-strong-font-weight, var(--spectrum-heading-sans-serif-strong-font-weight)); + font-style: var(--spectrum-heading-sans-serif-strong-font-style); + font-weight: var(--spectrum-heading-sans-serif-strong-font-weight); } em, .spectrum-Heading-emphasized { - font-style: var(--mod-heading-sans-serif-emphasized-font-style, var(--spectrum-heading-sans-serif-emphasized-font-style)); - font-weight: var(--mod-heading-sans-serif-emphasized-font-weight, var(--spectrum-heading-sans-serif-emphasized-font-weight)); + font-style: var(--spectrum-heading-sans-serif-emphasized-font-style); + font-weight: var(--spectrum-heading-sans-serif-emphasized-font-weight); } .spectrum-Heading-strong.spectrum-Heading-emphasized, strong em, em strong { - font-style: var(--mod-heading-sans-serif-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-strong-emphasized-font-style)); - font-weight: var(--mod-heading-sans-serif-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-strong-emphasized-font-weight)); + font-style: var(--spectrum-heading-sans-serif-strong-emphasized-font-style); + font-weight: var(--spectrum-heading-sans-serif-strong-emphasized-font-weight); } &:lang(zh), &:lang(ja), &:lang(ko) { - font-family: var(--mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family)); - font-style: var(--mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style)); - font-weight: var(--mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight)); - font-size: var(--mod-heading-cjk-font-size, var(--spectrum-heading-cjk-font-size)); + font-family: var(--spectrum-heading-cjk-font-family); + font-style: var(--spectrum-heading-cjk-font-style); + font-weight: var(--spectrum-heading-cjk-font-weight); + font-size: var(--spectrum-heading-cjk-font-size); - line-height: var(--mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height)); - letter-spacing: var(--mod-heading-cjk-letter-spacing, var(--spectrum-heading-cjk-letter-spacing)); + line-height: var(--spectrum-heading-cjk-line-height); + letter-spacing: var(--spectrum-heading-cjk-letter-spacing); em, .spectrum-Heading-emphasized { - font-style: var(--mod-heading-cjk-emphasized-font-style, var(--spectrum-heading-cjk-emphasized-font-style)); - font-weight: var(--mod-heading-cjk-emphasized-font-weight, var(--spectrum-heading-cjk-emphasized-font-weight)); + font-style: var(--spectrum-heading-cjk-emphasized-font-style); + font-weight: var(--spectrum-heading-cjk-emphasized-font-weight); } strong, .spectrum-Heading-strong { - font-style: var(--mod-heading-cjk-strong-font-style, var(--spectrum-heading-cjk-strong-font-style)); - font-weight: var(--mod-heading-cjk-strong-font-weight, var(--spectrum-heading-cjk-strong-font-weight)); + font-style: var(--spectrum-heading-cjk-strong-font-style); + font-weight: var(--spectrum-heading-cjk-strong-font-weight); } .spectrum-Heading-strong.spectrum-Heading-emphasized, strong em, em strong { - font-style: var(--mod-heading-cjk-strong-emphasized-font-style, var(--spectrum-heading-cjk-strong-emphasized-font-style)); - font-weight: var(--mod-heading-cjk-strong-emphasized-font-weight, var(--spectrum-heading-cjk-strong-emphasized-font-weight)); + font-style: var(--spectrum-heading-cjk-strong-emphasized-font-style); + font-weight: var(--spectrum-heading-cjk-strong-emphasized-font-weight); } } } /* Heading - Heavy */ .spectrum-Heading--heavy { - font-style: var(--mod-heading-sans-serif-heavy-font-style, var(--spectrum-heading-sans-serif-heavy-font-style)); - font-weight: var(--mod-heading-sans-serif-heavy-font-weight, var(--spectrum-heading-sans-serif-heavy-font-weight)); + font-style: var(--spectrum-heading-sans-serif-heavy-font-style); + font-weight: var(--spectrum-heading-sans-serif-heavy-font-weight); strong, .spectrum-Heading-strong { - font-style: var(--mod-heading-sans-serif-heavy-strong-font-style, var(--spectrum-heading-sans-serif-heavy-strong-font-style)); - font-weight: var(--mod-heading-sans-serif-heavy-strong-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-font-weight)); + font-style: var(--spectrum-heading-sans-serif-heavy-strong-font-style); + font-weight: var(--spectrum-heading-sans-serif-heavy-strong-font-weight); } em, .spectrum-Heading-emphasized { - font-style: var(--mod-heading-sans-serif-heavy-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-emphasized-font-style)); - font-weight: var(--mod-heading-sans-serif-heavy-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight)); + font-style: var(--spectrum-heading-sans-serif-heavy-emphasized-font-style); + font-weight: var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight); } .spectrum-Heading-strong.spectrum-Heading-emphasized, strong em, em strong { - font-style: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style)); - font-weight: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight)); + font-style: var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style); + font-weight: var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight); } &:lang(zh), &:lang(ja), &:lang(ko) { - font-style: var(--mod-heading-cjk-heavy-font-style, var(--spectrum-heading-cjk-heavy-font-style)); - font-weight: var(--mod-heading-cjk-heavy-font-weight, var(--spectrum-heading-cjk-heavy-font-weight)); + font-style: var(--spectrum-heading-cjk-heavy-font-style); + font-weight: var(--spectrum-heading-cjk-heavy-font-weight); em, .spectrum-Heading-emphasized { - font-style: var(--mod-heading-cjk-heavy-emphasized-font-style, var(--spectrum-heading-cjk-heavy-emphasized-font-style)); - font-weight: var(--mod-heading-cjk-heavy-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-emphasized-font-weight)); + font-style: var(--spectrum-heading-cjk-heavy-emphasized-font-style); + font-weight: var(--spectrum-heading-cjk-heavy-emphasized-font-weight); } strong, .spectrum-Heading-strong { - font-style: var(--mod-heading-cjk-heavy-strong-font-style, var(--spectrum-heading-cjk-heavy-strong-font-style)); - font-weight: var(--mod-heading-cjk-heavy-strong-font-weight, var(--spectrum-heading-cjk-heavy-strong-font-weight)); + font-style: var(--spectrum-heading-cjk-heavy-strong-font-style); + font-weight: var(--spectrum-heading-cjk-heavy-strong-font-weight); } .spectrum-Heading-strong.spectrum-Heading-emphasized, strong em, em strong { - font-style: var(--mod-heading-cjk-heavy-strong-emphasized-font-style, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style)); - font-weight: var(--mod-heading-cjk-heavy-strong-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight)); + font-style: var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style); + font-weight: var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight); } } } /* Heading - Light */ .spectrum-Heading--light { - font-style: var(--mod-heading-sans-serif-light-font-style, var(--spectrum-heading-sans-serif-light-font-style)); - font-weight: var(--mod-heading-sans-serif-light-font-weight, var(--spectrum-heading-sans-serif-light-font-weight)); + font-style: var(--spectrum-heading-sans-serif-light-font-style); + font-weight: var(--spectrum-heading-sans-serif-light-font-weight); em, .spectrum-Heading-emphasized { - font-style: var(--mod-heading-sans-serif-light-emphasized-font-style, var(--spectrum-heading-sans-serif-light-emphasized-font-style)); - font-weight: var(--mod-heading-sans-serif-light-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-emphasized-font-weight)); + font-style: var(--spectrum-heading-sans-serif-light-emphasized-font-style); + font-weight: var(--spectrum-heading-sans-serif-light-emphasized-font-weight); } strong, .spectrum-Heading-strong { - font-style: var(--mod-heading-sans-serif-light-strong-font-style, var(--spectrum-heading-sans-serif-light-strong-font-style)); - font-weight: var(--mod-heading-sans-serif-light-strong-font-weight, var(--spectrum-heading-sans-serif-light-strong-font-weight)); + font-style: var(--spectrum-heading-sans-serif-light-strong-font-style); + font-weight: var(--spectrum-heading-sans-serif-light-strong-font-weight); } .spectrum-Heading-strong.spectrum-Heading-emphasized, strong em, em strong { - font-style: var(--mod-heading-sans-serif-light-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style)); - font-weight: var(--mod-heading-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight)); + font-style: var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style); + font-weight: var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight); } &:lang(zh), &:lang(ja), &:lang(ko) { - font-style: var(--mod-heading-cjk-light-font-style, var(--spectrum-heading-cjk-light-font-style)); - font-weight: var(--mod-heading-cjk-light-font-weight, var(--spectrum-heading-cjk-light-font-weight)); + font-style: var(--spectrum-heading-cjk-light-font-style); + font-weight: var(--spectrum-heading-cjk-light-font-weight); strong, .spectrum-Heading-strong { - font-style: var(--mod-heading-cjk-light-strong-font-style, var(--spectrum-heading-cjk-light-strong-font-style)); - font-weight: var(--mod-heading-cjk-light-strong-font-weight, var(--spectrum-heading-cjk-light-strong-font-weight)); + font-style: var(--spectrum-heading-cjk-light-strong-font-style); + font-weight: var(--spectrum-heading-cjk-light-strong-font-weight); } em, .spectrum-Heading-emphasized { - font-style: var(--mod-heading-cjk-light-emphasized-font-style, var(--spectrum-heading-cjk-light-emphasized-font-style)); - font-weight: var(--mod-heading-cjk-light-emphasized-font-weight, var(--spectrum-heading-cjk-light-emphasized-font-weight)); + font-style: var(--spectrum-heading-cjk-light-emphasized-font-style); + font-weight: var(--spectrum-heading-cjk-light-emphasized-font-weight); } .spectrum-Heading-strong.spectrum-Heading-emphasized, strong em, em strong { - font-style: var(--mod-heading-cjk-light-strong-emphasized-font-style, var(--spectrum-heading-cjk-light-strong-emphasized-font-style)); - font-weight: var(--mod-heading-cjk-light-strong-emphasized-font-weight, var(--spectrum-heading-cjk-light-strong-emphasized-font-weight)); + font-style: var(--spectrum-heading-cjk-light-strong-emphasized-font-style); + font-weight: var(--spectrum-heading-cjk-light-strong-emphasized-font-weight); } } } /* Heading - Serif */ .spectrum-Heading--serif { - font-family: var(--mod-heading-serif-font-family, var(--spectrum-heading-serif-font-family)); - font-style: var(--mod-heading-serif-font-style, var(--spectrum-heading-serif-font-style)); - font-weight: var(--mod-heading-serif-font-weight, var(--spectrum-heading-serif-font-weight)); + font-family: var(--spectrum-heading-serif-font-family); + font-style: var(--spectrum-heading-serif-font-style); + font-weight: var(--spectrum-heading-serif-font-weight); em, .spectrum-Heading-emphasized { - font-style: var(--mod-heading-serif-emphasized-font-style, var(--spectrum-heading-serif-emphasized-font-style)); - font-weight: var(--mod-heading-serif-emphasized-font-weight, var(--spectrum-heading-serif-emphasized-font-weight)); + font-style: var(--spectrum-heading-serif-emphasized-font-style); + font-weight: var(--spectrum-heading-serif-emphasized-font-weight); } strong, .spectrum-Heading-strong { - font-style: var(--mod-heading-serif-strong-font-style, var(--spectrum-heading-serif-strong-font-style)); - font-weight: var(--mod-heading-serif-strong-font-weight, var(--spectrum-heading-serif-strong-font-weight)); + font-style: var(--spectrum-heading-serif-strong-font-style); + font-weight: var(--spectrum-heading-serif-strong-font-weight); } .spectrum-Heading-strong.spectrum-Heading-emphasized, strong em, em strong { - font-style: var(--mod-heading-serif-strong-emphasized-font-style, var(--spectrum-heading-serif-strong-emphasized-font-style)); - font-weight: var(--mod-heading-serif-strong-emphasized-font-weight, var(--spectrum-heading-serif-strong-emphasized-font-weight)); + font-style: var(--spectrum-heading-serif-strong-emphasized-font-style); + font-weight: var(--spectrum-heading-serif-strong-emphasized-font-weight); } } /* Heading - Serif - Heavy */ .spectrum-Heading--serif.spectrum-Heading--heavy { - font-style: var(--mod-heading-serif-heavy-font-style, var(--spectrum-heading-serif-heavy-font-style)); - font-weight: var(--mod-heading-serif-heavy-font-weight, var(--spectrum-heading-serif-heavy-font-weight)); + font-style: var(--spectrum-heading-serif-heavy-font-style); + font-weight: var(--spectrum-heading-serif-heavy-font-weight); strong, .spectrum-Heading-strong { - font-style: var(--mod-heading-serif-heavy-strong-font-style, var(--spectrum-heading-serif-heavy-strong-font-style)); - font-weight: var(--mod-heading-serif-heavy-strong-font-weight, var(--spectrum-heading-serif-heavy-strong-font-weight)); + font-style: var(--spectrum-heading-serif-heavy-strong-font-style); + font-weight: var(--spectrum-heading-serif-heavy-strong-font-weight); } em, .spectrum-Heading-emphasized { - font-style: var(--mod-heading-serif-heavy-emphasized-font-style, var(--spectrum-heading-serif-heavy-emphasized-font-style)); - font-weight: var(--mod-heading-serif-heavy-emphasized-font-weight, var(--spectrum-heading-serif-heavy-emphasized-font-weight)); + font-style: var(--spectrum-heading-serif-heavy-emphasized-font-style); + font-weight: var(--spectrum-heading-serif-heavy-emphasized-font-weight); } .spectrum-Heading-strong.spectrum-Heading-emphasized, strong em, em strong { - font-style: var(--mod-heading-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-serif-heavy-strong-emphasized-font-style)); - font-weight: var(--mod-heading-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight)); + font-style: var(--spectrum-heading-serif-heavy-strong-emphasized-font-style); + font-weight: var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight); } } /* Heading - Serif - Light */ .spectrum-Heading--serif.spectrum-Heading--light { - font-style: var(--mod-heading-serif-light-font-style, var(--spectrum-heading-serif-light-font-style)); - font-weight: var(--mod-heading-serif-light-font-weight, var(--spectrum-heading-serif-light-font-weight)); + font-style: var(--spectrum-heading-serif-light-font-style); + font-weight: var(--spectrum-heading-serif-light-font-weight); em, .spectrum-Heading-emphasized { - font-style: var(--mod-heading-serif-light-emphasized-font-style, var(--spectrum-heading-serif-light-emphasized-font-style)); - font-weight: var(--mod-heading-serif-light-emphasized-font-weight, var(--spectrum-heading-serif-light-emphasized-font-weight)); + font-style: var(--spectrum-heading-serif-light-emphasized-font-style); + font-weight: var(--spectrum-heading-serif-light-emphasized-font-weight); } strong, .spectrum-Heading-strong { - font-style: var(--mod-heading-serif-light-strong-font-style, var(--spectrum-heading-serif-light-strong-font-style)); - font-weight: var(--mod-heading-serif-light-strong-font-weight, var(--spectrum-heading-serif-light-strong-font-weight)); + font-style: var(--spectrum-heading-serif-light-strong-font-style); + font-weight: var(--spectrum-heading-serif-light-strong-font-weight); } .spectrum-Heading-strong.spectrum-Heading-emphasized, strong em, em strong { - font-style: var(--mod-heading-serif-light-strong-emphasized-font-style, var(--spectrum-heading-serif-light-strong-emphasized-font-style)); - font-weight: var(--mod-heading-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-serif-light-strong-emphasized-font-weight)); + font-style: var(--spectrum-heading-serif-light-strong-emphasized-font-style); + font-weight: var(--spectrum-heading-serif-light-strong-emphasized-font-weight); } } @@ -391,91 +391,91 @@ --spectrum-body-font-color: var(--spectrum-body-color); - font-family: var(--mod-body-sans-serif-font-family, var(--spectrum-body-sans-serif-font-family)); - font-style: var(--mod-body-sans-serif-font-style, var(--spectrum-body-sans-serif-font-style)); - font-weight: var(--mod-body-sans-serif-font-weight, var(--spectrum-body-sans-serif-font-weight)); - font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); - color: var(--highcontrast-body-font-color, var(--mod-body-font-color, var(--spectrum-body-font-color))); + font-family: var(--spectrum-body-sans-serif-font-family); + font-style: var(--spectrum-body-sans-serif-font-style); + font-weight: var(--spectrum-body-sans-serif-font-weight); + font-size: var(--spectrum-body-font-size); + color: var(--highcontrast-body-font-color, var(--spectrum-body-font-color)); - margin-block-start: var(--mod-body-margin-start, var(--mod-body-margin, 0)); - margin-block-end: var(--mod-body-margin-end, var(--mod-body-margin, var(--spectrum-body-margin-end, 0))); + margin-block-start: var(--spectrum-body-margin-start, 0); + margin-block-end: var(--spectrum-body-margin-end, 0); - line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); + line-height: var(--spectrum-body-line-height); strong, .spectrum-Body-strong { - font-style: var(--mod-body-sans-serif-strong-font-style, var(--spectrum-body-sans-serif-strong-font-style)); - font-weight: var(--mod-body-sans-serif-strong-font-weight, var(--spectrum-body-sans-serif-strong-font-weight)); + font-style: var(--spectrum-body-sans-serif-strong-font-style); + font-weight: var(--spectrum-body-sans-serif-strong-font-weight); } em, .spectrum-Body-emphasized { - font-style: var(--mod-body-sans-serif-emphasized-font-style, var(--spectrum-body-sans-serif-emphasized-font-style)); - font-weight: var(--mod-body-sans-serif-emphasized-font-weight, var(--spectrum-body-sans-serif-emphasized-font-weight)); + font-style: var(--spectrum-body-sans-serif-emphasized-font-style); + font-weight: var(--spectrum-body-sans-serif-emphasized-font-weight); } .spectrum-Body-strong.spectrum-Body-emphasized, em strong, strong em { - font-style: var(--mod-body-sans-serif-strong-emphasized-font-style, var(--spectrum-body-sans-serif-strong-emphasized-font-style)); - font-weight: var(--mod-body-sans-serif-strong-emphasized-font-weight, var(--spectrum-body-sans-serif-strong-emphasized-font-weight)); + font-style: var(--spectrum-body-sans-serif-strong-emphasized-font-style); + font-weight: var(--spectrum-body-sans-serif-strong-emphasized-font-weight); } &:lang(zh), &:lang(ja), &:lang(ko) { - font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family)); - font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style)); - font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight)); + font-family: var(--spectrum-body-cjk-font-family); + font-style: var(--spectrum-body-cjk-font-style); + font-weight: var(--spectrum-body-cjk-font-weight); - line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height)); + line-height: var(--spectrum-body-cjk-line-height); - letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing)); + letter-spacing: var(--spectrum-body-cjk-letter-spacing); strong, .spectrum-Body-strong { - font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style)); - font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight)); + font-style: var(--spectrum-body-cjk-strong-font-style); + font-weight: var(--spectrum-body-cjk-strong-font-weight); } em, .spectrum-Body-emphasized { - font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style)); - font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight)); + font-style: var(--spectrum-body-cjk-emphasized-font-style); + font-weight: var(--spectrum-body-cjk-emphasized-font-weight); } .spectrum-Body-strong.spectrum-Body-emphasized, em strong, strong em { - font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style)); - font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight)); + font-style: var(--spectrum-body-cjk-strong-emphasized-font-style); + font-weight: var(--spectrum-body-cjk-strong-emphasized-font-weight); } } } /* Body - Serif */ .spectrum-Body--serif { - font-family: var(--mod-body-serif-font-family, var(--spectrum-body-serif-font-family)); - font-weight: var(--mod-body-serif-font-weight, var(--spectrum-body-serif-font-weight)); - font-style: var(--mod-body-serif-font-style, var(--spectrum-body-serif-font-style)); + font-family: var(--spectrum-body-serif-font-family); + font-weight: var(--spectrum-body-serif-font-weight); + font-style: var(--spectrum-body-serif-font-style); strong, .spectrum-Body-strong { - font-style: var(--mod-body-serif-strong-font-style, var(--spectrum-body-serif-strong-font-style)); - font-weight: var(--mod-body-serif-strong-font-weight, var(--spectrum-body-serif-strong-font-weight)); + font-style: var(--spectrum-body-serif-strong-font-style); + font-weight: var(--spectrum-body-serif-strong-font-weight); } em, .spectrum-Body-emphasized { - font-style: var(--mod-body-serif-emphasized-font-style, var(--spectrum-body-serif-emphasized-font-style)); - font-weight: var(--mod-body-serif-emphasized-font-weight, var(--spectrum-body-serif-emphasized-font-weight)); + font-style: var(--spectrum-body-serif-emphasized-font-style); + font-weight: var(--spectrum-body-serif-emphasized-font-weight); } .spectrum-Body-strong.spectrum-Body-emphasized, em strong, strong em { - font-style: var(--mod-body-serif-strong-emphasized-font-style, var(--spectrum-body-serif-strong-emphasized-font-style)); - font-weight: var(--mod-body-serif-strong-emphasized-font-weight, var(--spectrum-body-serif-strong-emphasized-font-weight)); + font-style: var(--spectrum-body-serif-strong-emphasized-font-style); + font-weight: var(--spectrum-body-serif-strong-emphasized-font-weight); } } @@ -502,170 +502,170 @@ --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family-stack); --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier)); - --spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier)); + --spectrum-detail-margin-start: calc(var(--spectrum-detail-font-size) * var(--spectrum-detail-margin-top-multiplier)); + --spectrum-detail-margin-end: calc(var(--spectrum-detail-font-size) * var(--spectrum-detail-margin-bottom-multiplier)); --spectrum-detail-font-color: var(--spectrum-detail-color); - font-family: var(--mod-detail-sans-serif-font-family, var(--spectrum-detail-sans-serif-font-family)); - font-style: var(--mod-detail-sans-serif-font-style, var(--spectrum-detail-sans-serif-font-style)); - font-weight: var(--mod-detail-sans-serif-font-weight, var(--spectrum-detail-sans-serif-font-weight)); - font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); - margin-block-start: var(--mod-detail-margin-start, var(--spectrum-detail-margin-start, 0)); - margin-block-end: var(--mod-detail-margin-end, var(--spectrum-detail-margin-end, 0)); + font-family: var(--spectrum-detail-sans-serif-font-family); + font-style: var(--spectrum-detail-sans-serif-font-style); + font-weight: var(--spectrum-detail-sans-serif-font-weight); + font-size: var(--spectrum-detail-font-size); + margin-block-start: var(--spectrum-detail-margin-start, 0); + margin-block-end: var(--spectrum-detail-margin-end, 0); - color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color))); + color: var(--highcontrast-detail-font-color, var(--spectrum-detail-font-color)); - line-height: var(--mod-detail-line-height, var(--spectrum-detail-line-height)); - letter-spacing: var(--mod-detail-letter-spacing, var(--spectrum-detail-letter-spacing)); + line-height: var(--spectrum-detail-line-height); + letter-spacing: var(--spectrum-detail-letter-spacing); text-transform: uppercase; strong, .spectrum-Detail-strong { - font-style: var(--mod-detail-sans-serif-strong-font-style, var(--spectrum-detail-sans-serif-strong-font-style)); - font-weight: var(--mod-detail-sans-serif-strong-font-weight, var(--spectrum-detail-sans-serif-strong-font-weight)); + font-style: var(--spectrum-detail-sans-serif-strong-font-style); + font-weight: var(--spectrum-detail-sans-serif-strong-font-weight); } em, .spectrum-Detail-emphasized { - font-style: var(--mod-detail-sans-serif-emphasized-font-style, var(--spectrum-detail-sans-serif-emphasized-font-style)); - font-weight: var(--mod-detail-sans-serif-emphasized-font-weight, var(--spectrum-detail-sans-serif-emphasized-font-weight)); + font-style: var(--spectrum-detail-sans-serif-emphasized-font-style); + font-weight: var(--spectrum-detail-sans-serif-emphasized-font-weight); } .spectrum-Detail-strong.spectrum-Detail-emphasized, em strong, strong em { - font-style: var(--mod-detail-sans-serif-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-strong-emphasized-font-style)); - font-weight: var(--mod-detail-sans-serif-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-strong-emphasized-font-weight)); + font-style: var(--spectrum-detail-sans-serif-strong-emphasized-font-style); + font-weight: var(--spectrum-detail-sans-serif-strong-emphasized-font-weight); } &:lang(zh), &:lang(ja), &:lang(ko) { - font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family)); - font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style)); - font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight)); + font-family: var(--spectrum-detail-cjk-font-family); + font-style: var(--spectrum-detail-cjk-font-style); + font-weight: var(--spectrum-detail-cjk-font-weight); - line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height)); + line-height: var(--spectrum-detail-cjk-line-height); strong, .spectrum-Detail-strong { - font-style: var(--mod-detail-cjk-strong-font-style, var(--spectrum-detail-cjk-strong-font-style)); - font-weight: var(--mod-detail-cjk-strong-font-weight, var(--spectrum-detail-cjk-strong-font-weight)); + font-style: var(--spectrum-detail-cjk-strong-font-style); + font-weight: var(--spectrum-detail-cjk-strong-font-weight); } em, .spectrum-Detail-emphasized { - font-style: var(--mod-detail-cjk-emphasized-font-style, var(--spectrum-detail-cjk-emphasized-font-style)); - font-weight: var(--mod-detail-cjk-emphasized-font-weight, var(--spectrum-detail-cjk-emphasized-font-weight)); + font-style: var(--spectrum-detail-cjk-emphasized-font-style); + font-weight: var(--spectrum-detail-cjk-emphasized-font-weight); } .spectrum-Detail-strong.spectrum-Detail-emphasized, em strong, strong em { - font-style: var(--mod-detail-cjk-strong-emphasized-font-style, var(--spectrum-detail-cjk-strong-emphasized-font-style)); - font-weight: var(--mod-detail-cjk-strong-emphasized-font-weight, var(--spectrum-detail-cjk-strong-emphasized-font-weight)); + font-style: var(--spectrum-detail-cjk-strong-emphasized-font-style); + font-weight: var(--spectrum-detail-cjk-strong-emphasized-font-weight); } } } /* Detail - Serif */ .spectrum-Detail--serif { - font-family: var(--mod-detail-serif-font-family, var(--spectrum-detail-serif-font-family)); - font-style: var(--mod-detail-serif-font-style, var(--spectrum-detail-serif-font-style)); - font-weight: var(--mod-detail-serif-font-weight, var(--spectrum-detail-serif-font-weight)); + font-family: var(--spectrum-detail-serif-font-family); + font-style: var(--spectrum-detail-serif-font-style); + font-weight: var(--spectrum-detail-serif-font-weight); strong, .spectrum-Detail-strong { - font-style: var(--mod-detail-serif-strong-font-style, var(--spectrum-detail-serif-strong-font-style)); - font-weight: var(--mod-detail-serif-strong-font-weight, var(--spectrum-detail-serif-strong-font-weight)); + font-style: var(--spectrum-detail-serif-strong-font-style); + font-weight: var(--spectrum-detail-serif-strong-font-weight); } em, .spectrum-Detail-emphasized { - font-style: var(--mod-detail-serif-emphasized-font-style, var(--spectrum-detail-serif-emphasized-font-style)); - font-weight: var(--mod-detail-serif-emphasized-font-weight, var(--spectrum-detail-serif-emphasized-font-weight)); + font-style: var(--spectrum-detail-serif-emphasized-font-style); + font-weight: var(--spectrum-detail-serif-emphasized-font-weight); } .spectrum-Detail-strong.spectrum-Detail-emphasized, em strong, strong em { - font-style: var(--mod-detail-serif-strong-emphasized-font-style, var(--spectrum-detail-serif-strong-emphasized-font-style)); - font-weight: var(--mod-detail-serif-strong-emphasized-font-weight, var(--spectrum-detail-serif-strong-emphasized-font-weight)); + font-style: var(--spectrum-detail-serif-strong-emphasized-font-style); + font-weight: var(--spectrum-detail-serif-strong-emphasized-font-weight); } } /* Detail - Light */ .spectrum-Detail--light { - font-style: var(--mod-detail-sans-serif-light-font-style, var(--spectrum-detail-sans-serif-light-font-style)); - font-weight: var(--spectrum-detail-sans-serif-light-font-weight, var(--spectrum-detail-sans-serif-light-font-weight)); + font-style: var(--spectrum-detail-sans-serif-light-font-style); + font-weight: var(--spectrum-detail-sans-serif-light-font-weight); strong, .spectrum-Detail-strong { - font-style: var(--mod-detail-sans-serif-light-strong-font-style, var(--spectrum-detail-sans-serif-light-strong-font-style)); - font-weight: var(--mod-detail-sans-serif-light-strong-font-weight, var(--spectrum-detail-sans-serif-light-strong-font-weight)); + font-style: var(--spectrum-detail-sans-serif-light-strong-font-style); + font-weight: var(--spectrum-detail-sans-serif-light-strong-font-weight); } em, .spectrum-Detail-emphasized { - font-style: var(--mod-detail-sans-serif-light-emphasized-font-style, var(--spectrum-detail-sans-serif-light-emphasized-font-style)); - font-weight: var(--mod-detail-sans-serif-light-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-emphasized-font-weight)); + font-style: var(--spectrum-detail-sans-serif-light-emphasized-font-style); + font-weight: var(--spectrum-detail-sans-serif-light-emphasized-font-weight); } .spectrum-Detail-strong.spectrum-Body-emphasized, em strong, strong em { - font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style)); - font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight)); + font-style: var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style); + font-weight: var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight); } &:lang(zh), &:lang(ja), &:lang(ko) { - font-style: var(--mod-detail-cjk-light-font-style, var(--spectrum-detail-cjk-light-font-style)); - font-weight: var(--mod-detail-cjk-light-font-weight, var(--spectrum-detail-cjk-light-font-weight)); + font-style: var(--spectrum-detail-cjk-light-font-style); + font-weight: var(--spectrum-detail-cjk-light-font-weight); strong, .spectrum-Detail-strong { - font-style: var(--mod-detail-cjk-light-strong-font-style, var(--spectrum-detail-cjk-light-strong-font-style)); - font-weight: var(--mod-detail-cjk-light-strong-font-weight, var(--spectrum-detail-cjk-light-strong-font-weight)); + font-style: var(--spectrum-detail-cjk-light-strong-font-style); + font-weight: var(--spectrum-detail-cjk-light-strong-font-weight); } em, .spectrum-Detail-emphasized { - font-style: var(--mod-detail-cjk-light-emphasized-font-style, var(--spectrum-detail-cjk-light-emphasized-font-style)); - font-weight: var(--mod-detail-cjk-light-emphasized-font-weight, var(--spectrum-detail-cjk-light-emphasized-font-weight)); + font-style: var(--spectrum-detail-cjk-light-emphasized-font-style); + font-weight: var(--spectrum-detail-cjk-light-emphasized-font-weight); } .spectrum-Detail-strong.spectrum-Detail-emphasized { - font-style: var(--mod-detail-cjk-light-strong-emphasized-font-style, var(--spectrum-detail-cjk-light-strong-emphasized-font-style)); - font-weight: var(--mod-detail-cjk-light-strong-emphasized-font-weight, var(--spectrum-detail-cjk-light-strong-emphasized-font-weight)); + font-style: var(--spectrum-detail-cjk-light-strong-emphasized-font-style); + font-weight: var(--spectrum-detail-cjk-light-strong-emphasized-font-weight); } } } /* Detail - Serif - Light */ .spectrum-Detail--serif.spectrum-Detail--light { - font-style: var(--mod-detail-serif-light-font-style, var(--spectrum-detail-serif-light-font-style)); - font-weight: var(--mod-detail-serif-light-font-weight, var(--spectrum-detail-serif-light-font-weight)); + font-style: var(--spectrum-detail-serif-light-font-style); + font-weight: var(--spectrum-detail-serif-light-font-weight); strong, .spectrum-Detail-strong { - font-style: var(--mod-detail-serif-light-strong-font-style, var(--spectrum-detail-serif-light-strong-font-style)); - font-weight: var(--mod-detail-serif-light-strong-font-weight, var(--spectrum-detail-serif-light-strong-font-weight)); + font-style: var(--spectrum-detail-serif-light-strong-font-style); + font-weight: var(--spectrum-detail-serif-light-strong-font-weight); } em, .spectrum-Detail-emphasized { - font-style: var(--mod-detail-serif-light-emphasized-font-style, var(--spectrum-detail-serif-light-emphasized-font-style)); - font-weight: var(--mod-detail-serif-light-emphasized-font-weight, var(--spectrum-detail-serif-light-emphasized-font-weight)); + font-style: var(--spectrum-detail-serif-light-emphasized-font-style); + font-weight: var(--spectrum-detail-serif-light-emphasized-font-weight); } .spectrum-Detail-strong.spectrum-Body-emphasized, em strong, strong em { - font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style)); - font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight)); + font-style: var(--spectrum-detail-serif-light-strong-emphasized-font-style); + font-weight: var(--spectrum-detail-serif-light-strong-emphasized-font-weight); } } @@ -696,63 +696,63 @@ --spectrum-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); --spectrum-code-font-color: var(--spectrum-code-color); - font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); - font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); - font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); - font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); - margin-block-start: var(--mod-code-margin-start, 0); - margin-block-end: var(--mod-code-margin-end, 0); + font-family: var(--spectrum-code-font-family); + font-style: var(--spectrum-code-font-style); + font-weight: var(--spectrum-code-font-weight); + font-size: var(--spectrum-code-font-size); + margin-block-start: var(--spectrum-code-margin-start, 0); + margin-block-end: var(--spectrum-code-margin-end, 0); - line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); + line-height: var(--spectrum-code-line-height); - color: var(--highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color))); + color: var(--highcontrast-code-font-color, var(--spectrum-code-font-color)); strong, .spectrum-Code-strong { - font-style: var(--mod-code-strong-font-style, var(--spectrum-code-strong-font-style)); - font-weight: var(--mod-code-strong-font-weight, var(--spectrum-code-strong-font-weight)); + font-style: var(--spectrum-code-strong-font-style); + font-weight: var(--spectrum-code-strong-font-weight); } em, .spectrum-Code-emphasized { - font-style: var(--mod-code-emphasized-font-style, var(--spectrum-code-emphasized-font-style)); - font-weight: var(--mod-code-emphasized-font-weight, var(--spectrum-code-emphasized-font-weight)); + font-style: var(--spectrum-code-emphasized-font-style); + font-weight: var(--spectrum-code-emphasized-font-weight); } .spectrum-Code-strong.spectrum-Code-emphasized, em strong, strong em { - font-style: var(--mod-code-strong-emphasized-font-style, var(--spectrum-code-strong-emphasized-font-style)); - font-weight: var(--mod-code-strong-emphasized-font-weight, var(--spectrum-code-strong-emphasized-font-weight)); + font-style: var(--spectrum-code-strong-emphasized-font-style); + font-weight: var(--spectrum-code-strong-emphasized-font-weight); } &:lang(zh), &:lang(ja), &:lang(ko) { - font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family)); - font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style)); - font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight)); + font-family: var(--spectrum-code-cjk-font-family); + font-style: var(--spectrum-code-cjk-font-style); + font-weight: var(--spectrum-code-cjk-font-weight); - line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height)); - letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing)); + line-height: var(--spectrum-code-cjk-line-height); + letter-spacing: var(--spectrum-code-cjk-letter-spacing); strong, .spectrum-Code-strong { - font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style)); - font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight)); + font-style: var(--spectrum-code-cjk-strong-font-style); + font-weight: var(--spectrum-code-cjk-strong-font-weight); } em, .spectrum-Code-emphasized { - font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style)); - font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight)); + font-style: var(--spectrum-code-cjk-emphasized-font-style); + font-weight: var(--spectrum-code-cjk-emphasized-font-weight); } .spectrum-Code-strong.spectrum-Code-emphasized, em strong, strong em { - font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style)); - font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight)); + font-style: var(--spectrum-code-cjk-strong-emphasized-font-style); + font-weight: var(--spectrum-code-cjk-strong-emphasized-font-weight); } } } diff --git a/components/underlay/dist/metadata.json b/components/underlay/dist/metadata.json index 21a3e4aa1d0..6c3e6ddac4b 100644 --- a/components/underlay/dist/metadata.json +++ b/components/underlay/dist/metadata.json @@ -1,16 +1,6 @@ { "sourceFile": "index.css", "selectors": [".spectrum-Underlay", ".spectrum-Underlay.is-open"], - "modifiers": [ - "--mod-overlay-animation-duration-opened", - "--mod-underlay-background-color", - "--mod-underlay-background-entry-animation-delay", - "--mod-underlay-background-entry-animation-duration", - "--mod-underlay-background-entry-animation-ease", - "--mod-underlay-background-exit-animation-delay", - "--mod-underlay-background-exit-animation-duration", - "--mod-underlay-background-exit-animation-ease" - ], "component": [ "--spectrum-underlay-background-color", "--spectrum-underlay-background-entry-animation-delay", diff --git a/components/underlay/index.css b/components/underlay/index.css index 494f736e5a0..b6b261ba7cb 100644 --- a/components/underlay/index.css +++ b/components/underlay/index.css @@ -12,16 +12,15 @@ */ .spectrum-Underlay { - --spectrum-underlay-background-exit-animation-duration: var(--mod-underlay-background-exit-animation-duration, var(--spectrum-animation-duration-300)); - --spectrum-underlay-background-exit-animation-ease: var(--mod-underlay-background-exit-animation-ease, var(--spectrum-animation-ease-in)); - --spectrum-underlay-background-exit-animation-delay: var(--mod-underlay-background-exit-animation-delay, var(--spectrum-animation-duration-200)); - --spectrum-underlay-background-entry-animation-duration: var(--mod-underlay-background-entry-animation-duration, var(--spectrum-animation-duration-600)); - --spectrum-underlay-background-entry-animation-ease: var(--mod-underlay-background-entry-animation-ease, var(--spectrum-animation-ease-out)); - /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-underlay-background-entry-animation-delay */ - --spectrum-underlay-background-entry-animation-delay: var(--mod-underlay-background-entry-animation-delay, var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0))); + --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300); + --spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in); + --spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200); + --spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600); + --spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out); + --spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0); /* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */ - --spectrum-underlay-background-color: var(--mod-underlay-background-color, rgb(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity))); + --spectrum-underlay-background-color: rgb(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); pointer-events: none; visibility: hidden; diff --git a/components/well/dist/metadata.json b/components/well/dist/metadata.json index c9fdd7f6da1..d108b9777ba 100644 --- a/components/well/dist/metadata.json +++ b/components/well/dist/metadata.json @@ -1,16 +1,6 @@ { "sourceFile": "index.css", "selectors": [".spectrum-Well"], - "modifiers": [ - "--mod-well-background-color", - "--mod-well-border-color", - "--mod-well-border-radius", - "--mod-well-border-width", - "--mod-well-content-color", - "--mod-well-margin-top", - "--mod-well-min-width", - "--mod-well-padding" - ], "component": [ "--spectrum-well-background-color", "--spectrum-well-border-color", diff --git a/components/well/index.css b/components/well/index.css index 4c24597f735..238a4ee6ab4 100644 --- a/components/well/index.css +++ b/components/well/index.css @@ -20,13 +20,13 @@ text-align: start; display: block; - min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width)); - padding: var(--mod-well-padding, var(--spectrum-well-padding)); - margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top)); - border-width: var(--mod-well-border-width, var(--spectrum-well-border-width)); + min-inline-size: var(--spectrum-well-min-width); + padding: var(--spectrum-well-padding); + margin-block-start: var(--spectrum-well-margin-top); + border-width: var(--spectrum-well-border-width); border-style: solid; - border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius)); - background-color: var(--mod-well-background-color, var(--spectrum-well-background-color)); - border-color: var(--mod-well-border-color, var(--spectrum-well-border-color)); - color: var(--mod-well-content-color, var(--spectrum-well-content-color)); + border-radius: var(--spectrum-well-border-radius); + background-color: var(--spectrum-well-background-color); + border-color: var(--spectrum-well-border-color); + color: var(--spectrum-well-content-color); } diff --git a/schemas/metadata.schema.json b/schemas/metadata.schema.json index 1352f802900..e4b4e34384a 100644 --- a/schemas/metadata.schema.json +++ b/schemas/metadata.schema.json @@ -17,14 +17,6 @@ "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", @@ -46,7 +38,7 @@ "type": "array", "items": { "type": "string", - "pattern": "^--mod-" + "pattern": "^--spectrum-" } }, "high-contrast": { @@ -58,6 +50,6 @@ } } }, - "required": ["sourceFile", "selectors", "modifiers", "component", "global", "passthroughs", "high-contrast"], + "required": ["sourceFile", "selectors", "component", "global", "passthroughs", "high-contrast"], "additionalProperties": false } diff --git a/stylelint.config.js b/stylelint.config.js index 83982251aa3..edd6daf7edb 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -182,7 +182,6 @@ module.exports = { { /** @note this is a list of custom properties that are allowed to be unknown */ ignoreList: [ - /^--mod-/, /^--spectrum-picked-color$/, /^--spectrum-downstate-(height|width)$/, ], @@ -195,9 +194,6 @@ module.exports = { "spectrum-tools/no-unused-custom-properties": [ true, { - ignoreList: [ - /^--mod-/, - ], disableFix: true, severity: "warning", }, @@ -225,9 +221,7 @@ module.exports = { rules: { "spectrum-tools/no-unused-custom-properties": [ true, - { - ignoreList: [/^--mod-/], - }, + {}, ], } }, diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js index b281de49bc9..8117574ea89 100644 --- a/tasks/component-reporter.js +++ b/tasks/component-reporter.js @@ -34,7 +34,7 @@ const { const { processCSS } = require("./component-builder.js"); /** - * Extract custom property modifers to report + * Extract custom properties to report * @param {string} sourcePath * @param {object} [options={}] * @param {string} [options.componentName] - The name of the component being built @@ -103,13 +103,13 @@ async function extractModifiers( return; } - const componentLevel = new Set(spectrum.map((value) => isComponentVar(value, componentName)).filter(Boolean)); + let componentLevel = new Set(spectrum.map((value) => isComponentVar(value, componentName)).filter(Boolean)); // Filter out the component level values from the global spectrum values meta.global = spectrum.filter((value) => !componentLevel.has(value)); - // Filter out mods that reference other components --mod--* - meta.passthroughs = meta.modifiers.filter((mod) => { + // Filter out properties that reference other components + meta.passthroughs = [...componentLevel].filter((mod) => { if (!componentName) return false; if (isComponentVar(mod, componentName)) return false; @@ -119,8 +119,8 @@ async function extractModifiers( // If the mod doesn't reference any other components, it's not a passthrough, maybe it's a global or deprecated mod? if (!otherComponents.some((component) => isComponentVar(mod, component))) return false; - // Remove the mod from the modifiers list if it's a passthrough - meta.modifiers = meta.modifiers.filter((m) => m !== mod); + // Remove the property from the list if it's a passthrough + componentLevel = [...componentLevel].filter((m) => m !== mod); return true; }); @@ -188,7 +188,6 @@ async function main({ componentName, baseSelectors: [".spectrum"], dataModel: { - modifiers: ["mod"], spectrum: ["spectrum"], "high-contrast": ["highcontrast"], }, @@ -201,7 +200,6 @@ async function main({ JSON.stringify({ sourceFile: meta.sourceFile, selectors: meta.selectors, - modifiers: meta.modifiers, component: meta.component, global: meta.global, passthroughs: meta.passthroughs, diff --git a/tasks/templates/compare-listing.njk b/tasks/templates/compare-listing.njk index f47eff8126e..79632cbda00 100644 --- a/tasks/templates/compare-listing.njk +++ b/tasks/templates/compare-listing.njk @@ -11,8 +11,8 @@