@react-fabric/core 1.0.0-beta.62 → 1.0.0-beta.63

package/css/components/_animations.css

@@ -124,8 +124,9 @@
     --r2: radial-gradient(farthest-side at top, currentcolor 93%, #0000);
 
     aspect-ratio: 1;
-    background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2),
-      var(--c), var(--r1), var(--r2);
+    background:
+      var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c),
+      var(--r1), var(--r2);
     background-repeat: no-repeat;
     animation: l2 1s infinite alternate;
   }
@@ -140,25 +141,20 @@
     --b: 8px;
 
     aspect-ratio: 1;
+    border-radius: 50%;
 
     background: conic-gradient(#0000 10%, currentcolor) content-box;
-    border-radius: 50%;
 
-    mask: repeating-conic-gradient(
-        #0000 0deg,
-        #000 1deg 20deg,
-        #0000 21deg 36deg
-      ),
+    mask:
+      repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
       radial-gradient(
         farthest-side,
         #0000 calc(100% - var(--b) - 1px),
         #000 calc(100% - var(--b))
       );
+    mask-composite: intersect;
 
     animation: l4 2s infinite steps(10);
-
-    mask-composite: destination-in;
-    mask-composite: intersect;
   }
 
   @keyframes loader {

package/css/components/_avatar.css

@@ -25,10 +25,10 @@
   .fabric-avatar {
     width: 1em;
     height: 1em;
+    border-radius: var(--rounding);
 
     vertical-align: -0.125em;
 
-    border-radius: var(--rounding);
     box-shadow: 0 0 1px var(--border-color-base);
 
     & > i,
@@ -41,12 +41,12 @@
 
       width: 1em;
       height: 1em;
+      border-radius: inherit;
 
       line-height: 1;
 
       object-fit: cover;
       background-color: var(--bg-color-dimmed);
-      border-radius: inherit;
 
       fill: currentcolor;
     }
@@ -63,7 +63,7 @@
   .fabric-avatarGroup {
     & > .fabric-avatar {
       box-shadow:
-        0 0 0 1px var(--border-color-muted),
+        0 0 0 1px var(--border-color-soft),
         0 0 0 0.125em var(--fabric-bg);
 
       &:not(:first-child) {
@@ -74,8 +74,8 @@
     & .fabric-avatarGroup--extra {
       width: 1em;
       height: 1em;
-      font-size: inherit;
       border-radius: inherit;
+      font-size: inherit;
     }
   }
 }
@@ -83,8 +83,8 @@
 @layer utilities {
   .fabric-avatarGroup {
     & > .fabric-avatar {
-      font-size: inherit;
       border-radius: inherit;
+      font-size: inherit;
     }
   }
 }

package/css/components/_badge.css

@@ -61,9 +61,10 @@
         z-index: -1;
         inset: 0;
 
-        background-color: inherit;
         border-radius: 999px;
 
+        background-color: inherit;
+
         animation: pinger 1s linear infinite;
       }
     }

package/css/components/_breadcrumbs.css

@@ -100,8 +100,8 @@
       --linkcolor: color-mix(in lab, var(--color) 35%, var(--fabric-bg));
 
       position: relative;
-      list-style: none;
       border-radius: var(--rounding);
+      list-style: none;
 
       &:last-child {
         --color: var(--color-tint-500);
@@ -127,11 +127,11 @@
 
           display: inline-block;
 
-          vertical-align: middle;
-
           border: 0.625em solid transparent;
           border-block-color: var(--linkcolor);
           border-inline-end-color: var(--linkcolor);
+
+          vertical-align: middle;
         }
 
         & > .link {
@@ -145,10 +145,10 @@
 
           display: inline-block;
 
-          vertical-align: middle;
-
           border: 0.625em solid transparent;
           border-inline-start-color: var(--linkcolor);
+
+          vertical-align: middle;
         }
       }
 

package/css/components/_button.css

@@ -23,18 +23,19 @@
 
 @layer components {
   .fabric-buttonWrapper {
-    --color: var(--color-tint-600);
-    --color-muted: var(--color-tint-300);
+    --color: var(--color-tint-800);
+    --color-muted: var(--color-tint-500);
 
-    font-size: 1rem;
     border-radius: var(--rounding);
+    font-size: 1rem;
 
     & .fabric-button {
+      border-radius: inherit;
+
       color: var(--text);
 
       background-color: var(--bg);
       background-image: var(--click-gradient);
-      border-radius: inherit;
       outline: 1px solid var(--outline);
 
       &.spinOnHover:hover .fabric-buttonIcon {
@@ -100,11 +101,6 @@
       flex: 0 1 1em;
     }
   }
-
-  [data-color-scheme="dark"] .fabric-buttonWrapper {
-    --color: var(--color-tint-500);
-    --color-muted: var(--color-tint-200);
-  }
 }
 
 @layer utilities {
@@ -133,10 +129,19 @@
   .fabric-button {
     --bg: color-mix(in lab, var(--fabric-bg) 99%, var(--color-tint));
     --outline: color-mix(in lab, var(--bg) 90%, var(--fabric-text));
-    --text: color-mix(in lab, var(--color) 80%, var(--fabric-text));
+    --text: color-mix(in lab, var(--color) 90%, var(--fabric-text));
     --bg-hover: color-mix(in lab, var(--color) 18%, var(--fabric-bg));
     --bg-click: color-mix(in lab, var(--color) 25%, var(--fabric-bg));
     --bg-active: color-mix(in lab, var(--color) 24%, var(--fabric-bg));
+    --text-hover: var(--text);
+
+    &[data-color="default"],
+    &[data-color="muted"] {
+      --text-hover: color-mix(in lab, var(--color-primary-500) 10%, var(--fabric-text));
+      --bg-hover: color-mix(in lab, var(--color-primary-500) 18%, var(--fabric-bg));
+      --bg-click: color-mix(in lab, var(--color-primary-500) 25%, var(--fabric-bg));
+      --bg-active: color-mix(in lab, var(--color-primary-500) 22%, var(--fabric-bg));
+    }
 
     &[data-color="primary"] {
       --color: var(--color-primary-500);
@@ -171,10 +176,22 @@
     }
 
     &[data-variant="soft"] {
-      --bg: color-mix(in lab, var(--color) 25%, var(--fabric-bg));
-      --bg-hover: color-mix(in lab, var(--color) 35%, var(--fabric-bg));
-      --bg-click: color-mix(in lab, var(--color) 50%, var(--color-tint-50));
-      --bg-active: color-mix(in lab, var(--color) 50%, var(--color-tint-50));
+      --bg: color-mix(in lab, var(--color) 15%, var(--fabric-bg));
+      --bg-hover: color-mix(in lab, var(--color) 25%, var(--fabric-bg));
+      --bg-click: color-mix(in lab, var(--color) 35%, var(--color-tint-50));
+      --bg-active: color-mix(in lab, var(--color) 30%, var(--color-tint-50));
+
+       &[data-color="default"] {
+        --bg-hover: color-mix(in lab, var(--color-primary-500) 25%, var(--fabric-bg));
+        --bg-click: color-mix(in lab, var(--color-primary-500) 35%, var(--color-tint-50));
+        --bg-active: color-mix(in lab, var(--color-primary-500) 30%, var(--color-tint-50));
+       }
+
+       &[data-color="muted"] {
+        --bg-hover: color-mix(in lab, var(--color-primary-500) 18%, var(--fabric-bg));
+        --bg-click: color-mix(in lab, var(--color-primary-500) 25%, var(--color-tint-50));
+        --bg-active: color-mix(in lab, var(--color-primary-500) 30%, var(--color-tint-50));
+       }
     }
 
     &[data-variant="solid"] {
@@ -189,6 +206,22 @@
         color: --alpha(var(--color-white) / 70%);
         background-color: --alpha(var(--bg-color-dark) / 30%);
       }
+
+       &[data-color="default"] {
+        --outline: color-mix(in lab, var(--color-black) 85%, var(--fabric-bg));
+        --bg: color-mix(in lab, var(--color-black) 75%, var(--fabric-bg));
+        --bg-hover: color-mix(in lab, var(--color-primary-500) 90%, var(--fabric-bg));
+        --bg-click: color-mix(in lab, var(--color-primary-500) 80%, var(--color-black));
+        --bg-active: color-mix(in lab, var(--color-primary-500) 85%, var(--color-black));
+        --text-hover: var(--color-white);
+       }
+
+       &[data-color="muted"] {
+        --bg-hover: color-mix(in lab, var(--color-primary-500) 80%, var(--fabric-bg));
+        --bg-click: color-mix(in lab, var(--color-primary-500) 85%, var(--color-black));
+        --bg-active: color-mix(in lab, var(--color-primary-500) 70%, var(--color-black));
+        --text-hover: var(--color-white);
+       }
     }
 
     &[data-variant="link"] {
@@ -270,6 +303,7 @@
     --tw-ring-color: var(--color);
 
     &:hover {
+      color: var(--text-hover);
       background-color: var(--bg-hover);
     }
 

package/css/components/_card.css

@@ -54,10 +54,8 @@
   }
 
   .fabric-card {
-    --tw-shadow-color: var(--border-color-muted);
-
     background-color: var(--fabric-bg);
-    box-shadow: 0 0 0 1px var(--tw-shadow-color);
+    outline: 1px solid var(--border-color-bright);
 
     & > * {
       background-color: transparent;
@@ -81,19 +79,22 @@
 
     & .fabric-cardBody {
       padding: 1rem;
+
+      & > * {
+        grid-area: unset;
+        background-color: transparent;
+      }
     }
 
     &.clickable {
-      --tw-shadow-color: var(--border-color-dimmed);
+      --tw-shadow-color: var(--border-color-soft);
 
       box-shadow:
         0 0 0 1px var(--tw-shadow-color),
         0 1px 2px 0 var(--fabric-shadow);
       transition: box-shadow 0ms;
 
-      &:has(.fabric-cardBody:hover):not(
-          :has([data-inner-clickable="true"]:hover)
-        ) {
+      &:has(.fabric-cardBody:hover):not(:has([data-inner-clickable="true"]:hover)) {
         box-shadow:
           0 0 0 1px var(--tw-shadow-color),
           0 1px 4px 0 var(--fabric-shadow),
@@ -101,9 +102,7 @@
         transition-delay: 150ms;
       }
 
-      &:has(.fabric-cardBody:active):not(
-          :has([data-inner-clickable="true"]:hover)
-        ) {
+      &:has(.fabric-cardBody:active):not(:has([data-inner-clickable="true"]:hover)) {
         transform: translateY(1px);
         box-shadow: 0 0 0 1px var(--tw-shadow-color);
         transition-delay: 0ms;
@@ -135,13 +134,6 @@
 
 @layer utilities {
   .fabric-card {
-    & .fabric-cardBody {
-      & > * {
-        grid-area: unset;
-        background-color: transparent;
-      }
-    }
-
     & .fabric-cardCover {
       & > [data-ref="image"],
       & > [data-ref="video"] {

package/css/components/_chip.css

@@ -43,10 +43,6 @@
       }
     }
 
-    & > .fabric-chipRemove {
-      /* mayble add styles later */
-    }
-
     &.clickable {
       cursor: pointer;
       background-image: var(--click-gradient);

package/css/components/_dropdown.css

@@ -32,6 +32,7 @@
 
       border-top: 0;
       border-inline: 0;
+
       outline: 0;
       box-shadow: none;
     }

package/css/components/_flyout.css

@@ -29,8 +29,8 @@
     transition: margin 0.5s;
 
     & .fabric-flyoutHeader {
+      border-bottom: 0.5px solid var(--border-color-bright);
       background-color: var(--bg-color-base);
-      border-bottom: 0.5px solid var(--border-color-dimmed);
     }
 
     & .fabric-flyoutBody {

package/css/components/_media.css

@@ -32,6 +32,7 @@
         inset-inline: 0;
 
         height: 0.5rem;
+        border: 0.125rem solid #222c;
 
         background-image: linear-gradient(
           to right,
@@ -45,7 +46,6 @@
         background-repeat: repeat-x;
         background-position: center center;
         background-size: 1rem;
-        border: 0.125rem solid #222c;
       }
 
       &::before {
@@ -57,10 +57,6 @@
       }
     }
 
-    & .fabric-mediaPlaceholder {
-      /* might add styles later */
-    }
-
     & .fabric-mediaControls {
       & [data-ref="button"] {
         margin: 0;
@@ -80,23 +76,15 @@
         background-color: --alpha(var(--color-black) / 70%);
       }
 
-      & .fabric-mediaControlPlaceholder {
-        /* might add styles later */
-      }
-
       & .fabric-mediaControlAction + .fabric-mediaControlAction {
         margin-top: 8px;
       }
     }
   }
-
-  .fabric-media {
-    /* might add styles later */
-  }
 }
 
 @layer utilities {
-  & .fabric-mediaControls {
+  .fabric-mediaContainer .fabric-mediaControls {
     &:hover {
       & .fabric-mediaControlPlaceholder {
         display: none;

package/css/components/_menu.css

@@ -69,9 +69,9 @@
 
     &.active {
       pointer-events: none;
-      background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
       border-start-start-radius: 0;
       border-end-start-radius: 0;
+      background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
 
       & > div {
         box-shadow: 4px 0 0 var(--color) inset;

package/css/components/_modal.css

@@ -42,8 +42,8 @@
     }
 
     & .fabric-modalHeader {
+      border-bottom: 0.5px solid var(--border-color-bright);
       background-color: var(--bg-color-base);
-      border-bottom: 0.5px solid var(--border-color-dimmed);
     }
 
     & .fabric-modalBody {

package/css/components/_progress.css

@@ -24,7 +24,7 @@
 @layer components {
   .fabric-progressbar {
     height: 1em;
-    box-shadow: 0 0 4px 0 var(--fabric-shadow) inset;
+    box-shadow: 0 0 2px 0 var(--fabric-shadow) inset;
 
     & > div:last-child {
       width: calc(var(--progress) * 1%);

package/css/components/_stepper.css

@@ -28,10 +28,11 @@
 
       flex: 0 0 auto;
 
+      border-radius: var(--radius);
+
       color: var(--color-primary-600);
 
       background-color: var(--color-primary-50);
-      border-radius: var(--radius);
 
       & .fabric-icon {
         padding: 0.125rem;

package/css/components/_tabPanel.css

@@ -29,7 +29,7 @@
       grid-template: "tablist" auto "content" 1fr / 1fr;
 
       .fabric-tabHeader {
-        box-shadow: 0 -1px 0 var(--border-color-dimmed) inset;
+        box-shadow: 0 -1px 0 var(--border-color-bright) inset;
 
         .fabric-tabButton {
           padding: 0.25rem 0.5rem;
@@ -42,7 +42,7 @@
 
       .fabric-tabHeader {
         margin-top: 1px;
-        box-shadow: 0 1px 0 var(--border-color-dimmed) inset;
+        box-shadow: 0 1px 0 var(--border-color-bright) inset;
 
         .fabric-tabButton {
           padding: 0.25rem 0.5rem;
@@ -54,7 +54,7 @@
       grid-template: "tablist content" 1fr / auto 1fr;
 
       .fabric-tabHeader {
-        box-shadow: -1px 0 0 var(--border-color-dimmed) inset;
+        box-shadow: -1px 0 0 var(--border-color-bright) inset;
 
         .fabric-tabButton {
           min-width: 5rem;
@@ -78,7 +78,7 @@
       grid-template: "content tablist" 1fr / 1fr auto;
 
       .fabric-tabHeader {
-        box-shadow: 1px 0 0 var(--border-color-dimmed) inset;
+        box-shadow: 1px 0 0 var(--border-color-bright) inset;
 
         .fabric-tabButton {
           min-width: 5rem;

package/css/core/_aside.css

@@ -23,8 +23,8 @@
 
 @layer components {
   .fabric-aside {
-    --aside-bg: color-mix(in lab, var(--fabric-bg) 95%, var(--color-tint));
-    --aside-border: color-mix(in lab, var(--fabric-bg) 75%, var(--color-tint));
+    --aside-bg: var(--bg-color-base);
+    --aside-border: var(--border-color-soft);
 
     background-color: var(--aside-bg);
 
@@ -119,9 +119,9 @@
       &:hover::before,
       &:active::before {
         height: 100%;
-        background-color: var(--color-primary-300);
         border-color: var(--bg-color-base);
         border-width: 0 1.25px;
+        background-color: var(--color-primary-300);
       }
     }
   }

package/css/core/_errorboundary.css

@@ -32,8 +32,8 @@
     background-color: var(--color-danger-500);
     background-image: repeating-linear-gradient(
       135deg,
-      rgba(255 255 255 / 50%) 0 4px,
-      rgba(255 255 255 / 20%) 4px 8px
+      rgb(255 255 255 / 50%) 0 4px,
+      rgb(255 255 255 / 20%) 4px 8px
     );
 
     & .fabric-boundaryContent {
@@ -52,14 +52,6 @@
     & .fabric-boundaryDetail {
       grid-area: detail;
       grid-template-rows: auto 1fr;
-
-      & .fabric-boundaryLink {
-        /* might add styles later */
-      }
-    }
-
-    & .fabric-boundaryStack {
-      /* might add styles later */
     }
   }
 }

package/css/core/_page.css

@@ -23,7 +23,7 @@
 
 @layer components {
   .fabric-page {
-    --fabric-page: color-mix(in lab, var(--fabric-bg) 94%, var(--color-tint));
+    --fabric-page: var(--bg-color-base);
     --fabric-page-title: color-mix(
       in lab,
       var(--fabric-bg) 90%,

package/css/core/_responsive.css

@@ -83,3 +83,11 @@
     }
   }
 }
+
+@layer utilities {
+  .container-inner {
+    width: 100%;
+
+    @apply @xs:max-w-xs @sm:max-w-sm @md:max-w-md @lg:max-w-lg @xl:max-w-xl @2xl:max-w-2xl @3xl:max-w-3xl @4xl:max-w-4xl @5xl:max-w-5xl @6xl:max-w-6xl;
+  }
+}

package/css/core/_viewport.css

@@ -23,11 +23,7 @@
 
 @layer components {
   .fabric-viewport {
-    --fabric-viewport: color-mix(
-      in lab,
-      var(--fabric-bg) 76%,
-      var(--color-tint)
-    );
+    --fabric-viewport: color-mix(in lab, var(--fabric-bg) 76%, var(--color-tint));
 
     grid-template: "head head head" auto "crumbbar crumbbar crumbbar" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
     color: var(--fabric-text);