@react-fabric/core 1.0.0-beta.4 → 1.0.0-beta.41

package/css/reset/_reset.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 {
   html,
   body {
     width: 100vw;
@@ -35,7 +35,7 @@
   }
 
   :root {
-    font-family: theme(fontFamily.sans);
+    font-family: var(--font-sans);
     font-size: 16px;
     line-height: 1.5;
   }
@@ -66,6 +66,26 @@
     min-inline-size: unset;
   }
 
+  [class*="outline"] {
+    outline-color: color-mix(in oklab, var(--fabric-bg) 65%, var(--color-tint));
+  }
+
+  [class*="border"] {
+    border-color: color-mix(in oklab, var(--fabric-bg) 65%, var(--color-tint));
+  }
+
+  [class*="divide"] > :not(:last-child) {
+    border-color: color-mix(in oklab, var(--fabric-bg) 65%, var(--color-tint));
+  }
+
+  [class*="ring"] {
+    --tw-ring-color: color-mix(
+      in oklab,
+      var(--fabric-bg) 65%,
+      var(--color-tint)
+    );
+  }
+
   body {
     a,
     label,
@@ -79,17 +99,25 @@
     }
 
     ::-webkit-scrollbar-track {
-      background-color: color-mix(in lab, var(--fabric-bg) 72%, var(--tint));
+      background-color: color-mix(
+        in lab,
+        var(--fabric-bg) 72%,
+        var(--color-tint)
+      );
     }
 
     ::-webkit-scrollbar-thumb {
-      background-color: color-mix(in lab, var(--fabric-bg) 35%, var(--tint));
+      background-color: color-mix(
+        in lab,
+        var(--fabric-bg) 35%,
+        var(--color-tint)
+      );
 
       &:hover {
         background-color: color-mix(
           in lab,
           var(--fabric-text) 50%,
-          var(--tint)
+          var(--color-tint)
         );
       }
 
@@ -110,39 +138,23 @@
       cursor: pointer;
     }
 
-    .scroll-thin {
-      &::-webkit-scrollbar,
-      & ::-webkit-scrollbar {
-        width: 3px;
-        height: 3px;
-      }
-    }
-
-    .scroll-hide {
-      &::-webkit-scrollbar,
-      & ::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-      }
-    }
-
     :focus-visible {
       outline: 0;
     }
 
     ::placeholder {
-      color: theme(colors.tint.400);
+      color: var(--color-tint-400);
     }
 
     ::selection {
-      background-color: color-mix(in lab, var(--accent) 35%, var(--fabric-bg));
+      background-color: color(from var(--color-accent) srgb r g b / 30%);
     }
 
     *,
     ::before,
     ::after {
       --tw-ring-offset-color: var(--fabric-bg);
-      --tw-ring-color: var(--primary);
+      --tw-ring-color: var(--color-primary);
 
       box-sizing: border-box;
       text-underline-offset: 0.25em;
@@ -162,9 +174,10 @@
 
       background: none;
       border: 0;
-      border-top: 3px solid color-mix(in lab, var(--fabric-bg) 95%, var(--tint)) !important;
+      border-top: 3px solid
+        color-mix(in lab, var(--fabric-bg) 95%, var(--color-tint)) !important;
       border-bottom: 2px solid
-        color-mix(in lab, var(--fabric-bg) 50%, var(--tint));
+        color-mix(in lab, var(--fabric-bg) 50%, var(--color-tint));
 
       &.vertical {
         transform: scaleX(0.5);
@@ -175,9 +188,9 @@
 
         border: 0;
         border-inline-start: 3px solid
-          color-mix(in lab, var(--fabric-bg) 95%, var(--tint)) !important;
+          color-mix(in lab, var(--fabric-bg) 95%, var(--color-tint)) !important;
         border-inline-end: 2px solid
-          color-mix(in lab, var(--fabric-bg) 50%, var(--tint));
+          color-mix(in lab, var(--fabric-bg) 50%, var(--color-tint));
       }
     }
 
@@ -188,201 +201,6 @@
     [data-clickable="true"] {
       cursor: pointer;
     }
-
-    .sectioned {
-      display: grid;
-      grid-template: "head head head" auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
-    }
-
-    @media (min-width: theme(screens.xs)) {
-      .hide-xs {
-        @apply hidden;
-      }
-
-      @media (max-width: theme(screens.sm)) {
-        .hide-xs-only {
-          @apply hidden;
-        }
-
-        .show-sm-only,
-        .show-md-only,
-        .show-lg-only,
-        .show-xl-only,
-        .show-2xl-only {
-          @apply hidden;
-        }
-      }
-    }
-
-    @media (min-width: theme(screens.sm)) {
-      .hide-sm {
-        @apply hidden;
-      }
-
-      @media (max-width: theme(screens.md)) {
-        .hide-sm-only {
-          @apply hidden;
-        }
-
-        .show-xs-only,
-        .show-md-only,
-        .show-lg-only,
-        .show-xl-only,
-        .show-2xl-only {
-          @apply hidden;
-        }
-      }
-    }
-
-    @media (min-width: theme(screens.md)) {
-      .hide-md {
-        @apply hidden;
-      }
-
-      @media (max-width: theme(screens.lg)) {
-        .hide-md-only {
-          @apply hidden;
-        }
-
-        .show-xs-only,
-        .show-sm-only,
-        .show-lg-only,
-        .show-xl-only,
-        .show-2xl-only {
-          @apply hidden;
-        }
-      }
-    }
-
-    @media (min-width: theme(screens.lg)) {
-      .hide-lg {
-        @apply hidden;
-      }
-
-      @media (max-width: theme(screens.xl)) {
-        .hide-lg-only {
-          @apply hidden;
-        }
-
-        .show-xs-only,
-        .show-sm-only,
-        .show-md-only,
-        .show-xl-only,
-        .show-2xl-only {
-          @apply hidden;
-        }
-      }
-    }
-
-    @media (min-width: theme(screens.xl)) {
-      .hide-xl {
-        @apply hidden;
-      }
-
-      @media (max-width: theme(screens.2xl)) {
-        .hide-xl-only {
-          @apply hidden;
-        }
-
-        .show-xs-only,
-        .show-sm-only,
-        .show-md-only,
-        .show-lg-only,
-        .show-2xl-only {
-          @apply hidden;
-        }
-      }
-    }
-
-    @media (min-width: theme(screens.2xl)) {
-      .hide-2xl,
-      .hide-2xl-only {
-        @apply hidden;
-      }
-
-      .show-xs-only,
-      .show-sm-only,
-      .show-md-only,
-      .show-lg-only,
-      .show-xl-only {
-        @apply hidden;
-      }
-    }
-
-    @media (max-width: theme(screens.xs)) {
-      .show-xs,
-      .show-sm,
-      .show-md,
-      .show-lg,
-      .show-xl,
-      .show-2xl {
-        @apply hidden;
-      }
-    }
-
-    @media (max-width: theme(screens.sm)) {
-      .show-sm,
-      .show-md,
-      .show-lg,
-      .show-xl,
-      .show-2xl {
-        @apply hidden;
-      }
-    }
-
-    @media (max-width: theme(screens.md)) {
-      .show-md,
-      .show-lg,
-      .show-xl,
-      .show-2xl {
-        @apply hidden;
-      }
-    }
-
-    @media (max-width: theme(screens.lg)) {
-      .show-lg,
-      .show-xl,
-      .show-2xl {
-        @apply hidden;
-      }
-    }
-
-    @media (max-width: theme(screens.xl)) {
-      .show-xl,
-      .show-2xl {
-        @apply hidden;
-      }
-    }
-
-    @media (max-width: theme(screens.2xl)) {
-      .show-2xl {
-        @apply hidden;
-      }
-    }
-  }
-
-  .scroll-snap-start {
-    scroll-snap-type: both proximity;
-
-    & > * {
-      scroll-snap-align: start;
-    }
-  }
-
-  .scroll-snap-center {
-    scroll-snap-type: both proximity;
-
-    & > * {
-      scroll-snap-align: center;
-    }
-  }
-
-  .break-words {
-    word-break: break-word;
-  }
-
-  .outline-thin {
-    outline-width: 0.5px;
   }
 
   .outline {

package/css/reset/_text.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 {
   h1 {
     font-size: 2.5rem;
     font-weight: 500;
@@ -103,7 +103,7 @@
       padding-inline: 1em;
 
       font-size: 0.875em;
-      color: theme(textColor.dimmed);
+      color: var(--text-color-dimmed);
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -125,12 +125,20 @@
     &.bg-alternate {
       & > dt:nth-of-type(odd),
       & > dd:nth-of-type(odd) {
-        background-color: color-mix(in lab, var(--fabric-bg) 99%, var(--tint));
+        background-color: color-mix(
+          in lab,
+          var(--fabric-bg) 99%,
+          var(--color-tint)
+        );
       }
 
       & > dt:nth-of-type(even),
       & > dd:nth-of-type(even) {
-        background-color: color-mix(in lab, var(--fabric-bg) 92%, var(--tint));
+        background-color: color-mix(
+          in lab,
+          var(--fabric-bg) 92%,
+          var(--color-tint)
+        );
       }
     }
   }
@@ -142,7 +150,7 @@
 
     padding: 0 2px;
 
-    color: theme(colors.accent.700);
+    color: var(--color-accent-700);
     text-decoration: underline dashed 1px;
 
     background-color: color-mix(in lab, currentcolor 10%, var(--fabric-bg));
@@ -151,29 +159,6 @@
   mark {
     display: inline-block;
     color: var(--fabric-text);
-    background-color: theme(colors.accent.100);
-  }
-
-  .link {
-    cursor: pointer;
-    user-select: none;
-
-    font-weight: 500;
-    color: theme(colors.accent.600);
-    text-decoration: underline dotted;
-
-    &:hover {
-      text-decoration: underline solid;
-    }
-  }
-
-  .bg-odd,
-  .bg-alternate > :nth-child(odd) {
-    background-color: color-mix(in lab, var(--fabric-bg) 99%, var(--tint));
-  }
-
-  .bg-even,
-  .bg-alternate > :nth-child(even) {
-    background-color: color-mix(in lab, var(--fabric-bg) 92%, var(--tint));
+    background-color: var(--color-accent-100);
   }
 }