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

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(--primary);
+  .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%)
     );
   }
 }