@itwin/itwinui-css 0.63.1 → 1.0.0-dev.2

package/css/time-picker.css

@@ -12,27 +12,28 @@
       -ms-user-select:none;
           user-select:none;
   text-align:center;
-  height:286px;
+  height:calc(var(--iui-size-s) * 26);
   display:inline-flex;
-  background-color:white;
   background-color:var(--iui-color-background-1);
+  border-top-right-radius:var(--iui-border-radius-1);
+  border-bottom-right-radius:var(--iui-border-radius-1);
 }
 .iui-time-picker:not(:first-child){
-  border-left:1px solid #c7ccd1;
   border-left:1px solid var(--iui-color-background-border);
 }
 .iui-time-picker:first-child{
-  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
+  box-shadow:var(--iui-shadow-1);
+  border-top-left-radius:var(--iui-border-radius-1);
+  border-bottom-left-radius:var(--iui-border-radius-1);
 }
 
 .iui-time{
-  padding:11px 8px;
+  padding:var(--iui-size-s) var(--iui-size-xs);
   overflow-y:auto;
   overflow-y:overlay;
   scrollbar-width:none;
 }
 .iui-time:not(:first-child){
-  border-left:1px solid #c7ccd1;
   border-left:1px solid var(--iui-color-background-border);
 }
 .iui-time > ol{
@@ -43,8 +44,8 @@
   list-style:none;
 }
 .iui-time > ol > li{
-  padding:6px 16px;
-  border-radius:4px;
+  padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-m);
+  border-radius:var(--iui-border-radius-1);
 }
 .iui-time > ol > li:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -58,16 +59,11 @@
 }
 .iui-time > ol > li:hover{
   cursor:pointer;
-  color:#008ae0;
-  background-color:rgba(0, 138, 224, 0.1);
-  color:var(--iui-color-foreground-primary);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-time > ol > li.iui-selected{
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
   cursor:default;
-  background-color:#008ae0;
-  color:white;
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
 }
@@ -83,7 +79,7 @@
 }
 
 .iui-period{
-  padding:11px 8px;
+  padding:var(--iui-size-s) var(--iui-size-xs);
   overflow-y:auto;
   overflow-y:overlay;
   scrollbar-width:none;
@@ -91,7 +87,6 @@
   align-items:center;
 }
 .iui-period:not(:first-child){
-  border-left:1px solid #c7ccd1;
   border-left:1px solid var(--iui-color-background-border);
 }
 .iui-period > ol{
@@ -102,8 +97,8 @@
   list-style:none;
 }
 .iui-period > ol > li{
-  padding:6px 16px;
-  border-radius:4px;
+  padding:calc(var(--iui-size-s) * 0.5) var(--iui-size-m);
+  border-radius:var(--iui-border-radius-1);
 }
 .iui-period > ol > li:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -117,16 +112,11 @@
 }
 .iui-period > ol > li:hover{
   cursor:pointer;
-  color:#008ae0;
-  background-color:rgba(0, 138, 224, 0.1);
-  color:var(--iui-color-foreground-primary);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  background-color:var(--iui-color-background-transparent-hover);
 }
 .iui-period > ol > li.iui-selected{
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
   cursor:default;
-  background-color:#008ae0;
-  color:white;
   background-color:var(--iui-color-background-primary);
   color:var(--iui-color-foreground-accessory);
 }

package/css/{toast-notification.css → toast.css}

@@ -14,14 +14,14 @@
 @media screen and (max-width: 400px){
   .iui-toast-wrapper{
     width:calc(100vw - 36px);
-    margin-top:11px;
+    margin-top:var(--iui-size-s);
   }
 }
 @media screen and (min-width: 401px){
   .iui-toast-wrapper{
     min-width:400px;
     max-width:640px;
-    margin:22px 0;
+    margin:var(--iui-size-l) 0;
   }
 }
 @media (prefers-reduced-motion: no-preference){
@@ -54,7 +54,7 @@
   right:0;
 }
 .iui-toast-wrapper.iui-placement-bottom .iui-toast{
-  margin:11px 16px 0 16px;
+  margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
 }
 .iui-toast-wrapper.iui-placement-bottom-start{
   bottom:0;
@@ -62,7 +62,7 @@
   align-items:flex-start;
 }
 .iui-toast-wrapper.iui-placement-bottom-start .iui-toast{
-  margin:11px 16px 0 16px;
+  margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
 }
 .iui-toast-wrapper.iui-placement-bottom-end{
   bottom:0;
@@ -70,7 +70,7 @@
   align-items:flex-end;
 }
 .iui-toast-wrapper.iui-placement-bottom-end .iui-toast{
-  margin:11px 16px 0 16px;
+  margin:var(--iui-size-s) var(--iui-size-m) 0 var(--iui-size-m);
 }
 
 .iui-toast{
@@ -80,54 +80,48 @@
   vertical-align:baseline;
   display:inline-flex;
   align-items:center;
-  box-sizing:border-box;
   pointer-events:all;
-  margin:0 16px 11px 16px;
-  min-height:44px;
-  border-radius:4px;
-  background-color:white;
-  border:1px solid black;
-  box-shadow:0 0 0 1px rgba(255, 255, 255, 0.4), 0 9px 46px rgba(0, 0, 0, 0.25);
+  margin:0 var(--iui-size-m) var(--iui-size-s) var(--iui-size-m);
+  min-height:calc(var(--iui-size-s) * 4);
+  border-radius:var(--iui-border-radius-1);
   background-color:var(--iui-color-background-1);
-  border:1px solid var(--iui-color-foreground-body);
-  box-shadow:0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)), 0 9px 46px rgba(0, 0, 0, 0.25);
+  border:1px solid var(--iui-color-foreground-1);
+  box-shadow:0 0 0 1px rgba(255, 255, 255, var(--iui-opacity-4)), var(--iui-shadow-5);
 }
 .iui-toast > .iui-status-area{
   display:flex;
-  -ms-grid-row-align:stretch;
-      align-self:stretch;
+  align-self:stretch;
   justify-content:center;
   align-items:center;
-  width:48px;
+  width:calc(var(--iui-size-l) * 2);
   flex-shrink:0;
-  background-color:#c7ccd1;
   background-color:var(--iui-color-background-5);
 }
 .iui-toast > .iui-status-area > .iui-icon{
-  height:16px;
-  width:16px;
-  fill:white;
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
   fill:var(--iui-color-foreground-accessory);
 }
 .iui-toast > .iui-message{
   flex-grow:1;
-  font-size:14px;
-  margin-top:5.5px;
-  margin-bottom:5.5px;
-  margin-right:24px;
-  margin-left:16px;
-  line-height:22px;
-  font-weight:400;
+  font-size:var(--iui-font-size-1);
+  margin-top:calc(var(--iui-size-s) * 0.5);
+  margin-bottom:calc(var(--iui-size-s) * 0.5);
+  margin-right:var(--iui-size-l);
+  margin-left:var(--iui-size-m);
+  line-height:var(--iui-size-l);
+  font-weight:var(--iui-font-weight-normal);
   font-style:normal;
-  color:rgba(0, 0, 0, 0.8);
-  color:var(--iui-text-color);
+  color:var(--iui-color-foreground-2);
 }
 .iui-toast-anchor{
   text-decoration:underline;
-  border-radius:4px;
+  border-radius:var(--iui-border-radius-1);
   cursor:pointer;
-  font-size:12px;
-  margin-right:16px;
+  font-size:var(--iui-font-size-0);
+  margin-right:var(--iui-size-m);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
@@ -138,7 +132,7 @@
   text-decoration:none;
 }
 .iui-toast > .iui-button{
-  margin-right:8px;
+  margin-right:var(--iui-size-xs);
 }
 @media screen and (max-width: 400px){
   .iui-toast{
@@ -152,27 +146,21 @@
   }
 }
 .iui-toast.iui-informational{
-  border-color:#008ae0;
   border-color:var(--iui-color-foreground-primary);
 }
 .iui-toast.iui-informational > .iui-message::-moz-selection, .iui-toast.iui-informational > .iui-message *::-moz-selection{
-  background-color:rgba(0, 138, 224, 0.2);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-informational > .iui-message::selection,
 .iui-toast.iui-informational > .iui-message *::selection{
-  background-color:rgba(0, 138, 224, 0.2);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-informational > .iui-status-area{
-  background-color:#008ae0;
   background-color:var(--iui-color-background-primary);
 }
 .iui-toast.iui-informational > .iui-toast-anchor{
-  color:#008ae0;
-  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
 }
 .iui-toast.iui-informational > .iui-toast-anchor:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -185,31 +173,24 @@
   }
 }
 .iui-toast.iui-informational > .iui-toast-anchor:hover{
-  color:#006bad;
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 .iui-toast.iui-positive{
-  border-color:#53a21a;
   border-color:var(--iui-color-foreground-positive);
 }
 .iui-toast.iui-positive > .iui-message::-moz-selection, .iui-toast.iui-positive > .iui-message *::-moz-selection{
-  background-color:rgba(83, 162, 26, 0.2);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-positive > .iui-message::selection,
 .iui-toast.iui-positive > .iui-message *::selection{
-  background-color:rgba(83, 162, 26, 0.2);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-positive > .iui-status-area{
-  background-color:#53a21a;
   background-color:var(--iui-color-background-positive);
 }
 .iui-toast.iui-positive > .iui-toast-anchor{
-  color:#53a21a;
-  -webkit-tap-highlight-color:rgba(83, 162, 26, 0.2);
   color:var(--iui-color-foreground-positive);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-6));
 }
 .iui-toast.iui-positive > .iui-toast-anchor:focus-visible{
   outline:1px solid var(--iui-color-foreground-positive);
@@ -222,40 +203,31 @@
   }
 }
 .iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
-  background-color:rgba(83, 162, 26, 0.2);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-positive > .iui-toast-anchor::selection,
 .iui-toast.iui-positive > .iui-toast-anchor *::selection{
-  background-color:rgba(83, 162, 26, 0.2);
-  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-positive > .iui-toast-anchor:hover{
-  color:#3d7613;
-  color:var(--iui-color-foreground-positive-overlay);
+  color:var(--iui-color-foreground-positive-hover);
 }
 .iui-toast.iui-negative{
-  border-color:#d10a0a;
   border-color:var(--iui-color-foreground-negative);
 }
 .iui-toast.iui-negative > .iui-message::-moz-selection, .iui-toast.iui-negative > .iui-message *::-moz-selection{
-  background-color:rgba(209, 10, 10, 0.2);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-negative > .iui-message::selection,
 .iui-toast.iui-negative > .iui-message *::selection{
-  background-color:rgba(209, 10, 10, 0.2);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-negative > .iui-status-area{
-  background-color:#d10a0a;
   background-color:var(--iui-color-background-negative);
 }
 .iui-toast.iui-negative > .iui-toast-anchor{
-  color:#d10a0a;
-  -webkit-tap-highlight-color:rgba(209, 10, 10, 0.2);
   color:var(--iui-color-foreground-negative);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-6));
 }
 .iui-toast.iui-negative > .iui-toast-anchor:focus-visible{
   outline:1px solid var(--iui-color-foreground-negative);
@@ -268,40 +240,31 @@
   }
 }
 .iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
-  background-color:rgba(209, 10, 10, 0.2);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-negative > .iui-toast-anchor::selection,
 .iui-toast.iui-negative > .iui-toast-anchor *::selection{
-  background-color:rgba(209, 10, 10, 0.2);
-  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-negative > .iui-toast-anchor:hover{
-  color:#a10808;
-  color:var(--iui-color-foreground-negative-overlay);
+  color:var(--iui-color-foreground-negative-hover);
 }
 .iui-toast.iui-warning{
-  border-color:#f18d13;
   border-color:var(--iui-color-foreground-warning);
 }
 .iui-toast.iui-warning > .iui-message::-moz-selection, .iui-toast.iui-warning > .iui-message *::-moz-selection{
-  background-color:rgba(241, 141, 19, 0.2);
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-warning > .iui-message::selection,
 .iui-toast.iui-warning > .iui-message *::selection{
-  background-color:rgba(241, 141, 19, 0.2);
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-warning > .iui-status-area{
-  background-color:#f18d13;
   background-color:var(--iui-color-background-warning);
 }
 .iui-toast.iui-warning > .iui-toast-anchor{
-  color:#f18d13;
-  -webkit-tap-highlight-color:rgba(241, 141, 19, 0.2);
   color:var(--iui-color-foreground-warning);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-6));
 }
 .iui-toast.iui-warning > .iui-toast-anchor:focus-visible{
   outline:1px solid var(--iui-color-foreground-warning);
@@ -314,15 +277,12 @@
   }
 }
 .iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
-  background-color:rgba(241, 141, 19, 0.2);
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-warning > .iui-toast-anchor::selection,
 .iui-toast.iui-warning > .iui-toast-anchor *::selection{
-  background-color:rgba(241, 141, 19, 0.2);
-  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
+  background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
 }
 .iui-toast.iui-warning > .iui-toast-anchor:hover{
-  color:#c6720c;
-  color:var(--iui-color-foreground-warning-overlay);
+  color:var(--iui-color-foreground-warning-hover);
 }

package/css/toggle-switch.css

@@ -7,12 +7,11 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  display:-ms-grid;
   display:grid;
-      grid-template-areas:"toggle";
+  grid-template-areas:"toggle";
   align-items:center;
-  gap:8px;
-  font-size:14px;
+  gap:var(--iui-size-xs);
+  font-size:var(--iui-font-size-1);
   width:-webkit-fit-content;
   width:-moz-fit-content;
   width:fit-content;
@@ -22,21 +21,11 @@
           user-select:none;
   cursor:pointer;
   isolation:isolate;
-  color:rgba(0, 0, 0, 0.8);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-}
-.iui-toggle-switch-wrapper > * + *{
-  margin-left:8px;
-}
-@supports (gap: 8px){
-  .iui-toggle-switch-wrapper > * + *{
-    margin-left:0;
-  }
+  color:var(--iui-color-foreground-2);
 }
 .iui-toggle-switch-wrapper.iui-disabled{
   cursor:not-allowed;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 @media (forced-colors: active){
   .iui-toggle-switch-wrapper.iui-disabled{
@@ -44,15 +33,13 @@
   }
 }
 .iui-toggle-switch-wrapper.iui-label-on-left{
-      grid-template-areas:"label toggle";
+  grid-template-areas:"label toggle";
 }
 .iui-toggle-switch-wrapper.iui-label-on-right{
-      grid-template-areas:"toggle label";
+  grid-template-areas:"toggle label";
 }
 
 .iui-toggle-switch{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
   margin:0;
   padding:0;
   border:none;
@@ -61,20 +48,16 @@
   display:flex;
   position:relative;
   cursor:pointer;
-  width:16px;
-  height:16px;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  width:calc((var(--iui-size-m) + var(--iui-size-2xs) * 2) * 2);
+  border-radius:var(--iui-border-radius-round);
+  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
   background-color:var(--iui-color-background-1);
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-}
-
-.iui-toggle-switch-wrapper.iui-label-on-left > .iui-toggle-switch{
-  -ms-grid-row:1;
-  -ms-grid-column:2;
-}
-
-.iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
+  border:1px solid var(--iui-color-foreground-4);
+  background-color:var(--iui-color-background-1);
+  border-color:var(--iui-color-foreground-4);
 }
 .iui-toggle-switch:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -86,42 +69,22 @@
     outline-offset:1px;
   }
 }
-@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)){
-  .iui-toggle-switch{
-    -webkit-appearance:none;
-       -moz-appearance:none;
-            appearance:none;
-    width:44px;
-    height:auto;
-    border-radius:9999px;
-    box-sizing:border-box;
-    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
-    background-color:var(--iui-color-background-1);
-    border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  }
-}
 .iui-toggle-switch-label{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
   grid-area:label;
 }
-.iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-label{
-  -ms-grid-row:1;
-  -ms-grid-column:2;
-}
 .iui-toggle-switch::after{
   content:"";
-  height:16px;
-  width:16px;
-  margin:3px;
+  height:var(--iui-size-m);
+  width:var(--iui-size-m);
+  margin:var(--iui-size-2xs);
   aspect-ratio:1/1;
   border-radius:50%;
-  transition:background-color 0.2s ease-out, opacity 0.2s ease-out;
+  transition:background-color var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
   z-index:2;
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-toggle-switch::after{
-    transition:transform 0.2s ease-out, background-color 0.2s ease-out, opacity 0.2s ease-out;
+    transition:transform var(--iui-duration-1) ease-out, background-color var(--iui-duration-1) ease-out, opacity var(--iui-duration-1) ease-out;
   }
 }
 @media (forced-colors: active){
@@ -130,7 +93,7 @@
   }
 }
 .iui-toggle-switch::after{
-  background-color:var(--iui-color-foreground-body);
+  background-color:var(--iui-color-foreground-1);
   opacity:var(--iui-opacity-2);
 }
 @media (forced-colors: active){
@@ -140,7 +103,7 @@
   }
 }
 .iui-toggle-switch:hover{
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  border-color:var(--iui-color-foreground-2);
 }
 @media (forced-colors: active){
   .iui-toggle-switch:hover{
@@ -148,11 +111,11 @@
   }
 }
 .iui-toggle-switch:focus-visible{
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  border-color:var(--iui-color-foreground-2);
 }
 @supports not selector(*:focus-visible){
   .iui-toggle-switch:focus{
-    border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+    border-color:var(--iui-color-foreground-2);
   }
 }
 .iui-toggle-switch:checked{
@@ -166,7 +129,7 @@
   }
 }
 .iui-toggle-switch:checked::after{
-  transform:translateX(19px);
+  transform:translateX(calc(var(--iui-size-m) + var(--iui-size-2xs)));
   background-color:var(--iui-color-foreground-accessory);
   opacity:var(--iui-opacity-2);
 }
@@ -201,7 +164,7 @@
   }
 }
 .iui-toggle-switch:disabled::after{
-  background-color:var(--iui-color-foreground-body);
+  background-color:var(--iui-color-foreground-1);
   opacity:var(--iui-opacity-5);
 }
 @media (forced-colors: active){
@@ -212,7 +175,7 @@
 }
 .iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
   opacity:0;
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-color-foreground-2);
 }
 @media (forced-colors: active){
   .iui-toggle-switch:disabled:checked{
@@ -234,28 +197,18 @@
   }
 }
 .iui-toggle-switch-icon{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
   opacity:0;
   grid-area:toggle;
-  width:12px;
-  height:12px;
-  padding:2px;
-  margin:4px;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+  padding:calc(var(--iui-size-m) * 0.125);
+  margin:calc(var(--iui-size-2xs) + 1px);
   display:flex;
   z-index:1;
-  transition:opacity 0.2s ease-out;
+  transition:opacity var(--iui-duration-1) ease-out;
   pointer-events:none;
   fill:var(--iui-color-foreground-accessory);
 }
-.iui-toggle-switch-wrapper.iui-label-on-left > .iui-toggle-switch-icon{
-  -ms-grid-row:1;
-  -ms-grid-column:2;
-}
-.iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-icon{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
-}
 @media (forced-colors: active){
   .iui-toggle-switch-icon{
     fill:HighlightText;

package/css/tooltip.css

@@ -22,7 +22,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-tooltip-container > .iui-tooltip{
-    transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
+    transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
   }
 }
 .iui-tooltip-container > .iui-tooltip.iui-tooltip-visible, .iui-tooltip-container:hover > .iui-tooltip{
@@ -37,8 +37,8 @@
   vertical-align:baseline;
   display:block;
   text-align:center;
-  border-radius:4px;
-  font-size:12px;
+  border-radius:var(--iui-border-radius-1);
+  font-size:var(--iui-font-size-0);
   overflow:hidden;
   max-width:400px;
   width:-webkit-max-content;
@@ -46,14 +46,11 @@
   width:max-content;
   overflow-wrap:break-word;
   box-sizing:content-box;
-  padding:4px 8px;
+  padding:calc(var(--iui-size-s) * 0.33) var(--iui-size-xs);
   z-index:999;
-  box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
+  box-shadow:var(--iui-shadow-3);
   pointer-events:none;
-  background-color:rgba(0, 0, 0, 0.6);
-  color:white;
-  border:1px solid rgba(255, 255, 255, 0.4);
   background-color:rgba(0, 0, 0, var(--iui-opacity-3));
   color:var(--iui-color-foreground-accessory);
-  border:1px solid rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
+  border:1px solid rgba(255, 255, 255, var(--iui-opacity-4));
 }