From cd8222474bd924804dadd4bfbccf9af31d91174b Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Fri, 26 Jan 2024 14:24:09 -0600
Subject: [PATCH] STCOM-1087 Upgrade stylelint. (#2212)

* upgrade style lint, fix

* replace removed commas in interactionStyles selectors.

* resolve conflict

* re-add commas to classnames in form.css

* correct color function notation with slash separators

* convert decimal alphas to percentages

* remove leading 0s on percentages

* remove distracting change

* remove commas from stylelint config, remove comments from buttongroup
---
 .stylelintrc                           | 10 +++++--
 CHANGELOG.md                           |  1 +
 lib/Accordion/Accordion.css            |  2 +-
 lib/Button/Button.css                  |  5 +---
 lib/ButtonGroup/ButtonGroup.css        | 14 +++-------
 lib/Datepicker/Calendar.css            |  4 +--
 lib/DropdownMenu/DropdownLayout.css    |  2 +-
 lib/Editor/Editor.css                  |  6 ++--
 lib/Icon/Icon.css                      |  2 +-
 lib/Layer/Layer.css                    |  2 +-
 lib/Loading/DotSpinner.css             |  2 +-
 lib/Modal/Modal.css                    |  4 +--
 lib/MultiColumnList/MCLRenderer.css    | 30 ++++++++++----------
 lib/MultiSelection/MultiSelect.css     | 11 +++-----
 lib/PaneHeader/PaneHeader.css          |  2 +-
 lib/PaneSubheader/PaneSubheader.css    |  4 +--
 lib/Paneset/PaneResize.css             |  4 +--
 lib/RadioButton/RadioButton.css        |  4 +--
 lib/Select/Select.css                  |  8 +++---
 lib/Selection/Selection.css            | 10 +++----
 lib/TextArea/TextArea.css              |  1 -
 lib/TextLink/TextLink.css              |  7 ++---
 lib/Timepicker/TimeDropdown.css        |  6 ++--
 lib/Tooltip/Tooltip.css                |  2 +-
 lib/global.css                         | 18 ++++++++----
 lib/sharedStyles/form.css              |  2 +-
 lib/sharedStyles/interactionStyles.css | 26 +++++-------------
 lib/variables.css                      | 38 +++++++++++++-------------
 package.json                           |  6 ++--
 29 files changed, 107 insertions(+), 126 deletions(-)

diff --git a/.stylelintrc b/.stylelintrc
index fd4fe88a4..b6f60dfe7 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,6 +1,12 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
+    "import-notation": "string",
+    "value-keyword-case": ["lower", {
+      "ignoreProperties": ["composes"]
+    }],
+    "keyframes-name-pattern": null,
+    "selector-class-pattern": null,
     "selector-pseudo-class-no-unknown": [true, {
       "ignorePseudoClasses": [
         "export",
@@ -13,7 +19,7 @@
       "ignoreProperties": [
         "composes",
         "compose-with"
-      ],
-    }],
+      ]
+    }]
   }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4885230f4..f75e81db6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 * Added support for clear icon in `<TextArea>`. Refs STCOM-1240.
 * Bug fix for Accordion content z-index rendering. Refs STCOM-1238.
 * Format aria attributes in `<Icon>`. Refs STCOM-1165.
+* Upgrade `stylelint` and fix errors. Refs STCOM-1087.
 
 ## [12.0.0](https://github.com/folio-org/stripes-components/tree/v12.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v11.0.0...v12.0.0)
diff --git a/lib/Accordion/Accordion.css b/lib/Accordion/Accordion.css
index 8a320d300..e02aee08d 100644
--- a/lib/Accordion/Accordion.css
+++ b/lib/Accordion/Accordion.css
@@ -96,7 +96,7 @@
 
 .content-region {
   opacity: 0;
-  margin: 0 0 1rem 0;
+  margin: 0 0 1rem;
   visibility: hidden; /* inputs within will not be focusable */
   transition: transform 0.1s ease 0.5s, opacity 0.1s linear 0.5s, visibility 0.2s linear 0.5s margin 0.1s linear 0.5s;
   height: 100%;
diff --git a/lib/Button/Button.css b/lib/Button/Button.css
index bc89ff042..c04025305 100644
--- a/lib/Button/Button.css
+++ b/lib/Button/Button.css
@@ -11,7 +11,7 @@
   composes: interactionStyles from "../sharedStyles/interactionStyles.css";
   padding: 0 var(--gutter-static);
   text-align: center;
-  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   color: var(--color-text);
   border-radius: 999px;
@@ -67,9 +67,6 @@
     text-decoration-skip: objects;
     text-decoration-thickness: 2px;
   }
-  /**
-  * Colors
-  */
 
   /**
   * Button Style: Default
diff --git a/lib/ButtonGroup/ButtonGroup.css b/lib/ButtonGroup/ButtonGroup.css
index 82a0022e8..e83de940d 100644
--- a/lib/ButtonGroup/ButtonGroup.css
+++ b/lib/ButtonGroup/ButtonGroup.css
@@ -28,8 +28,8 @@
     margin-left: -1px;
   }
 
-  & > :not(:first-child):not(:last-child),
-  & > :not(:first-child):not(:last-child)::before {
+  & > :not(:first-child, :last-child),
+  & > :not(:first-child, :last-child)::before {
     border-radius: 0;
   }
 }
@@ -38,18 +38,12 @@
   & .buttonGroup {
     & > :first-child,
     & > :first-child::before {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-top-right-radius: var(--radius);
-      border-bottom-right-radius: var(--radius);
+      border-radius: 0 var(--radius) var(--radius) 0;
     }
 
     & > :last-child,
     & > :last-child::before {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-top-left-radius: var(--radius);
-      border-bottom-left-radius: var(--radius);
+      border-radius: var(--radius) 0 0 var(--radius);
     }
 
     & > :not(:first-child) {
diff --git a/lib/Datepicker/Calendar.css b/lib/Datepicker/Calendar.css
index e6b9669e8..b3a750627 100644
--- a/lib/Datepicker/Calendar.css
+++ b/lib/Datepicker/Calendar.css
@@ -116,13 +116,13 @@
 
 .monthSelect {
   border-style: dashed;
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
   padding: 4px;
 }
 
 .yearInput {
   border-style: dashed;
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
   min-width: 0;
   flex: 0 1 auto;
   padding: 4px;
diff --git a/lib/DropdownMenu/DropdownLayout.css b/lib/DropdownMenu/DropdownLayout.css
index 89c07433e..812ed6c09 100644
--- a/lib/DropdownMenu/DropdownLayout.css
+++ b/lib/DropdownMenu/DropdownLayout.css
@@ -29,7 +29,7 @@
   }
 
   &.secondary {
-    background-color: rgba(0, 0, 0, 0.03);
+    background-color: rgba(0 0 0 / 3%);
   }
 
   &.fill {
diff --git a/lib/Editor/Editor.css b/lib/Editor/Editor.css
index 6ccb495d3..0a8da56ec 100644
--- a/lib/Editor/Editor.css
+++ b/lib/Editor/Editor.css
@@ -4,9 +4,7 @@
   position: relative;
   max-width: 100%;
   display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
+  flex-flow: column nowrap;
+  place-content: stretch flex-start;
   align-items: stretch;
-  align-content: stretch;
 }
diff --git a/lib/Icon/Icon.css b/lib/Icon/Icon.css
index 50d2dac22..e2df663de 100644
--- a/lib/Icon/Icon.css
+++ b/lib/Icon/Icon.css
@@ -14,7 +14,7 @@
 
 :global .stripes__icon {
   flex-shrink: 0;
-  fill: currentColor;
+  fill: currentcolor;
   height: 1.1429em;
   width: 1.1429em;
 }
diff --git a/lib/Layer/Layer.css b/lib/Layer/Layer.css
index 27a3d4de6..65b1d5491 100644
--- a/lib/Layer/Layer.css
+++ b/lib/Layer/Layer.css
@@ -68,5 +68,5 @@
   height: 100%;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0 0 0 / 50%);
 }
diff --git a/lib/Loading/DotSpinner.css b/lib/Loading/DotSpinner.css
index 241ee710a..8538b897f 100644
--- a/lib/Loading/DotSpinner.css
+++ b/lib/Loading/DotSpinner.css
@@ -16,7 +16,7 @@
     width: 33%;
     height: 33%;
     margin: 0 8%;
-    background-color: rgba(0, 0, 0, 0.62);
+    background-color: rgba(0 0 0 / 62%);
     border-radius: 100%;
     display: inline-block;
     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
diff --git a/lib/Modal/Modal.css b/lib/Modal/Modal.css
index d5e52586b..70dd82145 100644
--- a/lib/Modal/Modal.css
+++ b/lib/Modal/Modal.css
@@ -118,7 +118,7 @@
  * Move the modal further towards the top
  * when the browser window is a bit smaller in height
  */
-@media screen and (max-height: 850px) {
+@media screen and (height <= 850px) {
   .modal {
     top: var(--gutter-static);
     max-height: calc(100% - var(--gutter-static) * 2);
@@ -130,7 +130,7 @@
  */
 
 .entered {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0 0 0 / 20%);
 
   & .modal {
     transform: translateY(0);
diff --git a/lib/MultiColumnList/MCLRenderer.css b/lib/MultiColumnList/MCLRenderer.css
index cacdd75f2..e92c16f44 100644
--- a/lib/MultiColumnList/MCLRenderer.css
+++ b/lib/MultiColumnList/MCLRenderer.css
@@ -1,5 +1,7 @@
 @import '../variables.css';
 
+/* stylelint-disable no-descending-specificity */
+
 .mclContainer {
   display: flex;
   flex-direction: column;
@@ -129,7 +131,7 @@
     left: 0;
     top: 0;
     background-color: var(--bg);
-    box-shadow: 3px 0 4px rgba(0, 0, 0, 0.05);
+    box-shadow: 3px 0 4px rgba(0 0 0 / 5%);
     z-index: 3;
 
     &::before {
@@ -145,7 +147,7 @@
     &.mclStickyEnd {
       right: 0;
       left: initial;
-      box-shadow: -3px 0 4px rgba(0, 0, 0, 0.05);
+      box-shadow: -3px 0 4px rgba(0 0 0 / 5%);
     }
   }
 }
@@ -155,8 +157,6 @@
 
   /* Use monospaced numbers, aka Tabular Numerals (tnum) */
   font-feature-settings: 'tnum';
-  -webkit-font-feature-settings: 'tnum';
-  -moz-font-feature-settings: 'tnum';
 }
 
 .mclHeaderContainer {
@@ -220,7 +220,7 @@
     left: 0;
     background-color: var(--bg);
     z-index: 3;
-    box-shadow: 3px 0 4px rgba(0, 0, 0, 0.05);
+    box-shadow: 3px 0 4px rgba(0 0 0 / 5%);
     border-right: 1px solid var(--color-border-p2);
 
     &::before {
@@ -234,7 +234,7 @@
     &.mclStickyEnd {
       right: 0;
       left: initial;
-      box-shadow: -3px 0 4px rgba(0, 0, 0, 0.05);
+      box-shadow: -3px 0 4px rgba(0 0 0 / 5%);
       border-left: 1px solid var(--color-border-p2);
       border-right: 0;
     }
@@ -277,9 +277,7 @@
   display: flex;
   align-items: center;
   align-self: stretch;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
+  flex: 0 0 auto;
   overflow: hidden;
   text-align: left;
   word-break: break-word;
@@ -331,12 +329,11 @@
 
 .mclContentLoading {
   display: flex;
-  justify-content: center;
-  align-content: center;
+  place-content: center center;
   height: 1.5rem;
   width: 3rem;
   padding: 0.25rem 0.5rem 0 0;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255 255 255 / 50%);
 }
 
 .mclEmptyMessage {
@@ -397,21 +394,22 @@
   font-weight: bold;
   display: flex;
   align-items: center;
-  justify-content: center;
-  align-content: middle;
+  place-content: center center;
 }
 
 [dir="rtl"] .mclSticky {
   left: initial;
   right: 0;
-  box-shadow: -3px 0 4px rgba(0, 0, 0, 0.05);
+  box-shadow: -3px 0 4px rgba(0 0 0 / 5%);
   border-left: 1px solid var(--color-border-p2);
 
   &.mclStickyEnd {
     left: 0;
     right: initial;
-    box-shadow: 3px 0 4px rgba(0, 0, 0, 0.05);
+    box-shadow: 3px 0 4px rgba(0 0 0 / 5%);
     border-right: 1px solid var(--color-border-p2);
     border-left: 0;
   }
 }
+
+/* stylelint-enable no-descending-specificity */
diff --git a/lib/MultiSelection/MultiSelect.css b/lib/MultiSelection/MultiSelect.css
index a6dc132a9..a96f7b743 100644
--- a/lib/MultiSelection/MultiSelect.css
+++ b/lib/MultiSelection/MultiSelect.css
@@ -18,7 +18,7 @@
 
 .multiSelectFocused {
   border: 1px solid var(--primary);
-  box-shadow: inset 0 0 0 2px rgba(37, 118, 195, 0.3);
+  box-shadow: inset 0 0 0 2px rgba(37 118 195 / 30%);
 }
 
 .multiSelectControlGroup {
@@ -80,7 +80,7 @@
   margin-top: 4px;
   padding: 4px;
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0 0 0 / 20%);
   pointer-events: all;
 
   &.untethered {
@@ -108,10 +108,7 @@
   &::before {
     content: "";
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
     background: transparent;
     border-radius: var(--radius);
     z-index: -1;
@@ -149,7 +146,7 @@
 }
 
 .mobileBackdrop {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0 0 0 / 20%);
   width: 100vw;
   height: 100vh;
   position: absolute;
diff --git a/lib/PaneHeader/PaneHeader.css b/lib/PaneHeader/PaneHeader.css
index 915673633..de0915a12 100644
--- a/lib/PaneHeader/PaneHeader.css
+++ b/lib/PaneHeader/PaneHeader.css
@@ -110,7 +110,7 @@ button.actionMenuToggle {
 
 /* Pull first pane icon button to the left/start */
 .paneHeaderButtonsArea.first .paneHeaderIconButton:first-child,
-[dir=rtl] .paneHeaderButtonsArea.last .paneHeaderIconButton:last-child {
+[dir="rtl"] .paneHeaderButtonsArea.last .paneHeaderIconButton:last-child {
   margin-left: calc(var(--gutter-static-two-thirds) * -1);
   margin-right: 0;
 }
diff --git a/lib/PaneSubheader/PaneSubheader.css b/lib/PaneSubheader/PaneSubheader.css
index bc73d1ad8..11e7db41a 100644
--- a/lib/PaneSubheader/PaneSubheader.css
+++ b/lib/PaneSubheader/PaneSubheader.css
@@ -1,6 +1,6 @@
 @import '../variables.css';
 
 .subheader {
-  padding: 8px var(--gutter, 15px);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 8px var(--gutter);
+  border-bottom: 1px solid rgba(0 0 0 / 10%);
 }
diff --git a/lib/Paneset/PaneResize.css b/lib/Paneset/PaneResize.css
index 2b99731c5..38e1b38b4 100644
--- a/lib/Paneset/PaneResize.css
+++ b/lib/Paneset/PaneResize.css
@@ -15,7 +15,7 @@
 .cursor {
   height: 100%;
   width: 1px;
-  border-right: 2px dashed rgba(0, 0, 0, 0.2);
+  border-right: 2px dashed rgba(0 0 0 / 20%);
   align-self: stretch;
 }
 
@@ -30,7 +30,7 @@
 
   &:hover,
   &.active {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0 0 0 / 10%);
   }
 }
 
diff --git a/lib/RadioButton/RadioButton.css b/lib/RadioButton/RadioButton.css
index 8f1450d68..4e7f7e5b6 100644
--- a/lib/RadioButton/RadioButton.css
+++ b/lib/RadioButton/RadioButton.css
@@ -51,7 +51,7 @@
   }
 }
 
-[dir=rtl] .radioLabel {
+[dir="rtl"] .radioLabel {
   right: -1rem;
   padding-left: 0;
   padding-right: 1rem;
@@ -146,7 +146,6 @@
 
 .inputHidden:not(:checked) + .pseudoButton::after {
   opacity: 0;
-  -webkit-transform: scale(0);
   transform: scale(0);
 }
 
@@ -155,7 +154,6 @@
 
   &::after {
     opacity: 1;
-    -webkit-transform: scale(1);
     transform: scale(1);
     background-color: #000;
   }
diff --git a/lib/Select/Select.css b/lib/Select/Select.css
index 1be0ea3d0..8f3f071ae 100644
--- a/lib/Select/Select.css
+++ b/lib/Select/Select.css
@@ -16,6 +16,10 @@
   font-size: var(--font-size-medium);
   line-height: var(--line-height);
 
+  & option {
+    background-color: var(--bg);
+  }
+
   &.placeholder {
     color: #888;
 
@@ -23,10 +27,6 @@
       color: #444;
     }
   }
-
-  & option {
-    background-color: var(--bg);
-  }
 }
 
 [dir="rtl"] .selectControl {
diff --git a/lib/Selection/Selection.css b/lib/Selection/Selection.css
index a46008de2..6ab6a1411 100644
--- a/lib/Selection/Selection.css
+++ b/lib/Selection/Selection.css
@@ -43,14 +43,15 @@
   }
 }
 
-[class*=interactionStyles] .selectionControl {
+[class*="interactionStyles"] .selectionControl {
   background-color: var(--bg);
+
   &:active {
     color: var(--color-text);
   }
 }
 
-[class*=interactionStyles]:active .selectionControl {
+[class*="interactionStyles"]:active .selectionControl {
   color: var(--color-text);
 }
 
@@ -78,7 +79,7 @@
 
   &:focus {
     outline: none;
-    border-color: var(--primary, #0c577f);
+    border-color: var(--primary);
   }
 }
 
@@ -94,7 +95,7 @@
   height: 100%;
   display: flex;
   justify-content: center;
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0 0 0 / 20%);
   padding-top: 48px;
   align-items: flex-start;
   pointer-events: all;
@@ -211,7 +212,6 @@
 .srOnly {
   position: absolute !important;
   clip: rect(1px 1px 1px 1px); /* old IE */
-  clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   width: 1px;
   overflow: hidden;
diff --git a/lib/TextArea/TextArea.css b/lib/TextArea/TextArea.css
index 17d8005c1..40a09bc17 100644
--- a/lib/TextArea/TextArea.css
+++ b/lib/TextArea/TextArea.css
@@ -26,7 +26,6 @@
   position: absolute;
   inset-inline-end: 8px; /* leave some space for textarea's resize control */
   bottom: 1px; /* makes the controls look more vertically centered in single line textareas */
-
   pointer-events: none;
   height: auto;
   display: flex;
diff --git a/lib/TextLink/TextLink.css b/lib/TextLink/TextLink.css
index bf6f78cc3..22fd5c0be 100644
--- a/lib/TextLink/TextLink.css
+++ b/lib/TextLink/TextLink.css
@@ -27,14 +27,11 @@
   &::before {
     border-radius: var(--radius);
     border: 1px solid var(--link-border-color-focus);
-    bottom: 0;
+    inset: 0 -2px;
     box-shadow: var(--link-box-shadow-focus);
     content: "";
-    left: -2px;
     display: none;
     position: absolute;
-    right: -2px;
-    top: 0;
     z-index: -1;
   }
 
@@ -67,7 +64,7 @@
     display: inline-block;
 
     /* Prevents double underline */
-    &:not(:active):not(:hover) {
+    &:not(:hover, :active) {
       text-decoration: none;
     }
 
diff --git a/lib/Timepicker/TimeDropdown.css b/lib/Timepicker/TimeDropdown.css
index d8377c094..c2adeb3e1 100644
--- a/lib/Timepicker/TimeDropdown.css
+++ b/lib/Timepicker/TimeDropdown.css
@@ -16,9 +16,9 @@
 
   /* WebKit desktop browsers add little up down arrows
   to number inputs called spinners. Here we remove them to preserve space. */
-  & input[type=number]::-webkit-inner-spin-button,
-  & input[type=number]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
+  & input[type="number"]::-webkit-inner-spin-button,
+  & input[type="number"]::-webkit-outer-spin-button {
+    appearance: none;
     margin: 0;
   }
 
diff --git a/lib/Tooltip/Tooltip.css b/lib/Tooltip/Tooltip.css
index bc0162075..d6b30b6fa 100644
--- a/lib/Tooltip/Tooltip.css
+++ b/lib/Tooltip/Tooltip.css
@@ -9,7 +9,7 @@
   justify-content: center;
   flex-direction: column;
   min-height: 36px;
-  background-color: rgba(0, 0, 0, 0.85);
+  background-color: rgba(0 0 0 / 85%);
   color: #fff;
   margin: var(--gutter-static-one-third);
   border-radius: 4px;
diff --git a/lib/global.css b/lib/global.css
index d4cf78e1b..e9f232ec0 100644
--- a/lib/global.css
+++ b/lib/global.css
@@ -36,7 +36,7 @@ html {
     "Myriad Arabic",
     "ヒラギノ角ゴ Pro W3",
     "Hiragino Kaku Gothic Pro",
-    メイリオ,
+    "メイリオ",
     Meiryo,
     "ＭＳ Ｐゴシック",
     "MS PGothic",
@@ -71,7 +71,7 @@ html {
       "Myriad Arabic",
       "ヒラギノ角ゴ Pro W3",
       "Hiragino Kaku Gothic Pro",
-      メイリオ,
+      "メイリオ",
       Meiryo,
       "ＭＳ Ｐゴシック",
       "MS PGothic",
@@ -137,8 +137,17 @@ button {
 }
 
 /* clears the ‘X’ from Internet Explorer */
-input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
-input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
+input[type="search"]::-ms-clear {
+  display: none;
+  width : 0;
+  height: 0;
+}
+
+input[type="search"]::-ms-reveal {
+  display: none;
+  width : 0;
+  height: 0;
+}
 
 /* clears the ‘X’ from Chrome */
 input[type="search"]::-webkit-search-decoration,
@@ -177,7 +186,6 @@ input[type="number"]::-webkit-inner-spin-button {
 
 :global(.sr-only) {
   position: fixed;
-  clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   clip-path: inset(50%);
   border: 0;
diff --git a/lib/sharedStyles/form.css b/lib/sharedStyles/form.css
index b74100f03..1c6d660d4 100644
--- a/lib/sharedStyles/form.css
+++ b/lib/sharedStyles/form.css
@@ -34,7 +34,7 @@
   &:focus,
   &.isFocused {
     border: 1px solid var(--primary);
-    box-shadow: inset 0 0 0 2px rgba(37, 118, 195, 0.3);
+    box-shadow: inset 0 0 0 2px rgba(37 118 195 / 30%);
   }
 
   &.fullWidth {
diff --git a/lib/sharedStyles/interactionStyles.css b/lib/sharedStyles/interactionStyles.css
index 4c6968587..170d79075 100644
--- a/lib/sharedStyles/interactionStyles.css
+++ b/lib/sharedStyles/interactionStyles.css
@@ -26,7 +26,7 @@
 /**
  * Disabled state
  */
-.interactionStylesControl:disabled > .interactionStyles,
+.interactionStylesControl:disabled > .interactionStyles
 .interactionStyles:disabled {
   opacity: 0.65;
   cursor: default;
@@ -43,10 +43,7 @@
 .interactionStyles::before {
   content: "";
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   background: transparent;
   border-radius: var(--radius);
   z-index: -1;
@@ -68,7 +65,7 @@
   border-radius: 999px;
   display: block;
   z-index: 2;
-  background-color: rgb(0, 0, 0);
+  background-color: rgb(0 0 0);
 }
 
 /* Focus dot start */
@@ -194,7 +191,7 @@
   background: var(--color-fill-active);
   border: 1px solid var(--color-border);
   color: #fff;
-  z-index: -1; /* keep the active style behind any text, etc */
+  z-index: -1; /* keep the active style behind any text etc */
 }
 
 .interactionStyles.hasDot.isActive:active::after,
@@ -211,24 +208,15 @@
 
 /* Apply to all sides */
 .interactionStyles.boxOffsetSmall::before {
-  left: var(--box-offset-small);
-  right: var(--box-offset-small);
-  top: var(--box-offset-small);
-  bottom: var(--box-offset-small);
+  inset: var(--box-offset-small);
 }
 
 .interactionStyles.boxOffsetMedium::before {
-  left: var(--box-offset-medium);
-  right: var(--box-offset-medium);
-  top: var(--box-offset-medium);
-  bottom: var(--box-offset-medium);
+  inset: var(--box-offset-medium);
 }
 
 .interactionStyles.boxOffsetLarge::before {
-  left: var(--box-offset-large);
-  right: var(--box-offset-large);
-  top: var(--box-offset-large);
-  bottom: var(--box-offset-large);
+  inset: var(--box-offset-large);
 }
 
 /* Apply to start only */
diff --git a/lib/variables.css b/lib/variables.css
index 33cbe1a92..895b1fc14 100644
--- a/lib/variables.css
+++ b/lib/variables.css
@@ -1,38 +1,38 @@
 :root {
   --color-text: #000;
-  --color-text-p2: rgba(0, 0, 0, 0.62);
-  --color-border-form: rgba(0, 0, 0, 0.42);
-  --color-border: rgba(0, 0, 0, 0.2);
-  --color-border-p2: rgba(0, 0, 0, 0.1);
-  --color-icon: rgba(0, 0, 0, 0.62);
+  --color-text-p2: rgba(0 0 0 / 62%);
+  --color-border-form: rgba(0 0 0 / 42%);
+  --color-border: rgba(0 0 0 / 20%);
+  --color-border-p2: rgba(0 0 0 / 10%);
+  --color-icon: rgba(0 0 0 / 62%);
   --color-link: #2f609f;
   --color-link-current: #fff;
   --color-link-visited: #4f2bbb;
   --color-link-visited-current: #fff;
-  --color-fill: rgba(0, 0, 0, 0.03);
-  --color-fill-table-row-odd: rgba(0, 0, 0, 0.08);
-  --color-fill-table-row-even: rgba(0, 0, 0, 0.03);
+  --color-fill: rgba(0 0 0 / 3%);
+  --color-fill-table-row-odd: rgba(0 0 0 / 8%);
+  --color-fill-table-row-even: rgba(0 0 0 / 3%);
   --color-fill-form-element: var(--color-fill);
-  --color-fill-current: rgba(0, 0, 0, 0.62);
-  --color-fill-disabled: rgba(0, 0, 0, 0.15);
-  --color-fill-hover: rgba(37, 118, 195, 0.2);
-  --color-fill-focus: rgba(37, 118, 195, 0.3);
-  --color-fill-focus-current: rgb(116, 173, 191);
+  --color-fill-current: rgba(0 0 0 / 62%);
+  --color-fill-disabled: rgba(0 0 0 / 15%);
+  --color-fill-hover: rgba(37 118 195 / 20%);
+  --color-fill-focus: rgba(37 118 195 / 30%);
+  --color-fill-focus-current: rgb(116 173 191);
   --color-fill-active: var(--primary);
   --highlighter-fill: #fc0;
-  --shadow: 0 4px 32px rgba(0, 0, 0, 0.175);
+  --shadow: 0 4px 32px rgba(0 0 0 / 17.5%);
   --bg: #fff;
   --bg-hover: color-mix(in oklch, oklch(from var(--bg) calc(l - 60) c h) 10%, var(--bg) 90%);
   --checkable-disabled-fill: #808080;
   --primary: #1960a4;
   --secondary: #999;
   --error: #900;
-  --error-fill: rgba(149, 29, 18, 0.2);
+  --error-fill: rgba(149 29 18 / 20%);
   --danger: #900;
   --warn: #943e00;
-  --warn-fill: rgba(215, 137, 88, 0.2);
+  --warn-fill: rgba(215 137 88 / 20%);
   --success: #070;
-  --success-fill: rgba(51, 117, 30, 0.2);
+  --success-fill: rgba(51 117 30 / 20%);
   --control-margin-bottom: 1rem;
   --control-min-size-touch: 44px;
   --control-min-size-desktop: 24px;
@@ -53,8 +53,8 @@
    * https://www.w3.org/TR/css-fonts-3/#propdef-font-size
    */
   --line-height: 1.5;
-  --font-size-x-small: 0.857142rem;
-  --font-size-small: 0.857142rem;
+  --font-size-x-small: 0.8571rem;
+  --font-size-small: 0.8571rem;
   --font-size-medium: 1rem;
   --font-size-large: 1.3rem;
   --font-size-x-large: 1.7143rem;
diff --git a/package.json b/package.json
index 2de08018a..970a85a34 100644
--- a/package.json
+++ b/package.json
@@ -96,9 +96,9 @@
     "storybook-addon-intl": "^2.4.1",
     "storybook-addon-rtl": "^0.3.0",
     "storybook-readme": "^5.0.9",
-    "stylelint": "^9.5.0",
-    "stylelint-config-standard": "^18.2.0",
-    "stylelint-junit-formatter": "^0.2.1"
+    "stylelint": "^16.2.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-junit-formatter": "^0.2.2"
   },
   "dependencies": {
     "@folio/stripes-react-hotkeys": "^3.0.5",