@itwin/itwinui-css 0.50.1 → 0.53.0

package/scss/style/theme.scss

@@ -1,26 +1,28 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
+
 // LIGHT THEME //
 // Light theme > Background
-$iui-color-background-1--light: #FFF;
-$iui-color-background-2--light: #F8F9FB;
-$iui-color-background-3--light: #EEF0F3;
-$iui-color-background-4--light: #DCE0E3;
-$iui-color-background-5--light: #C7CCD1;
-$iui-color-background-primary--light: #008BE1;
-$iui-color-background-positive--light: #53A21A;
-$iui-color-background-negative--light: #D30A0A;
-$iui-color-background-warning--light: #F18B12;
+$iui-color-background-1--light: hsl(0, 0%, 100%);
+$iui-color-background-2--light: hsl(220, 27%, 98%);
+$iui-color-background-3--light: hsl(216, 17%, 94%);
+$iui-color-background-4--light: hsl(206, 11%, 88%);
+$iui-color-background-5--light: hsl(210, 10%, 80%);
+$iui-color-background-primary--light: hsl(203, 100%, 44%);
+$iui-color-background-positive--light: hsl(95, 72%, 37%);
+$iui-color-background-warning--light: hsl(33, 89%, 51%);
+$iui-color-background-negative--light: hsl(0, 91%, 43%);
 $iui-color-background-disabled--light: $iui-color-background-3--light;
+$iui-color-background-border--light: $iui-color-background-5--light;
 
 // Light theme > Foreground
-$iui-color-foreground-body--light: #000;
-$iui-color-foreground-body-invert--light: #FFF;
-$iui-color-foreground-accessory--light: #FFF;
-$iui-color-foreground-primary--light: #008BE1;
-$iui-color-foreground-positive--light: #53A21A;
-$iui-color-foreground-negative--light: #D30A0A;
-$iui-color-foreground-warning--light: #F18B12;
+$iui-color-foreground-body--light: hsl(0, 0%, 0%);
+$iui-color-foreground-body-invert--light: invert($iui-color-foreground-body--light);
+$iui-color-foreground-accessory--light: hsl(0, 0%, 100%);
+$iui-color-foreground-primary--light: hsl(203, 100%, 44%);
+$iui-color-foreground-positive--light: hsl(95, 72%, 37%);
+$iui-color-foreground-warning--light: hsl(33, 89%, 51%);
+$iui-color-foreground-negative--light: hsl(0, 91%, 43%);
 
 // Light theme > Overlays
 $iui-color-background-1-overlay--light: darken($iui-color-background-1--light, 5%);
@@ -44,12 +46,6 @@ $iui-text-color--light: rgba($iui-color-foreground-body--light, $iui-opacity-2--
 $iui-text-color-muted--light: rgba($iui-color-foreground-body--light, $iui-opacity-4--light);
 $iui-text-color-placeholder--light: rgba($iui-color-foreground-body--light, $iui-opacity-5--light);
 
-// Light theme > Focus color
-$iui-focus-box-shadow--light: rgba($iui-color-foreground-primary--light, $iui-opacity-5--light) 0 0 0 2px;
-$iui-focus-positive-box-shadow--light: rgba($iui-color-foreground-positive--light, $iui-opacity-5--light) 0 0 0 2px;
-$iui-focus-warning-box-shadow--light: rgba($iui-color-foreground-warning--light, $iui-opacity-5--light) 0 0 0 2px;
-$iui-focus-negative-box-shadow--light: rgba($iui-color-foreground-negative--light, $iui-opacity-5--light) 0 0 0 2px;
-
 // Light theme > Icon colors
 $iui-icons-color--light: rgba($iui-color-foreground-body--light, $iui-opacity-4--light);
 $iui-icons-color-actionable--light: rgba($iui-color-foreground-body--light, $iui-opacity-2--light);
@@ -60,27 +56,84 @@ $iui-icons-color-positive--light: $iui-color-foreground-positive--light;
 $iui-icons-color-negative--light: $iui-color-foreground-negative--light;
 $iui-icons-color-warning--light: $iui-color-foreground-warning--light;
 
+// LIGHT HIGH CONTRAST THEME //
+// Light high contrast theme > Background
+$iui-color-background-1--light-hc: hsl(200, 12%, 100%);
+$iui-color-background-2--light-hc: hsl(200, 12%, 98%);
+$iui-color-background-3--light-hc: hsl(200, 12%, 94%);
+$iui-color-background-4--light-hc: hsl(200, 12%, 88%);
+$iui-color-background-5--light-hc: hsl(200, 12%, 80%);
+$iui-color-background-primary--light-hc: hsl(200, 100%, 26%);
+$iui-color-background-positive--light-hc: hsl(140, 100%, 19%);
+$iui-color-background-warning--light-hc: hsl(45, 100%, 22%);
+$iui-color-background-negative--light-hc: hsl(0, 100%, 31%);
+$iui-color-background-disabled--light-hc: $iui-color-background-3--light-hc;
+$iui-color-background-border--light-hc: hsl(0 0% 0% / 0.3);
+
+// Light high contrast theme > Foreground
+$iui-color-foreground-body--light-hc: hsl(0, 0%, 0%);
+$iui-color-foreground-body-invert--light-hc: invert($iui-color-foreground-body--light-hc);
+$iui-color-foreground-accessory--light-hc: hsl(0, 0%, 100%);
+$iui-color-foreground-primary--light-hc: hsl(200, 100%, 23%);
+$iui-color-foreground-positive--light-hc: hsl(140, 100%, 16%);
+$iui-color-foreground-warning--light-hc: hsl(45, 100%, 19%);
+$iui-color-foreground-negative--light-hc: hsl(0, 100%, 28%);
+
+// Light high contrast theme > Overlays
+$iui-color-background-1-overlay--light-hc: darken($iui-color-background-1--light-hc, 10%);
+$iui-color-background-primary-overlay--light-hc: darken($iui-color-background-primary--light-hc, 10%);
+$iui-color-background-positive-overlay--light-hc: darken($iui-color-background-positive--light-hc, 10%);
+$iui-color-foreground-primary-overlay--light-hc: darken($iui-color-foreground-primary--light-hc, 10%);
+$iui-color-foreground-positive-overlay--light-hc: darken($iui-color-foreground-positive--light-hc, 10%);
+$iui-color-foreground-warning-overlay--light-hc: darken($iui-color-foreground-warning--light-hc, 10%);
+$iui-color-foreground-negative-overlay--light-hc: darken($iui-color-foreground-negative--light-hc, 10%);
+
+// Light high contrast theme > Opacity stops
+$iui-opacity-1--light-hc: 1;
+$iui-opacity-2--light-hc: 0.86;
+$iui-opacity-3--light-hc: 0.72;
+$iui-opacity-4--light-hc: 0.67;
+$iui-opacity-5--light-hc: 0.3;
+$iui-opacity-6--light-hc: 0.06;
+
+// Light high contrast theme > Text colors
+$iui-text-color--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-2--light-hc);
+$iui-text-color-muted--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-4--light-hc);
+$iui-text-color-placeholder--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-4--light-hc);
+
+// Light high contrast theme > Icon colors
+$iui-icons-color--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-4--light-hc);
+$iui-icons-color-actionable--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-2--light-hc);
+$iui-icons-color-actionable-hover--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-1--light-hc);
+$iui-icons-color-actionable-disabled--light-hc: rgba($iui-color-foreground-body--light-hc, $iui-opacity-5--light-hc);
+$iui-icons-color-primary--light-hc: $iui-color-foreground-primary--light-hc;
+$iui-icons-color-positive--light-hc: $iui-color-foreground-positive--light-hc;
+$iui-icons-color-negative--light-hc: $iui-color-foreground-negative--light-hc;
+$iui-icons-color-warning--light-hc: $iui-color-foreground-warning--light-hc;
+
 // DARK THEME //
 // Dark theme > Background
-$iui-color-background-1--dark: #5A6973;
-$iui-color-background-2--dark: #4F5D65;
-$iui-color-background-3--dark: #445058;
-$iui-color-background-4--dark: #38444A;
-$iui-color-background-5--dark: #2D373C;
-$iui-color-background-primary--dark: #008BE1;
-$iui-color-background-positive--dark: #53A21A;
-$iui-color-background-negative--dark: #D30A0A;
-$iui-color-background-warning--dark: #F18B12;
+$iui-color-background-1--dark: hsl(204, 12%, 40%);
+$iui-color-background-2--dark: hsl(202, 12%, 35%);
+$iui-color-background-3--dark: hsl(204, 13%, 31%);
+$iui-color-background-4--dark: hsl(200, 14%, 25%);
+$iui-color-background-5--dark: hsl(200, 14%, 21%);
+$iui-color-background-primary--dark: hsl(203, 100%, 44%);
+$iui-color-background-positive--dark: hsl(95, 72%, 37%);
+$iui-color-background-warning--dark: hsl(33, 89%, 51%);
+$iui-color-background-negative--dark: hsl(0, 91%, 43%);
 $iui-color-background-disabled--dark: $iui-color-background-3--dark;
+$iui-color-background-border--dark: $iui-color-background-5--dark;
 
 // Dark theme > Foreground
-$iui-color-foreground-body--dark: #FFF;
-$iui-color-foreground-body-invert--dark: #000;
-$iui-color-foreground-accessory--dark: #FFF;
-$iui-color-foreground-primary--dark: #A5D7F5;
-$iui-color-foreground-positive--dark: #C3E1AF;
-$iui-color-foreground-negative--dark: #EFA9A9;
-$iui-color-foreground-warning--dark: #F9D7AB;
+$iui-color-foreground-body--dark: hsl(0, 0%, 100%);
+$iui-color-foreground-body-invert--dark: invert($iui-color-foreground-body--dark);
+$iui-color-foreground-body-invert--dark: hsl(0, 0%, 0%);
+$iui-color-foreground-accessory--dark: hsl(0, 0%, 100%);
+$iui-color-foreground-primary--dark: hsl(203, 80%, 80%);
+$iui-color-foreground-positive--dark: hsl(96, 45%, 78%);
+$iui-color-foreground-warning--dark: hsl(34, 87%, 82%);
+$iui-color-foreground-negative--dark: hsl(0, 69%, 80%);
 
 // Dark theme > Overlays
 $iui-color-background-1-overlay--dark: lighten($iui-color-background-1--dark, 5%);
@@ -104,11 +157,6 @@ $iui-text-color--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-2--da
 $iui-text-color-muted--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-4--dark);
 $iui-text-color-placeholder--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-5--dark);
 
-// Dark theme > Focus color
-$iui-focus-box-shadow--dark: rgba($iui-color-foreground-primary--dark, $iui-opacity-5--dark) 0 0 0 2px;
-$iui-focus-positive-box-shadow--dark: rgba($iui-color-foreground-positive--dark, $iui-opacity-5--dark) 0 0 0 2px;
-$iui-focus-warning-box-shadow--dark: rgba($iui-color-foreground-warning--dark, $iui-opacity-5--dark) 0 0 0 2px;
-$iui-focus-negative-box-shadow--dark: rgba($iui-color-foreground-negative--dark, $iui-opacity-5--dark) 0 0 0 2px;
 // Dark theme > Icon colors
 $iui-icons-color--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-4--dark);
 $iui-icons-color-actionable--dark: rgba($iui-color-foreground-body--dark, $iui-opacity-2--dark);
@@ -119,6 +167,61 @@ $iui-icons-color-positive--dark: $iui-color-foreground-positive--dark;
 $iui-icons-color-negative--dark: $iui-color-foreground-negative--dark;
 $iui-icons-color-warning--dark: $iui-color-foreground-warning--dark;
 
+// DARK HIGH CONTRAST THEME //
+// Dark high contrast theme > Background
+$iui-color-background-1--dark-hc: hsl(200, 12%, 20%);
+$iui-color-background-2--dark-hc: hsl(200, 12%, 15%);
+$iui-color-background-3--dark-hc: hsl(200, 12%, 10%);
+$iui-color-background-4--dark-hc: hsl(200, 12%, 25%);
+$iui-color-background-5--dark-hc: hsl(200, 12%, 30%);
+$iui-color-background-primary--dark-hc: hsl(200, 100%, 26%);
+$iui-color-background-positive--dark-hc: hsl(140, 100%, 19%);
+$iui-color-background-warning--dark-hc: hsl(45, 100%, 22%);
+$iui-color-background-negative--dark-hc: hsl(0, 100%, 31%);
+$iui-color-background-disabled--dark-hc: $iui-color-background-4--dark-hc;
+$iui-color-background-border--dark-hc: hsl(0 0% 100% / 0.34);
+
+// Dark high contrast theme > Foreground
+$iui-color-foreground-body--dark-hc: hsl(0, 0%, 100%);
+$iui-color-foreground-body-invert--dark-hc: invert($iui-color-foreground-body--dark-hc);
+$iui-color-foreground-accessory--dark-hc: hsl(0, 0%, 100%);
+$iui-color-foreground-primary--dark-hc: hsl(200, 100%, 79%);
+$iui-color-foreground-positive--dark-hc: hsl(140, 100%, 72%);
+$iui-color-foreground-warning--dark-hc: hsl(45, 100%, 75%);
+$iui-color-foreground-negative--dark-hc: hsl(0, 100%, 88%);
+
+// Dark high contrast theme > Overlays
+$iui-color-background-1-overlay--dark-hc: lighten($iui-color-background-1--dark-hc, 10%);
+$iui-color-background-primary-overlay--dark-hc: lighten($iui-color-background-primary--dark-hc, 10%);
+$iui-color-background-positive-overlay--dark-hc: lighten($iui-color-background-positive--dark-hc, 10%);
+$iui-color-foreground-primary-overlay--dark-hc: lighten($iui-color-foreground-primary--dark-hc, 10%);
+$iui-color-foreground-positive-overlay--dark-hc: lighten($iui-color-foreground-positive--dark-hc, 10%);
+$iui-color-foreground-warning-overlay--dark-hc: lighten($iui-color-foreground-warning--dark-hc, 10%);
+$iui-color-foreground-negative-overlay--dark-hc: lighten($iui-color-foreground-negative--dark-hc, 10%);
+
+// Dark high contrast theme > Opacity stops
+$iui-opacity-1--dark-hc: 1;
+$iui-opacity-2--dark-hc: 0.94;
+$iui-opacity-3--dark-hc: 0.88;
+$iui-opacity-4--dark-hc: 0.76;
+$iui-opacity-5--dark-hc: 0.34;
+$iui-opacity-6--dark-hc: 0.07;
+
+// Dark high contrast theme > Text colors
+$iui-text-color--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-2--dark-hc);
+$iui-text-color-muted--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-4--dark-hc);
+$iui-text-color-placeholder--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-5--dark-hc);
+
+// Dark high contrast theme > Icon colors
+$iui-icons-color--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-4--dark-hc);
+$iui-icons-color-actionable--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-2--dark-hc);
+$iui-icons-color-actionable-hover--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-1--dark-hc);
+$iui-icons-color-actionable-disabled--dark-hc: rgba($iui-color-foreground-body--dark-hc, $iui-opacity-5--dark-hc);
+$iui-icons-color-primary--dark-hc: $iui-color-foreground-primary--dark-hc;
+$iui-icons-color-positive--dark-hc: $iui-color-foreground-positive--dark-hc;
+$iui-icons-color-warning--dark-hc: $iui-color-foreground-warning--dark-hc;
+$iui-icons-color-negative--dark-hc: $iui-color-foreground-negative--dark-hc;
+
 // Theme values
 $themes: (
   light: (
@@ -129,16 +232,17 @@ $themes: (
     iui-color-background-5: $iui-color-background-5--light,
     iui-color-background-primary: $iui-color-background-primary--light,
     iui-color-background-positive: $iui-color-background-positive--light,
-    iui-color-background-negative: $iui-color-background-negative--light,
     iui-color-background-warning: $iui-color-background-warning--light,
+    iui-color-background-negative: $iui-color-background-negative--light,
     iui-color-background-disabled: $iui-color-background-disabled--light,
+    iui-color-background-border: $iui-color-background-border--light,
     iui-color-foreground-body: $iui-color-foreground-body--light,
     iui-color-foreground-body-invert: $iui-color-foreground-body-invert--light,
     iui-color-foreground-accessory: $iui-color-foreground-accessory--light,
     iui-color-foreground-primary: $iui-color-foreground-primary--light,
     iui-color-foreground-positive: $iui-color-foreground-positive--light,
-    iui-color-foreground-negative: $iui-color-foreground-negative--light,
     iui-color-foreground-warning: $iui-color-foreground-warning--light,
+    iui-color-foreground-negative: $iui-color-foreground-negative--light,
     iui-color-background-1-overlay: $iui-color-background-1-overlay--light,
     iui-color-background-primary-overlay: $iui-color-background-primary-overlay--light,
     iui-color-background-positive-overlay: $iui-color-background-positive-overlay--light,
@@ -155,18 +259,14 @@ $themes: (
     iui-text-color: $iui-text-color--light,
     iui-text-color-muted: $iui-text-color-muted--light,
     iui-text-color-placeholder: $iui-text-color-placeholder--light,
-    iui-focus-box-shadow: $iui-focus-box-shadow--light,
-    iui-focus-positive-box-shadow: $iui-focus-positive-box-shadow--light,
-    iui-focus-warning-box-shadow: $iui-focus-warning-box-shadow--light,
-    iui-focus-negative-box-shadow: $iui-focus-negative-box-shadow--light,
     iui-icons-color: $iui-icons-color--light,
     iui-icons-color-actionable: $iui-icons-color-actionable--light,
     iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--light,
     iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--light,
     iui-icons-color-primary: $iui-icons-color-primary--light,
     iui-icons-color-positive: $iui-icons-color-positive--light,
-    iui-icons-color-negative: $iui-icons-color-negative--light,
     iui-icons-color-warning: $iui-icons-color-warning--light,
+    iui-icons-color-negative: $iui-icons-color-negative--light,
   ),
   dark: (
     iui-color-background-1: $iui-color-background-1--dark,
@@ -176,16 +276,17 @@ $themes: (
     iui-color-background-5: $iui-color-background-5--dark,
     iui-color-background-primary: $iui-color-background-primary--dark,
     iui-color-background-positive: $iui-color-background-positive--dark,
-    iui-color-background-negative: $iui-color-background-negative--dark,
     iui-color-background-warning: $iui-color-background-warning--dark,
+    iui-color-background-negative: $iui-color-background-negative--dark,
     iui-color-background-disabled: $iui-color-background-disabled--dark,
+    iui-color-background-border: $iui-color-background-border--dark,
     iui-color-foreground-body: $iui-color-foreground-body--dark,
     iui-color-foreground-body-invert: $iui-color-foreground-body-invert--dark,
     iui-color-foreground-accessory: $iui-color-foreground-accessory--dark,
     iui-color-foreground-primary: $iui-color-foreground-primary--dark,
     iui-color-foreground-positive: $iui-color-foreground-positive--dark,
-    iui-color-foreground-negative: $iui-color-foreground-negative--dark,
     iui-color-foreground-warning: $iui-color-foreground-warning--dark,
+    iui-color-foreground-negative: $iui-color-foreground-negative--dark,
     iui-color-background-1-overlay: $iui-color-background-1-overlay--dark,
     iui-color-background-primary-overlay: $iui-color-background-primary-overlay--dark,
     iui-color-background-positive-overlay: $iui-color-background-positive-overlay--dark,
@@ -202,18 +303,100 @@ $themes: (
     iui-text-color: $iui-text-color--dark,
     iui-text-color-muted: $iui-text-color-muted--dark,
     iui-text-color-placeholder: $iui-text-color-placeholder--dark,
-    iui-focus-box-shadow: $iui-focus-box-shadow--dark,
-    iui-focus-positive-box-shadow: $iui-focus-positive-box-shadow--dark,
-    iui-focus-warning-box-shadow: $iui-focus-warning-box-shadow--dark,
-    iui-focus-negative-box-shadow: $iui-focus-negative-box-shadow--dark,
     iui-icons-color: $iui-icons-color--dark,
     iui-icons-color-actionable: $iui-icons-color-actionable--dark,
     iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--dark,
     iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--dark,
     iui-icons-color-primary: $iui-icons-color-primary--dark,
     iui-icons-color-positive: $iui-icons-color-positive--dark,
-    iui-icons-color-negative: $iui-icons-color-negative--dark,
     iui-icons-color-warning: $iui-icons-color-warning--dark,
+    iui-icons-color-negative: $iui-icons-color-negative--dark,
+  ),
+  dark-hc: (
+    iui-color-background-1: $iui-color-background-1--dark-hc,
+    iui-color-background-2: $iui-color-background-2--dark-hc,
+    iui-color-background-3: $iui-color-background-3--dark-hc,
+    iui-color-background-4: $iui-color-background-4--dark-hc,
+    iui-color-background-5: $iui-color-background-5--dark-hc,
+    iui-color-background-primary: $iui-color-background-primary--dark-hc,
+    iui-color-background-positive: $iui-color-background-positive--dark-hc,
+    iui-color-background-warning: $iui-color-background-warning--dark-hc,
+    iui-color-background-negative: $iui-color-background-negative--dark-hc,
+    iui-color-background-disabled: $iui-color-background-disabled--dark-hc,
+    iui-color-background-border: $iui-color-background-border--dark-hc,
+    iui-color-foreground-body: $iui-color-foreground-body--dark-hc,
+    iui-color-foreground-accessory: $iui-color-foreground-accessory--dark-hc,
+    iui-color-foreground-primary: $iui-color-foreground-primary--dark-hc,
+    iui-color-foreground-positive: $iui-color-foreground-positive--dark-hc,
+    iui-color-foreground-warning: $iui-color-foreground-warning--dark-hc,
+    iui-color-foreground-negative: $iui-color-foreground-negative--dark-hc,
+    iui-color-background-1-overlay: $iui-color-background-1-overlay--dark-hc,
+    iui-color-background-primary-overlay: $iui-color-background-primary-overlay--dark-hc,
+    iui-color-background-positive-overlay: $iui-color-background-positive-overlay--dark-hc,
+    iui-color-foreground-primary-overlay: $iui-color-foreground-primary-overlay--dark-hc,
+    iui-color-foreground-positive-overlay: $iui-color-foreground-positive-overlay--dark-hc,
+    iui-color-foreground-warning-overlay: $iui-color-foreground-warning-overlay--dark-hc,
+    iui-color-foreground-negative-overlay: $iui-color-foreground-negative-overlay--dark-hc,
+    iui-opacity-1: $iui-opacity-1--dark-hc,
+    iui-opacity-2: $iui-opacity-2--dark-hc,
+    iui-opacity-3: $iui-opacity-3--dark-hc,
+    iui-opacity-4: $iui-opacity-4--dark-hc,
+    iui-opacity-5: $iui-opacity-5--dark-hc,
+    iui-opacity-6: $iui-opacity-6--dark-hc,
+    iui-text-color: $iui-text-color--dark-hc,
+    iui-text-color-muted: $iui-text-color-muted--dark-hc,
+    iui-text-color-placeholder: $iui-text-color-placeholder--dark-hc,
+    iui-icons-color: $iui-icons-color--dark-hc,
+    iui-icons-color-actionable: $iui-icons-color-actionable--dark-hc,
+    iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--dark-hc,
+    iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--dark-hc,
+    iui-icons-color-primary: $iui-icons-color-primary--dark-hc,
+    iui-icons-color-positive: $iui-icons-color-positive--dark-hc,
+    iui-icons-color-warning: $iui-icons-color-warning--dark-hc,
+    iui-icons-color-negative: $iui-icons-color-negative--dark-hc,
+  ),
+  light-hc: (
+    iui-color-background-1: $iui-color-background-1--light-hc,
+    iui-color-background-2: $iui-color-background-2--light-hc,
+    iui-color-background-3: $iui-color-background-3--light-hc,
+    iui-color-background-4: $iui-color-background-4--light-hc,
+    iui-color-background-5: $iui-color-background-5--light-hc,
+    iui-color-background-primary: $iui-color-background-primary--light-hc,
+    iui-color-background-positive: $iui-color-background-positive--light-hc,
+    iui-color-background-warning: $iui-color-background-warning--light-hc,
+    iui-color-background-negative: $iui-color-background-negative--light-hc,
+    iui-color-background-disabled: $iui-color-background-disabled--light-hc,
+    iui-color-background-border: $iui-color-background-border--light-hc,
+    iui-color-foreground-body: $iui-color-foreground-body--light-hc,
+    iui-color-foreground-accessory: $iui-color-foreground-accessory--light-hc,
+    iui-color-foreground-primary: $iui-color-foreground-primary--light-hc,
+    iui-color-foreground-positive: $iui-color-foreground-positive--light-hc,
+    iui-color-foreground-warning: $iui-color-foreground-warning--light-hc,
+    iui-color-foreground-negative: $iui-color-foreground-negative--light-hc,
+    iui-color-background-1-overlay: $iui-color-background-1-overlay--light-hc,
+    iui-color-background-primary-overlay: $iui-color-background-primary-overlay--light-hc,
+    iui-color-background-positive-overlay: $iui-color-background-positive-overlay--light-hc,
+    iui-color-foreground-primary-overlay: $iui-color-foreground-primary-overlay--light-hc,
+    iui-color-foreground-positive-overlay: $iui-color-foreground-positive-overlay--light-hc,
+    iui-color-foreground-warning-overlay: $iui-color-foreground-warning-overlay--light-hc,
+    iui-color-foreground-negative-overlay: $iui-color-foreground-negative-overlay--light-hc,
+    iui-opacity-1: $iui-opacity-1--light-hc,
+    iui-opacity-2: $iui-opacity-2--light-hc,
+    iui-opacity-3: $iui-opacity-3--light-hc,
+    iui-opacity-4: $iui-opacity-4--light-hc,
+    iui-opacity-5: $iui-opacity-5--light-hc,
+    iui-opacity-6: $iui-opacity-6--light-hc,
+    iui-text-color: $iui-text-color--light-hc,
+    iui-text-color-muted: $iui-text-color-muted--light-hc,
+    iui-text-color-placeholder: $iui-text-color-placeholder--light-hc,
+    iui-icons-color: $iui-icons-color--light-hc,
+    iui-icons-color-actionable: $iui-icons-color-actionable--light-hc,
+    iui-icons-color-actionable-hover: $iui-icons-color-actionable-hover--light-hc,
+    iui-icons-color-actionable-disabled: $iui-icons-color-actionable-disabled--light-hc,
+    iui-icons-color-primary: $iui-icons-color-primary--light-hc,
+    iui-icons-color-positive: $iui-icons-color-positive--light-hc,
+    iui-icons-color-warning: $iui-icons-color-warning--light-hc,
+    iui-icons-color-negative: $iui-icons-color-negative--light-hc,
   ),
 );
 
@@ -222,14 +405,10 @@ $cssVariables: (
   iui-text-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)),
   iui-text-color-muted: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)),
   iui-text-color-placeholder: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)),
-  iui-focus-box-shadow: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5)) 0 0 0 2px,
-  iui-focus-positive-box-shadow: rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5)) 0 0 0 2px,
-  iui-focus-warning-box-shadow: rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5)) 0 0 0 2px,
-  iui-focus-negative-box-shadow: rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5)) 0 0 0 2px,
   iui-icons-color-primary: var(--iui-color-foreground-primary),
   iui-icons-color-positive: var(--iui-color-foreground-positive),
-  iui-icons-color-negative: var(--iui-color-foreground-negative),
   iui-icons-color-warning: var(--iui-color-foreground-warning),
+  iui-icons-color-negative: var(--iui-color-foreground-negative),
   iui-icons-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)),
   iui-icons-color-actionable: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)),
   iui-icons-color-actionable-hover: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)),
@@ -263,10 +442,14 @@ $fallbackvars: getfallbackvars();
 
       --#{$key}: #{$cssVarValue};
     } @else if (type-of($value) == color) {
-      $rgbVal: hextorgb($value);
+      @if alpha($value) < 1 {
+        --#{$key}: #{$value};
+      } @else {
+        $rgbVal: hextorgb($value);
 
-      --#{$key}-rgb: #{$rgbVal};
-      --#{$key}: rgb(var(--#{$key}-rgb));
+        --#{$key}-rgb: #{$rgbVal};
+        --#{$key}: rgb(var(--#{$key}-rgb));
+      }
     } @else {
       --#{$key}: #{$value};
     }

package/scss/surface/classes.scss

@@ -0,0 +1,7 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+
+.iui-surface {
+  @include iui-surface;
+}

package/scss/surface/index.scss

@@ -0,0 +1,3 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './surface';

package/scss/surface/surface.scss

@@ -0,0 +1,18 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import '../style/index';
+
+@mixin iui-surface($background-color: var(--iui-color-background-1), $border-radius: 0, $elevation: $iui-elevation-2) {
+  --iui-surface-background-color: #{$background-color};
+  --iui-surface-border-radius: #{$border-radius};
+  --iui-surface-elevation: #{$elevation};
+
+  background-color: var(--iui-surface-background-color);
+  border-radius: var(--iui-surface-border-radius);
+  box-shadow: var(--iui-surface-elevation);
+  box-sizing: border-box;
+  color: var(--iui-text-color);
+  @media (forced-colors: active) {
+    border: 1px solid transparent;
+  }
+}

package/scss/table/column-filter.scss

@@ -1,10 +1,10 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
-@import '../menu/index';
+@import '../surface/index';
 
 @mixin iui-column-filter {
-  @include iui-dropdown;
+  @include iui-surface;
   padding: $iui-baseline $iui-sm;
   display: inline-flex;
   flex-direction: column;

package/scss/table/table.scss

@@ -31,6 +31,8 @@
   .iui-row {
     display: flex;
     flex-grow: 1;
+    border-left: solid 1px transparent;
+    border-right: solid 1px transparent;
   }
 
   .iui-cell:not(.iui-slot) {
@@ -73,7 +75,7 @@
           transition: background-color $iui-speed-fast ease-out, width $iui-speed-fast ease-out;
         }
         @include themed {
-          background-color: t(iui-color-background-5);
+          background-color: t(iui-color-background-border);
         }
       }
 
@@ -103,15 +105,30 @@
     }
   }
 
+  .iui-reorder-bar {
+    position: absolute;
+    height: 100%;
+    width: $iui-xxs;
+  }
+
   .iui-reorder-column-right {
-    @include themed {
-      border-right: $iui-xxs solid t(iui-color-foreground-primary);
+    > .iui-reorder-bar {
+      right: 0;
     }
   }
 
   .iui-reorder-column-left {
-    @include themed {
-      border-left: $iui-xxs solid t(iui-color-foreground-primary);
+    > .iui-reorder-bar {
+      left: 0;
+    }
+  }
+
+  .iui-reorder-column-left,
+  .iui-reorder-column-right {
+    > .iui-reorder-bar {
+      @include themed {
+        background-color: t(iui-color-foreground-primary);
+      }
     }
   }
 
@@ -165,7 +182,7 @@
       transition: border $iui-speed-fast ease-out;
     }
     @include themed {
-      border-bottom-color: t(iui-color-background-4);
+      border-bottom-color: t(iui-color-background-border);
     }
 
     > .iui-slot > .iui-more-options {
@@ -228,7 +245,7 @@
     &.iui-selected {
       @include themed {
         border-color: t(iui-color-foreground-primary);
-        background: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
+        background: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
       }
 
       + .iui-selected {
@@ -391,11 +408,7 @@
       box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-#{$status});
     }
 
-    *::selection {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
-      }
-    }
+    @include iui-text-selection($status);
   }
 
   .iui-cell-end-icon svg {
@@ -410,11 +423,7 @@
     background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-6));
   }
 
-  &::selection {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
-    }
-  }
+  @include iui-text-selection($status);
 }
 
 @mixin iui-table-cell-icon {

package/scss/tile/tile.scss

@@ -66,7 +66,7 @@
       flex: 1;
       border-bottom: none;
       @include themed() {
-        border-right: 1px solid t(iui-color-background-4);
+        border-right: 1px solid t(iui-color-background-border);
       }
     }
 
@@ -166,7 +166,7 @@
   justify-content: center;
   @include themed() {
     background-color: t(iui-color-background-1-overlay);
-    border-bottom: 1px solid t(iui-color-background-4);
+    border-bottom: 1px solid t(iui-color-background-border);
   }
 
   .iui-thumbnail-icon {
@@ -291,15 +291,15 @@
     &,
     &:hover {
       @include themed() {
-        border-top: 1px solid t(iui-color-background-4);
-        border-color: t(iui-color-background-4);
+        border-top: 1px solid t(iui-color-background-border);
+        border-color: t(iui-color-background-border);
       }
     }
   }
 
   > button:not(:last-child) {
     @include themed() {
-      border-right: 1px solid t(iui-color-background-4);
+      border-right: 1px solid t(iui-color-background-border);
     }
   }
 }

package/scss/time-picker/time-picker.scss

@@ -15,7 +15,7 @@
 
   &:not(:first-child) {
     @include themed {
-      border-left: 1px solid t(iui-color-background-4);
+      border-left: 1px solid t(iui-color-background-border);
     }
   }
 
@@ -32,7 +32,7 @@
 
   &:not(:first-child) {
     @include themed {
-      border-left: 1px solid t(iui-color-background-4);
+      border-left: 1px solid t(iui-color-background-border);
     }
   }
 

package/scss/toast-notification/categories.scss

@@ -10,11 +10,7 @@
   }
 
   > .iui-message {
-    &::selection {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-#{$category}-rgb), t(iui-opacity-4));
-      }
-    }
+    @include iui-text-selection($category);
   }
 
   > .iui-status-area {

package/scss/toggle-switch/classes.scss

@@ -2,6 +2,10 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './index';
 
+.iui-toggle-switch-wrapper {
+  @include iui-toggle-switch-wrapper;
+}
+
 .iui-toggle-switch {
   @include iui-toggle-switch;
 }