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

package/{src/components/button/Button.module.css → css/components/_button.css}

@@ -21,14 +21,14 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .buttonWrapper {
-    --color: theme(colors.primary.500);
+@layer components {
+  .fabric-buttonWrapper {
+    --color: var(--color-tint-700);
 
     font-size: 1rem;
     border-radius: var(--rounding);
 
-    & .button {
+    & .fabric-button {
       color: var(--text);
 
       background-color: var(--bg);
@@ -36,10 +36,8 @@
       border-radius: inherit;
       outline: 1px solid var(--outline);
 
-      &.spinOnHover:hover .buttonIcon {
-        & :global {
-          animation: spin 2s linear infinite;
-        }
+      &.spinOnHover:hover .fabric-buttonIcon {
+        animation: spin 2s linear infinite;
       }
 
       & > * {
@@ -57,11 +55,7 @@
       }
     }
 
-    & .rounded {
-      border-radius: 9999px;
-    }
-
-    & .buttonLabel {
+    & .fabric-buttonLabel {
       order: 1;
       padding: 0.5em 1em;
       line-height: 1;
@@ -71,23 +65,23 @@
       }
     }
 
-    & .buttonChild {
+    & .fabric-buttonChild {
       order: 1;
       padding: 0.5em;
       line-height: 1;
     }
 
-    & .buttonIcon {
+    & .fabric-buttonIcon {
       padding: 0.3889em;
       font-size: 1.125em;
     }
 
-    & :global(.hotkey-label) {
+    & .hotkey-label {
       align-self: center;
       order: 3;
     }
 
-    & .altIcon {
+    & .fabric-altIcon {
       align-self: center;
       order: 4;
       padding: 0.125em 0.5em;
@@ -100,19 +94,15 @@
     }
   }
 
-  .buttonGroup {
-    & > .buttonWrapper {
+  .fabric-buttonGroup {
+    & > .fabric-buttonWrapper {
       flex: 0 1 1em;
     }
-
-    &:not(.flex) + &:not(.flex) {
-      margin-inline-start: 0.5rem;
-    }
   }
 }
 
-@layer util {
-  .buttonWrapper {
+@layer utilities {
+  .fabric-buttonWrapper {
     &[data-size="xs"] {
       font-size: 0.625rem;
     }
@@ -134,49 +124,64 @@
     }
   }
 
-  .button {
-    --bg: color-mix(in lab, var(--fabric-bg) 99%, var(--tint));
+  .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));
     --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) 36%, var(--fabric-bg));
+    --bg-active: color-mix(in lab, var(--color) 24%, var(--fabric-bg));
+
+    &[data-color="primary"] {
+      --color: var(--color-primary-500);
+    }
 
     &[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);
+    }
+
+    &[data-color="muted"] {
+      --color: var(--color-tint-300);
     }
 
     &[data-variant="outline"] {
       --outline: var(--color);
     }
 
+    &[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));
+    }
+
     &[data-variant="solid"] {
       --outline: var(--color);
       --bg: color-mix(in lab, var(--color) 96%, var(--fabric-text));
-      --text: theme(colors.white);
+      --text: var(--color-white);
       --bg-hover: color-mix(in lab, var(--color) 90%, var(--fabric-bg));
-      --bg-click: color-mix(in lab, var(--color) 80%, theme(colors.black));
-      --bg-active: color-mix(in lab, var(--color) 70%, theme(colors.black));
+      --bg-click: color-mix(in lab, var(--color) 80%, var(--color-black));
+      --bg-active: color-mix(in lab, var(--color) 70%, var(--color-black));
 
-      & :global(.hotkey-label) {
-        color: theme(colors.white/70%);
-        background-color: theme(backgroundColor.dark/30%);
+      & .hotkey-label {
+        color: --alpha(var(--color-white) / 70%);
+        background-color: --alpha(var(--bg-color-dark) / 30%);
       }
     }
 
@@ -189,47 +194,39 @@
     }
 
     &[data-color="invert"] {
-      --bg: theme(backgroundColor.invert);
-      --text: color-mix(in lab, var(--color) 90%, theme(textColor.invert));
-      --bg-hover: color-mix(
-        in lab,
-        var(--color) 15%,
-        theme(backgroundColor.invert)
-      );
-      --bg-click: color-mix(
-        in lab,
-        var(--color) 35%,
-        theme(backgroundColor.invert)
-      );
+      --bg: var(--bg-color-invert);
+      --text: color-mix(in lab, var(--color) 90%, var(--text-color-invert));
+      --bg-hover: color-mix(in lab, var(--color) 15%, var(--bg-color-invert));
+      --bg-click: color-mix(in lab, var(--color) 35%, var(--bg-color-invert));
     }
   }
 
-  .buttonIcon[data-align="start"] {
+  .fabric-buttonIcon[data-align="start"] {
     order: 0;
 
-    & + .buttonLabel[data-colored-icon="false"] {
+    & + .fabric-buttonLabel[data-colored-icon="false"] {
       margin-inline-start: -1em;
     }
   }
 
-  .buttonIcon[data-align="end"] {
+  .fabric-buttonIcon[data-align="end"] {
     order: 2;
 
-    & ~ .buttonLabel[data-colored-icon="false"] {
+    & ~ .fabric-buttonLabel[data-colored-icon="false"] {
       margin-inline-end: -1em;
     }
   }
 }
 
-@layer var {
-  .buttonWrapper {
+@layer variants {
+  .fabric-buttonWrapper {
     height: unset;
     padding: unset;
 
     &[data-disabled="true"] {
       cursor: not-allowed;
 
-      & .button {
+      & .fabric-button {
         pointer-events: none;
         opacity: 0.5;
         background-image: var(--active-gradient);
@@ -239,34 +236,31 @@
     &[data-loading="true"] {
       cursor: wait;
 
-      & .button {
+      & .fabric-button {
         pointer-events: none;
         background-image: var(--progress-gradient);
         background-size: 1em 1em;
-
-        & :global {
-          animation: bgprogress 750ms linear infinite;
-        }
+        animation: bgprogress 750ms linear infinite;
       }
 
-      & .button:not([data-variant="solid"]) {
+      & .fabric-button:not([data-variant="solid"]) {
         background-color: color-mix(in lab, var(--color) 15%, var(--fabric-bg));
       }
     }
 
-    &:global(.btn-dashed) > .button {
-      color: theme(colors.tint.600);
-      outline: 1px dashed theme(colors.tint.600);
+    &.btn-dashed > .fabric-button {
+      color: var(--color-tint-600);
+      outline: 1px dashed var(--color-tint-600);
 
       &[data-invalid="true"] {
-        color: theme(colors.danger.600);
-        background-color: theme(colors.danger.100);
-        outline: 1px dashed theme(colors.danger.600);
+        color: var(--color-danger-600);
+        background-color: var(--color-danger-100);
+        outline: 1px dashed var(--color-danger-600);
       }
     }
   }
 
-  .button {
+  .fabric-button {
     --tw-ring-color: var(--color);
 
     &:hover {
@@ -277,9 +271,9 @@
       background-color: var(--bg-click);
       background-image: var(--active-gradient);
 
-      .buttonIcon,
-      .buttonLabel {
-        transform: translateY(1px);
+      .fabric-buttonIcon,
+      .fabric-buttonLabel {
+        translate: 0 1px;
       }
     }
 
@@ -299,12 +293,12 @@
     }
   }
 
-  .buttonGroup {
-    & > .buttonWrapper {
+  .fabric-buttonGroup {
+    & > .fabric-buttonWrapper {
       margin: 0;
 
-      & .button[data-variant="link"] {
-        --outline: theme(backgroundColor.base);
+      & .fabric-button[data-variant="link"] {
+        --outline: var(--bg-color-base);
       }
     }
 
@@ -317,7 +311,7 @@
           inset-block: 5%;
           inset-inline-start: -0.5px;
 
-          border-inline-start: 0.5px solid theme(borderColor.base);
+          border-inline-start: 0.5px solid var(--border-color-base);
         }
       }
 
@@ -329,15 +323,19 @@
         }
       }
 
-      & > :not(:last-child) .button {
+      & > :not(:last-child) .fabric-button {
         border-start-end-radius: 0;
         border-end-end-radius: 0;
       }
 
-      & > :not(:first-child) .button {
+      & > :not(:first-child) .fabric-button {
         border-start-start-radius: 0;
         border-end-start-radius: 0;
       }
+
+      &:not(.flex) + &:not(.flex) {
+        margin-inline-start: 0.5rem;
+      }
     }
 
     &.vertical {
@@ -349,7 +347,7 @@
           inset-block-start: -0.5px;
           inset-inline: 5%;
 
-          border-block-start: 0.5px solid theme(borderColor.base);
+          border-block-start: 0.5px solid var(--border-color-base);
         }
       }
 
@@ -361,15 +359,19 @@
         }
       }
 
-      & > :not(:last-child) .button {
+      & > :not(:last-child) .fabric-button {
         border-end-start-radius: 0;
         border-end-end-radius: 0;
       }
 
-      & > :not(:first-child) .button {
+      & > :not(:first-child) .fabric-button {
         border-start-start-radius: 0;
         border-start-end-radius: 0;
       }
+
+      &:not(.flex) + &:not(.flex) {
+        margin-top: 0.5rem;
+      }
     }
   }
 }

package/{src/components/card/Card.module.css → css/components/_card.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 {
-  .cardWrapper.selected {
+@layer components {
+  .fabric-cardWrapper.selected {
     &::before {
       content: "";
 
@@ -31,9 +31,9 @@
       top: -4px;
       inset-inline-start: -4px;
 
-      border-top: 1rem solid theme(colors.accent.500);
+      border-top: 1rem solid var(--color-accent-500);
       border-bottom: 1rem solid transparent;
-      border-inline-start: 1rem solid theme(colors.accent.500);
+      border-inline-start: 1rem solid var(--color-accent-500);
       border-inline-end: 1rem solid transparent;
       border-start-start-radius: var(--rounding-cap);
     }
@@ -49,59 +49,67 @@
       padding: 4px;
 
       line-height: 1;
-      color: theme(colors.white);
+      color: var(--color-white);
     }
   }
 
-  .card {
+  .fabric-card {
+    --tw-shadow-color: var(--border-color-muted);
+
     background-color: var(--fabric-bg);
-    box-shadow: 0 0 0 1px theme(borderColor.muted);
+    box-shadow: 0 0 0 1px var(--tw-shadow-color);
 
     & > * {
       background-color: transparent;
     }
 
-    & .cardCover {
-      &.inheritScheme:has([data-colorset="dark"]) > .cardCoverContent,
-      &.dark > .cardCoverContent {
-        color: var(--white);
-        text-shadow: 0 0 2px var(--black);
+    & .fabric-cardCover {
+      &.inheritScheme:has([data-colorset="dark"]) > .fabric-cardCoverContent,
+      &.dark > .fabric-cardCoverContent {
+        color: var(--color-white);
+        text-shadow: 0 0 2px var(--color-black);
         background-image: linear-gradient(to bottom, #0000 0, #0006 100%);
       }
 
-      &.inheritScheme:has([data-colorset="light"]) > .cardCoverContent,
-      &.light > .cardCoverContent {
-        color: var(--black);
-        text-shadow: 0 0 2px var(--white);
+      &.inheritScheme:has([data-colorset="light"]) > .fabric-cardCoverContent,
+      &.light > .fabric-cardCoverContent {
+        color: var(--color-black);
+        text-shadow: 0 0 2px var(--color-white);
         background-image: linear-gradient(to bottom, #fff0 0, #fff6 100%);
       }
     }
 
-    & .cardBody {
+    & .fabric-cardBody {
       padding: 1rem;
     }
 
     &.clickable {
+      --tw-shadow-color: var(--border-color-dimmed);
+
       box-shadow:
-        0 0 0 1px theme(borderColor.dimmed),
+        0 0 0 1px var(--tw-shadow-color),
         0 1px 2px 0 var(--fabric-shadow);
       transition: box-shadow 0ms;
 
-      &:has(.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 theme(borderColor.dimmed),
+          0 0 0 1px var(--tw-shadow-color),
           0 1px 4px 0 var(--fabric-shadow),
           0 8px 16px 0 color-mix(in lab, var(--fabric-shadow) 35%, #0000);
         transition-delay: 150ms;
       }
 
-      &:has(.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 theme(borderColor.dimmed);
+        box-shadow: 0 0 0 1px var(--tw-shadow-color);
         transition-delay: 0ms;
       }
 
-      & .cardBody {
+      & .fabric-cardBody {
         cursor: pointer;
 
         &::after {
@@ -125,16 +133,16 @@
   }
 }
 
-@layer util {
-  .card {
-    & .cardBody {
+@layer utilities {
+  .fabric-card {
+    & .fabric-cardBody {
       & > * {
         grid-area: unset;
         background-color: transparent;
       }
     }
 
-    & .cardCover {
+    & .fabric-cardCover {
       & > [data-ref="image"],
       & > [data-ref="video"] {
         position: absolute;
@@ -142,11 +150,29 @@
         inset: 0;
       }
 
-      & .cardCoverContent {
+      & .fabric-cardCoverContent {
         & > * {
           flex: 0 0 auto;
         }
       }
     }
   }
+
+  [data-card-flip-face="front"] {
+    backface-visibility: hidden;
+  }
+
+  [data-card-flip-face="back"] {
+    transform: rotateY(180deg);
+    backface-visibility: hidden;
+  }
+
+  [data-card-flip] {
+    transform-style: preserve-3d;
+    transition: transform 0.5s;
+  }
+
+  [data-card-flip="true"] {
+    transform: rotateY(180deg);
+  }
 }

package/{src/components/chip/Chip.module.css → css/components/_chip.css}

@@ -21,26 +21,29 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .chip {
+@layer components {
+  .fabric-chip {
     --blank-gradient: linear-gradient(to bottom, #00000005 0%, #0000 10%);
 
-    color: theme(colors.tint.500);
+    font-size: 0.875rem;
+    color: var(--color-tint-500);
+
     background-image: var(--blank-gradient);
     outline: 1px solid color-mix(in lab, currentcolor 20%, var(--fabric-bg));
     outline-offset: -1px;
 
-    & > .chipLabel {
+    & > .fabric-chipLabel {
       padding: 0 0.5em;
+      line-height: 1.5;
     }
 
-    & > .chipIcon {
-      & + .chipLabel {
+    & > .fabric-chipIcon {
+      & + .fabric-chipLabel {
         margin-inline-start: -0.5em;
       }
     }
 
-    & > .chipRemove {
+    & > .fabric-chipRemove {
       /* mayble add styles later */
     }
 
@@ -56,15 +59,16 @@
   }
 }
 
-@layer var {
-  .chip {
+@layer variants {
+  .fabric-chip {
     height: unset;
     padding: unset;
     background-color: color-mix(in lab, currentcolor 10%, var(--fabric-bg));
 
     &[data-variant="outline"] {
       outline-color: color-mix(in lab, currentcolor 50%, var(--fabric-bg));
-      box-shadow: 0 0 2px color-mix(in lab, currentcolor 50%, var(--tint)) inset;
+      box-shadow: 0 0 2px color-mix(in lab, currentcolor 50%, var(--color-tint))
+        inset;
     }
 
     > * {

package/{src/components/collapsable/Collapsable.module.css → css/components/_collapsable.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 {
-  .collapsable {
+@layer components {
+  .fabric-collapsable {
     & + & {
-      border-top: 1px solid theme(borderColor.base);
+      border-top: 1px solid var(--border-color-base);
     }
   }
 }

package/css/components/_divider.css

@@ -0,0 +1,38 @@
+/*
+ * 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-divider {
+    hr {
+      margin: 0;
+    }
+
+    .fabric-divider-label--vertical {
+      padding-inline: 0.25rem;
+    }
+
+    .fabric-divider-label--horizontal {
+      padding-block: 0.25rem;
+    }
+  }
+}

package/{src/components/dropdown/Dropdown.module.css → css/components/_dropdown.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 var {
-  .dropdownBody {
+@layer variants {
+  .fabric-dropdownBody {
     grid-template: 1fr /1fr;
 
     & [data-ref="card"],

package/{src/overlays/flyout/Flyout.module.css → css/components/_flyout.css}

@@ -21,19 +21,19 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .flyout {
+@layer components {
+  .fabric-flyout {
     z-index: var(--z-overlay);
     width: 32rem;
     max-width: 70vw;
     transition: margin 0.5s;
 
-    & .flyoutHeader {
-      background-color: theme(backgroundColor.base);
-      border-bottom: 0.5px solid theme(borderColor.dimmed);
+    & .fabric-flyoutHeader {
+      background-color: var(--bg-color-base);
+      border-bottom: 0.5px solid var(--border-color-dimmed);
     }
 
-    & .flyoutBody {
+    & .fabric-flyoutBody {
       grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
     }