@react-fabric/core 1.0.0-beta.4 → 1.0.0-beta.40

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,27 @@
  * 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 "./_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,41 @@
 
       &::before {
         height: 32px;
-        border: 1px solid theme(colors.tint.700);
+        border: 1px solid var(--color-tint-700);
         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-600);
+        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"] {
+  .fabric-aside[data-collapsed="true"] {
     position: relative;
     overflow: visible;
     width: 2rem;
 
-    & .asideBody {
+    & .fabric-asideBody {
       position: absolute;
       z-index: -1;
       inset: 0;
@@ -156,73 +156,73 @@
       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 {
+    & .fabric-asideTitle {
       right: calc(2rem + 2px);
       transform-origin: 100% 100%;
       transform: rotate(-90deg) translateY(2rem);
     }
 
-    & .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 {
+    & .fabric-asideTitle {
       left: calc(2rem + 2px);
       transform-origin: 0 100%;
       transform: rotate(90deg) translateY(2rem);
     }
 
-    & .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);
   }
 }

package/{src/core/boundary/ErrorBoundary.module.css → css/core/_errorboundary.css}

@@ -21,44 +21,44 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .errorBoundary {
+@layer components {
+  .fabric-errorBoundary {
     grid-area: inherit;
     align-self: flex-start;
 
     max-height: calc(100% - 2rem);
     margin: 1rem;
 
-    background-color: theme(colors.danger.500);
+    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
     );
 
-    & .boundaryContent {
+    & .fabric-boundaryContent {
       grid-template: "icon message" auto "detail detail" auto / auto 1fr;
       background-color: var(--fabric-bg);
     }
 
-    & .boundaryIcon {
+    & .fabric-boundaryIcon {
       grid-area: icon;
     }
 
-    & .boundaryMessage {
+    & .fabric-boundaryMessage {
       grid-area: message;
     }
 
-    & .boundaryDetail {
+    & .fabric-boundaryDetail {
       grid-area: detail;
       grid-template-rows: auto 1fr;
 
-      & .boundaryLink {
+      & .fabric-boundaryLink {
         /* might add styles later */
       }
     }
 
-    & .boundaryStack {
+    & .fabric-boundaryStack {
       /* might add styles later */
     }
   }

package/{src/core/headfoot/HeadFoot.module.css → css/core/_headfoot.css}

@@ -21,18 +21,12 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .headfoot {
+@layer components {
+  .fabric-headfoot {
+    gap: 2px;
+
     .buttonWrapper + .buttonWrapper {
       margin-inline-start: 0.25rem;
     }
   }
 }
-
-@layer util {
-  .headfoot {
-    width: unset;
-    height: unset;
-    margin: unset;
-  }
-}

package/{src/core/page/Page.module.css → css/core/_page.css}

@@ -21,26 +21,22 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .page {
-    --fabric-page: color-mix(in lab, var(--fabric-bg) 94%, var(--tint));
-    --fabric-page-title: color-mix(in lab, var(--fabric-bg) 90%, var(--tint));
+@layer components {
+  .fabric-page {
+    --fabric-page: color-mix(in lab, var(--fabric-bg) 94%, var(--color-tint));
+    --fabric-page-title: color-mix(
+      in lab,
+      var(--fabric-bg) 90%,
+      var(--color-tint)
+    );
 
     grid-template: "title title title" auto "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
     background-color: var(--fabric-page);
 
-    .pageTitle {
+    .fabric-pageTitle {
       grid-area: title;
-      color: theme(colors.primary.600);
+      color: var(--color-primary-600);
       background-color: var(--fabric-page-title);
     }
   }
 }
-
-@layer util {
-  .pageTitle {
-    width: unset;
-    height: unset;
-    margin: unset;
-  }
-}

package/{src/core/responsive/Responsive.module.css → css/core/_responsive.css}

@@ -21,16 +21,16 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .row {
+@layer components {
+  .fabric-row {
     margin: calc(-0.5 * var(--gutter));
 
-    & + .row {
+    & + .fabric-row {
       margin-top: calc(0.5 * var(--gutter));
     }
   }
 
-  .col {
+  .fabric-col {
     flex: 0 0 auto;
     max-width: calc((12 / 12) * 100% - var(--gutter, 0px));
     margin: calc(0.5 * var(--gutter));
@@ -43,42 +43,42 @@
 
   [data-gutter="0"] {
     &.container,
-    &.row {
+    &.fabric-row {
       --gutter: 0px;
     }
   }
 
   [data-gutter="xs"] {
     &.container,
-    &.row {
+    &.fabric-row {
       --gutter: 2px;
     }
   }
 
   [data-gutter="sm"] {
     &.container,
-    &.row {
+    &.fabric-row {
       --gutter: 0.25rem;
     }
   }
 
   [data-gutter="md"] {
     &.container,
-    &.row {
+    &.fabric-row {
       --gutter: 0.75rem;
     }
   }
 
   [data-gutter="lg"] {
     &.container,
-    &.row {
+    &.fabric-row {
       --gutter: 1rem;
     }
   }
 
   [data-gutter="xl"] {
     &.container,
-    &.row {
+    &.fabric-row {
       --gutter: 1.5rem;
     }
   }

package/css/core/_section.css

@@ -0,0 +1,28 @@
+/*
+ * 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-section {
+    grid-template: ". loader ." auto "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+  }
+}

package/{src/core/theme/Theme.module.css → css/core/_theme.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 {
-  .themeProvider {
+@layer components {
+  .fabric-themeProvider {
     & > * {
-      background-color: theme(backgroundColor.base);
+      background-color: var(--bg-color-base);
     }
   }
 }

package/{src/typography/Typography.module.css → css/core/_typography.css}

@@ -21,23 +21,25 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .title {
+@layer components {
+  .fabric-title {
+    padding: 4px 2px;
     line-height: 1.125;
+    white-space: pre-wrap;
   }
 
-  .moreLink {
-    margin: -0.25rem 0 1rem;
+  .fabric-moreLink {
+    margin: -0.25rem 0 0.25rem;
     text-align: end;
 
     & > span {
       cursor: pointer;
       user-select: none;
       font-size: 0.75rem;
-      color: theme(colors.accent.700);
+      color: var(--color-accent-700);
 
       &:hover {
-        color: theme(colors.accent.500);
+        color: var(--color-accent-500);
         text-decoration: underline;
         text-underline-offset: 2px;
       }
@@ -45,19 +47,19 @@
   }
 }
 
-@layer util {
-  .text {
+@layer utilities {
+  .fabric-text {
     -webkit-line-clamp: var(--text-clamp);
   }
 
-  .abbr {
-    --abbr-color: var(--accent);
+  .fabric-abbr {
+    --abbr-color: var(--color-accent);
 
     color: color-mix(in lab, var(--abbr-color) 50%, var(--fabric-text));
   }
 
-  .mark {
-    --mark-color: var(--accent);
+  .fabric-mark {
+    --mark-color: var(--color-primary);
 
     background-color: color-mix(
       in lab,

package/{src/core/viewport/Viewport.module.css → css/core/_viewport.css}

@@ -21,9 +21,13 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .viewport {
-    --fabric-viewport: color-mix(in lab, var(--fabric-bg) 76%, var(--tint));
+@layer components {
+  .fabric-viewport {
+    --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);

package/css/core/index.css

@@ -0,0 +1,33 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * 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,
+ * 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.
+ */
+
+@import "./_aside.css";
+@import "./_content.css";
+@import "./_errorboundary.css";
+@import "./_headfoot.css";
+@import "./_page.css";
+@import "./_responsive.css";
+@import "./_section.css";
+@import "./_theme.css";
+@import "./_typography.css";
+@import "./_viewport.css";

package/css/reset/_gradients.css

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer reset {
+@layer base {
   :root {
     --click-gradient: linear-gradient(
       var(--fabric-gradient-deg, 180deg),
@@ -39,13 +39,13 @@
     );
     --progress-gradient: linear-gradient(
       -45deg,
-      color(from var(--white) srgb r g b / 10%) 25%,
-      color(from var(--tint) srgb r g b / 10%) 25%,
-      color(from var(--tint) srgb r g b / 10%) 50%,
-      color(from var(--white) srgb r g b / 10%) 50%,
-      color(from var(--white) srgb r g b / 10%) 75%,
-      color(from var(--tint) srgb r g b / 10%) 75%,
-      color(from var(--tint) srgb r g b / 10%)
+      color(from var(--color-white) srgb r g b / 10%) 25%,
+      color(from var(--color-tint) srgb r g b / 10%) 25%,
+      color(from var(--color-tint) srgb r g b / 10%) 50%,
+      color(from var(--color-white) srgb r g b / 10%) 50%,
+      color(from var(--color-white) srgb r g b / 10%) 75%,
+      color(from var(--color-tint) srgb r g b / 10%) 75%,
+      color(from var(--color-tint) srgb r g b / 10%)
     );
   }
 }