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

package/css/radio-tile.css

@@ -4,29 +4,25 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-radio-tile{
   cursor:pointer;
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
 }
 
 .iui-radio-tile-content{
-  width:160px;
+  width:calc(var(--iui-size-xl) * 5);
   height:100%;
-  padding:8px;
+  padding:var(--iui-size-xs);
   position:relative;
   z-index:1;
-  outline:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  outline:1px solid var(--iui-color-foreground-4);
   background-color:var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-content{
-    transition:outline-color 0.2s ease-out;
-  }
+  transition:outline-color var(--iui-duration-1) ease-out;
 }
 .iui-radio-tile-content:hover{
   z-index:2;
-  outline-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  outline-color:var(--iui-color-foreground-2);
 }
 .iui-radio-tile-content:hover .iui-radio-tile-icon{
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-color-foreground-2);
 }
 @media (forced-colors: active){
   .iui-radio-tile-content:hover .iui-radio-tile-icon{
@@ -56,9 +52,9 @@
   position:absolute;
 }
 .iui-radio-tile-input:checked + *{
-  padding:8px;
+  padding:var(--iui-size-xs);
   z-index:3;
-  outline:2px solid var(--iui-color-foreground-primary);
+  outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
 }
 @media (forced-colors: active){
@@ -67,7 +63,7 @@
   }
 }
 .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
-  fill:var(--iui-icons-color-primary);
+  fill:var(--iui-color-foreground-primary);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
@@ -75,12 +71,14 @@
   }
 }
 .iui-radio-tile-input:checked + *::after{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
   content:"";
-  width:16px;
-  height:16px;
   position:absolute;
-  top:8px;
-  right:8px;
+  top:var(--iui-size-xs);
+  right:var(--iui-size-xs);
   -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
           mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
   background-color:var(--iui-color-foreground-primary);
@@ -97,7 +95,7 @@
   background-color:var(--iui-color-background-disabled);
 }
 .iui-radio-tile-input:disabled + *::after{
-  background-color:var(--iui-icons-color-actionable-disabled);
+  background-color:var(--iui-color-foreground-5);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled + *::after{
@@ -106,7 +104,7 @@
 }
 .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
   filter:grayscale(100%);
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-color-foreground-5);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
@@ -114,7 +112,7 @@
   }
 }
 .iui-radio-tile-input:disabled + * .iui-radio-tile-label{
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled + * .iui-radio-tile-label,
@@ -124,7 +122,7 @@
 }
 .iui-radio-tile-input:disabled:checked + *{
   z-index:3;
-  outline:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  outline:var(--iui-size-3xs) solid var(--iui-color-foreground-4);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled:checked + *{
@@ -133,7 +131,7 @@
 }
 .iui-radio-tile-input:focus-visible + *{
   z-index:2;
-  outline-offset:-2px;
+  outline-offset:calc(0px - var(--iui-size-3xs));
   outline:3px solid var(--iui-color-foreground-primary);
 }
 @media (forced-colors: active){
@@ -144,7 +142,7 @@
 @supports not selector(*:focus-visible){
   .iui-radio-tile-input:focus + *{
     z-index:2;
-    outline-offset:-2px;
+    outline-offset:calc(0px - var(--iui-size-3xs));
     outline:3px solid var(--iui-color-foreground-primary);
   }
   @media (forced-colors: active){
@@ -155,15 +153,18 @@
 }
 
 .iui-radio-tile-icon{
-  width:32px;
-  height:32px;
-  display:block;
-  margin:6px auto 11px;
-  fill:var(--iui-icons-color);
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-xl);
+  height:var(--iui-size-xl);
+  fill:var(--iui-color-foreground-4);
+  margin:calc(var(--iui-size-s) * 0.5) auto var(--iui-size-s);
+  fill:var(--iui-color-foreground-4);
+  transition:fill var(--iui-duration-1) ease-out;
 }
-@media (prefers-reduced-motion: no-preference){
+@media (forced-colors: active){
   .iui-radio-tile-icon{
-    transition:fill 0.2s ease-out;
+    fill:CanvasText;
   }
 }
 @media (forced-colors: active){
@@ -173,18 +174,18 @@
 }
 
 .iui-radio-tile-label{
-  font-size:14px;
-  font-weight:600;
-  line-height:22px;
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-semibold);
+  line-height:var(--iui-size-l);
   text-align:center;
   word-break:break-word;
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
 }
 
 .iui-radio-tile-sublabel{
-  font-size:12px;
-  line-height:15px;
+  font-size:var(--iui-font-size-0);
+  line-height:calc(var(--iui-size-s) * 1.375);
   text-align:center;
   word-break:break-word;
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }

package/css/radio.css

@@ -7,19 +7,20 @@
   --_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-border-color:var(--iui-color-foreground-4);
   --_iui-checkbox-background-color:var(--iui-color-background-1);
   --_iui-checkbox-mask-image:initial;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
   -webkit-appearance:none;
      -moz-appearance:none;
           appearance:none;
   margin:0;
-  width:16px;
-  height:16px;
   position:relative;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   background-color:var(--_iui-checkbox-background-color);
-  flex-shrink:0;
   cursor:pointer;
   border-radius:50%;
 }
@@ -30,7 +31,7 @@
   vertical-align:baseline;
   display:flex;
   align-items:center;
-  font-size:14px;
+  font-size:var(--iui-font-size-1);
   width:-webkit-fit-content;
   width:-moz-fit-content;
   width:fit-content;
@@ -40,12 +41,12 @@
           user-select:none;
   position:relative;
   cursor:pointer;
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-  gap:8px;
+  color:var(--iui-color-foreground-2);
+  gap:var(--iui-size-xs);
 }
 .iui-radio-wrapper.iui-loading{
   cursor:wait;
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-radio-wrapper > .iui-checkbox-label,
 .iui-radio-wrapper > .iui-radio-label{
@@ -54,17 +55,19 @@
 }
 .iui-radio-wrapper > .iui-checkbox-label svg,
 .iui-radio-wrapper > .iui-radio-label svg{
-  width:16px;
-  height:16px;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
   vertical-align:middle;
   fill:currentColor;
 }
 .iui-radio-wrapper.iui-disabled{
   cursor:not-allowed;
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-radio-wrapper.iui-disabled svg{
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-color-foreground-5);
 }
 .iui-radio-wrapper.iui-positive{
   color:var(--iui-color-foreground-positive);
@@ -79,7 +82,7 @@
   content:"";
   position:absolute;
   inset:0;
-  transition:border-color 0.2s ease-out;
+  transition:border-color var(--iui-duration-1) ease-out;
   border-radius:inherit;
   border-style:solid;
   border-width:1px;
@@ -97,15 +100,15 @@
   --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
 }
 .iui-radio:checked{
-  --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+  --_iui-checkbox-border-color:var(--iui-color-foreground-3);
   --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
 }
 .iui-radio:indeterminate{
-  --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+  --_iui-checkbox-border-color:var(--iui-color-foreground-3);
   --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
 }
 .iui-radio:hover{
-  --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  --_iui-checkbox-border-color:var(--iui-color-foreground-2);
 }
 .iui-radio:focus-visible{
   outline:2px solid var(--iui-color-foreground-primary);
@@ -118,7 +121,7 @@
   }
 }
 .iui-radio:disabled{
-  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
+  --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
   --_iui-checkbox-border-color:var(--iui-color-background-border);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
   cursor:not-allowed;
@@ -131,14 +134,14 @@
   --_iui-checkbox-background-color:transparent;
 }
 .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
-  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable);
+  --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
 }
 .iui-radio.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-background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-radio.iui-checkbox-visibility:where(:disabled){
-  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
+  --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
 }
 .iui-radio.iui-loading{

package/css/select.css

@@ -4,11 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-select-button{
   width:100%;
-  margin:0;
-  border-radius:4px;
-  padding:7px 12px;
-  min-height:38px;
-  transition:border-color 0.2s ease-out;
+  border-radius:var(--iui-border-radius-1);
+  min-height:var(--_iui-select-min-height);
+  padding-block:var(--_iui-select-padding-block);
+  padding-inline:var(--iui-size-s);
+  transition:border-color var(--iui-duration-1) ease-out;
   display:flex;
   align-items:center;
   -webkit-user-select:none;
@@ -17,9 +17,11 @@
           user-select:none;
   position:relative;
   overflow:hidden;
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
   background-color:var(--iui-color-background-1);
-  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  border:1px solid var(--iui-color-foreground-4);
+  --_iui-select-padding-block:var(--iui-size-2xs);
+  --_iui-select-min-height:var(--iui-component-height);
 }
 .iui-select-button:focus-visible{
   outline:2px solid var(--iui-color-foreground-primary);
@@ -31,55 +33,56 @@
     outline-offset:-2px;
   }
 }
-.iui-select-button.iui-small{
-  padding-top:1.5px;
-  padding-bottom:1.5px;
-  min-height:27px;
-}
-.iui-select-button.iui-large{
-  padding-top:12.5px;
-  padding-bottom:12.5px;
-  min-height:49px;
-  font-size:16px;
-}
 .iui-select-button.iui-disabled{
   background-color:var(--iui-color-background-disabled);
   border-color:var(--iui-color-background-disabled);
-  --_hover-color:var(--iui-color-background-disabled);
+  --_iui-input-with-icon-hover-border-color:var(--iui-color-background-disabled);
   cursor:not-allowed;
 }
 .iui-select-button .iui-icon{
-  width:16px;
-  height:16px;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
   flex:0 0 auto;
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-color-foreground-2);
   fill:currentColor;
 }
 .iui-select-button .iui-icon + .iui-content{
-  margin-left:8px;
+  margin-left:var(--iui-size-xs);
 }
 .iui-select-button .iui-content{
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
+  min-height:var(--iui-size-l);
 }
 .iui-select-button.iui-placeholder{
-  color:var(--iui-text-color-placeholder);
+  color:var(--iui-color-foreground-5);
+}
+.iui-select-button[data-iui-size=small]{
+  --_iui-select-padding-block:0;
+  --_iui-select-min-height:var(--iui-component-height-small);
+}
+.iui-select-button[data-iui-size=large]{
+  --_iui-select-padding-block:var(--iui-size-xs);
+  --_iui-select-min-height:var(--iui-component-height-large);
+  font-size:var(--iui-font-size-2);
 }
 
 .iui-select-tag-container{
   position:absolute;
-  inset:0 40px 0 12px;
+  inset:0 calc(var(--iui-size-m) + var(--iui-size-l)) 0 var(--iui-size-s);
   height:100%;
   display:flex;
   align-items:center;
-  gap:4px;
+  gap:var(--iui-size-2xs);
   overflow:hidden;
 }
 .iui-select-tag-container > * + *{
-  margin-left:4px;
+  margin-left:var(--iui-size-2xs);
 }
-@supports (gap: 4px){
+@supports (gap: var(--iui-size-2xs)){
   .iui-select-tag-container > * + *{
     margin-left:0;
   }
@@ -91,29 +94,28 @@
           user-select:all;
   text-transform:lowercase;
   display:inline-flex;
-  height:33px;
-  margin-top:3px;
-  margin-bottom:3px;
-  border-radius:9999px;
-  padding:0 2px;
+  height:calc(var(--iui-size-s) * 3);
+  margin-block:var(--iui-size-2xs);
+  border-radius:var(--iui-border-radius-round);
+  padding:0 var(--iui-size-3xs);
   align-items:center;
-  transition:border-color 0.2s ease-out;
-  font-size:14px;
+  transition:border-color var(--iui-duration-1) ease-out;
+  font-size:var(--iui-font-size-1);
   text-transform:none;
   cursor:default;
   -webkit-tap-highlight-color:transparent;
-  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  border:1px solid var(--iui-color-foreground-4);
   background-color:var(--iui-color-background-1);
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
   margin-top:0;
   margin-bottom:0;
   display:inline-flex;
   align-items:center;
   height:80%;
-  max-height:33px;
+  max-height:calc(var(--iui-size-s) * 3);
 }
 .iui-select-tag:hover{
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+  border-color:var(--iui-color-foreground-1);
 }
 
 .iui-select-tag-label{
@@ -121,22 +123,22 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  font-size:14px;
-  font-weight:400;
-  line-height:22px;
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-normal);
+  line-height:var(--iui-size-l);
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow:hidden;
-  margin:0 4px 0 8px;
+  margin:0 var(--iui-size-2xs) 0 var(--iui-size-xs);
   display:inline-flex;
   align-items:center;
 }
 .iui-select-tag-label:only-child{
-  margin:0 8px;
+  margin:0 var(--iui-size-xs);
 }
-.iui-select-button.iui-small .iui-select-tag-label{
-  font-size:12px;
-  line-height:16px;
+.iui-select-button[data-iui-size=small] .iui-select-tag-label{
+  font-size:var(--iui-font-size-0);
+  line-height:calc(var(--iui-size-s) * 1.5);
 }
 
 .iui-select-tag-button{
@@ -146,14 +148,15 @@
   vertical-align:baseline;
   font-family:inherit;
   display:inline-flex;
+  flex-shrink:0;
   align-items:center;
   vertical-align:middle;
   justify-content:center;
   position:relative;
-  border-radius:4px;
-  line-height:22px;
-  font-size:14px;
-  font-weight:400;
+  border-radius:var(--iui-border-radius-1);
+  line-height:var(--iui-size-l);
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
@@ -164,24 +167,29 @@
   background:var(--_iui-button-background-color);
   color:var(--_iui-button-text-color);
   gap:var(--_iui-button-gap);
-  height:var(--_iui-button-height);
+  min-height:var(--_iui-button-min-height);
+  min-width:var(--_iui-button-min-height);
+  padding-block:var(--_iui-button-padding-block);
   padding-inline:var(--_iui-button-padding-inline);
-  transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
   -webkit-tap-highlight-color:transparent;
   text-decoration:none;
-  --_iui-button-gap:8px;
-  --_iui-button-height:38px;
-  --_iui-button-padding-inline:16px;
-  --_iui-button-text-color:var(--iui-text-color);
+  --_iui-button-gap:var(--iui-size-xs);
+  --_iui-button-padding-block:var(--iui-size-2xs);
+  --_iui-button-padding-inline:var(--iui-size-m);
+  --_iui-button-min-height:var(--iui-component-height);
+  --_iui-button-text-color:var(--iui-color-foreground-2);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
-  --_iui-button-gap:8px;
-  --_iui-button-height:38px;
-  --_iui-button-padding-inline:16px;
-  --_iui-button-padding-inline:8px;
-  border-radius:50%;
-  padding:0 4px;
+  --_iui-button-gap:var(--iui-size-xs);
+  --_iui-button-padding-block:var(--iui-size-2xs);
+  --_iui-button-padding-inline:var(--iui-size-m);
+  --_iui-button-min-height:var(--iui-component-height);
+  --_iui-button-padding-inline:var(--iui-size-xs);
+  border-radius:var(--iui-border-radius-round);
+  padding:0 var(--iui-size-2xs);
+  min-height:unset;
+  min-width:unset;
   height:100%;
   aspect-ratio:1/1;
 }
@@ -196,35 +204,36 @@
   }
 }
 .iui-select-tag-button:where(:hover, :active){
-  --_iui-button-text-color:var(--iui-color-foreground-body);
-  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+  --_iui-button-text-color:var(--iui-color-foreground-1);
+  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-select-tag-button:where(:focus){
   outline-offset:-1px;
   outline-width:1px;
 }
 .iui-select-tag-button:where([disabled], :disabled, [aria-disabled="true"]){
-  --_iui-button-text-color:var(--iui-text-color-placeholder);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
 }
-.iui-select-button.iui-small .iui-select-tag-button{
-  font-size:12px;
-  line-height:16px;
+.iui-select-button[data-iui-size=small] .iui-select-tag-button{
+  font-size:var(--iui-font-size-0);
+  line-height:calc(var(--iui-size-s) * 1.5);
 }
 
 .iui-select-tag-button-icon{
-  width:16px;
-  height:16px;
-  transition:fill 0.2s ease-out;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+  transition:fill var(--iui-duration-1) ease-out;
   fill:currentColor;
+  margin-block:var(--iui-size-2xs);
   flex-shrink:0;
 }
-.iui-select-tag-button-icon:only-child{
-  margin-left:var(--_iui-button-icon-margin-x);
-  margin-right:var(--_iui-button-icon-margin-x);
-}
-.iui-select-button.iui-small .iui-select-tag-button-icon{
-  width:12px;
-  height:12px;
+.iui-select-button[data-iui-size=small] .iui-select-tag-button-icon{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-s);
+  height:var(--iui-size-s);
 }