@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/css/components/_chip.css

@@ -0,0 +1,125 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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-chip {
+    --blank-gradient: linear-gradient(to bottom, #00000005 0%, #0000 10%);
+    --color: var(--color-tint);
+
+    font-size: 0.875rem;
+    outline: 1px solid color-mix(in oklab, var(--color) 25%, var(--fabric-bg));
+    outline-offset: -1px;
+
+    & > .fabric-chipLabel {
+      line-height: 1.5;
+    }
+
+    & > .fabric-chipIcon {
+      & + .fabric-chipLabel {
+        margin-inline-start: -0.5em;
+      }
+    }
+
+    & > .fabric-chipValue {
+      background-color: --alpha(color-mix(in oklab, var(--color) 90%, var(--color-black)) / 75%);
+    }
+  }
+}
+
+@layer variants {
+  .fabric-chip {
+    height: unset;
+    padding: unset;
+    color: color-mix(in oklab, var(--color) 65%, var(--fabric-text));
+    background-color: color-mix(in oklab, var(--color) 10%, var(--fabric-bg));
+
+    > .fabric-chipValue {
+      color: color-mix(in oklab, var(--color) 10%, var(--color-white));
+    }
+
+    &[data-clickable="true"] {
+      &:hover {
+        background-color: color-mix(in oklab, var(--color) 25%, var(--fabric-bg));
+      }
+
+      &:active,
+      &[data-dropdown-open="true"] {
+        background-color: color-mix(in oklab, var(--color) 20%, var(--fabric-bg));
+        background-image: var(--active-gradient);
+      }
+
+      &[data-dropdown-open="true"] {
+        pointer-events: none;
+      }
+    }
+
+    &[data-variant="outlined"] {
+      outline-color: color-mix(in oklab, var(--color) 70%, var(--fabric-bg));
+      box-shadow: 0 0 2px color-mix(in oklab, var(--color) 50%, var(--color-tint)) inset;
+    }
+
+    &[data-variant="soft"] {
+      background-color: color-mix(in oklab, var(--color) 15%, var(--fabric-bg));
+      outline-color: color-mix(in oklab, var(--color) 20%, var(--fabric-bg));
+
+      > .fabric-chipIcon,
+      > .fabric-chipLabel {
+        color: color-mix(in oklab, var(--color) 95%, var(--fabric-text));
+      }
+
+      &[data-clickable="true"] {
+        &:hover {
+          background-color: color-mix(in oklab, var(--color) 35%, var(--fabric-bg));
+        }
+
+        &:active,
+        &[data-dropdown-open="true"] {
+          background-color: color-mix(in oklab, var(--color) 30%, var(--fabric-bg));
+        }
+      }
+    }
+
+    &[data-variant="solid"] {
+      background-color: color-mix(in oklab, var(--color) 50%, var(--fabric-bg));
+      outline-color: color-mix(in oklab, var(--color) 75%, var(--fabric-bg));
+
+      > .fabric-chipIcon,
+      > .fabric-chipLabel {
+        color: color-mix(in oklab, var(--color) 15%, var(--fabric-text));
+      }
+
+      &[data-clickable="true"] {
+        &:hover {
+          background-color: color-mix(in oklab, var(--color) 60%, var(--fabric-bg));
+        }
+
+        &:active,
+        &[data-dropdown-open="true"] {
+          background-color: color-mix(in oklab, var(--color) 40%, var(--fabric-bg));
+        }
+      }
+    }
+  }
+}

package/css/components/_collapsable.css

@@ -0,0 +1,32 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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-collapsable {
+    & + & {
+      border-top: 1px solid var(--border-color-default);
+    }
+  }
+}

package/{src/overlays/message/Message.module.css → css/components/_divider.css}

@@ -21,17 +21,18 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .message {
-    margin-top: -100%;
-    opacity: 0;
-    transition:
-      margin 0.4s,
-      opacity 0.3s 0.2s;
+@layer components {
+  .fabric-divider {
+    hr {
+      margin: 0;
+    }
+
+    .fabric-divider-label--vertical {
+      padding-inline: 0.25rem;
+    }
 
-    &[data-show="true"] {
-      margin-top: 0;
-      opacity: 1;
+    .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"],
@@ -32,6 +32,7 @@
 
       border-top: 0;
       border-inline: 0;
+
       outline: 0;
       box-shadow: none;
     }

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

@@ -21,20 +21,18 @@
  * 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 {
+      border-bottom: 0.5px solid var(--border-color-bright);
+      background-color: var(--bg-color-default);
     }
 
-    & .flyoutBody {
-      grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    & .fabric-flyoutBody {
+      grid-template: "header header header" auto ". loader ." auto "start content end" 1fr "footer footer footer" auto / auto 1fr auto;
     }
 
     &[data-align="start"] {
@@ -45,6 +43,14 @@
       margin-inline-end: -100%;
     }
 
+    &[data-align="top"] {
+      margin-top: -100%;
+    }
+
+    &[data-align="bottom"] {
+      margin-bottom: -100%;
+    }
+
     &[data-show="true"] {
       margin: 0;
     }

package/css/components/_media.css

@@ -0,0 +1,102 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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-mediaContainer {
+    &.fabric-mediaReel {
+      &::after,
+      &::before {
+        content: "";
+
+        position: absolute;
+        inset-inline: 0;
+
+        height: 0.5rem;
+        border: 0.125rem solid #222c;
+
+        background-image: linear-gradient(
+          to right,
+          #222c 0,
+          #222c 0.25rem,
+          #fff8 0.25rem,
+          #fff8 0.75rem,
+          #222c 0.75rem,
+          #222c 1rem
+        );
+        background-repeat: repeat-x;
+        background-position: center center;
+        background-size: 1rem;
+      }
+
+      &::before {
+        top: 0;
+      }
+
+      &::after {
+        bottom: 0;
+      }
+    }
+
+    & .fabric-mediaControls {
+      & [data-ref="button"] {
+        margin: 0;
+
+        & > :first-child {
+          color: #fff;
+          background-color: --alpha(var(--color-black) / 50%);
+
+          &:hover {
+            color: var(--color-primary-600);
+            background-color: --alpha(var(--color-black) / 80%);
+          }
+        }
+      }
+
+      & .fabric-mediaControlAction > :first-child {
+        background-color: --alpha(var(--color-black) / 70%);
+      }
+
+      & .fabric-mediaControlAction + .fabric-mediaControlAction {
+        margin-top: 8px;
+      }
+    }
+  }
+}
+
+@layer utilities {
+  .fabric-mediaContainer .fabric-mediaControls {
+    &:hover {
+      & .fabric-mediaControlPlaceholder {
+        display: none;
+      }
+    }
+
+    &:not(:hover) {
+      & .fabric-mediaControlAction {
+        display: none;
+      }
+    }
+  }
+}

package/{src/components/menu/Menu.module.css → css/components/_menu.css}

@@ -21,34 +21,34 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .menuItem {
-    --color: theme(colors.primary.DEFAULT);
+@layer components {
+  .fabric-menuItem {
+    --color: var(--color-primary-500);
 
     &[data-color="accent"] {
-      --color: theme(colors.accent.DEFAULT);
+      --color: var(--color-accent-500);
     }
 
     &[data-color="info"] {
-      --color: theme(colors.info.DEFAULT);
+      --color: var(--color-info-500);
     }
 
     &[data-color="danger"] {
-      --color: theme(colors.danger.DEFAULT);
+      --color: var(--color-danger-500);
     }
 
     &[data-color="success"] {
-      --color: theme(colors.success.DEFAULT);
+      --color: var(--color-success-500);
     }
 
     &[data-color="warning"] {
-      --color: theme(colors.warning.DEFAULT);
+      --color: var(--color-warning-500);
     }
   }
 }
 
-@layer var {
-  .menuItem {
+@layer variants {
+  .fabric-menuItem {
     color: color-mix(in lab, var(--color) 80%, var(--fabric-text));
 
     > * {
@@ -56,26 +56,27 @@
     }
 
     &[data-focus="true"] {
-      background-color: color(from var(--color) srgb r g b / 15%);
+      background-color: color-mix(in lab, var(--color) 15%, var(--fabric-bg));
     }
 
     &:active {
-      background-color: color(from var(--color) srgb r g b / 35%);
+      background-color: color-mix(in lab, var(--color) 35%, var(--fabric-bg));
     }
 
     &[data-open="true"] {
-      background-color: color(from var(--color) srgb r g b / 10%);
+      background-color: color-mix(in lab, var(--color) 10%, var(--fabric-bg));
     }
 
-    &.active,
-    &:global(.active) {
+    &.active {
       pointer-events: none;
-      background-color: color(from var(--color) srgb r g b / 20%);
+      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;
 
-        :global([dir="rtl"]) & {
+        @variant rtl {
           box-shadow: -4px 0 0 var(--color) inset;
         }
       }
@@ -83,7 +84,7 @@
 
     &.disabled {
       pointer-events: none;
-      color: theme(textColor.tint.500);
+      color: var(--text-tint-500);
       opacity: 0.5;
 
       & > label ~ * {
@@ -92,7 +93,7 @@
     }
   }
 
-  .menuIcon {
+  .fabric-menuIcon {
     padding: 0.3em;
     font-size: 1.25em;
 
@@ -103,7 +104,7 @@
     }
   }
 
-  :global(.menu-list.hide-icons) .menuIcon {
+  .fabric-menu-list.hide-icons .fabric-menuIcon {
     width: 0.125em;
   }
 }

package/{src/components/meter/Meter.module.css → css/components/_meter.css}

@@ -21,13 +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 {
-  .meter {
-    & .meterBar {
-      flex: 1 1 1rem;
+@layer components {
+  .fabric-meter {
+    & .fabric-meterBar {
+      flex: 1 1 1em;
 
-      min-width: 1rem;
-      max-width: 12rem;
+      min-width: 1em;
+      max-width: 12em;
       height: 0.5em;
 
       line-height: 1;
@@ -37,12 +37,12 @@
       }
     }
 
-    & > label {
+    & > .fabric-meterLabel {
       font-size: max(0.75rem, 0.5em);
       line-height: 1;
     }
 
-    & .meterBar[data-active="true"] {
+    & .fabric-meterBar[data-active="true"] {
       &:nth-child(1),
       &:nth-child(2),
       &:nth-child(3),
@@ -56,36 +56,31 @@
       }
 
       &:nth-child(1) {
-        color: #eb5e28;
+        color: #f4511e;
       }
 
       &:nth-child(2) {
-        color: #f9a03f;
+        color: #fb8c00;
       }
 
       &:nth-child(3) {
-        color: #f3c053;
+        color: #ffb300;
       }
 
       &:nth-child(4) {
-        color: #a1c349;
+        color: #fdd835;
       }
 
       &:nth-child(5) {
-        color: #87a330;
+        color: #c0ca33;
       }
 
       &:nth-child(6) {
-        color: #6a8532;
+        color: #7cb342;
       }
     }
 
-    &[class*="text-primary"] .meterBar[data-active="true"],
-    &[class*="text-accent"] .meterBar[data-active="true"],
-    &[class*="text-info"] .meterBar[data-active="true"],
-    &[class*="text-danger"] .meterBar[data-active="true"],
-    &[class*="text-success"] .meterBar[data-active="true"],
-    &[class*="text-warning"] .meterBar[data-active="true"] {
+    &.gradient .fabric-meterBar[data-active="true"] {
       color: currentColor;
 
       &:nth-child(1)::after {

package/{src/overlays/modal/Modal.module.css → css/components/_modal.css}

@@ -21,13 +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 {
-  .modal {
+@layer components {
+  .fabric-modal {
     z-index: var(--z-overlay);
 
     width: 32rem;
-    max-width: 90vw;
-    max-height: 90vh;
+    max-width: calc(100vw - 8rem);
+    max-height: calc(100vh - 8rem);
     margin-top: -100%;
 
     opacity: 0;
@@ -41,13 +41,13 @@
       opacity: 1;
     }
 
-    & .modalHeader {
-      background-color: theme(backgroundColor.base);
-      border-bottom: 0.5px solid theme(borderColor.dimmed);
+    & .fabric-modalHeader {
+      border-bottom: 0.5px solid var(--border-color-bright);
+      background-color: var(--bg-color-default);
     }
 
-    & .modalBody {
-      grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    & .fabric-modalBody {
+      grid-template: "header header header" auto ". loader ." auto "start content end" 1fr "footer footer footer" auto / auto 1fr auto;
     }
   }
 }

package/{src/components/panel/Panel.module.css → css/components/_panel.css}

@@ -21,36 +21,36 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .panel {
-    grid-template: "head" auto "content" 1fr / 1fr;
-    background-color: theme(colors.bg);
+@layer components {
+  .fabric-panel {
+    grid-template: "title" auto "content" 1fr / 1fr;
+    background-color: var(--fabric-bg);
 
     & > * {
       background-color: transparent;
     }
 
-    &:global(.fixed) {
-      box-shadow: 0 0 18px theme(boxShadowColor.base);
+    &.fixed {
+      box-shadow: 0 0 18px var(--fabric-shadow);
     }
 
-    & .panelHeader {
-      background-color: theme(backgroundColor.dimmed);
+    & .fabric-panelHeader {
+      background-color: var(--bg-color-dimmed);
     }
 
-    & .panelAction {
+    & .fabric-panelAction {
       padding: 0.25rem;
     }
 
-    & .panelBody {
-      grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    & .fabric-panelBody {
+      grid-template: "header header header" auto ". loader ." auto "start content end" 1fr "footer footer footer" auto / auto 1fr auto;
     }
   }
 }
 
-@layer util {
-  .panelGroup {
-    & > .panel {
+@layer utilities {
+  .fabric-panelGroup {
+    & > .fabric-panel {
       &[data-collapsed="true"] {
         flex: 0 0 auto;
       }
@@ -61,25 +61,25 @@
 
         [data-ref="panelCollapse"] {
           pointer-events: none;
-          color: var(--tint);
+          color: var(--color-tint);
           opacity: 0.25;
         }
       }
     }
 
-    & > .panel:not(:first-child) {
+    & > .fabric-panel:not(:first-child) {
       border-start-start-radius: 0;
       border-start-end-radius: 0;
     }
 
-    & > .panel:not(:last-child) {
-      border-bottom: 1px solid theme(backgroundColor.base);
+    & > .fabric-panel:not(:last-child) {
+      border-bottom: 1px solid var(--border-color-soft);
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
   }
 
-  [data-ref="asideBody"] > .panelGroup > .panel {
+  [data-ref="asideBody"] > .fabric-panelGroup > .fabric-panel {
     border-radius: 0;
     outline: 0;
   }