Skip to content

Commit

Permalink
fix: align selector specficity with main
Browse files Browse the repository at this point in the history
  • Loading branch information
@castastrophe
castastrophe committed Oct 4, 2024
1 parent 635308a commit bb326d1
Show file tree
Hide file tree
Showing 39 changed files with 661 additions and 644 deletions.
85 changes: 85 additions & 0 deletions .changeset/nine-pots-grin.md
View file
Original file line number Diff line number Diff line change
@@ -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
8 changes: 4 additions & 4 deletions components/checkbox/metadata/metadata.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
64 changes: 32 additions & 32 deletions components/checkbox/themes/spectrum-two.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
8 changes: 4 additions & 4 deletions components/closebutton/metadata/metadata.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
Expand Down Expand Up @@ -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",
Expand Down
34 changes: 17 additions & 17 deletions components/closebutton/themes/spectrum-two.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
}
}
24 changes: 12 additions & 12 deletions components/coachindicator/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion components/coachindicator/metadata/metadata.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions components/coachindicator/themes/spectrum-two.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
26 changes: 13 additions & 13 deletions components/divider/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
8 changes: 4 additions & 4 deletions components/divider/metadata/metadata.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
8 changes: 4 additions & 4 deletions components/fieldlabel/metadata/metadata.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
Expand Down
Loading

0 comments on commit bb326d1

Please sign in to comment.