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

package/{src/components/actionLabel/ActionLabel.module.css → css/components/_actionLabel.css}

@@ -21,15 +21,15 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .actionLabel {
-    & > .actions {
+@layer components {
+  .fabric-actionLabel {
+    & > .fabric-actions {
       --width: 4rem;
 
       width: 0;
     }
 
-    &:not([data-disabled="true"]):hover > .actions {
+    &:not([data-disabled="true"]):hover > .fabric-actions {
       width: var(--width);
       transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 100ms;
       transition-delay: 500ms;

package/{src/overlays/alert/Alert.module.css → css/components/_alert.css}

@@ -21,11 +21,11 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .alert {
+@layer components {
+  .fabric-alert {
     z-index: var(--z-overlay);
 
-    grid-template: "icon title" auto "icon message" auto "input input" auto "actions actions" auto / auto 1fr;
+    grid-template: "icon title" auto "message message" auto "input input" auto "actions actions" auto / auto 1fr;
     gap: 0.5rem 1rem;
 
     margin-top: -100%;

package/{src/components/animations/Animations.module.css → css/components/_animations.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 comp {
+@layer components {
   @keyframes l2 {
     0%,
     25% {
@@ -118,7 +118,7 @@
     }
   }
 
-  .bars {
+  .fabric-bars {
     --c: linear-gradient(currentcolor 0 0);
     --r1: radial-gradient(farthest-side at bottom, currentcolor 93%, #0000);
     --r2: radial-gradient(farthest-side at top, currentcolor 93%, #0000);
@@ -136,7 +136,7 @@
     }
   }
 
-  .spinner {
+  .fabric-spinner {
     --b: 8px;
 
     aspect-ratio: 1;
@@ -171,7 +171,7 @@
     }
   }
 
-  .loader {
+  .fabric-loader {
     --multiplier: 1;
 
     & > div {
@@ -182,7 +182,7 @@
       }
     }
 
-    :global([dir="rtl"]) & {
+    @variant rtl {
       --multiplier: -1;
     }
   }
@@ -210,11 +210,11 @@
     }
   }
 
-  .checkAnimation {
+  .fabric-checkAnimation {
     width: 1.5em;
     height: 1.5em;
 
-    color: theme(colors.primary.DEFAULT);
+    color: var(--color-primary-500);
 
     box-shadow: inset 0 0 0 currentcolor;
 
@@ -227,7 +227,7 @@
       check-scale 0.3s ease-in-out 0.9s both;
     animation-delay: 0.75s;
 
-    & .circlePart {
+    & .fabric-circlePart {
       fill: transparent;
       stroke: currentcolor;
       stroke-dasharray: 166;
@@ -239,7 +239,7 @@
       animation-delay: 0.25s;
     }
 
-    & .iconPart {
+    & .fabric-iconPart {
       transform-origin: 50% 50%;
 
       stroke: currentcolor;

package/{src/components/avatar/Avatar.module.css → css/components/_avatar.css}

@@ -21,15 +21,15 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .avatar {
+@layer components {
+  .fabric-avatar {
     width: 1em;
     height: 1em;
 
     vertical-align: -0.125em;
 
     border-radius: var(--rounding);
-    box-shadow: 0 0 1px theme(borderColor.base);
+    box-shadow: 0 0 1px var(--border-color-base);
 
     & > i,
     & > svg,
@@ -45,7 +45,7 @@
       line-height: 1;
 
       object-fit: cover;
-      background-color: theme(backgroundColor.dimmed);
+      background-color: var(--bg-color-dimmed);
       border-radius: inherit;
 
       fill: currentcolor;
@@ -60,10 +60,10 @@
     }
   }
 
-  .avatarGroup {
-    & > .avatar {
+  .fabric-avatarGroup {
+    & > .fabric-avatar {
       box-shadow:
-        0 0 0 1px theme(borderColor.muted),
+        0 0 0 1px var(--border-color-muted),
         0 0 0 0.125em var(--fabric-bg);
 
       &:not(:first-child) {
@@ -71,7 +71,7 @@
       }
     }
 
-    & .avatarGroup--extra {
+    & .fabric-avatarGroup--extra {
       width: 1em;
       height: 1em;
       font-size: inherit;
@@ -80,9 +80,9 @@
   }
 }
 
-@layer util {
-  .avatarGroup {
-    & > .avatar {
+@layer utilities {
+  .fabric-avatarGroup {
+    & > .fabric-avatar {
       font-size: inherit;
       border-radius: inherit;
     }

package/{src/components/badge/Badge.module.css → css/components/_badge.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 comp {
+@layer components {
   @keyframes pinger {
     0% {
       transform: scale(1);
@@ -34,13 +34,15 @@
     }
   }
 
-  .badge {
+  .fabric-badge {
     --tw-bg-opacity: 1;
 
     box-sizing: content-box;
-    color: theme(textColor.base);
-    background-color: theme(colors.tint.200/var(--tw-bg-opacity));
-    outline: 0.5px solid theme(backgroundColor.base);
+    color: var(--text-color-base);
+    background-color: --alpha(
+      var(--color-tint-200) / calc(100% * var(--tw-bg-opacity))
+    );
+    outline: 0.5px solid var(--bg-color-base);
 
     & > span {
       font-size: 0.625em;
@@ -82,11 +84,11 @@
       top: 0;
       inset-inline-start: 0;
 
-      :global([dir="ltr"]) & {
+      @variant ltr {
         transform: translate(calc(var(--translate) * -1), -50%);
       }
 
-      :global([dir="rtl"]) & {
+      @variant rtl {
         transform: translate(calc(var(--translate) * 1), -50%);
       }
     }
@@ -95,11 +97,11 @@
       top: 0;
       inset-inline-end: 0;
 
-      :global([dir="ltr"]) & {
+      @variant ltr {
         transform: translate(calc(var(--translate) * 1), -50%);
       }
 
-      :global([dir="rtl"]) & {
+      @variant rtl {
         transform: translate(calc(var(--translate) * -1), -50%);
       }
     }
@@ -114,11 +116,11 @@
       bottom: 0;
       inset-inline-start: 0;
 
-      :global([dir="ltr"]) & {
+      @variant ltr {
         transform: translate(calc(var(--translate) * -1), -50%);
       }
 
-      :global([dir="rtl"]) & {
+      @variant rtl {
         transform: translate(calc(var(--translate) * 1), -50%);
       }
     }
@@ -127,11 +129,11 @@
       bottom: 0;
       inset-inline-end: 0;
 
-      :global([dir="ltr"]) & {
+      @variant ltr {
         transform: translate(calc(var(--translate) * 1), -50%);
       }
 
-      :global([dir="rtl"]) & {
+      @variant rtl {
         transform: translate(calc(var(--translate) * -1), -50%);
       }
     }
@@ -140,11 +142,11 @@
       top: 50%;
       inset-inline-start: 0;
 
-      :global([dir="ltr"]) & {
+      @variant ltr {
         transform: translate(-50%, -50%);
       }
 
-      :global([dir="rtl"]) & {
+      @variant rtl {
         transform: translate(50%, -50%);
       }
     }
@@ -153,11 +155,11 @@
       top: 50%;
       inset-inline-end: 0;
 
-      :global([dir="ltr"]) & {
+      @variant ltr {
         transform: translate(50%, -50%);
       }
 
-      :global([dir="rtl"]) & {
+      @variant rtl {
         transform: translate(-50%, -50%);
       }
     }

package/{src/components/breadcrumbs/Breadcrumbs.module.css → css/components/_breadcrumbs.css}

@@ -21,64 +21,46 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .breadcrumbs,
-  .breadcrumbOverflow {
-    --color: theme(colors.primary.DEFAULT);
+@layer components {
+  .fabric-breadcrumbs,
+  .fabric-breadcrumbOverflow {
+    --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);
     }
 
-    & :global(.link) {
+    & .link {
       padding: 0.25em 0.5em;
       text-decoration: none;
     }
   }
 
-  .breadcrumbOverflow,
-  .breadcrumbs[data-variant="classic"] {
-    & :global(.link) {
-      color: color-mix(in lab, var(--color) 90%, var(--fabric-text));
-    }
-
-    & :global(.link):hover {
-      color: color-mix(in lab, var(--color) 99%, var(--fabric-text));
-      text-decoration: underline;
-      background-color: theme(colors.tint.50/50%);
-    }
-
-    & :global(.link):active {
-      color: color-mix(in lab, var(--color) 85%, var(--fabric-text));
-      background-color: theme(colors.tint.50);
-    }
-  }
-
-  .breadcrumbs[data-variant="classic"] {
-    & > .breadcrumbLink {
+  .fabric-breadcrumbs[data-variant="classic"] {
+    & > .fabric-breadcrumbLink {
       list-style: none;
 
       &::after {
         content: attr(data-separator);
         display: inline-block;
         margin-inline: 0.125em;
-        color: theme(colors.tint.300);
+        color: var(--color-tint-300);
       }
 
       &:last-child::after {
@@ -87,29 +69,32 @@
     }
   }
 
-  [data-ref="viewport"] .breadcrumbs {
+  [data-ref="viewport"] .fabric-breadcrumbs {
     grid-area: crumbbar;
     padding: 0 0.25rem;
   }
 }
 
-@layer var {
-  .breadcrumbs[data-variant="classic"] {
-    & > :global(.link) {
+@layer variants {
+  .fabric-breadcrumbs[data-variant="classic"] {
+    & > .fabric-breadcrumbLink > .link {
       overflow: hidden;
+
       max-width: 24rem;
+
+      text-decoration: none;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
-    & > .breadcrumbLink:last-child > :global(.link) {
+    & > .fabric-breadcrumbLink:last-child > .link {
       pointer-events: none;
-      color: theme(colors.tint.600);
+      color: var(--color-tint-600);
     }
   }
 
-  .breadcrumbs[data-variant="modern"] {
-    & > .breadcrumbLink {
+  .fabric-breadcrumbs[data-variant="modern"] {
+    & > .fabric-breadcrumbLink {
       --linkcolor: color-mix(in lab, var(--color) 50%, var(--fabric-bg));
 
       position: relative;
@@ -117,17 +102,17 @@
       border-radius: var(--rounding);
 
       &:last-child {
-        --color: theme(colors.tint.500);
+        --color: var(--color-tint-500);
 
         pointer-events: none;
       }
 
-      &:first-child > :global(.link) {
+      &:first-child > .link {
         border-start-start-radius: var(--rounding);
         border-end-start-radius: var(--rounding);
       }
 
-      &:last-child > :global(.link) {
+      &:last-child > .link {
         border-start-end-radius: var(--rounding);
         border-end-end-radius: var(--rounding);
       }
@@ -147,7 +132,7 @@
           border-inline-end-color: var(--linkcolor);
         }
 
-        & > :global(.link) {
+        & > .link {
           margin-inline-start: -0.625em;
         }
       }
@@ -165,13 +150,14 @@
         }
       }
 
-      & > :global(.link) {
+      & > .link {
         display: inline-block;
 
         padding: 0.125em 0.5em;
 
         line-height: 1;
         color: color-mix(in lab, var(--color) 50%, var(--fabric-text));
+        text-decoration: none;
         vertical-align: middle;
 
         background-color: var(--linkcolor);
@@ -186,4 +172,23 @@
       }
     }
   }
+
+  .fabric-breadcrumbOverflow,
+  .fabric-breadcrumbs[data-variant="classic"] {
+    & .link {
+      color: color-mix(in lab, var(--color) 90%, var(--fabric-text));
+      text-decoration: none;
+    }
+
+    & .link:hover {
+      color: color-mix(in lab, var(--color) 99%, var(--fabric-text));
+      text-decoration: underline;
+      background-color: --alpha(var(--color-tint-50) / 50%);
+    }
+
+    & .link:active {
+      color: color-mix(in lab, var(--color) 85%, var(--fabric-text));
+      background-color: var(--color-tint-50);
+    }
+  }
 }