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

package/css/reset/_reset.css

@@ -1,27 +1,42 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @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 MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * 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.
+ * 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 reset {
+/* Define the clip path path from top-right to full screen */
+@keyframes theme-wipe {
+  from {
+    /* Radius 0% positioned at top-right corner (X: 100%, Y: 0%) */
+    clip-path: circle(0% at var(--circle-origin));
+  }
+
+  to {
+    /* Radius expands to 150% to safely encompass the bottom-left corner */
+    clip-path: circle(150% at var(--circle-origin));
+  }
+}
+
+@layer base {
   html,
   body {
     width: 100vw;
@@ -29,17 +44,66 @@
     margin: 0;
     padding: 0;
 
+    font-family: var(--font-sans);
+    vertical-align: baseline;
+
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    vertical-align: baseline;
   }
 
   :root {
-    font-family: theme(fontFamily.sans);
+    font-family: var(--font-sans);
     font-size: 16px;
     line-height: 1.5;
   }
 
+  html {
+    --vt-left: 0;
+    --vt-right: auto;
+    --circle-origin: 100% 0%;
+
+    isolation: isolate;
+  }
+
+  html[dir="rtl"] {
+    --vt-left: auto;
+    --vt-right: 0;
+    --circle-origin: 0% 0%;
+  }
+
+  ::view-transition-group(root) {
+    /* Safely pull the group back out of invisible off-screen space */
+    right: var(--vt-right) !important;
+    left: var(--vt-left) !important;
+    transform-origin: top right !important;
+  }
+
+  /* 1. Turn off the default crossfade animation for this group */
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    right: var(--vt-right) !important;
+    left: var(--vt-left) !important;
+
+    width: 100vw;
+    height: 100vh;
+
+    mix-blend-mode: normal; /* Prevents color artifacts during clip */
+
+    animation: none;
+  }
+
+  /* 2. Keep the old screen static underneath the expanding circle */
+  ::view-transition-old(root) {
+    z-index: 99;
+    opacity: 1;
+  }
+
+  /* 3. Animate the incoming screen using the custom keyframes */
+  ::view-transition-new(root) {
+    z-index: 9999;
+    animation: theme-wipe 250ms ease-in-out forwards;
+  }
+
   p,
   div,
   h1,
@@ -66,323 +130,148 @@
     min-inline-size: unset;
   }
 
-  body {
-    a,
-    label,
-    button {
-      user-select: none;
-    }
-
-    ::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-
-    ::-webkit-scrollbar-track {
-      background-color: color-mix(in lab, var(--fabric-bg) 72%, var(--tint));
-    }
-
-    ::-webkit-scrollbar-thumb {
-      background-color: color-mix(in lab, var(--fabric-bg) 35%, var(--tint));
-
-      &:hover {
-        background-color: color-mix(
-          in lab,
-          var(--fabric-text) 50%,
-          var(--tint)
-        );
-      }
-
-      &:active {
-        background-color: color-mix(
-          in lab,
-          var(--fabric-bg) 50%,
-          var(--fabric-text)
-        );
-      }
-    }
-
-    ::-webkit-scrollbar-corner {
-      background-color: var(--fabric-bg);
-    }
-
-    input:not(:disabled)::-webkit-file-upload-button {
-      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);
-    }
+  [class^="container"] {
+    margin-inline: auto;
+  }
 
-    ::selection {
-      background-color: color-mix(in lab, var(--accent) 35%, var(--fabric-bg));
-    }
+  [class*="outline"] {
+    --tw-outline-style: solid;
 
-    *,
-    ::before,
-    ::after {
-      --tw-ring-offset-color: var(--fabric-bg);
-      --tw-ring-color: var(--primary);
+    outline-color: var(--border-color-default);
+  }
 
-      box-sizing: border-box;
-      text-underline-offset: 0.25em;
-    }
+  [class*="border"] {
+    --tw-border-style: solid;
 
-    img,
-    svg {
-      display: inline-block;
-      fill: currentcolor;
-    }
+    border-color: var(--border-color-default);
+  }
 
-    hr {
-      transform: scaleY(0.5);
+  [class*="divide"] > :not(:last-child) {
+    border-color: var(--border-color-default);
+  }
 
-      height: auto;
-      margin: 1rem 0;
+  [class*="shadow"] {
+    --tw-shadow-color: var(--fabric-shadow);
+  }
 
-      background: none;
-      border: 0;
-      border-top: 3px solid color-mix(in lab, var(--fabric-bg) 95%, var(--tint)) !important;
-      border-bottom: 2px solid
-        color-mix(in lab, var(--fabric-bg) 50%, var(--tint));
+  [class*="ring"] {
+    --tw-ring-offset-color: var(--bg-color-dimmed);
+    --tw-ring-color: var(--color-primary-500);
+  }
 
-      &.vertical {
-        transform: scaleX(0.5);
+  [data-clickable="true"] {
+    cursor: pointer;
+  }
 
-        display: inline-block;
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    text-underline-offset: 0.25em;
+  }
 
-        margin: 0 0.25rem;
+  * {
+    &:hover,
+    &:focus-within {
+      visibility: visible;
 
-        border: 0;
-        border-inline-start: 3px solid
-          color-mix(in lab, var(--fabric-bg) 95%, var(--tint)) !important;
-        border-inline-end: 2px solid
-          color-mix(in lab, var(--fabric-bg) 50%, var(--tint));
+      &::-webkit-scrollbar-thumb,
+      &::-webkit-scrollbar-track {
+        visibility: visible;
       }
     }
+  }
 
-    label {
-      cursor: inherit;
-    }
-
-    [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;
-        }
-      }
+  body {
+    a,
+    label,
+    button {
+      user-select: none;
     }
+  }
 
-    @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;
-        }
-      }
-    }
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
 
-    @media (min-width: theme(screens.md)) {
-      .hide-md {
-        @apply hidden;
-      }
+  ::-webkit-scrollbar-corner {
+    visibility: hidden;
+    background-color: var(--fabric-bg);
+  }
 
-      @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;
-        }
-      }
-    }
+  ::-webkit-scrollbar-track {
+    visibility: hidden;
+    background-color: color-mix(in oklab, var(--fabric-bg) 85%, var(--color-tint));
+  }
 
-    @media (min-width: theme(screens.lg)) {
-      .hide-lg {
-        @apply hidden;
-      }
+  ::-webkit-scrollbar-thumb {
+    visibility: hidden;
+    background-color: color-mix(in oklab, var(--fabric-bg) 35%, var(--color-tint));
+  }
 
-      @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;
-        }
-      }
-    }
+  :active::-webkit-scrollbar-thumb {
+    background-color: color-mix(in oklab, var(--fabric-bg) 50%, var(--color-tint));
+  }
 
-    @media (min-width: theme(screens.xl)) {
-      .hide-xl {
-        @apply hidden;
-      }
+  input:not(:disabled)::-webkit-file-upload-button {
+    cursor: pointer;
+  }
 
-      @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;
-        }
-      }
-    }
+  ::placeholder {
+    font-family: var(--font-sans);
+    color: var(--color-tint-400);
+  }
 
-    @media (min-width: theme(screens.2xl)) {
-      .hide-2xl,
-      .hide-2xl-only {
-        @apply hidden;
-      }
+  ::selection {
+    background-color: rgb(from var(--color-secondary) r g b / 30%);
+  }
 
-      .show-xs-only,
-      .show-sm-only,
-      .show-md-only,
-      .show-lg-only,
-      .show-xl-only {
-        @apply hidden;
-      }
-    }
+  input,
+  textarea {
+    font-family: var(--font-mono);
+  }
 
-    @media (max-width: theme(screens.xs)) {
-      .show-xs,
-      .show-sm,
-      .show-md,
-      .show-lg,
-      .show-xl,
-      .show-2xl {
-        @apply hidden;
-      }
-    }
+  img,
+  svg {
+    display: inline-block;
+    fill: currentcolor;
+  }
 
-    @media (max-width: theme(screens.sm)) {
-      .show-sm,
-      .show-md,
-      .show-lg,
-      .show-xl,
-      .show-2xl {
-        @apply hidden;
-      }
-    }
+  hr {
+    --start-opacity: 20%;
+    --end-opacity: 100%;
 
-    @media (max-width: theme(screens.md)) {
-      .show-md,
-      .show-lg,
-      .show-xl,
-      .show-2xl {
-        @apply hidden;
-      }
-    }
+    transform: scaleY(0.5);
 
-    @media (max-width: theme(screens.lg)) {
-      .show-lg,
-      .show-xl,
-      .show-2xl {
-        @apply hidden;
-      }
-    }
+    height: auto;
+    margin: 0.25rem 0;
+    border: 0;
+    border-top: 2px solid rgb(from #000 r g b / var(--start-opacity));
+    border-bottom: 1px solid rgb(from #fff r g b / var(--end-opacity));
 
-    @media (max-width: theme(screens.xl)) {
-      .show-xl,
-      .show-2xl {
-        @apply hidden;
-      }
-    }
+    background: none;
 
-    @media (max-width: theme(screens.2xl)) {
-      .show-2xl {
-        @apply hidden;
-      }
-    }
-  }
+    &.vertical {
+      transform: scaleX(0.5);
 
-  .scroll-snap-start {
-    scroll-snap-type: both proximity;
+      display: inline-block;
+      align-self: stretch;
 
-    & > * {
-      scroll-snap-align: start;
+      margin: 0.25rem;
+      border: 0;
+      border-inline-start: 2px solid rgb(from #000 r g b / var(--start-opacity));
+      border-inline-end: 1px solid rgb(from #fff r g b / var(--end-opacity));
     }
-  }
 
-  .scroll-snap-center {
-    scroll-snap-type: both proximity;
-
-    & > * {
-      scroll-snap-align: center;
+    @variant dark {
+      --start-opacity: 100%;
+      --end-opacity: 50%;
     }
   }
 
-  .break-words {
-    word-break: break-word;
-  }
-
-  .outline-thin {
-    outline-width: 0.5px;
+  label {
+    cursor: inherit;
   }
 
   .outline {
@@ -393,6 +282,11 @@
     margin-inline: auto;
   }
 
+  .overflow-auto,
+  .overflow-scroll {
+    scrollbar-gutter: stable;
+  }
+
   p,
   pre,
   h1,
@@ -404,4 +298,16 @@
   .mixed-lang {
     unicode-bidi: plaintext;
   }
+
+  .fabric-style-effect ~ * {
+    z-index: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ::view-transition-old(.theme-swipe),
+    ::view-transition-new(.theme-swipe) {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
 }