@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.60

package/{src/components/tabpanel/TabPanel.module.css → css/components/_tabPanel.css}

@@ -21,40 +21,121 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .tabPanel {
-    --color: theme(colors.primary.500);
+@layer components {
+  .fabric-tabPanel {
+    --color: var(--color-primary-500);
 
-    & > .tabList {
+    &[data-orientation="top"] {
+      grid-template: "tablist" auto "content" 1fr / 1fr;
+
+      .fabric-tabHeader {
+        box-shadow: 0 -1px 0 var(--border-color-dimmed) inset;
+
+        .fabric-tabButton {
+          padding: 0.25rem 0.5rem;
+        }
+      }
+    }
+
+    &[data-orientation="bottom"] {
+      grid-template: "content" 1fr "tablist" auto / 1fr;
+
+      .fabric-tabHeader {
+        margin-top: 1px;
+        box-shadow: 0 1px 0 var(--border-color-dimmed) inset;
+
+        .fabric-tabButton {
+          padding: 0.25rem 0.5rem;
+        }
+      }
+    }
+
+    &[data-orientation="start"] {
+      grid-template: "tablist content" 1fr / auto 1fr;
+
+      .fabric-tabHeader {
+        box-shadow: -1px 0 0 var(--border-color-dimmed) inset;
+
+        .fabric-tabButton {
+          min-width: 5rem;
+          padding: 0.5rem 0.25rem;
+        }
+
+        &.tab-rotate .fabric-tabButton {
+          flex-flow: column;
+          width: unset !important;
+          min-width: unset !important;
+          min-height: 5rem;
+
+          & > label {
+            writing-mode: sideways-lr;
+          }
+        }
+      }
+    }
+
+    &[data-orientation="end"] {
+      grid-template: "content tablist" 1fr / 1fr auto;
+
+      .fabric-tabHeader {
+        box-shadow: 1px 0 0 var(--border-color-dimmed) inset;
+
+        .fabric-tabButton {
+          min-width: 5rem;
+          padding: 0.5rem 0.25rem;
+        }
+
+        &.tab-rotate .fabric-tabButton {
+          flex-flow: column;
+          width: unset !important;
+          min-width: unset !important;
+          min-height: 5rem;
+
+          & > label {
+            writing-mode: sideways-rl;
+          }
+        }
+      }
+    }
+  }
+}
+
+@layer utilities {
+  .fabric-tabPanel {
+    & .fabric-tabList > .fabric-tabButton.active {
+      pointer-events: none;
+    }
+
+    & > .fabric-tabHeader {
       grid-area: tablist;
 
-      & > .tabButton {
+      & > .fabric-tabList > .fabric-tabButton {
         &[data-color="accent"] {
-          --color: theme(colors.accent.500);
+          --color: var(--color-accent-500);
         }
 
         &[data-color="info"] {
-          --color: theme(colors.info.500);
+          --color: var(--color-info-500);
         }
 
         &[data-color="danger"] {
-          --color: theme(colors.danger.500);
+          --color: var(--color-danger-500);
         }
 
         &[data-color="success"] {
-          --color: theme(colors.success.500);
+          --color: var(--color-success-500);
         }
 
         &[data-color="warning"] {
-          --color: theme(colors.warning.500);
+          --color: var(--color-warning-500);
         }
 
-        &:not(:global(.active)):hover {
+        &:not(.active):hover {
           color: color-mix(in lab, var(--color) 65%, var(--fabric-text));
-          background-color: theme(colors.tint.100/50%);
+          background-color: --alpha(var(--color-tint-100) / 50%);
         }
 
-        &:global(.active) {
+        &.active {
           --active-color: var(--color);
 
           font-weight: 500;
@@ -64,137 +145,101 @@
     }
 
     &[data-variant="outline"] {
-      & > .tabList > .tabButton:global(.active) {
-        --active-color: theme(backgroundColor.base);
-        --active-border: 0 0 0 1px theme(borderColor.base) inset;
+      & .fabric-tabList > .fabric-tabButton.active {
+        --active-color: var(--bg-color-base);
+        --active-border: 0 0 0 1px var(--border-color-base) inset;
 
-        background-color: theme(backgroundColor.base);
+        background-color: var(--bg-color-base);
       }
     }
 
     &[data-variant="solid"] {
-      & > .tabList > .tabButton:global(.active) {
-        color: theme(colors.white);
+      & .fabric-tabList > .fabric-tabButton.active {
+        color: var(--color-white);
         background-color: var(--color);
       }
     }
 
-    &[data-variant="soft"] {
-      & > .tabList > .tabButton:global(.active) {
+    &[data-variant="soft"],
+    &[data-variant="pills"] {
+      & .fabric-tabList > .fabric-tabButton.active {
         background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
       }
     }
 
-    &[data-orientation="top"] {
-      grid-template: "tablist" auto "content" 1fr / 1fr;
-      padding-inline: 2px;
-
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
-        box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
-      }
-    }
-
-    &[data-orientation="bottom"] {
-      grid-template: "content" 1fr "tablist" auto / 1fr;
-      padding-inline: 2px;
-
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
-        box-shadow: 0 1px 0 theme(borderColor.dimmed) inset;
-      }
-    }
-
-    &[data-orientation="start"] {
-      grid-template: "tablist content" 1fr / auto 1fr;
-      padding-block: 2px;
-
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
-        box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
-      }
-    }
-
-    &[data-orientation="end"] {
-      grid-template: "content tablist" 1fr / 1fr auto;
-      padding-block: 2px;
-
-      &[data-variant="outline"] > .tabList,
-      &[data-variant="solid"] > .tabList,
-      &[data-variant="soft"] > .tabList {
-        box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;
-      }
-    }
-  }
-}
-
-@layer util {
-  .tabPanel {
-    & > .tabList > .tabButton:global(.active) {
-      pointer-events: none;
-    }
-
-    &[data-orientation="top"] > .tabList {
-      & > .tabButton:global(.active) {
+    &[data-orientation="top"]:not([data-variant="pills"]) .fabric-tabList {
+      & > .fabric-tabButton.active {
         box-shadow:
           0 -2px 0 var(--active-color) inset,
           var(--active-border, 0 0 0 transparent);
       }
     }
 
-    &[data-orientation="bottom"] > .tabList {
-      & > .tabButton:global(.active) {
+    &[data-orientation="bottom"]:not([data-variant="pills"]) .fabric-tabList {
+      & > .fabric-tabButton.active {
         box-shadow:
           0 2px 0 var(--active-color) inset,
           var(--active-border, 0 0 0 transparent);
       }
     }
 
-    &[data-orientation="start"] > .tabList {
-      & > .tabButton:global(.active) {
+    &[data-orientation="start"]:not([data-variant="pills"]) .fabric-tabList {
+      & > .fabric-tabButton.active {
         box-shadow:
           -2px 0 0 var(--active-color) inset,
           var(--active-border, 0 0 0 transparent);
       }
     }
 
-    &[data-orientation="end"] > .tabList {
-      & > .tabButton:global(.active) {
+    &[data-orientation="end"]:not([data-variant="pills"]) .fabric-tabList {
+      & > .fabric-tabButton.active {
         box-shadow:
           2px 0 0 var(--active-color) inset,
           var(--active-border, 0 0 0 transparent);
       }
     }
 
-    &[data-orientation="top"] > .tabList > .tabButton {
+    &[data-orientation="top"]:not([data-variant="pills"])
+      .fabric-tabList
+      > .fabric-tabButton {
       margin-top: 2px;
       margin-inline: 1px;
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="bottom"] > .tabList > .tabButton {
+    &[data-orientation="bottom"]:not([data-variant="pills"])
+      .fabric-tabList
+      > .fabric-tabButton {
       margin-bottom: 2px;
       margin-inline: 1px;
       border-start-start-radius: 0;
       border-start-end-radius: 0;
     }
 
-    &[data-orientation="start"] > .tabList > .tabButton {
+    &[data-orientation="start"]:not([data-variant="pills"])
+      .fabric-tabList
+      > .fabric-tabButton {
       margin-block: 1px;
       margin-inline-start: 2px;
       border-start-end-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &[data-orientation="end"] > .tabList > .tabButton {
+    &[data-orientation="end"]:not([data-variant="pills"])
+      .fabric-tabList
+      > .fabric-tabButton {
       margin-block: 1px;
       margin-inline-end: 2px;
       border-start-start-radius: 0;
       border-end-start-radius: 0;
     }
+
+    &[data-variant="pills"] {
+      .fabric-tabList > .fabric-tabButton {
+        margin: 2px;
+        box-shadow: 0 0 2px var(--active-color) inset;
+      }
+    }
   }
 }

package/{src/overlays/toast/Toast.module.css → css/components/_toast.css}

@@ -21,8 +21,8 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .toast {
+@layer components {
+  .fabric-toast {
     margin-bottom: -100%;
     opacity: 0;
     transition:

package/css/components/_tooltip.css

@@ -0,0 +1,29 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+@layer components {
+  .fabric-tooltip > span.contrast {
+    filter: invert(1) grayscale(1) brightness(1.3) contrast(9000);
+    mix-blend-mode: luminosity;
+  }
+}

package/{src/core/content/Content.module.css → css/components/index.css}

@@ -4,7 +4,7 @@
  *
  *
  * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * Copyright (c) 2025 Adarsh Pastakia
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
  * and associated documentation files (the "Software"), to deal in the Software without restriction,
@@ -21,20 +21,28 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .content {
-    --fabric-content: color-mix(in lab, var(--fabric-bg) 97%, var(--tint));
-
-    overflow: auto;
-    padding: 1rem;
-    background-color: var(--fabric-content);
-  }
-}
-
-@layer util {
-  .content {
-    width: unset;
-    height: unset;
-    margin: unset;
-  }
-}
+@import "./_actionLabel.css";
+@import "./_alert.css";
+@import "./_animations.css";
+@import "./_avatar.css";
+@import "./_badge.css";
+@import "./_breadcrumbs.css";
+@import "./_button.css";
+@import "./_card.css";
+@import "./_chip.css";
+@import "./_collapsable.css";
+@import "./_divider.css";
+@import "./_dropdown.css";
+@import "./_flyout.css";
+@import "./_icon.css";
+@import "./_media.css";
+@import "./_menu.css";
+@import "./_message.css";
+@import "./_meter.css";
+@import "./_modal.css";
+@import "./_panel.css";
+@import "./_progress.css";
+@import "./_stepper.css";
+@import "./_tabPanel.css";
+@import "./_toast.css";
+@import "./_tooltip.css";

package/{src/core/aside/Aside.module.css → css/core/_aside.css}

@@ -21,10 +21,10 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .aside {
-    --aside-bg: color-mix(in lab, var(--fabric-bg) 95%, var(--tint));
-    --aside-border: color-mix(in lab, var(--fabric-bg) 75%, var(--tint));
+@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));
 
     background-color: var(--aside-bg);
 
@@ -36,7 +36,7 @@
         "content resizer" 1fr / 1fr auto;
       border-inline-end: 1px solid var(--aside-border);
 
-      & .asideHeader {
+      & .fabric-asideHeader {
         grid-template-areas: "icon title actions collapse";
         grid-template-columns: auto 1fr auto auto;
       }
@@ -50,17 +50,17 @@
         "resizer content" 1fr / auto 1fr;
       border-inline-start: 1px solid var(--aside-border);
 
-      & .asideHeader {
+      & .fabric-asideHeader {
         grid-template-areas: "collapse icon title actions";
         grid-template-columns: auto auto 1fr auto;
       }
 
-      & .asideCollapse {
+      & .fabric-asideCollapse {
         transform: scaleX(-1);
       }
     }
 
-    & .asideBody {
+    & .fabric-asideBody {
       grid-area: content;
       grid-template: "head" auto "content" 1fr "foot" auto / 1fr;
 
@@ -69,28 +69,28 @@
       }
     }
 
-    & .asideHeader {
+    & .fabric-asideHeader {
       font-weight: 500;
-      color: theme(colors.primary.600);
+      color: var(--color-primary-600);
 
       &:not(:empty) {
         border-bottom: 1px solid var(--aside-border);
       }
     }
 
-    & .asideTitle {
+    & .fabric-asideTitle {
       grid-area: title;
     }
 
-    & .asideIcon {
+    & .fabric-asideIcon {
       grid-area: icon;
     }
 
-    .asideActions {
+    .fabric-asideActions {
       grid-area: actions;
     }
 
-    & .asideCollapse {
+    & .fabric-asideCollapse {
       grid-area: collapse;
 
       &:hover {
@@ -98,13 +98,13 @@
       }
     }
 
-    & .asidePlaceholder {
+    & .fabric-asidePlaceholder {
       z-index: 4;
       grid-area: content;
       background-color: var(--aside-bg);
     }
 
-    & .asideResizer {
+    & .fabric-asideResizer {
       cursor: col-resize;
       position: relative;
       grid-area: resizer;
@@ -112,41 +112,55 @@
 
       &::before {
         height: 32px;
-        border: 1px solid theme(colors.tint.700);
+        border: 1px solid var(--color-tint-500);
         border-width: 0 1.5px;
       }
 
       &:hover::before,
       &:active::before {
         height: 100%;
-        background-color: theme(colors.primary.600);
-        border-color: theme(backgroundColor.base);
+        background-color: var(--color-primary-300);
+        border-color: var(--bg-color-base);
         border-width: 0 1.25px;
       }
     }
   }
 }
 
-@layer util {
-  .asideBody,
-  .asideHeader {
+@layer utilities {
+  .fabric-asideBody,
+  .fabric-asideHeader {
     width: unset;
     height: unset;
     margin: unset;
   }
 
-  .asideBody {
+  .fabric-asideBody {
     & > [data-ref="content"] {
       background-color: transparent;
     }
   }
 
-  .aside[data-collapsed="true"] {
+  [dir="rtl"] .fabric-aside[data-align="start"],
+  [dir="ltr"] .fabric-aside[data-align="end"] {
+    & .fabric-asideCollapse {
+      transform: scaleX(-1);
+    }
+  }
+
+  [dir="ltr"] .fabric-aside[data-align="start"],
+  [dir="rtl"] .fabric-aside[data-align="end"] {
+    & .fabric-asideCollapse {
+      transform: scaleX(1);
+    }
+  }
+
+  .fabric-aside[data-collapsed="true"] {
     position: relative;
     overflow: visible;
     width: 2rem;
 
-    & .asideBody {
+    & .fabric-asideBody {
       position: absolute;
       z-index: -1;
       inset: 0;
@@ -156,73 +170,71 @@
       transition: transform cubic-bezier(0.4, 0, 0.2, 1) 150ms;
     }
 
-    & .asideHeader {
+    & .fabric-asideHeader {
       position: absolute;
       z-index: 5;
       width: 2rem;
     }
 
-    & .asideTitle {
+    & .fabric-asideTitle {
       position: absolute;
       top: 1rem;
       grid-area: unset;
       font-size: 1rem;
     }
 
-    .asideIcon {
+    .fabric-asideIcon {
       margin-inline: 2px;
     }
 
-    & .asideCollapse + .asideIcon,
-    & .asideResizer {
+    & .fabric-asideCollapse + .fabric-asideIcon,
+    & .fabric-asideResizer {
       display: none;
     }
   }
 
-  [dir="ltr"] .aside[data-align="start"][data-collapsed="true"],
-  [dir="rtl"] .aside[data-align="end"][data-collapsed="true"] {
-    & .asideBody {
+  [dir="ltr"] .fabric-aside[data-align="start"][data-collapsed="true"],
+  [dir="rtl"] .fabric-aside[data-align="end"][data-collapsed="true"] {
+    & .fabric-asideBody {
       right: unset;
       transform: translateX(-100%);
       grid-area: unset;
     }
 
-    & .asideTitle {
-      right: calc(2rem + 2px);
-      transform-origin: 100% 100%;
-      transform: rotate(-90deg) translateY(2rem);
+    & .fabric-asideTitle {
+      transform: translateY(2rem);
+      writing-mode: sideways-lr;
     }
 
-    & .asideCollapse {
+    & .fabric-asideCollapse {
       transform: scaleX(-1);
     }
 
-    &[data-flyout="true"] .asideBody {
+    &[data-flyout="true"] .fabric-asideBody {
       z-index: 3;
       transform: translateX(2rem);
       box-shadow: 0 0 1rem 0 var(--fabric-shadow);
     }
   }
 
-  [dir="ltr"] .aside[data-align="end"][data-collapsed="true"],
-  [dir="rtl"] .aside[data-align="start"][data-collapsed="true"] {
-    & .asideBody {
+  [dir="ltr"] .fabric-aside[data-align="end"][data-collapsed="true"],
+  [dir="rtl"] .fabric-aside[data-align="start"][data-collapsed="true"] {
+    & .fabric-asideBody {
       left: unset;
       transform: translateX(100%);
       grid-area: unset;
     }
 
-    & .asideTitle {
-      left: calc(2rem + 2px);
-      transform-origin: 0 100%;
-      transform: rotate(90deg) translateY(2rem);
+    & .fabric-asideTitle {
+      transform: translateY(2rem);
+      writing-mode: sideways-rl;
     }
 
-    & .asideCollapse {
+    & .fabric-asideCollapse {
       transform: scaleX(1);
     }
 
-    &[data-flyout="true"] .asideBody {
+    &[data-flyout="true"] .fabric-asideBody {
       z-index: 3;
       transform: translateX(-2rem);
       box-shadow: 0 0 1rem 0 var(--fabric-shadow);

package/{src/core/section/Section.module.css → css/core/_content.css}

@@ -21,8 +21,10 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .section {
-    grid-template: "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+@layer components {
+  .fabric-content {
+    overflow: auto;
+    padding: 1rem;
+    background-color: var(--bg-color-content);
   }
 }