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

package/css/carousel.css

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-carousel{
   overflow:hidden;
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-carousel:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -35,7 +35,6 @@
 .iui-carousel-slider-item{
   width:100%;
   flex-shrink:0;
-  box-sizing:border-box;
   scroll-snap-align:center;
 }
 
@@ -43,8 +42,6 @@
   display:flex;
   align-items:center;
   height:33px;
-  box-sizing:border-box;
-  border-top:2px solid #dde1e4;
   border-top:2px solid var(--iui-color-background-4);
 }
 .iui-carousel-navigation-left, .iui-carousel-navigation-right{
@@ -54,7 +51,6 @@
 }
 .iui-carousel-navigation-left button[data-pressed=true], .iui-carousel-navigation-right button[data-pressed=true]{
   outline-offset:-1px;
-  outline:1px solid #008ae0;
   outline:1px solid var(--iui-color-foreground-primary);
 }
 .iui-carousel-navigation-dots{
@@ -64,7 +60,7 @@
   vertical-align:baseline;
   flex:2;
   max-width:256px;
-  border-radius:3px;
+  border-radius:4px;
   white-space:nowrap;
   overflow-x:auto;
   overflow-x:overlay;
@@ -84,15 +80,17 @@
   display:none;
 }
 .iui-carousel-navigation-dot{
-  padding:0 8px;
-  height:27px;
-  gap:4px;
+  --_iui-button-gap:4px;
+  --_iui-button-height:27px;
+  --_iui-button-padding-inline:8px;
   background-color:transparent;
   border:none;
   cursor:pointer;
+  height:var(--_iui-button-height);
+  padding-left:var(--_iui-button-padding-inline);
+  padding-right:var(--_iui-button-padding-inline);
 }
 .iui-carousel-navigation-dot:hover::after{
-  background-color:rgba(0, 0, 0, 0.6);
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
 }
 .iui-carousel-navigation-dot::after{
@@ -101,10 +99,7 @@
   width:12px;
   height:12px;
   border-radius:50%;
-  box-sizing:border-box;
   border:1px solid transparent;
-  background-color:rgba(0, 0, 0, 0.4);
-  box-shadow:inset 0 0 0 0 white;
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
   box-shadow:inset 0 0 0 0 var(--iui-color-background-1);
 }
@@ -115,9 +110,6 @@
   transform:scale(0.75);
 }
 .iui-carousel-navigation-dot.iui-active::after{
-  background-color:#008ae0;
-  border-color:#008ae0;
-  box-shadow:inset 0 0 0 1px white;
   background-color:var(--iui-color-foreground-primary);
   border-color:var(--iui-color-foreground-primary);
   box-shadow:inset 0 0 0 1px var(--iui-color-background-1);

package/css/checkbox.css

@@ -0,0 +1,149 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-checkbox{
+  --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
+  --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
+  --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
+  --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
+  --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  --_iui-checkbox-background-color:var(--iui-color-background-1);
+  --_iui-checkbox-mask-image:initial;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  margin:0;
+  width:16px;
+  height:16px;
+  position:relative;
+  border-radius:4px;
+  background-color:var(--_iui-checkbox-background-color);
+  flex-shrink:0;
+  cursor:pointer;
+}
+.iui-checkbox-wrapper{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:flex;
+  align-items:center;
+  font-size:14px;
+  width:-webkit-fit-content;
+  width:-moz-fit-content;
+  width:fit-content;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  position:relative;
+  cursor:pointer;
+  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  gap:8px;
+}
+.iui-checkbox-wrapper.iui-loading{
+  cursor:wait;
+  color:var(--iui-text-color-muted);
+}
+.iui-checkbox-wrapper > .iui-checkbox-label,
+.iui-checkbox-wrapper > .iui-radio-label{
+  display:flex;
+  align-items:center;
+}
+.iui-checkbox-wrapper > .iui-checkbox-label svg,
+.iui-checkbox-wrapper > .iui-radio-label svg{
+  width:16px;
+  height:16px;
+  vertical-align:middle;
+  fill:currentColor;
+}
+.iui-checkbox-wrapper.iui-disabled{
+  cursor:not-allowed;
+  color:var(--iui-text-color-muted);
+}
+.iui-checkbox-wrapper.iui-disabled svg{
+  fill:var(--iui-icons-color-actionable-disabled);
+}
+.iui-checkbox-wrapper.iui-positive{
+  color:var(--iui-color-foreground-positive);
+}
+.iui-checkbox-wrapper.iui-warning{
+  color:var(--iui-color-foreground-warning);
+}
+.iui-checkbox-wrapper.iui-negative{
+  color:var(--iui-color-foreground-negative);
+}
+.iui-checkbox::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  transition:border-color 0.2s ease-out;
+  border-radius:inherit;
+  border-style:solid;
+  border-width:1px;
+  border-color:var(--_iui-checkbox-border-color);
+}
+.iui-checkbox::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  background-color:var(--_iui-checkbox-svg-color);
+  -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
+          mask:var(--_iui-checkbox-mask-image) no-repeat center;
+}
+.iui-checkbox:not(:checked){
+  --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
+}
+.iui-checkbox:checked{
+  --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+  --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
+}
+.iui-checkbox:indeterminate{
+  --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+  --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
+}
+.iui-checkbox:hover{
+  --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+}
+.iui-checkbox:focus-visible{
+  outline:2px solid var(--iui-color-foreground-primary);
+  outline-offset:-1px;
+}
+@supports not selector(*:focus-visible){
+  .iui-checkbox:focus{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px;
+  }
+}
+.iui-checkbox:disabled{
+  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
+  --_iui-checkbox-border-color:var(--iui-color-background-border);
+  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
+  cursor:not-allowed;
+}
+.iui-checkbox.iui-checkbox-visibility{
+  --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
+  --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
+  --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
+  --_iui-checkbox-border-color:transparent;
+  --_iui-checkbox-background-color:transparent;
+}
+.iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
+  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable);
+}
+.iui-checkbox.iui-checkbox-visibility:where(:hover){
+  --_iui-checkbox-border-color:transparent;
+  --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+}
+.iui-checkbox.iui-checkbox-visibility:where(:disabled){
+  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
+  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
+}
+.iui-checkbox.iui-loading{
+  --_iui-checkbox-border-color:transparent;
+  --_iui-checkbox-background-color:transparent;
+  opacity:0;
+  position:absolute;
+  cursor:wait;
+}

package/css/code.css

@@ -8,15 +8,13 @@
   border:none;
   vertical-align:baseline;
   display:inline-block;
-  font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
+  font-family:"Noto Sans Mono", ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
   font-size:12px;
   padding:0 4px;
-  border-radius:3px;
+  border-radius:4px;
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
-  background-color:#edeff2;
-  color:rgba(0, 0, 0, 0.8);
   background-color:var(--iui-color-background-3);
   color:var(--iui-text-color);
 }
@@ -31,8 +29,7 @@
 .iui-codeblock > .iui-title-bar{
   display:flex;
   align-items:center;
-  border-radius:3px 3px 0 0;
-  background-color:#edeff2;
+  border-radius:4px 4px 0 0;
   background-color:var(--iui-color-background-3);
 }
 .iui-codeblock > .iui-title-bar > .iui-title{
@@ -48,9 +45,8 @@
   margin:0;
   overflow-x:auto;
   overflow-y:auto;
-  border-radius:0 0 3px 3px;
+  border-radius:0 0 4px 4px;
   white-space:normal;
-  border:1px solid #edeff2;
   border:1px solid var(--iui-color-background-3);
 }
 .iui-codeblock > .iui-codeblock-content:focus-visible{
@@ -71,12 +67,10 @@
       -ms-hyphens:auto;
           hyphens:auto;
   counter-increment:section;
-  font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
-  background-color:white;
+  font-family:"Noto Sans Mono", ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
   background-color:var(--iui-color-background-1);
 }
 .iui-codeblock > .iui-codeblock-content > code:nth-child(even){
-  background:rgba(0, 0, 0, 0.02);
   background:rgba(var(--iui-color-foreground-body-rgb), 0.02);
 }
 .iui-codeblock > .iui-codeblock-content > code::before{
@@ -85,8 +79,6 @@
   display:inline-block;
   padding:0 8px;
   width:24px;
-  background-color:#f9f9fb;
-  color:rgba(0, 0, 0, 0.4);
   background-color:var(--iui-color-background-2);
   color:var(--iui-text-color-muted);
 }

package/css/color-picker.css

@@ -10,10 +10,8 @@
   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);
-  box-sizing:border-box;
-  border-radius:3px;
+  border-radius:4px;
   display:inline-flex;
   padding:11px 12px;
   -webkit-user-select:none;
@@ -23,6 +21,7 @@
   overflow-y:auto;
   flex-direction:column;
   max-height:495px;
+  row-gap:11px;
 }
 @media (forced-colors: active){
   .iui-color-picker{
@@ -34,19 +33,6 @@
     overflow-y:overlay;
   }
 }
-@supports (row-gap: 11px){
-  .iui-color-picker{
-    row-gap:11px;
-  }
-}
-.iui-color-picker > div:not(:last-child){
-  margin-bottom:11px;
-}
-@supports (row-gap: 11px){
-  .iui-color-picker > div:not(:last-child){
-    margin-bottom:0;
-  }
-}
 
 .iui-color-palette{
   display:flex;
@@ -54,16 +40,11 @@
   align-content:flex-start;
   min-height:24px;
   min-width:24px;
+  gap:8px;
 }
-@supports (gap: 8px){
-  .iui-color-palette{
-    gap:8px;
-  }
-}
-.iui-color-palette button.iui-button.iui-borderless{
-  height:24px;
-  width:24px;
-  padding:0;
+.iui-color-palette button[data-iui-variant=borderless]{
+  --_iui-button-height:24px;
+  --_iui-button-padding-inline:0;
 }
 .iui-color-palette-wrapper{
   max-width:280px;
@@ -90,14 +71,6 @@
 .iui-color-input-fields > *{
   flex-grow:1;
 }
-.iui-color-input-fields > *:not(:last-child){
-  margin-right:2px;
-}
-@supports (gap: 2px){
-  .iui-color-input-fields > *:not(:last-child){
-    margin-right:0;
-  }
-}
 .iui-color-input-fields input{
   text-transform:uppercase;
 }
@@ -118,22 +91,13 @@
   width:24px;
   cursor:pointer;
   border-radius:5px;
-  margin-bottom:4px;
-  margin-right:4px;
   position:relative;
   background-color:var(--iui-color-swatch-background);
   forced-color-adjust:none;
   background-position:0 0, 8px 8px;
   background-size:16px 16px;
-  background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
   background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
 }
-@supports (gap: 8px){
-  .iui-color-swatch{
-    margin-bottom:0;
-    margin-right:0;
-  }
-}
 .iui-color-swatch::after{
   content:"";
   position:absolute;
@@ -196,7 +160,6 @@
   height:8px;
   forced-color-adjust:none;
   background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
-  background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
 }
 .iui-hue-slider .iui-slider-thumb{
   top:7px;
@@ -207,7 +170,6 @@
   forced-color-adjust:none;
   background-position:0 0, 4px 4px;
   background-size:8px 8px;
-  background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
   background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
 }
 .iui-opacity-slider .iui-slider-rail::before{