@itwin/itwinui-css 0.50.1 → 0.53.0

package/css/carousel.css

@@ -4,14 +4,18 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-carousel{
   overflow:hidden;
-  border-radius:3px; }
-  .iui-carousel:focus-visible{
+  border-radius:3px;
+}
+.iui-carousel:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:4px;
+}
+@supports not selector(*:focus-visible){
+  .iui-carousel:focus{
     outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:4px; }
-  @supports not selector(*:focus-visible){
-    .iui-carousel:focus{
-      outline:1px solid var(--iui-color-foreground-primary);
-      outline-offset:4px; } }
+    outline-offset:4px;
+  }
+}
 
 .iui-carousel-slider{
   display:flex;
@@ -19,95 +23,110 @@
   list-style:none;
   margin:0;
   padding:0;
-  overflow-x:auto;
-  overflow-x:overlay;
   -ms-scroll-snap-type:x mandatory;
       scroll-snap-type:x mandatory;
-  scrollbar-width:none; }
-  @media (prefers-reduced-motion: no-preference){
-    .iui-carousel-slider{
-      scroll-behavior:smooth; } }
-  .iui-carousel-slider::-webkit-scrollbar{
-    display:none; }
-  .iui-carousel-slider-item{
-    width:100%;
-    flex-shrink:0;
-    box-sizing:border-box;
-    scroll-snap-align:center; }
+  overflow-x:auto;
+  overflow-x:overlay;
+  scrollbar-width:none;
+}
+.iui-carousel-slider::-webkit-scrollbar{
+  display:none;
+}
+.iui-carousel-slider-item{
+  width:100%;
+  flex-shrink:0;
+  box-sizing:border-box;
+  scroll-snap-align:center;
+}
 
 .iui-carousel-navigation{
   display:flex;
   align-items:center;
   height:33px;
   box-sizing:border-box;
-  border-top:2px solid #DCE0E3;
-  border-top:2px solid var(--iui-color-background-4); }
-  .iui-carousel-navigation-dots, .iui-carousel-navigation-left, .iui-carousel-navigation-right{
-    display:flex;
-    align-items:center;
-    flex:1; }
-    .iui-carousel-navigation-dots button[data-pressed='true'], .iui-carousel-navigation-left button[data-pressed='true'], .iui-carousel-navigation-right button[data-pressed='true']{
-      outline-offset:-1px;
-      outline:1px solid #008BE1;
-      outline:1px solid var(--iui-color-foreground-primary); }
-  .iui-carousel-navigation-dots{
-    margin:0;
-    padding:0;
-    border:none;
-    vertical-align:baseline;
-    border-radius:3px;
-    white-space:nowrap;
-    overflow:hidden;
-    justify-content:center;
-    list-style:none; }
-    .iui-carousel-navigation-dots:focus-visible{
-      outline:1px solid var(--iui-color-foreground-primary);
-      outline-offset:-1px; }
-    @supports not selector(*:focus-visible){
-      .iui-carousel-navigation-dots:focus{
-        outline:1px solid var(--iui-color-foreground-primary);
-        outline-offset:-1px; } }
-  .iui-carousel-navigation-dot{
-    padding:0 8px;
-    height:27px;
-    gap:4px;
-    background-color:transparent;
-    border:none;
-    cursor:pointer; }
-    .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.iui-invisible{
-      -webkit-clip-path:inset(50%);
-              clip-path:inset(50%);
-      overflow:hidden;
-      position:absolute;
-      white-space:nowrap;
-      height:1px;
-      width:1px;
-      padding:0;
-      margin:-1px;
-      border-width:0; }
-    .iui-carousel-navigation-dot::after{
-      content:'';
-      display:block;
-      width:12px;
-      height:12px;
-      border-radius:50%;
-      transition:background-color 0.2s ease;
-      background-color:rgba(0, 0, 0, 0.4);
-      background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
-      @media (prefers-reduced-motion: no-preference){
-        .iui-carousel-navigation-dot::after{
-          transition:background-color 0.2s 0.2s ease, transform 0.4s ease; } }
-    .iui-carousel-navigation-dot.iui-first::after{
-      transform:scale(0.5); }
-    .iui-carousel-navigation-dot.iui-second::after{
-      transform:scale(0.75); }
-    .iui-carousel-navigation-dot.iui-invisible::after{
-      transform:scale(0); }
-    .iui-carousel-navigation-dot.iui-active::after{
-      background-color:#008BE1;
-      background-color:var(--iui-color-foreground-primary); }
-  .iui-carousel-navigation-right{
-    justify-content:flex-end; }
+  border-top:2px solid #dde1e4;
+  border-top:2px solid var(--iui-color-background-4);
+}
+.iui-carousel-navigation-left, .iui-carousel-navigation-right{
+  display:flex;
+  align-items:center;
+  flex:1;
+}
+.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{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  flex:2;
+  max-width:256px;
+  border-radius:3px;
+  white-space:nowrap;
+  overflow-x:auto;
+  overflow-x:overlay;
+  scrollbar-width:none;
+}
+.iui-carousel-navigation-dots:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:-1px;
+}
+@supports not selector(*:focus-visible){
+  .iui-carousel-navigation-dots:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px;
+  }
+}
+.iui-carousel-navigation-dots::-webkit-scrollbar{
+  display:none;
+}
+.iui-carousel-navigation-dot{
+  padding:0 8px;
+  height:27px;
+  gap:4px;
+  background-color:transparent;
+  border:none;
+  cursor:pointer;
+}
+.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{
+  content:"";
+  display:block;
+  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);
+}
+.iui-carousel-navigation-dot.iui-first::after{
+  transform:scale(0.5);
+}
+.iui-carousel-navigation-dot.iui-second::after{
+  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);
+}
+@media (forced-colors: active){
+  .iui-carousel-navigation-dot.iui-active::after{
+    border-width:6px;
+  }
+}
+.iui-carousel-navigation-right{
+  justify-content:flex-end;
+}

package/css/code.css

@@ -15,68 +15,81 @@
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
-  background-color:#EEF0F3;
+  background-color:#edeff2;
   color:rgba(0, 0, 0, 0.8);
   background-color:var(--iui-color-background-3);
-  color:var(--iui-text-color); }
+  color:var(--iui-text-color);
+}
 
 .iui-codeblock{
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
-  margin:6px 0; }
-  .iui-codeblock > .iui-title-bar{
-    display:flex;
-    align-items:center;
-    border-radius:3px 3px 0 0;
-    background-color:#EEF0F3;
-    background-color:var(--iui-color-background-3); }
-    .iui-codeblock > .iui-title-bar > .iui-title{
-      margin-left:12px;
-      -webkit-user-select:all;
-         -moz-user-select:all;
-              user-select:all; }
-    .iui-codeblock > .iui-title-bar > .iui-button{
-      margin-left:auto; }
-  .iui-codeblock .iui-button{
-    gap:0; }
-  .iui-codeblock > .iui-codeblock-content{
-    margin:0;
-    overflow-x:auto;
-    overflow-y:auto;
-    border-radius:0 0 3px 3px;
-    white-space:normal;
-    border:1px solid #EEF0F3;
-    border:1px solid var(--iui-color-background-3); }
-    .iui-codeblock > .iui-codeblock-content:focus-visible{
-      outline:1px solid var(--iui-color-foreground-primary);
-      outline-offset:-1px; }
-    @supports not selector(*:focus-visible){
-      .iui-codeblock > .iui-codeblock-content:focus{
-        outline:1px solid var(--iui-color-foreground-primary);
-        outline-offset:-1px; } }
-    .iui-codeblock > .iui-codeblock-content > code{
-      display:block;
-      width:100%;
-      white-space:nowrap;
-      -webkit-hyphens:auto;
-          -ms-hyphens:auto;
-              hyphens:auto;
-      counter-increment:section;
-      font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
-      background-color:#FFF;
-      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{
-        content:counter(section);
-        text-align:right;
-        display:inline-block;
-        padding:0 8px;
-        width:24px;
-        background-color:#F8F9FB;
-        color:rgba(0, 0, 0, 0.4);
-        background-color:var(--iui-color-background-2);
-        color:var(--iui-text-color-muted); }
+  margin:6px 0;
+}
+.iui-codeblock > .iui-title-bar{
+  display:flex;
+  align-items:center;
+  border-radius:3px 3px 0 0;
+  background-color:#edeff2;
+  background-color:var(--iui-color-background-3);
+}
+.iui-codeblock > .iui-title-bar > .iui-title{
+  margin-left:12px;
+  -webkit-user-select:all;
+     -moz-user-select:all;
+          user-select:all;
+}
+.iui-codeblock > .iui-title-bar > .iui-button{
+  margin-left:auto;
+}
+.iui-codeblock .iui-button{
+  gap:0;
+}
+.iui-codeblock > .iui-codeblock-content{
+  margin:0;
+  overflow-x:auto;
+  overflow-y:auto;
+  border-radius:0 0 3px 3px;
+  white-space:normal;
+  border:1px solid #edeff2;
+  border:1px solid var(--iui-color-background-3);
+}
+.iui-codeblock > .iui-codeblock-content:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:-1px;
+}
+@supports not selector(*:focus-visible){
+  .iui-codeblock > .iui-codeblock-content:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px;
+  }
+}
+.iui-codeblock > .iui-codeblock-content > code{
+  display:block;
+  width:100%;
+  white-space:nowrap;
+  -webkit-hyphens:auto;
+      -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;
+  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{
+  content:counter(section);
+  text-align:right;
+  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);
+}