diff --git a/.changeset/nine-pots-grin.md b/.changeset/nine-pots-grin.md new file mode 100644 index 00000000000..767379f2750 --- /dev/null +++ b/.changeset/nine-pots-grin.md @@ -0,0 +1,85 @@ +--- +"@spectrum-css/floatingactionbutton": minor +"@spectrum-css/opacitycheckerboard": minor +"@spectrum-css/illustratedmessage": minor +"@spectrum-css/coachindicator": minor +"@spectrum-css/contextualhelp": minor +"@spectrum-css/progresscircle": minor +"@spectrum-css/dropindicator": minor +"@spectrum-css/infieldbutton": minor +"@spectrum-css/actionbutton": minor +"@spectrum-css/pickerbutton": minor +"@spectrum-css/actiongroup": minor +"@spectrum-css/alertbanner": minor +"@spectrum-css/alertdialog": minor +"@spectrum-css/buttongroup": minor +"@spectrum-css/clearbutton": minor +"@spectrum-css/closebutton": minor +"@spectrum-css/colorhandle": minor +"@spectrum-css/colorslider": minor +"@spectrum-css/inlinealert": minor +"@spectrum-css/logicbutton": minor +"@spectrum-css/progressbar": minor +"@spectrum-css/statuslight": minor +"@spectrum-css/swatchgroup": minor +"@spectrum-css/actionmenu": minor +"@spectrum-css/breadcrumb": minor +"@spectrum-css/colorloupe": minor +"@spectrum-css/colorwheel": minor +"@spectrum-css/datepicker": minor +"@spectrum-css/fieldgroup": minor +"@spectrum-css/fieldlabel": minor +"@spectrum-css/pagination": minor +"@spectrum-css/typography": minor +"@spectrum-css/accordion": minor +"@spectrum-css/actionbar": minor +"@spectrum-css/assetcard": minor +"@spectrum-css/assetlist": minor +"@spectrum-css/coachmark": minor +"@spectrum-css/colorarea": minor +"@spectrum-css/splitview": minor +"@spectrum-css/textfield": minor +"@spectrum-css/thumbnail": minor +"@spectrum-css/calendar": minor +"@spectrum-css/checkbox": minor +"@spectrum-css/combobox": minor +"@spectrum-css/dropzone": minor +"@spectrum-css/helptext": minor +"@spectrum-css/steplist": minor +"@spectrum-css/taggroup": minor +"@spectrum-css/treeview": minor +"@spectrum-css/underlay": minor +"@spectrum-css/commons": minor +"@spectrum-css/divider": minor +"@spectrum-css/popover": minor +"@spectrum-css/sidenav": minor +"@spectrum-css/stepper": minor +"@spectrum-css/tooltip": minor +"@spectrum-css/avatar": minor +"@spectrum-css/button": minor +"@spectrum-css/dialog": minor +"@spectrum-css/miller": minor +"@spectrum-css/picker": minor +"@spectrum-css/rating": minor +"@spectrum-css/search": minor +"@spectrum-css/slider": minor +"@spectrum-css/swatch": minor +"@spectrum-css/switch": minor +"@spectrum-css/asset": minor +"@spectrum-css/badge": minor +"@spectrum-css/modal": minor +"@spectrum-css/radio": minor +"@spectrum-css/table": minor +"@spectrum-css/toast": minor +"@spectrum-css/card": minor +"@spectrum-css/dial": minor +"@spectrum-css/icon": minor +"@spectrum-css/link": minor +"@spectrum-css/menu": minor +"@spectrum-css/tabs": minor +"@spectrum-css/tray": minor +"@spectrum-css/well": minor +"@spectrum-css/tag": minor +--- + +Align selectors with the specificity that exists in S1 today diff --git a/components/checkbox/metadata/metadata.json b/components/checkbox/metadata/metadata.json index dee8ea7ccb4..92e963ed37e 100644 --- a/components/checkbox/metadata/metadata.json +++ b/components/checkbox/metadata/metadata.json @@ -27,6 +27,10 @@ ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--sizeL", + ".spectrum-Checkbox--sizeM", + ".spectrum-Checkbox--sizeS", + ".spectrum-Checkbox--sizeXL", ".spectrum-Checkbox-box", ".spectrum-Checkbox-box:after", ".spectrum-Checkbox-box:before", @@ -70,10 +74,6 @@ ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label", ".spectrum-Checkbox.is-readOnly:active .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-readOnly:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.spectrum-Checkbox--sizeL", - ".spectrum-Checkbox.spectrum-Checkbox--sizeM", - ".spectrum-Checkbox.spectrum-Checkbox--sizeS", - ".spectrum-Checkbox.spectrum-Checkbox--sizeXL", ".spectrum-Checkbox:active .spectrum-Checkbox-box:before", ".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox:active .spectrum-Checkbox-label", diff --git a/components/checkbox/themes/spectrum-two.css b/components/checkbox/themes/spectrum-two.css index 0eb7e4e6fa4..6214dc19f93 100644 --- a/components/checkbox/themes/spectrum-two.css +++ b/components/checkbox/themes/spectrum-two.css @@ -58,38 +58,38 @@ --spectrum-checkbox-border-width: var(--spectrum-border-width-200); --spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100); + } + + .spectrum-Checkbox--sizeS { + --spectrum-checkbox-font-size: var(--spectrum-font-size-75); + --spectrum-checkbox-height: var(--spectrum-component-height-75); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); + } + + .spectrum-Checkbox, + .spectrum-Checkbox--sizeM { + --spectrum-checkbox-font-size: var(--spectrum-font-size-100); + --spectrum-checkbox-height: var(--spectrum-component-height-100); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); + } + + .spectrum-Checkbox--sizeL { + --spectrum-checkbox-font-size: var(--spectrum-font-size-200); + --spectrum-checkbox-height: var(--spectrum-component-height-200); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200); + } - &.spectrum-Checkbox--sizeS { - --spectrum-checkbox-font-size: var(--spectrum-font-size-75); - --spectrum-checkbox-height: var(--spectrum-component-height-75); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); - } - - &, - &.spectrum-Checkbox--sizeM { - --spectrum-checkbox-font-size: var(--spectrum-font-size-100); - --spectrum-checkbox-height: var(--spectrum-component-height-100); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); - } - - &.spectrum-Checkbox--sizeL { - --spectrum-checkbox-font-size: var(--spectrum-font-size-200); - --spectrum-checkbox-height: var(--spectrum-component-height-200); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200); - } - - &.spectrum-Checkbox--sizeXL { - --spectrum-checkbox-font-size: var(--spectrum-font-size-300); - --spectrum-checkbox-height: var(--spectrum-component-height-300); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large); - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300); - } + .spectrum-Checkbox--sizeXL { + --spectrum-checkbox-font-size: var(--spectrum-font-size-300); + --spectrum-checkbox-height: var(--spectrum-component-height-300); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300); } } diff --git a/components/closebutton/metadata/metadata.json b/components/closebutton/metadata/metadata.json index 6788f319e7f..d92776abec1 100644 --- a/components/closebutton/metadata/metadata.json +++ b/components/closebutton/metadata/metadata.json @@ -2,6 +2,10 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-CloseButton", + ".spectrum-CloseButton--sizeL", + ".spectrum-CloseButton--sizeM", + ".spectrum-CloseButton--sizeS", + ".spectrum-CloseButton--sizeXL", ".spectrum-CloseButton--staticBlack", ".spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled)", @@ -35,10 +39,6 @@ ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)", ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton.spectrum-CloseButton--sizeL", - ".spectrum-CloseButton.spectrum-CloseButton--sizeM", - ".spectrum-CloseButton.spectrum-CloseButton--sizeS", - ".spectrum-CloseButton.spectrum-CloseButton--sizeXL", ".spectrum-CloseButton.spectrum-CloseButton--staticBlack", ".spectrum-CloseButton.spectrum-CloseButton--staticWhite", ".spectrum-CloseButton::-moz-focus-inner", diff --git a/components/closebutton/themes/spectrum-two.css b/components/closebutton/themes/spectrum-two.css index 121db7ffcf8..c72d0df9f4a 100644 --- a/components/closebutton/themes/spectrum-two.css +++ b/components/closebutton/themes/spectrum-two.css @@ -32,23 +32,6 @@ --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100); - &.spectrum-CloseButton--sizeS { - --spectrum-closebutton-size: var(--spectrum-component-height-75); - } - - &, - &.spectrum-CloseButton--sizeM { - --spectrum-closebutton-size: var(--spectrum-component-height-100); - } - - &.spectrum-CloseButton--sizeL { - --spectrum-closebutton-size: var(--spectrum-component-height-200); - } - - &.spectrum-CloseButton--sizeXL { - --spectrum-closebutton-size: var(--spectrum-component-height-300); - } - &.spectrum-CloseButton--staticWhite { --spectrum-closebutton-static-background-color-default: transparent; --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-400); @@ -69,4 +52,21 @@ --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); } } + + .spectrum-CloseButton--sizeS { + --spectrum-closebutton-size: var(--spectrum-component-height-75); + } + + .spectrum-CloseButton, + .spectrum-CloseButton--sizeM { + --spectrum-closebutton-size: var(--spectrum-component-height-100); + } + + .spectrum-CloseButton--sizeL { + --spectrum-closebutton-size: var(--spectrum-component-height-200); + } + + .spectrum-CloseButton--sizeXL { + --spectrum-closebutton-size: var(--spectrum-component-height-300); + } } diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css index 632c4a99f99..477235d3d22 100644 --- a/components/coachindicator/index.css +++ b/components/coachindicator/index.css @@ -22,19 +22,19 @@ inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-inline-size)); block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-block-size)); +} - &.spectrum-CoachIndicator--quiet { - --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); - --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); - --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); - --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); - --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)); - --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)); - - --mod-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - --mod-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); - --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple)); - } +.spectrum-CoachIndicator--quiet { + --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); + --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); + --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); + --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); + --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)); + --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)); + + --mod-coach-indicator-top: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); + --mod-coach-indicator-left: calc((var(--mod-coach-indicator-min-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); + --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple)); } .spectrum-CoachIndicator-ring { diff --git a/components/coachindicator/metadata/metadata.json b/components/coachindicator/metadata/metadata.json index 3c79d552f1f..3b0b504de04 100644 --- a/components/coachindicator/metadata/metadata.json +++ b/components/coachindicator/metadata/metadata.json @@ -4,11 +4,11 @@ ".spectrum-CoachIndicator", ".spectrum-CoachIndicator--dark .spectrum-CoachIndicator-ring", ".spectrum-CoachIndicator--light .spectrum-CoachIndicator-ring", + ".spectrum-CoachIndicator--quiet", ".spectrum-CoachIndicator-ring", ".spectrum-CoachIndicator-ring:first-child", ".spectrum-CoachIndicator-ring:nth-child(2)", ".spectrum-CoachIndicator-ring:nth-child(3)", - ".spectrum-CoachIndicator.spectrum-CoachIndicator--quiet", "0%", "50%", "to" diff --git a/components/coachindicator/themes/spectrum-two.css b/components/coachindicator/themes/spectrum-two.css index ebcdc6afbac..de4c2efd445 100644 --- a/components/coachindicator/themes/spectrum-two.css +++ b/components/coachindicator/themes/spectrum-two.css @@ -43,10 +43,10 @@ --spectrum-coach-indicator-animation-keyframe-100-scale: 2; --spectrum-coach-indicator-animation-keyframe-100-opacity: 0; --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + } - &.spectrum-CoachIndicator--quiet { - --spectrum-coach-indicator-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); - --spectrum-coach-indicator-animation-name: pulse-quiet; - } + .spectrum-CoachIndicator--quiet { + --spectrum-coach-indicator-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); + --spectrum-coach-indicator-animation-name: pulse-quiet; } } diff --git a/components/divider/index.css b/components/divider/index.css index 9fc3f0c0ee6..7d2a69d7e81 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -32,22 +32,22 @@ border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); background-color: var(--mod-divider-background-color, var(--spectrum-divider-background-color)); +} - &.spectrum-Divider--sizeS { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-small); - } +.spectrum-Divider--sizeS { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-small); +} - &, - &.spectrum-Divider--sizeM { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); - } +.spectrum-Divider, +.spectrum-Divider--sizeM { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); +} - &.spectrum-Divider--sizeL { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); - --spectrum-divider-background-color: var(--spectrum-divider-background-color-large); - } +.spectrum-Divider--sizeL { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-large); } /* static white variant colors */ diff --git a/components/divider/metadata/metadata.json b/components/divider/metadata/metadata.json index b676b236111..1055bac0eba 100644 --- a/components/divider/metadata/metadata.json +++ b/components/divider/metadata/metadata.json @@ -2,16 +2,16 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Divider", + ".spectrum-Divider--sizeL", + ".spectrum-Divider--sizeM", + ".spectrum-Divider--sizeS", ".spectrum-Divider--staticBlack.spectrum-Divider--sizeL", ".spectrum-Divider--staticBlack.spectrum-Divider--sizeM", ".spectrum-Divider--staticBlack.spectrum-Divider--sizeS", ".spectrum-Divider--staticWhite.spectrum-Divider--sizeL", ".spectrum-Divider--staticWhite.spectrum-Divider--sizeM", ".spectrum-Divider--staticWhite.spectrum-Divider--sizeS", - ".spectrum-Divider--vertical", - ".spectrum-Divider.spectrum-Divider--sizeL", - ".spectrum-Divider.spectrum-Divider--sizeM", - ".spectrum-Divider.spectrum-Divider--sizeS" + ".spectrum-Divider--vertical" ], "modifiers": [ "--mod-divider-background-color", diff --git a/components/fieldlabel/metadata/metadata.json b/components/fieldlabel/metadata/metadata.json index 1b4085bbbf9..2b467b171d0 100644 --- a/components/fieldlabel/metadata/metadata.json +++ b/components/fieldlabel/metadata/metadata.json @@ -4,13 +4,13 @@ ".spectrum-FieldLabel", ".spectrum-FieldLabel--left", ".spectrum-FieldLabel--right", + ".spectrum-FieldLabel--sizeL", + ".spectrum-FieldLabel--sizeM", + ".spectrum-FieldLabel--sizeS", + ".spectrum-FieldLabel--sizeXL", ".spectrum-FieldLabel-requiredIcon", ".spectrum-FieldLabel.is-disabled", ".spectrum-FieldLabel.is-disabled .spectrum-FieldLabel-requiredIcon", - ".spectrum-FieldLabel.spectrum-FieldLabel--sizeL", - ".spectrum-FieldLabel.spectrum-FieldLabel--sizeM", - ".spectrum-FieldLabel.spectrum-FieldLabel--sizeS", - ".spectrum-FieldLabel.spectrum-FieldLabel--sizeXL", ".spectrum-FieldLabel:lang(ja)", ".spectrum-FieldLabel:lang(ko)", ".spectrum-FieldLabel:lang(zh)", diff --git a/components/fieldlabel/stories/form.template.js b/components/fieldlabel/stories/form.template.js index fca4c5eb913..c75456bc895 100644 --- a/components/fieldlabel/stories/form.template.js +++ b/components/fieldlabel/stories/form.template.js @@ -20,44 +20,37 @@ export const Template = ({ customStyles = {}, id = getRandomId("form"), items = [], -}, context) => html` -
({ ...a, [c]: true }), {}), - })} - id=${ifDefined(id)} - style=${styleMap(customStyles)} - > - ${repeat(items, (item) => item.id, ({ label, content, ...item }) => { - if (!content) return; +} = {}, context = {}) => { + return html` + ({ ...a, [c]: true }), {}), + })} + id=${ifDefined(id)} + style=${styleMap(customStyles)} + > + ${repeat(items, (item) => item.id, ({ label, content, ...item }) => { + if (!content) return; - return html` -
- ${when(label, () => FieldLabel({ - label, - forInput: item.id, - alignment: labelPosition === "side" ? fieldLabelAlignment : undefined, - }, context))} -
- ${when(label, () => FieldLabel({ - label, - forInput: item.id, - alignment: labelsAbove ? undefined : "left", - }, context))} -
- ${renderContent(content, { context })} -
-
- `; - })} - - `; + return html` +
+ ${when(label, () => FieldLabel({ + label, + forInput: item.id, + alignment: labelPosition === "side" ? fieldLabelAlignment : undefined, + }, context))} +
+ ${renderContent(content, { context })} +
+
+ `; + })} + + `; }; diff --git a/components/fieldlabel/themes/spectrum-two.css b/components/fieldlabel/themes/spectrum-two.css index f58541f2250..1f694a44f56 100644 --- a/components/fieldlabel/themes/spectrum-two.css +++ b/components/fieldlabel/themes/spectrum-two.css @@ -21,54 +21,54 @@ --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight); --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100); --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100); + } - &.spectrum-FieldLabel--sizeS { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); + .spectrum-FieldLabel--sizeS { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); - } + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); + } - &, - &.spectrum-FieldLabel--sizeM { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); + .spectrum-FieldLabel, + .spectrum-FieldLabel--sizeM { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); - } + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + } - &.spectrum-FieldLabel--sizeL { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100); + .spectrum-FieldLabel--sizeL { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100); - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); - } + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); + } - &.spectrum-FieldLabel--sizeXL { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200); + .spectrum-FieldLabel--sizeXL { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200); - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); - } + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); } } diff --git a/components/icon/index.css b/components/icon/index.css index 0718d7cce9d..6bc95fb0ddd 100644 --- a/components/icon/index.css +++ b/components/icon/index.css @@ -70,38 +70,40 @@ /* * Icon root class styles */ -.spectrum-Icon, -.spectrum-UIIcon { - /* XXS icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */ - &.spectrum-Icon--sizeXXS { - --spectrum-icon-size: var(--spectrum-icon-size-xxs); - } - &.spectrum-Icon--sizeXS { - --spectrum-icon-size: var(--spectrum-icon-size-xs); - } +/* XXS icon size is not within the design spec and is planned to be deprecated in Spectrum 2. */ +.spectrum-Icon--sizeXXS { + --spectrum-icon-size: var(--spectrum-icon-size-xxs); +} - &.spectrum-Icon--sizeS { - --spectrum-icon-size: var(--spectrum-icon-size-s); - } +.spectrum-Icon--sizeXS { + --spectrum-icon-size: var(--spectrum-icon-size-xs); +} - &, - &.spectrum-Icon--sizeM { - --spectrum-icon-size: var(--spectrum-icon-size-m); - } +.spectrum-Icon--sizeS { + --spectrum-icon-size: var(--spectrum-icon-size-s); +} - &.spectrum-Icon--sizeL { - --spectrum-icon-size: var(--spectrum-icon-size-l); - } +.spectrum-Icon, +.spectrum-UIIcon, +.spectrum-Icon--sizeM { + --spectrum-icon-size: var(--spectrum-icon-size-m); +} - &.spectrum-Icon--sizeXL { - --spectrum-icon-size: var(--spectrum-icon-size-xl); - } +.spectrum-Icon--sizeL { + --spectrum-icon-size: var(--spectrum-icon-size-l); +} - &.spectrum-Icon--sizeXXL { - --spectrum-icon-size: var(--spectrum-icon-size-xxl); - } +.spectrum-Icon--sizeXL { + --spectrum-icon-size: var(--spectrum-icon-size-xl); +} + +.spectrum-Icon--sizeXXL { + --spectrum-icon-size: var(--spectrum-icon-size-xxl); +} +.spectrum-Icon, +.spectrum-UIIcon { /* Don't catch clicks or hover, otherwise they may not escape the SVG. */ pointer-events: none; @@ -117,17 +119,14 @@ /* Fill should match the current text color. */ fill: currentColor; +} +.spectrum-Icon { img, svg { inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size))); block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size))); } - - /* Hide the SVG overflow in IE. */ - &:not(:root) { - overflow: hidden; - } } /* diff --git a/components/icon/metadata/metadata.json b/components/icon/metadata/metadata.json index 69f7b39768b..ac039a7f34b 100644 --- a/components/icon/metadata/metadata.json +++ b/components/icon/metadata/metadata.json @@ -4,17 +4,14 @@ ".spectrum-Icon", ".spectrum-Icon img", ".spectrum-Icon svg", - ".spectrum-Icon.spectrum-Icon--sizeL", - ".spectrum-Icon.spectrum-Icon--sizeM", - ".spectrum-Icon.spectrum-Icon--sizeS", - ".spectrum-Icon.spectrum-Icon--sizeXL", - ".spectrum-Icon.spectrum-Icon--sizeXS", - ".spectrum-Icon.spectrum-Icon--sizeXXL", - ".spectrum-Icon.spectrum-Icon--sizeXXS", - ".spectrum-Icon:not(:root)", + ".spectrum-Icon--sizeL", + ".spectrum-Icon--sizeM", + ".spectrum-Icon--sizeS", + ".spectrum-Icon--sizeXL", + ".spectrum-Icon--sizeXS", + ".spectrum-Icon--sizeXXL", + ".spectrum-Icon--sizeXXS", ".spectrum-UIIcon", - ".spectrum-UIIcon img", - ".spectrum-UIIcon svg", ".spectrum-UIIcon--large", ".spectrum-UIIcon--medium", ".spectrum-UIIcon-ArrowDown100", @@ -103,15 +100,7 @@ ".spectrum-UIIcon-Dash50", ".spectrum-UIIcon-Dash500", ".spectrum-UIIcon-Dash600", - ".spectrum-UIIcon-Dash75", - ".spectrum-UIIcon.spectrum-Icon--sizeL", - ".spectrum-UIIcon.spectrum-Icon--sizeM", - ".spectrum-UIIcon.spectrum-Icon--sizeS", - ".spectrum-UIIcon.spectrum-Icon--sizeXL", - ".spectrum-UIIcon.spectrum-Icon--sizeXS", - ".spectrum-UIIcon.spectrum-Icon--sizeXXL", - ".spectrum-UIIcon.spectrum-Icon--sizeXXS", - ".spectrum-UIIcon:not(:root)" + ".spectrum-UIIcon-Dash75" ], "modifiers": [ "--mod-icon-block-size", diff --git a/components/menu/metadata/metadata.json b/components/menu/metadata/metadata.json index 4faab37f778..6515bcd733e 100644 --- a/components/menu/metadata/metadata.json +++ b/components/menu/metadata/metadata.json @@ -25,6 +25,10 @@ ".spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon", ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", ".spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider)", + ".spectrum-Menu--sizeL", + ".spectrum-Menu--sizeM", + ".spectrum-Menu--sizeS", + ".spectrum-Menu--sizeXL", ".spectrum-Menu-back", ".spectrum-Menu-back .spectrum-Menu-sectionHeading", ".spectrum-Menu-back:focus-visible", @@ -131,10 +135,6 @@ ".spectrum-Menu.is-selectable .spectrum-Menu-item", ".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected", ".spectrum-Menu.js-focus-within .spectrum-Menu-item--collapsible.is-open[focus-within]", - ".spectrum-Menu.spectrum-Menu--sizeL", - ".spectrum-Menu.spectrum-Menu--sizeM", - ".spectrum-Menu.spectrum-Menu--sizeS", - ".spectrum-Menu.spectrum-Menu--sizeXL", ".spectrum-Menu:lang(ja)", ".spectrum-Menu:lang(ko)", ".spectrum-Menu:lang(zh)", diff --git a/components/menu/themes/spectrum-two.css b/components/menu/themes/spectrum-two.css index 3fb0e679559..852129afb8c 100644 --- a/components/menu/themes/spectrum-two.css +++ b/components/menu/themes/spectrum-two.css @@ -80,114 +80,114 @@ --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); + } - &.spectrum-Menu--sizeS { - --spectrum-menu-item-min-height: var(--spectrum-component-height-75); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75); + .spectrum-Menu--sizeS { + --spectrum-menu-item-min-height: var(--spectrum-component-height-75); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); - } + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); + } - &, - &.spectrum-Menu--sizeM { - --spectrum-menu-item-min-height: var(--spectrum-component-height-100); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + .spectrum-Menu, + .spectrum-Menu--sizeM { + --spectrum-menu-item-min-height: var(--spectrum-component-height-100); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); - } + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); + } - &.spectrum-Menu--sizeL { - --spectrum-menu-item-min-height: var(--spectrum-component-height-200); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200); + .spectrum-Menu--sizeL { + --spectrum-menu-item-min-height: var(--spectrum-component-height-200); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); - } + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); + } - &.spectrum-Menu--sizeXL { - --spectrum-menu-item-min-height: var(--spectrum-component-height-300); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300); + .spectrum-Menu--sizeXL { + --spectrum-menu-item-min-height: var(--spectrum-component-height-300); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300); - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); - } + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); } } diff --git a/components/progressbar/metadata/metadata.json b/components/progressbar/metadata/metadata.json index a9919a19b51..291394b3d83 100644 --- a/components/progressbar/metadata/metadata.json +++ b/components/progressbar/metadata/metadata.json @@ -2,11 +2,11 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Meter", + ".spectrum-Meter--sizeL", + ".spectrum-Meter--sizeS", ".spectrum-Meter.is-negative .spectrum-ProgressBar-fill", ".spectrum-Meter.is-notice .spectrum-ProgressBar-fill", ".spectrum-Meter.is-positive .spectrum-ProgressBar-fill", - ".spectrum-Meter.spectrum-Meter--sizeL", - ".spectrum-Meter.spectrum-Meter--sizeS", ".spectrum-ProgressBar", ".spectrum-ProgressBar .spectrum-ProgressBar-fill", ".spectrum-ProgressBar .spectrum-ProgressBar-label", @@ -136,6 +136,10 @@ "--system-meter-inline-size", "--system-meter-max-width", "--system-meter-min-width", + "--system-meter-progressbar-font-size", + "--system-meter-progressbar-size-default", + "--system-meter-progressbar-spacing-top-to-text", + "--system-meter-progressbar-thickness", "--system-meter-size-l-progressbar-font-size", "--system-meter-size-l-progressbar-size-default", "--system-meter-size-l-progressbar-spacing-top-to-text", diff --git a/components/progressbar/themes/spectrum-two.css b/components/progressbar/themes/spectrum-two.css index be63cf8e57b..474a5f36479 100644 --- a/components/progressbar/themes/spectrum-two.css +++ b/components/progressbar/themes/spectrum-two.css @@ -93,25 +93,25 @@ } .spectrum-Meter { - /* Meter */ --spectrum-meter-min-width: var(--spectrum-meter-minimum-width); --spectrum-meter-max-width: var(--spectrum-meter-maximum-width); --spectrum-meter-inline-size: var(--spectrum-meter-width); --spectrum-meter-top-to-text: var(--spectrum-component-top-to-text); + } - /* Meter only supports size S and L */ - &.spectrum-Meter--sizeS { - --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-small); - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - } - - &.spectrum-Meter--sizeL { - --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-large); - --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); - --spectrum-progressbar-font-size: var(--spectrum-font-size-100); - --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); - } + /* Meter only supports size S and L (default) */ + .spectrum-Meter--sizeS { + --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-small); + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); + --spectrum-progressbar-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + } + + .spectrum-Meter, + .spectrum-Meter--sizeL { + --spectrum-progressbar-thickness: var(--spectrum-meter-thickness-large); + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); + --spectrum-progressbar-font-size: var(--spectrum-font-size-100); + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); } } diff --git a/components/slider/metadata/metadata.json b/components/slider/metadata/metadata.json index 4475d130f1d..6376028dd45 100644 --- a/components/slider/metadata/metadata.json +++ b/components/slider/metadata/metadata.json @@ -19,6 +19,10 @@ ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-controls", ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label", ".spectrum-Slider--sideLabel .spectrum-Slider-value", + ".spectrum-Slider--sizeL", + ".spectrum-Slider--sizeM", + ".spectrum-Slider--sizeS", + ".spectrum-Slider--sizeXL", ".spectrum-Slider--tick", ".spectrum-Slider--tick .spectrum-Slider-controls", ".spectrum-Slider--tick .spectrum-Slider-handle", @@ -80,10 +84,6 @@ ".spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before", ".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before", ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle", - ".spectrum-Slider.spectrum-Slider--sizeL", - ".spectrum-Slider.spectrum-Slider--sizeM", - ".spectrum-Slider.spectrum-Slider--sizeS", - ".spectrum-Slider.spectrum-Slider--sizeXL", ".spectrum-Slider:dir(rtl)", ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused", diff --git a/components/slider/themes/spectrum-two.css b/components/slider/themes/spectrum-two.css index 1bbf3c05e6e..3e718639248 100644 --- a/components/slider/themes/spectrum-two.css +++ b/components/slider/themes/spectrum-two.css @@ -68,56 +68,56 @@ --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); --spectrum-slider-range-track-reset: 0; + } + + .spectrum-Slider--sizeS { + --spectrum-slider-font-size: var(--spectrum-font-size-75); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small); + --spectrum-slider-control-height: var(--spectrum-component-height-75); + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); + --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); + --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100); + } + + .spectrum-Slider, + .spectrum-Slider--sizeM { + --spectrum-slider-font-size: var(--spectrum-font-size-75); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --spectrum-slider-control-height: var(--spectrum-component-height-100); + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); + --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); + --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + } + + .spectrum-Slider--sizeL { + --spectrum-slider-font-size: var(--spectrum-font-size-100); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large); + --spectrum-slider-control-height: var(--spectrum-component-height-200); + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); + --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - &.spectrum-Slider--sizeS { - --spectrum-slider-font-size: var(--spectrum-font-size-75); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small); - --spectrum-slider-control-height: var(--spectrum-component-height-75); - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100); - } - - &, - &.spectrum-Slider--sizeM { - --spectrum-slider-font-size: var(--spectrum-font-size-75); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --spectrum-slider-control-height: var(--spectrum-component-height-100); - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - } - - &.spectrum-Slider--sizeL { - --spectrum-slider-font-size: var(--spectrum-font-size-100); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large); - --spectrum-slider-control-height: var(--spectrum-component-height-200); - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - - /* TODO: placeholder value for sideLabel variant value width */ - --spectrum-slider-value-inline-size: 18px; - } - - &.spectrum-Slider--sizeXL { - --spectrum-slider-font-size: var(--spectrum-font-size-200); - --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large); - --spectrum-slider-control-height: var(--spectrum-component-height-300); - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); - --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); - --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); - --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); - - /* TODO: placeholder value for sideLabel variant value width */ - --spectrum-slider-value-inline-size: 22px; - } + /* TODO: placeholder value for sideLabel variant value width */ + --spectrum-slider-value-inline-size: 18px; + } + + .spectrum-Slider--sizeXL { + --spectrum-slider-font-size: var(--spectrum-font-size-200); + --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large); + --spectrum-slider-control-height: var(--spectrum-component-height-300); + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large); + --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); + --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + + /* TODO: placeholder value for sideLabel variant value width */ + --spectrum-slider-value-inline-size: 22px; } } diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css index ae3c9eefe2f..d8c5a437248 100644 --- a/components/slider/themes/spectrum.css +++ b/components/slider/themes/spectrum.css @@ -23,22 +23,22 @@ --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100); --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100); --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + } - &.spectrum-Slider--sizeS { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - } + .spectrum-Slider--sizeS { + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); + } - &, - &.spectrum-Slider--sizeM { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - } + .spectrum-Slider, + .spectrum-Slider--sizeM { + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); + } - &.spectrum-Slider--sizeL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - } + .spectrum-Slider--sizeL { + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); + } - &.spectrum-Slider--sizeXL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - } + .spectrum-Slider--sizeXL { + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); } } diff --git a/components/swatch/metadata/metadata.json b/components/swatch/metadata/metadata.json index b92c7cf9393..96187282fdc 100644 --- a/components/swatch/metadata/metadata.json +++ b/components/swatch/metadata/metadata.json @@ -21,6 +21,10 @@ ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before", ".spectrum-Swatch--roundingNone:after", ".spectrum-Swatch--roundingNone:before", + ".spectrum-Swatch--sizeL", + ".spectrum-Swatch--sizeM", + ".spectrum-Swatch--sizeS", + ".spectrum-Swatch--sizeXS", ".spectrum-Swatch-disabledIcon", ".spectrum-Swatch-disabledIcon path:first-child", ".spectrum-Swatch-disabledIcon path:last-child", @@ -40,10 +44,6 @@ ".spectrum-Swatch.is-selected .spectrum-Swatch-fill", ".spectrum-Swatch.is-selected .spectrum-Swatch-fill:before", ".spectrum-Swatch.is-selected:before", - ".spectrum-Swatch.spectrum-Swatch--sizeL", - ".spectrum-Swatch.spectrum-Swatch--sizeM", - ".spectrum-Swatch.spectrum-Swatch--sizeS", - ".spectrum-Swatch.spectrum-Swatch--sizeXS", ".spectrum-Swatch:after", ".spectrum-Swatch:before", ".spectrum-Swatch:focus-visible:after", diff --git a/components/swatch/themes/spectrum-two.css b/components/swatch/themes/spectrum-two.css index f49cac0bd1a..829eb8a2ebb 100644 --- a/components/swatch/themes/spectrum-two.css +++ b/components/swatch/themes/spectrum-two.css @@ -35,30 +35,30 @@ --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); --spectrum-swatch-slash-icon-color: var(--spectrum-red-900); --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); + } - &.spectrum-Swatch--sizeXS { - --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); - } + .spectrum-Swatch--sizeXS { + --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); + } - &.spectrum-Swatch--sizeS { - --spectrum-swatch-size: var(--spectrum-swatch-size-small); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); - } + .spectrum-Swatch--sizeS { + --spectrum-swatch-size: var(--spectrum-swatch-size-small); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); + } - &, - &.spectrum-Swatch--sizeM { - --spectrum-swatch-size: var(--spectrum-swatch-size-medium); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); - } + .spectrum-Swatch, + .spectrum-Swatch--sizeM { + --spectrum-swatch-size: var(--spectrum-swatch-size-medium); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); + } - &.spectrum-Swatch--sizeL { - --spectrum-swatch-size: var(--spectrum-swatch-size-large); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large); - } + .spectrum-Swatch--sizeL { + --spectrum-swatch-size: var(--spectrum-swatch-size-large); + --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large); } } diff --git a/components/tag/metadata/metadata.json b/components/tag/metadata/metadata.json index f3d88831f41..29773be202a 100644 --- a/components/tag/metadata/metadata.json +++ b/components/tag/metadata/metadata.json @@ -37,8 +37,7 @@ ".spectrum-Tag:active", ".spectrum-Tag:focus-visible", ".spectrum-Tag:focus-visible:after", - ".spectrum-Tag:hover", - ":scope" + ".spectrum-Tag:hover" ], "modifiers": [ "--mod-tag-animation-duration", @@ -282,22 +281,6 @@ "--spectrum-workflow-icon-size-75" ], "system-theme": [ - "--system-scope-tag-avatar-spacing-block-end", - "--system-scope-tag-avatar-spacing-block-start", - "--system-scope-tag-avatar-spacing-inline-end", - "--system-scope-tag-clear-button-spacing-block", - "--system-scope-tag-clear-button-spacing-inline-end", - "--system-scope-tag-clear-button-spacing-inline-start", - "--system-scope-tag-corner-radius", - "--system-scope-tag-font-size", - "--system-scope-tag-height", - "--system-scope-tag-icon-size", - "--system-scope-tag-icon-spacing-block-end", - "--system-scope-tag-icon-spacing-block-start", - "--system-scope-tag-icon-spacing-inline-end", - "--system-scope-tag-label-spacing-block", - "--system-scope-tag-label-spacing-inline-end", - "--system-scope-tag-spacing-inline-start", "--system-tag-animation-duration", "--system-tag-avatar-opacity-disabled", "--system-tag-avatar-spacing-block-end", @@ -343,6 +326,7 @@ "--system-tag-border-color-selected-hover", "--system-tag-border-width", "--system-tag-clear-button-spacing-block", + "--system-tag-clear-button-spacing-inline-end", "--system-tag-clear-button-spacing-inline-start", "--system-tag-content-color", "--system-tag-content-color-active", @@ -356,6 +340,7 @@ "--system-tag-content-color-invalid-hover", "--system-tag-content-color-invalid-selected", "--system-tag-content-color-selected", + "--system-tag-corner-radius", "--system-tag-focus-ring-color", "--system-tag-focus-ring-gap", "--system-tag-focus-ring-thickness", @@ -368,6 +353,7 @@ "--system-tag-label-font-weight", "--system-tag-label-line-height", "--system-tag-label-spacing-block", + "--system-tag-label-spacing-inline-end", "--system-tag-size-l-avatar-spacing-block-end", "--system-tag-size-l-avatar-spacing-block-start", "--system-tag-size-l-avatar-spacing-inline-end", @@ -427,7 +413,8 @@ "--system-tag-size-small-clear-button-spacing-inline-end", "--system-tag-size-small-corner-radius", "--system-tag-size-small-label-spacing-inline-end", - "--system-tag-size-small-spacing-inline-start" + "--system-tag-size-small-spacing-inline-start", + "--system-tag-spacing-inline-start" ], "passthroughs": [ "--mod-avatar-opacity-disabled", diff --git a/components/tag/themes/spectrum-two.css b/components/tag/themes/spectrum-two.css index b120d30cf03..223fd71336f 100644 --- a/components/tag/themes/spectrum-two.css +++ b/components/tag/themes/spectrum-two.css @@ -174,7 +174,7 @@ --spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-small-clear-button-spacing-inline-end); } - &, + .spectrum-Tag, .spectrum-Tag--sizeM { --spectrum-tag-height: var(--spectrum-component-height-100); --spectrum-tag-font-size: var(--spectrum-font-size-100); diff --git a/components/textfield/metadata/metadata.json b/components/textfield/metadata/metadata.json index 5596b52ef03..46e393439f1 100644 --- a/components/textfield/metadata/metadata.json +++ b/components/textfield/metadata/metadata.json @@ -47,6 +47,10 @@ ".spectrum-Textfield--sideLabel .spectrum-Textfield-input", ".spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", ".spectrum-Textfield--sideLabel:after", + ".spectrum-Textfield--sizeL", + ".spectrum-Textfield--sizeM", + ".spectrum-Textfield--sizeS", + ".spectrum-Textfield--sizeXL", ".spectrum-Textfield-characterCount", ".spectrum-Textfield-input", ".spectrum-Textfield-input:-moz-ui-invalid", @@ -84,10 +88,6 @@ ".spectrum-Textfield.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input", ".spectrum-Textfield.spectrum-Textfield--quiet:after", ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.spectrum-Textfield--sizeL", - ".spectrum-Textfield.spectrum-Textfield--sizeM", - ".spectrum-Textfield.spectrum-Textfield--sizeS", - ".spectrum-Textfield.spectrum-Textfield--sizeXL", ".spectrum-Textfield:hover .spectrum-Textfield-input", ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder" ], diff --git a/components/textfield/themes/spectrum-two.css b/components/textfield/themes/spectrum-two.css index 47b67ed990b..ebb036ef895 100644 --- a/components/textfield/themes/spectrum-two.css +++ b/components/textfield/themes/spectrum-two.css @@ -95,99 +95,99 @@ /* Text Area / Multiline */ --spectrum-text-area-min-inline-size: var(--spectrum-text-area-minimum-width); --spectrum-text-area-min-block-size: var(--spectrum-text-area-minimum-height); + } + + /********* Text field t-shirt sizes *********/ + .spectrum-Textfield--sizeS { + --spectrum-textfield-height: var(--spectrum-component-height-75); + --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); + --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75); + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75); + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75); + --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); + --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); + --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); + + /* Text Area / Multiline size small */ + --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75); + } + + .spectrum-Textfield, + .spectrum-Textfield--sizeM { + --spectrum-textfield-height: var(--spectrum-component-height-100); + --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); + --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); + --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); + --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); + --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); + + /* Text Area / Multiline size medium */ + --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + } + + .spectrum-Textfield--sizeL { + --spectrum-textfield-height: var(--spectrum-component-height-200); + --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); + --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200); + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200); + --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); + --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); + --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100); + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); + --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); + + /* Text Area / Multiline size large */ + --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-200); + } - /********* Text field t-shirt sizes *********/ - &.spectrum-Textfield--sizeS { - --spectrum-textfield-height: var(--spectrum-component-height-75); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-75); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-75); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-small); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-small); - - /* Text Area / Multiline size small */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-75); - } - - &, - &.spectrum-Textfield--sizeM { - --spectrum-textfield-height: var(--spectrum-component-height-100); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-75); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-medium); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-medium); - - /* Text Area / Multiline size medium */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100); - } - - &.spectrum-Textfield--sizeL { - --spectrum-textfield-height: var(--spectrum-component-height-200); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-200); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-200); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-100); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-large); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-large); - - /* Text Area / Multiline size large */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-200); - } - - &.spectrum-Textfield--sizeXL { - --spectrum-textfield-height: var(--spectrum-component-height-300); - --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); - --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300); - --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); - --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300); - --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300); - --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); - --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); - --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200); - --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); - --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); - --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); - - /* Text Area / Multiline size extra large */ - --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300); - } + .spectrum-Textfield--sizeXL { + --spectrum-textfield-height: var(--spectrum-component-height-300); + --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); + --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); + --spectrum-textfield-placeholder-font-size: var(--spectrum-font-size-300); + --spectrum-textfield-spacing-inline: var(--spectrum-component-edge-to-text-200); + --spectrum-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-300); + --spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); + --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); + --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200); + --spectrum-textfield-character-count-spacing-block: var(--spectrum-component-bottom-to-text-200); + --spectrum-textfield-character-count-spacing-block-quiet: var(--spectrum-character-count-to-field-quiet-extra-large); + --spectrum-textfield-character-count-spacing-block-side: var(--spectrum-side-label-character-count-top-margin-extra-large); + + /* Text Area / Multiline size extra large */ + --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300); } } diff --git a/tokens/dist/css/components/express/closebutton.css b/tokens/dist/css/components/express/closebutton.css index 2fd7d965bd8..3cb1a5946dc 100644 --- a/tokens/dist/css/components/express/closebutton.css +++ b/tokens/dist/css/components/express/closebutton.css @@ -25,11 +25,6 @@ --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-close-button-animation-duration: var(--spectrum-animation-duration-100); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); --system-close-button-static-white-static-background-color-default: transparent; --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300); --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400); @@ -44,4 +39,9 @@ --system-close-button-static-black-icon-color-default: var(--spectrum-black); --system-close-button-static-black-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); --system-close-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); } diff --git a/tokens/dist/css/components/express/index.css b/tokens/dist/css/components/express/index.css index 6a86a685694..8eb29f3bfeb 100644 --- a/tokens/dist/css/components/express/index.css +++ b/tokens/dist/css/components/express/index.css @@ -1186,11 +1186,6 @@ --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-close-button-animation-duration: var(--spectrum-animation-duration-100); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); --system-close-button-static-white-static-background-color-default: transparent; --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300); --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400); @@ -1205,6 +1200,11 @@ --system-close-button-static-black-icon-color-default: var(--spectrum-black); --system-close-button-static-black-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); --system-close-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); @@ -2267,9 +2267,13 @@ --system-meter-size-s-progressbar-size-default: var(--system-progress-bar-size-2400); --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); --system-meter-size-s-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-progressbar-thickness: var(--spectrum-meter-thickness-large); --system-meter-size-l-progressbar-thickness: var(--spectrum-meter-thickness-large); + --system-meter-progressbar-size-default: var(--system-progress-bar-size-2500); --system-meter-size-l-progressbar-size-default: var(--system-progress-bar-size-2500); + --system-meter-progressbar-font-size: var(--spectrum-font-size-100); --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); + --system-meter-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); --system-progress-circle-track-border-color: var(--spectrum-gray-300); --system-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); @@ -3140,37 +3144,25 @@ --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); - --system-scope-tag-height: var(--spectrum-component-height-100); --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-scope-tag-font-size: var(--spectrum-font-size-100); --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-scope-tag-icon-size: var(--spectrum-workflow-icon-size-100); --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-scope-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --system-scope-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --system-scope-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --system-scope-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --system-scope-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-scope-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --system-scope-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --system-scope-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-scope-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-scope-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-scope-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); - --system-scope-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); - --system-scope-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-l-height: var(--spectrum-component-height-200); --system-tag-size-l-font-size: var(--spectrum-font-size-200); diff --git a/tokens/dist/css/components/express/progressbar.css b/tokens/dist/css/components/express/progressbar.css index 9c8788178e0..9f85889919d 100644 --- a/tokens/dist/css/components/express/progressbar.css +++ b/tokens/dist/css/components/express/progressbar.css @@ -61,8 +61,12 @@ --system-meter-size-s-progressbar-size-default: var(--system-progress-bar-size-2400); --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); --system-meter-size-s-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-progressbar-thickness: var(--spectrum-meter-thickness-large); --system-meter-size-l-progressbar-thickness: var(--spectrum-meter-thickness-large); + --system-meter-progressbar-size-default: var(--system-progress-bar-size-2500); --system-meter-size-l-progressbar-size-default: var(--system-progress-bar-size-2500); + --system-meter-progressbar-font-size: var(--spectrum-font-size-100); --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); + --system-meter-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); } diff --git a/tokens/dist/css/components/express/tag.css b/tokens/dist/css/components/express/tag.css index 4715acd23bb..ef16f38acdf 100644 --- a/tokens/dist/css/components/express/tag.css +++ b/tokens/dist/css/components/express/tag.css @@ -110,37 +110,25 @@ --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); - --system-scope-tag-height: var(--spectrum-component-height-100); --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-scope-tag-font-size: var(--spectrum-font-size-100); --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-scope-tag-icon-size: var(--spectrum-workflow-icon-size-100); --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-scope-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --system-scope-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --system-scope-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --system-scope-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --system-scope-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-scope-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --system-scope-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --system-scope-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-scope-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-scope-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-scope-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); - --system-scope-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); - --system-scope-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-l-height: var(--spectrum-component-height-200); --system-tag-size-l-font-size: var(--spectrum-font-size-200); diff --git a/tokens/dist/css/components/spectrum-two/closebutton.css b/tokens/dist/css/components/spectrum-two/closebutton.css index 89a74c36f73..bd9fc29dd3c 100644 --- a/tokens/dist/css/components/spectrum-two/closebutton.css +++ b/tokens/dist/css/components/spectrum-two/closebutton.css @@ -25,11 +25,6 @@ --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-close-button-animation-duration: var(--spectrum-animation-duration-100); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); --system-close-button-static-white-static-background-color-default: transparent; --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-400); --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-500); @@ -44,4 +39,9 @@ --system-close-button-static-black-icon-color-default: var(--spectrum-black); --system-close-button-static-black-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); --system-close-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); } diff --git a/tokens/dist/css/components/spectrum-two/progressbar.css b/tokens/dist/css/components/spectrum-two/progressbar.css index e866a140bfe..bc8ba319203 100644 --- a/tokens/dist/css/components/spectrum-two/progressbar.css +++ b/tokens/dist/css/components/spectrum-two/progressbar.css @@ -61,8 +61,12 @@ --system-meter-size-s-progressbar-size-default: var(--system-progress-bar-size-2400); --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); --system-meter-size-s-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-progressbar-thickness: var(--spectrum-meter-thickness-large); --system-meter-size-l-progressbar-thickness: var(--spectrum-meter-thickness-large); + --system-meter-progressbar-size-default: var(--system-progress-bar-size-2500); --system-meter-size-l-progressbar-size-default: var(--system-progress-bar-size-2500); + --system-meter-progressbar-font-size: var(--spectrum-font-size-100); --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); + --system-meter-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); } diff --git a/tokens/dist/css/components/spectrum-two/tag.css b/tokens/dist/css/components/spectrum-two/tag.css index e203642e8cf..d0fbbdf2c90 100644 --- a/tokens/dist/css/components/spectrum-two/tag.css +++ b/tokens/dist/css/components/spectrum-two/tag.css @@ -82,18 +82,6 @@ --system-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus); --system-tag-content-color-emphasized: var(--spectrum-white); --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --system-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --system-tag-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); - --system-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); --system-tag-size-s-height: var(--spectrum-component-height-75); --system-tag-size-s-font-size: var(--spectrum-font-size-75); --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); @@ -110,37 +98,37 @@ --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); - --system-scope-tag-height: var(--spectrum-component-height-100); + --system-tag-height: var(--spectrum-component-height-100); --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-scope-tag-font-size: var(--spectrum-font-size-100); + --system-tag-font-size: var(--spectrum-font-size-100); --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-scope-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-scope-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); + --system-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --system-scope-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); + --system-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --system-scope-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --system-scope-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); + --system-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --system-scope-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-scope-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --system-scope-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); + --system-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --system-scope-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-scope-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-scope-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-scope-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); - --system-scope-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); - --system-scope-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-l-height: var(--spectrum-component-height-200); --system-tag-size-l-font-size: var(--spectrum-font-size-200); diff --git a/tokens/dist/css/components/spectrum/closebutton.css b/tokens/dist/css/components/spectrum/closebutton.css index 769feaf7f63..c436d7d1285 100644 --- a/tokens/dist/css/components/spectrum/closebutton.css +++ b/tokens/dist/css/components/spectrum/closebutton.css @@ -25,11 +25,6 @@ --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-close-button-animation-duration: var(--spectrum-animation-duration-100); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); --system-close-button-static-white-static-background-color-default: transparent; --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300); --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400); @@ -44,4 +39,9 @@ --system-close-button-static-black-icon-color-default: var(--spectrum-black); --system-close-button-static-black-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); --system-close-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); } diff --git a/tokens/dist/css/components/spectrum/index.css b/tokens/dist/css/components/spectrum/index.css index f182b12a9fa..cd4815e0af2 100644 --- a/tokens/dist/css/components/spectrum/index.css +++ b/tokens/dist/css/components/spectrum/index.css @@ -1186,11 +1186,6 @@ --system-close-button-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --system-close-button-focus-indicator-color: var(--spectrum-focus-indicator-color); --system-close-button-animation-duration: var(--spectrum-animation-duration-100); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); --system-close-button-static-white-static-background-color-default: transparent; --system-close-button-static-white-static-background-color-hover: var(--spectrum-transparent-white-300); --system-close-button-static-white-static-background-color-down: var(--spectrum-transparent-white-400); @@ -1205,6 +1200,11 @@ --system-close-button-static-black-icon-color-default: var(--spectrum-black); --system-close-button-static-black-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); --system-close-button-static-black-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); --system-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); --system-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3); @@ -2267,9 +2267,13 @@ --system-meter-size-s-progressbar-size-default: var(--system-progress-bar-size-2400); --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); --system-meter-size-s-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-progressbar-thickness: var(--spectrum-meter-thickness-large); --system-meter-size-l-progressbar-thickness: var(--spectrum-meter-thickness-large); + --system-meter-progressbar-size-default: var(--system-progress-bar-size-2500); --system-meter-size-l-progressbar-size-default: var(--system-progress-bar-size-2500); + --system-meter-progressbar-font-size: var(--spectrum-font-size-100); --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); + --system-meter-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); --system-progress-circle-track-border-color: var(--spectrum-gray-300); --system-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); @@ -3140,37 +3144,25 @@ --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); - --system-scope-tag-height: var(--spectrum-component-height-100); --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-scope-tag-font-size: var(--spectrum-font-size-100); --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-scope-tag-icon-size: var(--spectrum-workflow-icon-size-100); --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-scope-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --system-scope-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --system-scope-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --system-scope-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --system-scope-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-scope-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --system-scope-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --system-scope-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-scope-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-scope-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-scope-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); - --system-scope-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); - --system-scope-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-l-height: var(--spectrum-component-height-200); --system-tag-size-l-font-size: var(--spectrum-font-size-200); diff --git a/tokens/dist/css/components/spectrum/progressbar.css b/tokens/dist/css/components/spectrum/progressbar.css index 882b6781f8e..9ec7b2c65cc 100644 --- a/tokens/dist/css/components/spectrum/progressbar.css +++ b/tokens/dist/css/components/spectrum/progressbar.css @@ -61,8 +61,12 @@ --system-meter-size-s-progressbar-size-default: var(--system-progress-bar-size-2400); --system-meter-size-s-progressbar-font-size: var(--spectrum-font-size-75); --system-meter-size-s-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-progressbar-thickness: var(--spectrum-meter-thickness-large); --system-meter-size-l-progressbar-thickness: var(--spectrum-meter-thickness-large); + --system-meter-progressbar-size-default: var(--system-progress-bar-size-2500); --system-meter-size-l-progressbar-size-default: var(--system-progress-bar-size-2500); + --system-meter-progressbar-font-size: var(--spectrum-font-size-100); --system-meter-size-l-progressbar-font-size: var(--spectrum-font-size-100); + --system-meter-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); --system-meter-size-l-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); } diff --git a/tokens/dist/css/components/spectrum/tag.css b/tokens/dist/css/components/spectrum/tag.css index f894a0ab4a9..a5c1f395dae 100644 --- a/tokens/dist/css/components/spectrum/tag.css +++ b/tokens/dist/css/components/spectrum/tag.css @@ -110,37 +110,25 @@ --system-tag-size-s-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); --system-tag-size-s-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); --system-tag-size-s-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); - --system-scope-tag-height: var(--spectrum-component-height-100); --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-scope-tag-font-size: var(--spectrum-font-size-100); --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-scope-tag-icon-size: var(--spectrum-workflow-icon-size-100); --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-scope-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); --system-tag-size-m-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100); - --system-scope-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); --system-tag-size-m-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium); - --system-scope-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100); - --system-scope-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); --system-tag-size-m-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100); - --system-scope-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-scope-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium); - --system-scope-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); --system-tag-size-m-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium); - --system-scope-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); --system-tag-size-m-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-scope-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); --system-tag-size-m-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-scope-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); --system-tag-size-m-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-scope-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --system-tag-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); --system-tag-size-m-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); - --system-scope-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --system-tag-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); --system-tag-size-m-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); - --system-scope-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --system-tag-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-m-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); --system-tag-size-l-height: var(--spectrum-component-height-200); --system-tag-size-l-font-size: var(--spectrum-font-size-200);