@itwin/itwinui-css 0.59.2 → 1.0.0-dev.0

package/scss/{inputs → input}/input-with-icon.scss

@@ -1,6 +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 '../style/index';
+@import '../utils/index';
 
 // Mixin to have inputs combined with icon (eg. select)
 @mixin iui-input-with-icon {

package/scss/{inputs → input}/input.scss

@@ -1,6 +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 '../style/index';
+@import '../utils/index';
 
 @mixin iui-input {
   @include iui-reset;
@@ -12,17 +13,14 @@
   line-height: $iui-line-height;
   border-radius: $iui-border-radius;
   appearance: none;
-  box-sizing: border-box;
   padding: $iui-component-padding-vertical $iui-component-padding-horizontal;
   min-height: $iui-component-height;
+  color: var(--iui-text-color);
+  background-color: var(--iui-color-background-1);
+  border: 1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
   @media (prefers-reduced-motion: no-preference) {
     transition: border-color $iui-speed-fast ease-out;
   }
-  @include themed {
-    color: t(iui-text-color);
-    background-color: t(iui-color-background-1);
-    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-  }
 
   &.iui-small {
     padding-top: $iui-component-padding-vertical-small;
@@ -39,9 +37,7 @@
 
   &::placeholder {
     user-select: none;
-    @include themed {
-      color: t(iui-text-color-placeholder);
-    }
+    color: var(--iui-text-color-placeholder);
   }
 
   &:autofill {
@@ -49,32 +45,26 @@
   }
 
   &:hover {
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-    }
+    border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
     @media (prefers-reduced-motion: no-preference) {
       transition: border-color $iui-speed-fast ease-out;
     }
   }
 
   &[disabled] {
-    @include themed {
-      background-color: t(iui-color-background-disabled);
-      border-color: t(iui-color-background-disabled);
-    }
+    background-color: var(--iui-color-background-disabled);
+    border-color: var(--iui-color-background-disabled);
     cursor: not-allowed;
     --_hover-color: var(--iui-color-background-disabled);
   }
 }
 
 @mixin iui-input-autofill {
-  @include themed {
-    border-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-1));
-    color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-1));
-    background: linear-gradient(
-      rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
-      rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))
-    ),
-      linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
-  }
+  border-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  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));
 }

package/scss/keyboard/keyboard.scss

@@ -1,6 +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 '../style/index';
+@import '../utils/index';
 
 @mixin iui-keyboard {
   @include iui-reset;
@@ -15,19 +16,14 @@
   text-transform: uppercase;
   user-select: none;
   cursor: default;
+  background-color: var(--iui-color-background-1);
+  border: 1px solid var(--iui-color-background-5);
+  box-shadow: 0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
   @media (prefers-reduced-motion: no-preference) {
     transition: box-shadow $iui-speed-fast ease-out;
   }
 
-  @include themed {
-    background-color: t(iui-color-background-1);
-    border: 1px solid t(iui-color-background-5);
-    box-shadow: 0 1px 1px t(iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, t(iui-opacity-5)) inset;
-  }
-
   &:hover {
-    @include themed {
-      box-shadow: 0 0 0 t(iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, t(iui-opacity-5)) inset;
-    }
+    box-shadow: 0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
   }
 }

package/scss/location-marker/data-rich.scss

@@ -14,14 +14,10 @@
     font-size: $iui-font-size-leading;
     padding: round($iui-baseline * 0.25) $iui-s;
     filter: drop-shadow($iui-elevation-2);
-    box-sizing: border-box;
     position: relative;
-
-    @include themed {
-      border: solid 1px t(iui-color-foreground-accessory);
-      background-color: t(iui-color-foreground-accessory);
-      color: t(iui-color-foreground-accessory);
-    }
+    border: solid 1px var(--iui-color-foreground-accessory);
+    background-color: var(--iui-color-foreground-accessory);
+    color: var(--iui-color-foreground-accessory);
 
     &::before {
       content: '';
@@ -35,10 +31,7 @@
       margin: auto;
       border-width: $iui-xs;
       border-style: solid;
-
-      @include themed {
-        border-color: t(iui-color-foreground-accessory) transparent transparent transparent;
-      }
+      border-color: var(--iui-color-foreground-accessory) transparent transparent transparent;
     }
 
     > .iui-location-marker-data-rich-icon {
@@ -49,9 +42,7 @@
       vertical-align: -2px;
 
       &.iui-location-marker-data-rich-icon-monochrome {
-        @include themed {
-          fill: t(iui-color-foreground-accessory);
-        }
+        fill: var(--iui-color-foreground-accessory);
       }
     }
   }

package/scss/location-marker/default.scss

@@ -13,9 +13,7 @@
     filter: drop-shadow($iui-elevation-2);
 
     > .iui-location-marker-default-pin-dot {
-      @include themed {
-        fill: t(iui-color-foreground-accessory);
-      }
+      fill: var(--iui-color-foreground-accessory);
     }
   }
 }

package/scss/location-marker/location-marker.scss

@@ -1,8 +1,6 @@
 // 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 '../text/index';
-@import '../icon/index';
+@import '../utils/index';
 
 @mixin iui-location-marker {
   @include iui-reset;

package/scss/location-marker/me.scss

@@ -10,14 +10,11 @@
   height: $iui-icons-large;
   border-radius: 50%;
   cursor: default;
-
-  @include themed {
-    background: radial-gradient(
-      circle at center,
-      rgba(t(iui-color-foreground-primary-rgb), 0),
-      rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5))
-    );
-  }
+  background: radial-gradient(
+    circle at center,
+    rgba(var(--iui-color-foreground-primary-rgb), 0),
+    rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5))
+  );
 
   > .iui-location-marker-me-dot {
     width: $iui-icons-large * 0.5;
@@ -26,11 +23,7 @@
     top: $iui-icons-large * 0.25;
     left: $iui-icons-large * 0.25;
     border-radius: 50%;
-    box-sizing: border-box;
-
-    @include themed {
-      border: 1px solid t(iui-color-foreground-accessory);
-      background-color: t(iui-color-background-primary);
-    }
+    border: 1px solid var(--iui-color-foreground-accessory);
+    background-color: var(--iui-color-background-primary);
   }
 }

package/scss/menu/menu.scss

@@ -1,10 +1,9 @@
 // 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 '../icon/index';
-@import '../text/index';
+@import '../utils/index';
 
-$iui-active-outline: thin solid t(iui-color-foreground-primary);
+$iui-active-outline: thin solid var(--iui-color-foreground-primary);
 
 @mixin iui-list-menu {
   @include iui-reset;
@@ -38,7 +37,6 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
   padding: 0 ($iui-component-padding-horizontal + 1px);
   height: $iui-component-height;
   cursor: pointer;
-  box-sizing: border-box;
   line-height: normal;
 
   + #{&} {
@@ -65,9 +63,7 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
   .iui-menu-description {
     display: none;
     font-size: $iui-font-size-small;
-    @include themed {
-      opacity: t(iui-opacity-3);
-    }
+    opacity: var(--iui-opacity-3);
   }
 
   > .iui-icon {
@@ -75,17 +71,13 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
   }
 
   &:hover {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-    }
+    background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
   }
 
   &:focus,
   &.iui-focused {
-    @include themed {
-      outline: $iui-active-outline;
-      outline-offset: -1px;
-    }
+    outline: $iui-active-outline;
+    outline-offset: -1px;
   }
 
   &:focus:not(:focus-visible) {
@@ -103,12 +95,10 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
   &.iui-active {
     &,
     &:hover {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
-        color: t(iui-color-foreground-primary);
-        outline: $iui-active-outline;
-        outline-offset: -1px;
-      }
+      background-color: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+      color: var(--iui-color-foreground-primary);
+      outline: $iui-active-outline;
+      outline-offset: -1px;
     }
 
     .iui-menu-description {
@@ -116,9 +106,7 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
     }
 
     > .iui-icon {
-      @include themed {
-        fill: t(iui-icons-color-primary);
-      }
+      fill: var(--iui-icons-color-primary);
     }
 
     &:focus,
@@ -138,15 +126,11 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
     &:hover {
       cursor: not-allowed;
       outline: none;
-      @include themed {
-        background-color: t(iui-color-background-1);
-        color: t(iui-text-color-placeholder);
-      }
+      background-color: var(--iui-color-background-1);
+      color: var(--iui-text-color-placeholder);
 
       > .iui-icon {
-        @include themed {
-          fill: t(iui-icons-color-actionable-disabled);
-        }
+        fill: var(--iui-icons-color-actionable-disabled);
       }
     }
   }
@@ -186,18 +170,14 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
   height: 1px;
   width: calc(100% - #{$iui-l});
   margin: 1px auto;
-  @include themed {
-    background-color: t(iui-color-background-border);
-  }
+  background-color: var(--iui-color-background-border);
 }
 
 @mixin iui-menu-icon {
   width: $iui-icons-default;
   height: $iui-icons-default;
   flex: 0 0 auto;
-  @include themed {
-    fill: t(iui-icons-color-actionable);
-  }
+  fill: var(--iui-icons-color-actionable);
 
   + .iui-content {
     margin-left: $iui-s;

package/scss/non-ideal-state/non-ideal-state.scss

@@ -1,7 +1,8 @@
 // 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 '../text/index';
+@import '../utils/index';
+@import '../text/mixins';
 
 @mixin iui-non-ideal-state {
   @include iui-reset;

package/scss/progress-indicator/classes.scss

@@ -14,10 +14,6 @@
   }
 }
 
-.iui-progress-indicator-radial-ie {
-  @include iui-progress-indicator-radial-ie;
-}
-
 .iui-progress-indicator-radial {
   @include iui-progress-indicator-radial;
 

package/scss/progress-indicator/linear.scss

@@ -1,6 +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 '../style/index';
+@import '../utils/index';
 
 @mixin iui-progress-indicator-linear($height: 4px) {
   @include iui-reset;
@@ -11,19 +12,13 @@
     width: 100%;
     height: $height;
     overflow: hidden;
-
-    @include themed {
-      background-color: t(iui-color-background-border);
-    }
+    background-color: var(--iui-color-background-border);
 
     > .iui-fill {
       display: inline-block;
       height: 100%;
       vertical-align: top;
-
-      @include themed {
-        background-color: t(iui-color-foreground-primary);
-      }
+      background-color: var(--iui-color-foreground-primary);
     }
   }
 
@@ -54,20 +49,14 @@
   &.iui-positive {
     > .iui-track,
     > .iui-track > * {
-      @include themed {
-        background-color: t(iui-color-foreground-positive);
-      }
+      background-color: var(--iui-color-foreground-positive);
     }
 
     > .iui-label {
-      @include themed {
-        color: t(iui-color-foreground-positive);
-      }
+      color: var(--iui-color-foreground-positive);
 
       svg {
-        @include themed {
-          fill: t(iui-icons-color-positive);
-        }
+        fill: var(--iui-icons-color-positive);
       }
 
       > span {
@@ -79,21 +68,14 @@
   &.iui-negative {
     > .iui-track > * {
       width: 100%;
-
-      @include themed {
-        background-color: t(iui-color-foreground-negative);
-      }
+      background-color: var(--iui-color-foreground-negative);
     }
 
     > .iui-label {
-      @include themed {
-        color: t(iui-color-foreground-negative);
-      }
+      color: var(--iui-color-foreground-negative);
 
       svg {
-        @include themed {
-          fill: t(iui-icons-color-negative);
-        }
+        fill: var(--iui-icons-color-negative);
       }
 
       > span {

package/scss/progress-indicator/overlay.scss

@@ -15,16 +15,12 @@
   pointer-events: none;
 
   // Blur fallback
-  @include themed {
-    background-color: rgba(t(iui-color-background-1-rgb), t(iui-opacity-2));
-  }
+  background-color: rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-2));
 
   // With blur
   @supports (backdrop-filter: $iui-blur-filter) {
-    @include themed {
-      background-color: rgba(t(iui-color-background-1-rgb), t(iui-opacity-3));
-      backdrop-filter: $iui-blur-filter;
-    }
+    background-color: rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-3));
+    backdrop-filter: $iui-blur-filter;
   }
 
   // Focus trap
@@ -41,9 +37,7 @@
   // Fade out on completion
   @keyframes closeAnimation {
     from {
-      @include themed {
-        opacity: t(iui-opacity-1);
-      }
+      opacity: var(--iui-opacity-1);
     }
 
     to {

package/scss/progress-indicator/radial.scss

@@ -2,46 +2,6 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 
-@mixin iui-progress-indicator-radial-ie {
-  @include iui-reset;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-
-  @include themed {
-    color: t(iui-color-foreground-primary);
-  }
-
-  &::after {
-    position: relative;
-    box-sizing: border-box;
-    content: '';
-    width: 100%;
-    height: 100%;
-    display: inline-block;
-    border: 3px solid currentColor;
-    border-radius: 100%;
-    background-color: transparent;
-    animation: dash $iui-speed-slow linear infinite;
-
-    @include themed {
-      border-bottom-color: t(iui-color-background-border);
-    }
-  }
-
-  @keyframes dash {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-}
-
 @mixin iui-progress-indicator-radial {
   position: relative;
   display: inline-block;
@@ -52,17 +12,13 @@
     width: 100%;
 
     > circle.iui-fill {
-      @include themed {
-        stroke: t(iui-color-foreground-primary);
-      }
+      stroke: var(--iui-color-foreground-primary);
       fill: none;
       stroke-width: 3.2;
     }
 
     > circle.iui-track {
-      @include themed {
-        stroke: t(iui-color-background-5);
-      }
+      stroke: var(--iui-color-background-5);
       fill: none;
       stroke-width: 3.2;
     }
@@ -87,82 +43,38 @@
       display: flex;
       width: $iui-icons-default;
       height: $iui-icons-default;
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
+      fill: var(--iui-icons-color-actionable);
 
       &:hover {
-        @include themed {
-          fill: t(iui-icons-color-actionable-hover);
-        }
+        fill: var(--iui-icons-color-actionable-hover);
       }
     }
   }
 
   &.iui-positive {
-    @include themed {
-      color: t(iui-color-foreground-positive);
-    }
+    color: var(--iui-color-foreground-positive);
 
     svg.iui-radial {
       circle.iui-fill,
       circle.iui-track {
-        @include themed {
-          stroke: t(iui-color-foreground-positive);
-        }
+        stroke: var(--iui-color-foreground-positive);
       }
     }
 
     .iui-inner-content svg {
-      @include themed {
-        fill: t(iui-icons-color-positive);
-      }
-    }
-
-    .iui-progress-indicator-radial-ie {
-      @include themed {
-        color: t(iui-color-foreground-positive);
-      }
-
-      &::after {
-        animation: none;
-
-        @include themed {
-          border-bottom-color: t(iui-color-foreground-positive);
-        }
-      }
+      fill: var(--iui-icons-color-positive);
     }
   }
 
   &.iui-negative {
-    @include themed {
-      color: t(iui-color-foreground-negative);
-    }
+    color: var(--iui-color-foreground-negative);
 
     svg.iui-radial circle.iui-fill {
-      @include themed {
-        stroke: t(iui-color-foreground-negative);
-      }
+      stroke: var(--iui-color-foreground-negative);
     }
 
     .iui-inner-content svg {
-      @include themed {
-        fill: t(iui-icons-color-negative);
-      }
-    }
-
-    .iui-progress-indicator-radial-ie {
-      @include themed {
-        color: t(iui-color-foreground-negative);
-      }
-
-      &::after {
-        animation: none;
-
-        @include themed {
-          border-bottom-color: t(iui-color-foreground-negative);
-        }
-      }
+      fill: var(--iui-icons-color-negative);
     }
   }
 

package/scss/radio/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-radio {
+  @include iui-radio;
+}

package/scss/radio/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 './radio';

package/scss/{inputs → radio}/radio.scss

@@ -1,6 +1,6 @@
 // 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 '../checkbox/index';
 
 @mixin iui-radio {
   @include iui-checkbox;