fix: deprecate transform logical plugin for vanilla values

components/accordion/index.css

@@ -621,19 +621,23 @@ governing permissions and limitations under the License.
 
 .spectrum-Accordion-item {
  &.is-open {
- > .spectrum-Accordion-itemHeading
- > .spectrum-Accordion-itemIconContainer
- > .spectrum-Accordion-itemIndicator {
- /* stylelint-disable declaration-property-value-no-unknown */
- transform: logical rotate(90deg);
- /* stylelint-enable declaration-property-value-no-unknown */
+ > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator {
+ transform: rotate(90deg);
+
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0) rotate(90deg);
+ }
  }
 
- > .spectrum-Accordion-itemIconContainer
- > .spectrum-Accordion-itemIndicator {
- /* stylelint-disable declaration-property-value-no-unknown */
- transform: logical rotate(90deg);
- /* stylelint-enable declaration-property-value-no-unknown */
+
+ > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator {
+ transform: rotate(90deg);
+
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0) rotate(90deg);
+ }
  }
 
  > .spectrum-Accordion-itemContent {

components/actionbutton/index.css

@@ -26,13 +26,13 @@ governing permissions and limitations under the License.
  --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
  --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
  --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap));
- 
+
  &.is-selected {
  --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
  --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
  --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
  --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus));
- 
+
  --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50));
  --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50));
  --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50));
@@ -43,7 +43,7 @@ governing permissions and limitations under the License.
  --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover));
  --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down));
  --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus));
- 
+
  --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white));
  --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white));
  --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white));
@@ -253,7 +253,10 @@ a.spectrum-ActionButton {
 
  color: inherit;
 
- transform: logical rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0);
+ }
 }
 
 /* special cases for focus-ring */

components/assetlist/index.css

@@ -153,7 +153,10 @@ governing permissions and limitations under the License.
  display: none;
  transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation));
 
- transform: logical rotate(0deg);
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0);
+ }
 }
 
 .spectrum-AssetList-itemLabel {
@@ -182,4 +185,3 @@ governing permissions and limitations under the License.
  }
  }
 }
-

components/breadcrumb/index.css

@@ -153,7 +153,10 @@ governing permissions and limitations under the License.
  margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block));
  margin-inline: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline));
 
- transform: logical scale(1) rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0) scale(1);
+ }
 
  opacity: 1;
  color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color)));

components/calendar/index.css

@@ -86,7 +86,10 @@ governing permissions and limitations under the License.
 
 .spectrum-Calendar-prevMonth,
 .spectrum-Calendar-nextMonth {
- transform: logical rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0);
+ }
 
  &:not([disabled]) {
  color: var(--highcontrast-calendar-button-icon-color, var(--mod-calendar-button-icon-color, var(--spectrum-calendar-button-icon-color)));

components/pagination/index.css

@@ -49,9 +49,17 @@ governing permissions and limitations under the License.
 
 /* Correct the direction of the arrows when viewing right-to-left */
 .spectrum-Pagination-prevButton .spectrum-Icon {
- transform: logical rotate(180deg);
+ transform: rotate(180deg);
+
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0) rotate(180deg);
+ }
 }
 
 .spectrum-Pagination-nextButton .spectrum-Icon {
- transform: logical rotate(0deg);
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0);
+ }
 }

components/slider/index.css

@@ -286,8 +286,10 @@ governing permissions and limitations under the License.
  block-size: 100%;
 
  /* Flip the ramp automatically for RTL */
- /* stylelint-disable-next-line declaration-property-value-no-unknown */
- transform: logical rotate(0deg);
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0);
+ }
  }
 }
 

components/table/index.css

@@ -101,7 +101,7 @@ governing permissions and limitations under the License.
  --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular);
  --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300);
 
- /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341 
+ /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341
  and for modifying emphasized/non-emphasized background colors from the root element. */
  --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color)));
  --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized)));
@@ -512,14 +512,14 @@ governing permissions and limitations under the License.
 }
 
 /* Outside border, row divider lines, and rounded corners:
- The tbody tag doesn't allow setting a border or border-radius. To make them work, border styles are 
+ The tbody tag doesn't allow setting a border or border-radius. To make them work, border styles are
  instead applied to the individual cells around the outside, while using border-collapse: separate. */
 
 /* Row divider lines */
 .spectrum-Table-cell {
  border-block-start:
  var(--mod-table-border-width, var(--spectrum-table-border-width))
- solid 
+ solid
  var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color)));
 }
 
@@ -528,26 +528,26 @@ governing permissions and limitations under the License.
  &:first-child .spectrum-Table-cell {
  border-block-start:
  var(--mod-table-border-width, var(--spectrum-table-border-width))
- solid 
+ solid
  var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
  }
 
  &:last-child .spectrum-Table-cell {
  border-block-end:
  var(--mod-table-border-width, var(--spectrum-table-border-width))
- solid 
+ solid
  var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
  }
 
  .spectrum-Table-cell:first-child {
- border-inline-start: 
- var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) 
- solid 
+ border-inline-start:
+ var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width))
+ solid
  var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
  }
 
  .spectrum-Table-cell:last-child {
- border-inline-end: 
+ border-inline-end:
  var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width))
  solid
  var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
@@ -592,7 +592,7 @@ governing permissions and limitations under the License.
  );
  padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text));
  padding-inline: calc(
- var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - 
+ var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) -
  var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width))
  );
 }
@@ -659,7 +659,7 @@ governing permissions and limitations under the License.
  --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color);
  --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color);
  --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color);
- 
+
  &:hover,
  &:focus-visible,
  &.is-focused {
@@ -684,7 +684,7 @@ governing permissions and limitations under the License.
 
  /* Make sure negative offset outline is not covered by borders. */
  --mod-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent);
- 
+
  .spectrum-Table-cell {
  border-top-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color)));
  }
@@ -746,12 +746,12 @@ governing permissions and limitations under the License.
  /* The calc subtraction is because the --spectrum-table-checkbox-to-text spacing value
  includes the inline start padding in the adjacent cell. */
  padding-inline-end: calc(
- var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - 
+ var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) -
  var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content))
  );
  /* Block spacing must be moved to calculated margin on the checkbox element. */
  padding-block: 0;
- 
+
  .spectrum-Table-checkbox {
  --mod-checkbox-spacing: 0px;
  min-block-size: initial;
@@ -813,10 +813,10 @@ governing permissions and limitations under the License.
  border-block: var(--mod-table-border-width, var(--spectrum-table-border-width))
  solid
  var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
- border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) 
- solid 
+ border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width))
+ solid
  var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color)));
- 
+
  &.spectrum-Table--quiet {
  --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-global-color-gray-100)));
  border-block-start: none;
@@ -825,8 +825,8 @@ governing permissions and limitations under the License.
  /* Make sure shift-tab reverse keyboard navigation keeps the whole cell in focus.
  --mod-table-current-header-height should be dynamically updated with JS to match the table header height. */
  scroll-padding-top: var(--mod-table-current-header-height, calc(
- (var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + 
- var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + 
+ (var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) +
+ var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) +
  var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) +
  var(--mod-table-border-width, var(--spectrum-table-border-width))
  ));
@@ -849,7 +849,7 @@ governing permissions and limitations under the License.
  border-block-start: none;
  border-radius: 0;
  }
- 
+
  &:last-child .spectrum-Table-cell {
  border-block-end: none;
  border-radius: 0;
@@ -858,7 +858,7 @@ governing permissions and limitations under the License.
  .spectrum-Table-cell:first-child {
  border-inline-start: none;
  }
- 
+
  .spectrum-Table-cell:last-child {
  border-inline-end: none;
  }
@@ -896,8 +896,8 @@ governing permissions and limitations under the License.
  .spectrum-Table-disclosureIcon {
  margin-inline: var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing));
  margin-block-start: max(0px, calc(
- (var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)) - 
- var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size))) 
+ (var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)) -
+ var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)))
  / 2
  )
  );
@@ -943,10 +943,18 @@ governing permissions and limitations under the License.
  border: 0;
  color: var(--spectrum-table-icon-color);
 
- transform: logical rotate(0deg);
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0);
+ }
 
  &[aria-expanded="true"]{
- transform: logical rotate(90deg);
+ transform: rotate(90deg);
+
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0) rotate(90deg);
+ }
  }
 
  &::after {
@@ -1008,7 +1016,7 @@ governing permissions and limitations under the License.
  ) / 2
  ));
  --table-thumbnail-cell-block-spacing: max(
- var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)), 
+ var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)),
  var(--table-thumbnail-inner-minimum-block-spacing)
  );
  }
@@ -1025,7 +1033,7 @@ governing permissions and limitations under the License.
  .spectrum-Thumbnail {
  flex-grow: 0;
  flex-shrink: 0;
- margin-inline-end: var(--mod-table-thumbnail-to-text, var(--spectrum-table-thumbnail-to-text)); 
+ margin-inline-end: var(--mod-table-thumbnail-to-text, var(--spectrum-table-thumbnail-to-text));
  line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height));
  }
 

components/treeview/index.css

@@ -187,7 +187,12 @@ governing permissions and limitations under the License.
  &.is-open {
  > .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator {
  /* Rotate the chevron */
- transform: logical rotate(90deg);
+ transform: rotate(90deg);
+
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0) rotate(90deg);
+ }
  }
 
  > .spectrum-TreeView {
@@ -337,9 +342,13 @@ governing permissions and limitations under the License.
  padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding));
  margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, var(--spectrum-treeview-indicator-margin-inline-start));
 
- transform: logical rotate(0deg);
  transition: transform ease var(--mod-treeview-indicator-animation-duration, var(--spectrum-treeview-indicator-animation-duration));
  pointer-events: all;
+
+ [dir="rtl"] &,
+ &:dir(rtl) {
+ transform: matrix(-1, 0, 0, 1, 0, 0);
+ }
 }
 
 /* Section headings */
@@ -408,4 +417,4 @@ governing permissions and limitations under the License.
  flex-shrink: 0;
  margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap));
  }
-}
+}