@itwin/itwinui-css 0.46.0 → 0.48.1

package/css/side-navigation.css

@@ -55,7 +55,8 @@
     border-left:none;
     border-right:none;
     overflow:hidden;
-    justify-content:flex-start; }
+    justify-content:flex-start;
+    --_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0; }
     .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
       height:55px; }
       @supports (padding: max(0px)){
@@ -75,9 +76,6 @@
     .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
       fill:#008BE1;
       fill:var(--iui-color-foreground-primary); }
-    .iui-side-navigation .iui-sidenav-button.iui-active{
-      box-shadow:inset 2px 0 0 0 #008BE1;
-      box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
     .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
       background-color:#F8F9FB;
       background-color:var(--iui-color-background-2); }

package/css/skip-to-content.css

@@ -0,0 +1,51 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-skip-to-content-link{
+  background-color:rgba(0, 0, 0, 0.8);
+  background-color:rgba(0, 0, 0, var(--iui-opacity-2));
+  color:#FFF;
+  color:var(--iui-color-foreground-accessory);
+  border-radius:9999px;
+  text-decoration:none;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  padding:8.25px 16px;
+  position:fixed;
+  text-align:center;
+  left:50%;
+  top:22px;
+  transform:translateX(-50%) translateY(-170%);
+  transition:background-color 0.2s ease-in-out; }
+  @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
+    .iui-skip-to-content-link{
+      background-color:rgba(0, 0, 0, var(--iui-opacity-3));
+      -webkit-backdrop-filter:blur(5px);
+              backdrop-filter:blur(5px); } }
+  .iui-skip-to-content-link:focus-visible{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:2px; }
+  @supports not selector(*:focus-visible){
+    .iui-skip-to-content-link:focus{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:2px; } }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-skip-to-content-link{
+      transition:background-color 0.2s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out; } }
+  .iui-skip-to-content-link:hover{
+    background-color:black;
+    background-color:rgba(0, 0, 0, var(--iui-opacity-1)); }
+    @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
+      .iui-skip-to-content-link:hover{
+        background-color:rgba(0, 0, 0, var(--iui-opacity-2));
+        -webkit-backdrop-filter:blur(5px);
+                backdrop-filter:blur(5px); } }
+  .iui-skip-to-content-link:focus{
+    transform:translateX(-50%) translateY(0);
+    box-shadow:0 6px 30px rgba(0, 0, 0, 0.25); }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-skip-to-content-link:focus{
+        transition:transform 0.2s ease-in-out; } }

package/css/table.css

@@ -398,56 +398,10 @@
 .iui-paginator-pages-group{
   display:inline-flex;
   align-items:center;
-  isolation:isolate;
   margin:0 8px; }
-  .iui-paginator-pages-group > *{
-    display:flex; }
-    .iui-paginator-pages-group > * input, .iui-paginator-pages-group > * button{
-      position:relative;
-      transition-duration:0ms; }
-      .iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * button:hover{
-        z-index:1; }
-      .iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:focus{
-        z-index:2; }
-        .iui-paginator-pages-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-paginator-pages-group > * button:focus:where(:not(:focus-visible):not(:hover)){
-          z-index:revert; }
-      .iui-paginator-pages-group > * input:disabled, .iui-paginator-pages-group > * button:disabled{
-        z-index:-1; }
-      .iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:hover, .iui-paginator-pages-group > * button:focus{
-        transition-duration:0.2s; }
-      .iui-paginator-pages-group > * input.iui-active::after, .iui-paginator-pages-group > * button.iui-active::after{
-        content:'';
-        position:absolute;
-        height:2px;
-        opacity:1;
-        top:2px;
-        left:2px;
-        width:calc(100% - 4px);
-        background-color:#008BE1;
-        background-color:var(--iui-color-foreground-primary); }
-      .iui-paginator-pages-group > * input.iui-active:disabled::after, .iui-paginator-pages-group > * button.iui-active:disabled::after{
-        background-color:rgba(0, 0, 0, 0.2);
-        background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
-      .iui-paginator-pages-group > * input:not(.iui-borderless), .iui-paginator-pages-group > * button:not(.iui-borderless){
-        border-radius:0; }
-    .iui-paginator-pages-group > *:first-child input, .iui-paginator-pages-group > *:first-child button:not(.iui-borderless){
-      border-top-left-radius:3px;
-      border-bottom-left-radius:3px; }
-    .iui-paginator-pages-group > *:last-child input, .iui-paginator-pages-group > *:last-child button:not(.iui-borderless){
-      border-top-right-radius:3px;
-      border-bottom-right-radius:3px; }
-    .iui-paginator-pages-group > * + *{
-      margin-left:-1px; }
-    .iui-paginator-pages-group > *:not(:first-child) .iui-default:disabled{
-      border-left-color:#DCE0E3;
-      border-left-color:var(--iui-color-background-4); }
-  .iui-paginator-pages-group > * + *{
-    margin-left:0; }
-  .iui-paginator-pages-group button.iui-active::after{
-    top:auto;
-    bottom:2px; }
 
 .iui-paginator-page-button{
+  --_iui-button-active-stripe-inset:initial;
   margin:0;
   padding:0;
   border:none;
@@ -479,7 +433,8 @@
   padding:0 8px;
   height:38px;
   gap:8px;
-  width:38px; }
+  width:38px;
+  --_iui-button-active-stripe-inset:calc(100% - 4px) 2px 2px; }
   @media (prefers-reduced-motion: no-preference){
     .iui-paginator-page-button{
       transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out; } }
@@ -502,6 +457,13 @@
     background:var(--iui-color-background-disabled);
     border-color:var(--iui-color-background-disabled);
     color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
+  .iui-paginator-page-button.iui-active::after{
+    content:'';
+    position:absolute;
+    inset:var(--_iui-button-active-stripe-inset);
+    background-color:var(--iui-color-foreground-primary); }
+  .iui-paginator-page-button.iui-active[disabled]::after, .iui-paginator-page-button.iui-active:disabled::after{
+    background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
   .iui-paginator-page-button > .iui-button-icon:only-child{
     margin-left:3px;
     margin-right:3px; }

package/css/tile.css

@@ -17,10 +17,26 @@
   color:rgba(0, 0, 0, 0.8);
   background-color:var(--iui-color-background-1);
   color:var(--iui-text-color); }
+  .iui-tile:focus-visible{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:2px; }
+  @supports not selector(*:focus-visible){
+    .iui-tile:focus{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:2px; } }
+  .iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
+    -webkit-clip-path:revert;
+            clip-path:revert;
+    overflow:visible;
+    position:static;
+    white-space:normal;
+    height:auto;
+    width:auto;
+    padding:0;
+    margin:0;
+    position:absolute; }
   .iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
     width:calc(100% - 32px); }
-  .iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
-    visibility:visible; }
   .iui-tile:hover .iui-tile-thumbnail-picture, .iui-tile:focus-within .iui-tile-thumbnail-picture{
     transform:translateZ(0) scale(1.1); }
   .iui-tile.iui-new .iui-tile-name,
@@ -31,6 +47,13 @@
     background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
     outline:solid 2px var(--iui-color-foreground-primary);
     background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
+    .iui-tile.iui-selected:focus-visible{
+      outline:4px solid var(--iui-color-foreground-primary);
+      outline-offset:0; }
+    @supports not selector(*:focus-visible){
+      .iui-tile.iui-selected:focus{
+        outline:4px solid var(--iui-color-foreground-primary);
+        outline-offset:0; } }
     .iui-tile.iui-selected .iui-tile-thumbnail-picture{
       transform:translateZ(0) scale(1.1); }
   .iui-tile.iui-folder{
@@ -242,11 +265,9 @@
     @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
       .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
       .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
-        background-color:rgba(0, 0, 0, 0.2);
-        -webkit-backdrop-filter:blur(5px);
-                backdrop-filter:blur(5px);
         background-color:rgba(0, 0, 0, var(--iui-opacity-5));
-        backdrop-filter:blur(5px); } }
+        -webkit-backdrop-filter:blur(5px);
+                backdrop-filter:blur(5px); } }
     .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon,
     .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
       fill:#FFF;
@@ -367,13 +388,19 @@
       white-space:nowrap;
       overflow:hidden;
       text-overflow:ellipsis; }
-  .iui-tile-content .iui-tile-more-options{
-    padding:0 2px;
-    height:27px;
-    gap:4px;
+
+.iui-tile-more-options{
+  position:absolute;
+  bottom:5.5px;
+  right:8px; }
+  .iui-tile-more-options:not(.iui-visible){
+    -webkit-clip-path:inset(50%);
+            clip-path:inset(50%);
+    overflow:hidden;
     position:absolute;
-    bottom:5.5px;
-    right:8px;
-    visibility:hidden; }
-    .iui-tile-content .iui-tile-more-options.iui-visible{
-      visibility:visible; }
+    white-space:nowrap;
+    height:1px;
+    width:1px;
+    padding:0;
+    margin:-1px;
+    border-width:0; }

package/css/tree.css

@@ -16,10 +16,30 @@
   vertical-align:baseline;
   list-style:none; }
 
+.iui-tree-item:focus-visible{
+  outline:none; }
+  .iui-tree-item:focus-visible > .iui-tree-node{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px; }
+    .iui-tree-item:focus-visible > .iui-tree-node.iui-active{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:-2px; }
+
+@supports not selector(*:focus-visible){
+  .iui-tree-item:focus{
+    outline:none; }
+    .iui-tree-item:focus > .iui-tree-node{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:-1px; }
+      .iui-tree-item:focus > .iui-tree-node.iui-active{
+        outline:2px solid var(--iui-color-foreground-primary);
+        outline-offset:-2px; } }
+
 .iui-tree-node{
   display:flex;
   cursor:pointer;
-  padding:0 8px; }
+  padding:0 8px;
+  align-items:center; }
   .iui-tree-node-checkbox{
     margin-right:8px; }
   .iui-tree-node-content{
@@ -72,13 +92,6 @@
       font-size:12px;
       color:rgba(0, 0, 0, 0.4);
       color:var(--iui-text-color-muted); }
-  .iui-tree-node:focus-visible{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:-1px; }
-  @supports not selector(*:focus-visible){
-    .iui-tree-node:focus{
-      outline:1px solid var(--iui-color-foreground-primary);
-      outline-offset:-1px; } }
   .iui-tree-node:hover{
     background-color:rgba(0, 139, 225, 0.1);
     background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
@@ -93,13 +106,6 @@
     background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
     outline:thin solid var(--iui-color-foreground-primary);
     outline-offset:-1px; }
-    .iui-tree-node.iui-active:focus-visible{
-      outline:2px solid var(--iui-color-foreground-primary);
-      outline-offset:-2px; }
-    @supports not selector(*:focus-visible){
-      .iui-tree-node.iui-active:focus{
-        outline:2px solid var(--iui-color-foreground-primary);
-        outline-offset:-2px; } }
   .iui-tree-node.iui-disabled{
     cursor:not-allowed;
     outline:none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.46.0",
+  "version": "0.48.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -68,7 +68,7 @@
     "html-minifier": "^4.0.0",
     "husky": "=4",
     "lint-staged": "^11.2.6",
-    "node-sass": "^5.0.0",
+    "node-sass": "^7.0.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^8.3.1",
     "postcss-discard-comments": "^5.0.1",

package/scss/badge/badge.scss

@@ -11,14 +11,17 @@ $iui-badge-background-primary: $iui-color-foreground-primary--dark;
 $iui-badge-text-color: rgba($iui-color-foreground-body--light, $iui-opacity-3--light);
 
 @mixin iui-badge {
+  --iui-badge-background-color: #{$iui-badge-background-default};
+  --_iui-badge-text-color: #{$iui-badge-text-color};
+
   @include iui-reset;
   display: inline-block;
   font-size: $iui-font-size-small;
   padding: 0 $iui-xs * 1.5;
   margin: round($iui-baseline * 0.5) 0;
   border-radius: $iui-border-radius;
-  background-color: var(--badge-color, $iui-badge-background-default);
-  color: var(--badge-text-color, $iui-badge-text-color);
+  background-color: var(--iui-badge-background-color);
+  color: var(--_iui-badge-text-color);
   text-transform: uppercase;
   user-select: none;
   max-width: 20ch;

package/scss/button/button-group.scss

@@ -7,29 +7,36 @@
   align-items: center;
   isolation: isolate;
 
-  $childSelector: 'input, button'; // target nested inputs and buttons
+  $childZindexSelector: '.iui-input-container, .iui-button, .iui-input:where(:not(.iui-input-container .iui-input))';
+  $childBorderSelector: '.iui-input, .iui-button:where(:not(.iui-borderless))';
+  $disabledSelector: '&:disabled, &.iui-disabled, &[aria-disabled="true"]';
 
   > * {
     display: flex;
 
-    #{$childSelector} {
+    #{$childZindexSelector} {
       position: relative;
 
+      // Adds stripe above active button
+      --_iui-button-active-stripe-inset: #{$iui-xxs} #{$iui-xxs} calc(100% - #{$iui-xs});
+
       &:hover {
         z-index: 1;
       }
 
-      &:focus {
+      &:focus,
+      &:focus-within {
         z-index: 2;
-
-        &:where(:not(:focus-visible):not(:hover)) {
-          z-index: revert;
-        }
       }
 
-      &:disabled {
+      #{$disabledSelector} {
         z-index: -1;
       }
+    }
+
+    #{$childBorderSelector} {
+      // Reset border radius
+      border-radius: 0;
 
       transition-duration: 0ms; // disable exit animation to avoid border flicker
 
@@ -37,47 +44,18 @@
       &:focus {
         transition-duration: $iui-speed-fast; // re-enable enter animation
       }
-
-      // Adds stripe above active button
-      &.iui-active {
-        &::after {
-          content: '';
-          position: absolute;
-          height: $iui-xxs;
-          opacity: 1;
-          top: $iui-xxs;
-          left: $iui-xxs;
-          width: calc(100% - #{$iui-xs});
-          @include themed {
-            background-color: t(iui-color-foreground-primary);
-          }
-        }
-
-        &:disabled {
-          &::after {
-            @include themed {
-              background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
-            }
-          }
-        }
-      }
-
-      // Reset border radius only for non-borderless items
-      &:not(.iui-borderless) {
-        border-radius: 0;
-      }
     }
 
     // Add rounded corners to first and last items
     &:first-child {
-      #{$childSelector}:not(.iui-borderless) {
+      #{$childBorderSelector} {
         border-top-left-radius: $iui-border-radius;
         border-bottom-left-radius: $iui-border-radius;
       }
     }
 
     &:last-child {
-      #{$childSelector}:not(.iui-borderless) {
+      #{$childBorderSelector} {
         border-top-right-radius: $iui-border-radius;
         border-bottom-right-radius: $iui-border-radius;
       }
@@ -89,8 +67,8 @@
     }
 
     // Add slight border between disabled items
-    &:not(:first-child) {
-      .iui-default:disabled {
+    &:not(:first-child) :where(.iui-button.iui-default) {
+      #{$disabledSelector} {
         @include themed {
           border-left-color: t(iui-color-background-4);
         }

package/scss/button/button.scss

@@ -10,6 +10,8 @@ $iui-button-padding-small: $iui-xs * 2;
 $iui-button-padding-large: $iui-xs * 6;
 
 @mixin iui-button {
+  --_iui-button-active-stripe-inset: initial;
+
   @include iui-reset;
   font-family: inherit;
   display: inline-flex;
@@ -50,6 +52,23 @@ $iui-button-padding-large: $iui-xs * 6;
   &:disabled {
     @include iui-button-disabled;
   }
+
+  &.iui-active {
+    // Shows active stripe only if --_iui-button-active-stripe-inset is set (from outside)
+    &::after {
+      content: '';
+      position: absolute;
+      inset: var(--_iui-button-active-stripe-inset);
+      background-color: var(--iui-color-foreground-primary);
+    }
+
+    &[disabled],
+    &:disabled {
+      &::after {
+        background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+      }
+    }
+  }
 }
 
 /// Mixin for applying padding and margins to various button sizes.

package/scss/button/classes.scss

@@ -50,7 +50,6 @@
 }
 
 .iui-button-split-menu {
-  @include iui-button-group;
   @include iui-button-split-menu;
 }
 

package/scss/button/default.scss

@@ -43,6 +43,7 @@
       color: t(iui-color-foreground-primary);
     }
 
+    // Used for combining overlay background color with base background
     &::before {
       content: '';
       position: absolute;

package/scss/classes.scss

@@ -41,3 +41,4 @@
 @import './tree/classes';
 @import './user-icon/classes';
 @import './wizard/classes';
+@import './skip-to-content/classes';

package/scss/color-picker/color-picker.scss

@@ -7,11 +7,13 @@
 $iui-color-picker-content-width: ($iui-l * 9) + ($iui-s * 8); // (9 swatches per row) + (gaps)
 $iui-color-picker-max-width: ($iui-l * 10) + ($iui-s * 9); // (10 swatches per row) + (gaps)
 $iui-color-swatch-border-radius: 5px;
-$iui-inset-box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
-$iui-active-box-shadow: 0 0 0 $iui-xxs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
-$iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
+$iui-inset-box-shadow: inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+$iui-active-box-shadow: 0 0 0 $iui-xxs rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
+$iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
 
 @mixin iui-color-picker {
+  --iui-color-picker-selected-color: initial;
+
   @include iui-dropdown;
   box-sizing: border-box;
   border-radius: $iui-border-radius;
@@ -37,40 +39,43 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
 }
 
 @mixin iui-color-swatch {
+  --iui-color-swatch-background: initial;
+
   height: $iui-l;
   width: $iui-l;
   cursor: pointer;
   border-radius: $iui-color-swatch-border-radius;
-  background-color: var(--swatch-color);
   margin-bottom: $iui-xs;
   margin-right: $iui-xs;
-
+  position: relative;
+  background-color: var(--iui-color-swatch-background);
+  @include iui-transparent-background;
   @supports (gap: $iui-s) {
     margin-bottom: 0;
     margin-right: 0;
   }
 
-  @include themed {
+  &::after {
+    content: '';
+    position: absolute;
+    width: inherit;
+    height: inherit;
+    border-radius: inherit;
+    background-color: inherit;
     box-shadow: $iui-inset-box-shadow;
   }
 
   &:hover {
-    @include themed {
-      box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow;
-    }
+    box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow;
   }
 
-  @include iui-focus($offset: 0, $thickness: 2px);
+  @include iui-focus($offset: 1px, $thickness: 2px);
 
   &.iui-active {
-    @include themed {
-      box-shadow: $iui-active-box-shadow, $iui-inset-box-shadow;
-    }
+    box-shadow: $iui-active-box-shadow, $iui-inset-box-shadow;
 
     &:hover {
-      @include themed {
-        box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow, $iui-active-box-shadow;
-      }
+      box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow, $iui-active-box-shadow;
     }
   }
 }
@@ -159,14 +164,14 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
 }
 
 @mixin iui-color-field {
+  --iui-color-field-hue: initial;
+
   position: relative;
   cursor: crosshair;
   width: 100%;
   height: $iui-baseline * 19;
-  @include themed {
-    background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
-      linear-gradient(90deg, rgb(255, 255, 255), var(--hue));
-  }
+  background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
+    linear-gradient(90deg, rgb(255, 255, 255), var(--iui-color-field-hue));
 
   &:not(:last-child) {
     margin-bottom: round($iui-baseline * 0.5);
@@ -198,34 +203,14 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
 @mixin iui-opacity-slider {
   .iui-slider-rail {
     height: $iui-s;
-    @include themed {
-      // Checkered transparency background pattern.
-      background-image: repeating-linear-gradient(
-        45deg,
-        t(iui-color-background-3) 25%,
-        transparent 25%,
-        transparent 75%,
-        t(iui-color-background-3) 75%,
-        t(iui-color-background-3)
-      ),
-        repeating-linear-gradient(
-        45deg,
-        t(iui-color-background-3) 25%,
-        t(iui-color-background-5) 25%,
-        t(iui-color-background-5) 75%,
-        t(iui-color-background-3) 75%,
-        t(iui-color-background-3)
-      );
-      background-position: 0 0, ($iui-s * 0.5) ($iui-s * 0.5);
-      background-size: $iui-s $iui-s;
-    }
+    @include iui-transparent-background($size: $iui-s);
 
     &::before {
       display: block;
       content: '';
       width: 100%;
       height: 100%;
-      background-image: linear-gradient(to right, transparent 0%, var(--selected-color) 100%);
+      background-image: linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
     }
   }
 
@@ -235,25 +220,45 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
 }
 
 @mixin iui-color-dot {
+  --iui-color-dot-inset: initial;
+
   position: absolute;
-  top: var(--top, 0%);
-  left: var(--left, 0%);
+  inset: var(--iui-color-dot-inset);
   width: $iui-m;
   height: $iui-m;
   border-radius: 50%;
   transform: translate(-$iui-s, -$iui-s);
   cursor: crosshair;
-  @include themed {
-    box-shadow: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-1)) 0 0 0 $iui-xxs - 1,
-      inset 0 0 0 $iui-xxs - 1 rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-6));
-    background-color: var(--selected-color);
-  }
+  box-shadow: rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 $iui-xxs - 1,
+    inset 0 0 0 $iui-xxs - 1 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
+  background-color: var(--iui-color-picker-selected-color);
 
   &:hover {
-    @include themed {
-      box-shadow: $iui-hover-box-shadow;
-    }
+    box-shadow: $iui-hover-box-shadow;
   }
 
   @include iui-focus($offset: 0, $thickness: 2px);
 }
+
+@mixin iui-transparent-background($size: $iui-m) {
+  background-position: 0 0, ($size * 0.5) ($size * 0.5);
+  background-size: $size $size;
+  @include themed {
+    background-image: repeating-linear-gradient(
+      45deg,
+      t(iui-color-background-3) 25%,
+      transparent 25%,
+      transparent 75%,
+      t(iui-color-background-3) 75%,
+      t(iui-color-background-3)
+    ),
+      repeating-linear-gradient(
+      45deg,
+      t(iui-color-background-3) 25%,
+      t(iui-color-background-5) 25%,
+      t(iui-color-background-5) 75%,
+      t(iui-color-background-3) 75%,
+      t(iui-color-background-3)
+    );
+  }
+}