@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.52

package/{src/components/media/Media.module.css → css/components/_media.css}

@@ -21,9 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .mediaContainer {
-    &.mediaReel {
+@layer components {
+  .fabric-mediaContainer {
+    &.fabric-mediaReel {
       &::after,
       &::before {
         content: "";
@@ -57,54 +57,54 @@
       }
     }
 
-    & .mediaPlaceholder {
+    & .fabric-mediaPlaceholder {
       /* might add styles later */
     }
 
-    & .mediaControls {
+    & .fabric-mediaControls {
       & [data-ref="button"] {
         margin: 0;
 
         & > :first-child {
           color: #fff;
-          background-color: theme(colors.black/50%);
+          background-color: --alpha(var(--color-black) / 50%);
 
           &:hover {
-            color: theme(colors.primary.600);
-            background-color: theme(colors.black/80%);
+            color: var(--color-primary-600);
+            background-color: --alpha(var(--color-black) / 80%);
           }
         }
       }
 
-      & .mediaControlAction > :first-child {
-        background-color: theme(colors.black/70%);
+      & .fabric-mediaControlAction > :first-child {
+        background-color: --alpha(var(--color-black) / 70%);
       }
 
-      & .mediaControlPlaceholder {
+      & .fabric-mediaControlPlaceholder {
         /* might add styles later */
       }
 
-      & .mediaControlAction + .mediaControlAction {
+      & .fabric-mediaControlAction + .fabric-mediaControlAction {
         margin-top: 8px;
       }
     }
   }
 
-  .media {
+  .fabric-media {
     /* might add styles later */
   }
 }
 
-@layer util {
-  & .mediaControls {
+@layer utilities {
+  & .fabric-mediaControls {
     &:hover {
-      & .mediaControlPlaceholder {
+      & .fabric-mediaControlPlaceholder {
         display: none;
       }
     }
 
     &:not(:hover) {
-      & .mediaControlAction {
+      & .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,25 @@
     }
 
     &[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%);
+      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 +82,7 @@
 
     &.disabled {
       pointer-events: none;
-      color: theme(textColor.tint.500);
+      color: var(--text-tint-500);
       opacity: 0.5;
 
       & > label ~ * {
@@ -92,7 +91,7 @@
     }
   }
 
-  .menuIcon {
+  .fabric-menuIcon {
     padding: 0.3em;
     font-size: 1.25em;
 
@@ -103,7 +102,7 @@
     }
   }
 
-  :global(.menu-list.hide-icons) .menuIcon {
+  .fabric-menu-list.hide-icons .fabric-menuIcon {
     width: 0.125em;
   }
 }

package/{src/overlays/message/Message.module.css → css/components/_message.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 {
-  .message {
+@layer components {
+  .fabric-message {
     margin-top: -100%;
     opacity: 0;
     transition:

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

@@ -21,9 +21,9 @@
  * 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 {
+@layer components {
+  .fabric-meter {
+    & .fabric-meterBar {
       flex: 1 1 1rem;
 
       min-width: 1rem;
@@ -42,7 +42,7 @@
       line-height: 1;
     }
 
-    & .meterBar[data-active="true"] {
+    & .fabric-meterBar[data-active="true"] {
       &:nth-child(1),
       &:nth-child(2),
       &:nth-child(3),
@@ -80,12 +80,12 @@
       }
     }
 
-    &[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"] {
+    &[class*="text-primary"] .fabric-meterBar[data-active="true"],
+    &[class*="text-accent"] .fabric-meterBar[data-active="true"],
+    &[class*="text-info"] .fabric-meterBar[data-active="true"],
+    &[class*="text-danger"] .fabric-meterBar[data-active="true"],
+    &[class*="text-success"] .fabric-meterBar[data-active="true"],
+    &[class*="text-warning"] .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: 100%;
+    max-height: 100%;
     margin-top: -100%;
 
     opacity: 0;
@@ -41,12 +41,12 @@
       opacity: 1;
     }
 
-    & .modalHeader {
-      background-color: theme(backgroundColor.base);
-      border-bottom: 0.5px solid theme(borderColor.dimmed);
+    & .fabric-modalHeader {
+      background-color: var(--bg-color-base);
+      border-bottom: 0.5px solid var(--border-color-dimmed);
     }
 
-    & .modalBody {
+    & .fabric-modalBody {
       grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" 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 {
+@layer components {
+  .fabric-panel {
     grid-template: "head" auto "content" 1fr / 1fr;
-    background-color: theme(colors.bg);
+    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 {
+    & .fabric-panelBody {
       grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" 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(--bg-color-base);
       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;
   }

package/{src/components/progress/Progress.module.css → css/components/_progress.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 {
-  .progressbar {
+@layer components {
+  .fabric-progressbar {
     height: 1em;
-    box-shadow: 0 0 4px 0 theme(boxShadowColor.dimmed) inset;
+    box-shadow: 0 0 4px 0 var(--fabric-shadow) inset;
 
     & > div:last-child {
       width: calc(var(--progress) * 1%);
@@ -41,13 +41,13 @@
 
         font-size: 0.5em;
         line-height: 0.5em;
-        color: var(--white);
+        color: var(--color-white);
         text-align: center;
         vertical-align: middle;
       }
     }
 
-    .progressTrack {
+    .fabric-progressTrack {
       width: calc(var(--progress) * 1%);
       transition: width 0.5s;
     }
@@ -59,12 +59,9 @@
     }
   }
 
-  .progressAnimate {
+  .fabric-progressAnimate {
     background-image: var(--progress-gradient);
     background-size: 1rem 1rem;
-
-    & :global {
-      animation: progress 750ms linear infinite;
-    }
+    animation: bgprogress 750ms linear infinite;
   }
 }

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

@@ -21,40 +21,81 @@
  * 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;
+      }
+    }
+
+    &[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;
+      }
+    }
+
+    &[data-orientation="start"] {
+      grid-template: "tablist content" 1fr / auto 1fr;
+
+      .fabric-tabHeader {
+        box-shadow: -1px 0 0 var(--border-color-dimmed) inset;
+      }
+    }
+
+    &[data-orientation="end"] {
+      grid-template: "content tablist" 1fr / 1fr auto;
+
+      .fabric-tabHeader {
+        box-shadow: 1px 0 0 var(--border-color-dimmed) inset;
+      }
+    }
+  }
+}
+
+@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,133 +105,81 @@
     }
 
     &[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) {
+      & .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"] .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"] .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"] .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"] .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"] .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"] .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"] .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"] .fabric-tabList > .fabric-tabButton {
       margin-block: 1px;
       margin-inline-end: 2px;
       border-start-start-radius: 0;

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: