diff --git a/.yarn/cache/postcss-sorting-npm-5.0.1-0decb0526c-0a410afab4.zip b/.yarn/cache/postcss-sorting-npm-5.0.1-0decb0526c-0a410afab4.zip deleted file mode 100644 index b82175da872d..000000000000 Binary files a/.yarn/cache/postcss-sorting-npm-5.0.1-0decb0526c-0a410afab4.zip and /dev/null differ diff --git a/.yarn/cache/stylelint-config-idiomatic-order-npm-8.1.0-c769509414-f83ebfb90a.zip b/.yarn/cache/stylelint-config-idiomatic-order-npm-8.1.0-c769509414-f83ebfb90a.zip deleted file mode 100644 index a2d295861a55..000000000000 Binary files a/.yarn/cache/stylelint-config-idiomatic-order-npm-8.1.0-c769509414-f83ebfb90a.zip and /dev/null differ diff --git a/.yarn/cache/stylelint-config-idiomatic-order-npm-9.0.0-62b2b267ed-ff94270244.zip b/.yarn/cache/stylelint-config-idiomatic-order-npm-9.0.0-62b2b267ed-ff94270244.zip new file mode 100644 index 000000000000..d28428449a21 Binary files /dev/null and b/.yarn/cache/stylelint-config-idiomatic-order-npm-9.0.0-62b2b267ed-ff94270244.zip differ diff --git a/.yarn/cache/stylelint-order-npm-3.1.1-a1e6477dbd-35388f28bd.zip b/.yarn/cache/stylelint-order-npm-3.1.1-a1e6477dbd-35388f28bd.zip deleted file mode 100644 index b46765be8b88..000000000000 Binary files a/.yarn/cache/stylelint-order-npm-3.1.1-a1e6477dbd-35388f28bd.zip and /dev/null differ diff --git a/config/stylelint-config-carbon/package.json b/config/stylelint-config-carbon/package.json index 78486539dc24..8ce581d04a8f 100644 --- a/config/stylelint-config-carbon/package.json +++ b/config/stylelint-config-carbon/package.json @@ -28,7 +28,7 @@ }, "dependencies": { "stylelint-a11y": "^1.2.3", - "stylelint-config-idiomatic-order": "^8.1.0", + "stylelint-config-idiomatic-order": "^9.0.0", "stylelint-config-prettier": "^9.0.3", "stylelint-config-standard": "^34.0.0", "stylelint-config-standard-scss": "^11.0.0", diff --git a/packages/styles/scss/components/button/_mixins.scss b/packages/styles/scss/components/button/_mixins.scss index 5cc4b79b5cef..c93415759088 100644 --- a/packages/styles/scss/components/button/_mixins.scss +++ b/packages/styles/scss/components/button/_mixins.scss @@ -48,9 +48,9 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus); display: inline-flex; flex-shrink: 0; justify-content: space-between; + border-radius: $button-border-radius; // Fix to remove added margins on buttons in safari (see #5155) margin: 0; - border-radius: $button-border-radius; cursor: pointer; inline-size: max-content; max-inline-size: convert.to-rem(320px); diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss index 2fec51371aee..2c607c191a4c 100644 --- a/packages/styles/scss/components/checkbox/_checkbox.scss +++ b/packages/styles/scss/components/checkbox/_checkbox.scss @@ -86,11 +86,11 @@ // text overflows. position: absolute; border: 1px solid $icon-primary; + border-radius: 2px; // Checkboxes with a background color look visually off against a parent container. background-color: transparent; block-size: convert.to-rem(16px); - border-radius: 2px; content: ''; // According to the spec, we'll want the bounding box for our checkbox to diff --git a/packages/styles/scss/components/code-snippet/_code-snippet.scss b/packages/styles/scss/components/code-snippet/_code-snippet.scss index 0e355df9c969..3590cfe83a7c 100644 --- a/packages/styles/scss/components/code-snippet/_code-snippet.scss +++ b/packages/styles/scss/components/code-snippet/_code-snippet.scss @@ -71,8 +71,8 @@ $copy-btn-feedback: $background-inverse !default; display: inline; padding: 0; border: 1px solid transparent; - background-color: $layer; border-radius: 4px; + background-color: $layer; color: $text-primary; cursor: pointer; diff --git a/packages/styles/scss/components/date-picker/_flatpickr.scss b/packages/styles/scss/components/date-picker/_flatpickr.scss index 352a4e3844ef..bf0e035f078e 100644 --- a/packages/styles/scss/components/date-picker/_flatpickr.scss +++ b/packages/styles/scss/components/date-picker/_flatpickr.scss @@ -95,8 +95,8 @@ box-sizing: border-box; padding: 0; border: 0; - animation: none; border-radius: 0; + animation: none; direction: ltr; inline-size: convert.to-rem(315px); max-block-size: 0; diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss index c55822839188..7b1cbb964aaa 100644 --- a/packages/styles/scss/components/list-box/_list-box.scss +++ b/packages/styles/scss/components/list-box/_list-box.scss @@ -464,9 +464,9 @@ $list-box-menu-width: convert.to-rem(300px); align-items: center; justify-content: space-between; padding: convert.to-rem(8px); + border-radius: convert.to-rem(12px); background-color: $background-inverse; block-size: convert.to-rem(24px); - border-radius: convert.to-rem(12px); color: $text-inverse; inline-size: auto; inset-block-start: auto; @@ -485,8 +485,8 @@ $list-box-menu-width: convert.to-rem(300px); margin-inline-start: convert.to-rem(4px); &:hover { - background-color: $button-secondary-hover; border-radius: 50%; + background-color: $button-secondary-hover; } } diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss index a8c761dce05b..5c287a815e58 100644 --- a/packages/styles/scss/components/number-input/_number-input.scss +++ b/packages/styles/scss/components/number-input/_number-input.scss @@ -45,6 +45,7 @@ display: inline-flex; box-sizing: border-box; border: 0; + border-radius: 0; // Firefox: Hide spinner (up and down buttons) -moz-appearance: textfield; @@ -52,7 +53,6 @@ background-color: $field; block-size: convert.to-rem(40px); border-block-end: convert.to-rem(1px) solid $border-strong; - border-radius: 0; color: $text-primary; font-family: font-family('sans'); font-weight: 400; diff --git a/packages/styles/scss/components/popover/_popover.scss b/packages/styles/scss/components/popover/_popover.scss index 124c28d9bd57..30dd49569d81 100644 --- a/packages/styles/scss/components/popover/_popover.scss +++ b/packages/styles/scss/components/popover/_popover.scss @@ -130,8 +130,8 @@ $popover-caret-height: custom-property.get-var( position: absolute; z-index: z('floating'); display: none; - background-color: $popover-background-color; border-radius: $popover-border-radius; + background-color: $popover-background-color; color: $popover-text-color; inline-size: max-content; max-inline-size: convert.to-rem(368px); diff --git a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss index d8e953a1ba17..6f877eaa849f 100644 --- a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss +++ b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss @@ -70,8 +70,8 @@ $progress-indicator-bar-width: 1px inset transparent !default; position: relative; z-index: 1; flex-shrink: 0; - block-size: $spacing-05; border-radius: 50%; + block-size: $spacing-05; fill: $interactive; inline-size: $spacing-05; margin-block-start: convert.to-rem(10px); diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss index 8c38e769f4d1..93d7ccbf45cf 100644 --- a/packages/styles/scss/components/radio-button/_radio-button.scss +++ b/packages/styles/scss/components/radio-button/_radio-button.scss @@ -84,9 +84,9 @@ $radio-border-width: 1px !default; flex-shrink: 0; border: $radio-border-width solid $icon-primary; + border-radius: 50%; background-color: transparent; block-size: convert.to-rem(18px); - border-radius: 50%; inline-size: convert.to-rem(18px); margin-block: convert.to-rem(1px) convert.to-rem(2px); margin-inline: convert.to-rem(2px) convert.to-rem(10px); @@ -108,9 +108,9 @@ $radio-border-width: 1px !default; &::before { position: relative; display: inline-block; + border-radius: 50%; background-color: $icon-primary; block-size: 100%; - border-radius: 50%; content: ''; inline-size: 100%; transform: scale(0.5); diff --git a/packages/styles/scss/components/select/_select.scss b/packages/styles/scss/components/select/_select.scss index df296a4e4a3a..844e2beac44d 100644 --- a/packages/styles/scss/components/select/_select.scss +++ b/packages/styles/scss/components/select/_select.scss @@ -45,11 +45,11 @@ display: block; border: none; + border-radius: 0; appearance: none; background-color: $field; block-size: convert.to-rem(40px); border-block-end: 1px solid $border-strong; - border-radius: 0; color: $text-primary; cursor: pointer; font-family: inherit; diff --git a/packages/styles/scss/components/slider/_slider.scss b/packages/styles/scss/components/slider/_slider.scss index 6b23b682bdf6..4b4a80e97917 100644 --- a/packages/styles/scss/components/slider/_slider.scss +++ b/packages/styles/scss/components/slider/_slider.scss @@ -88,9 +88,9 @@ .#{$prefix}--slider__thumb { position: absolute; z-index: 3; + border-radius: 50%; background: $layer-selected-inverse; block-size: convert.to-rem(14px); - border-radius: 50%; box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent; inline-size: convert.to-rem(14px); outline: none; diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss index 459c3d2a6c1b..3ae734e545f5 100644 --- a/packages/styles/scss/components/tag/_tag.scss +++ b/packages/styles/scss/components/tag/_tag.scss @@ -44,8 +44,8 @@ display: inline-flex; align-items: center; justify-content: center; - margin: $spacing-02; border-radius: convert.to-rem(15px); + margin: $spacing-02; cursor: default; // restricts size of contained elements max-inline-size: 100%; @@ -186,10 +186,10 @@ justify-content: center; padding: 0; border: 0; + border-radius: 50%; margin: 0 0 0 convert.to-rem(2px); background-color: transparent; block-size: layout.size('height'); - border-radius: 50%; color: currentColor; cursor: pointer; inline-size: layout.size('height'); diff --git a/packages/styles/scss/components/toggle/_toggle.scss b/packages/styles/scss/components/toggle/_toggle.scss index 53b06b6c6bf3..4c238978b1fe 100644 --- a/packages/styles/scss/components/toggle/_toggle.scss +++ b/packages/styles/scss/components/toggle/_toggle.scss @@ -51,17 +51,17 @@ .#{$prefix}--toggle__switch { position: relative; + border-radius: convert.to-rem(12px); background-color: $toggle-off; block-size: convert.to-rem(24px); - border-radius: convert.to-rem(12px); inline-size: convert.to-rem(48px); transition: background-color $duration-fast-01 motion(exit, productive); &::before { position: absolute; + border-radius: 50%; background-color: $icon-on-color; block-size: convert.to-rem(18px); - border-radius: 50%; content: ''; inline-size: convert.to-rem(18px); inset-block-start: convert.to-rem(3px); @@ -204,9 +204,8 @@ .#{$prefix}--toggle--skeleton .#{$prefix}--toggle__skeleton-circle { @include circular-skeleton; - block-size: convert.to-rem(18px); border-radius: 50%; - + block-size: convert.to-rem(18px); inline-size: convert.to-rem(18px); } @@ -214,7 +213,6 @@ @include skeleton; block-size: convert.to-rem(8px); - inline-size: convert.to-rem(24px); margin-inline-start: convert.to-rem(8px); } diff --git a/packages/styles/scss/components/tooltip/_tooltip.scss b/packages/styles/scss/components/tooltip/_tooltip.scss index 46eaf8c95460..727eb182074f 100644 --- a/packages/styles/scss/components/tooltip/_tooltip.scss +++ b/packages/styles/scss/components/tooltip/_tooltip.scss @@ -35,9 +35,7 @@ $tooltip-padding-inline: custom-property.get-var( @include type.type-style('body-01'); padding: $tooltip-padding-block $tooltip-padding-inline; - color: theme.$text-inverse; - max-inline-size: convert.to-rem(288px); } } @@ -46,9 +44,8 @@ $tooltip-padding-inline: custom-property.get-var( .#{$prefix}--definition-term { @include button-reset.reset; - border-block-end: 1px dotted theme.$border-strong; border-radius: 0; - + border-block-end: 1px dotted theme.$border-strong; color: theme.$text-primary; } @@ -66,7 +63,6 @@ $tooltip-padding-inline: custom-property.get-var( @include type.type-style('body-01'); padding: convert.to-rem(8px) convert.to-rem(16px); - max-inline-size: convert.to-rem(176px); } } diff --git a/packages/styles/scss/utilities/_skeleton.scss b/packages/styles/scss/utilities/_skeleton.scss index c61c16120ed3..3fd619511050 100644 --- a/packages/styles/scss/utilities/_skeleton.scss +++ b/packages/styles/scss/utilities/_skeleton.scss @@ -50,8 +50,8 @@ @mixin circular-skeleton { position: relative; overflow: hidden; - background: $skeleton-background; border-radius: 50%; + background: $skeleton-background; &::before { position: absolute; diff --git a/packages/styles/scss/utilities/_tooltip.scss b/packages/styles/scss/utilities/_tooltip.scss index 8beb03872454..09d83167e450 100644 --- a/packages/styles/scss/utilities/_tooltip.scss +++ b/packages/styles/scss/utilities/_tooltip.scss @@ -41,9 +41,9 @@ convert.to-rem(8px) convert.to-rem(16px), convert.to-rem(3px) convert.to-rem(16px) ); + border-radius: convert.to-rem(2px); background-color: $background-inverse; block-size: auto; - border-radius: convert.to-rem(2px); color: $text-inverse; font-weight: 400; inline-size: max-content; diff --git a/yarn.lock b/yarn.lock index 5406a3361286..87b7e0eea575 100644 --- a/yarn.lock +++ b/yarn.lock @@ -25505,16 +25505,6 @@ __metadata: languageName: node linkType: hard -"postcss-sorting@npm:^5.0.1": - version: 5.0.1 - resolution: "postcss-sorting@npm:5.0.1" - dependencies: - lodash: ^4.17.14 - postcss: ^7.0.17 - checksum: 0a410afab47e1ec10f1bd8768d7118cad93d00990a298816bb6c30f72f66ed05d29f152c8a04b943749fef134413171d6c91ef9915a1b95281573c1c7d13f76c - languageName: node - linkType: hard - "postcss-sorting@npm:^7.0.1": version: 7.0.1 resolution: "postcss-sorting@npm:7.0.1" @@ -25599,7 +25589,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^7.0.17, postcss@npm:^7.0.35": +"postcss@npm:^7.0.35": version: 7.0.39 resolution: "postcss@npm:7.0.39" dependencies: @@ -29313,7 +29303,7 @@ __metadata: prettier: ^2.8.8 stylelint: ^15.0.0 stylelint-a11y: ^1.2.3 - stylelint-config-idiomatic-order: ^8.1.0 + stylelint-config-idiomatic-order: ^9.0.0 stylelint-config-prettier: ^9.0.3 stylelint-config-standard: ^34.0.0 stylelint-config-standard-scss: ^11.0.0 @@ -29327,14 +29317,14 @@ __metadata: languageName: unknown linkType: soft -"stylelint-config-idiomatic-order@npm:^8.1.0": - version: 8.1.0 - resolution: "stylelint-config-idiomatic-order@npm:8.1.0" +"stylelint-config-idiomatic-order@npm:^9.0.0": + version: 9.0.0 + resolution: "stylelint-config-idiomatic-order@npm:9.0.0" dependencies: - stylelint-order: ^3.1.1 + stylelint-order: ^5.0.0 peerDependencies: stylelint: ">=11" - checksum: f83ebfb90a506e0c01df8f1e25e11a55cfd881dbb07bc9714a25fe8fa1d31cb50aa160561692edd15aa654f2d200cd08e10620f7ac2a7d6a2b3bde955d49f6f7 + checksum: ff942702442cb60116ef35442f8ab15279fbaeb6ce6ca2e56f3b0fd11c1f5355a8aa4a8cdca5f64d5cfd3b4879f662e1a092333965a16342fc25d9ff230616c6 languageName: node linkType: hard @@ -29416,19 +29406,6 @@ __metadata: languageName: node linkType: hard -"stylelint-order@npm:^3.1.1": - version: 3.1.1 - resolution: "stylelint-order@npm:3.1.1" - dependencies: - lodash: ^4.17.15 - postcss: ^7.0.17 - postcss-sorting: ^5.0.1 - peerDependencies: - stylelint: ">=10.0.1" - checksum: 35388f28bd9a4d91ab35eea3518ba83b4b72514aa169015fd3187ce94061be201e47e557165b6ffad20baaaf69be4770785a4e4b7b56e4317759f84112bc1d8d - languageName: node - linkType: hard - "stylelint-order@npm:^5.0.0": version: 5.0.0 resolution: "stylelint-order@npm:5.0.0"