fulldev-ui 0.4.0-beta.1 → 0.4.11

package/src/components/Section.astro

@@ -193,80 +193,82 @@ const buttonVariant = (i: number) => {
 </Root>
 
 <style is:global lang="scss">
-  .section {
-    --inset-top: var(--space-7);
-    --inset-left: var(--gutter-left);
-    --inset-right: var(--gutter-right);
-    --inset-bottom: var(--space-7);
+  @layer fulldev {
+    .section {
+      --inset-top: var(--space-7);
+      --inset-left: var(--gutter-left);
+      --inset-right: var(--gutter-right);
+      --inset-bottom: var(--space-7);
 
-    position: relative;
+      position: relative;
 
-    &:first-child {
-      --inset-top: var(--space-6);
-      --inset-bottom: var(--space-6);
-    }
+      &:first-child {
+        --inset-top: var(--space-6);
+        --inset-bottom: var(--space-6);
+      }
 
-    &.frame-none {
-      padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
-        var(--inset-left);
-    }
+      &.frame-none {
+        padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
+          var(--inset-left);
+      }
 
-    &.frame-fill {
-      background-color: var(--color-2);
-      padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
-        var(--inset-left);
-    }
+      &.frame-fill {
+        background-color: var(--color-2);
+        padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
+          var(--inset-left);
+      }
 
-    &.frame-panel {
-      --inset-top: var(--space-6);
-      --inset-left: min(var(--gutter), var(--space-7));
-      --inset-right: min(var(--gutter), var(--space-7));
-      --inset-bottom: var(--space-6);
+      &.frame-panel {
+        --inset-top: var(--space-6);
+        --inset-left: min(var(--gutter), var(--space-7));
+        --inset-right: min(var(--gutter), var(--space-7));
+        --inset-bottom: var(--space-6);
 
-      margin: var(--inset-top) var(--gutter-right) var(--inset-bottom)
-        var(--gutter-left);
-      border: 1px solid var(--base-a6);
-      border-radius: var(--radius-2);
-      background-color: var(--color-2);
-      padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
-        var(--inset-left);
-      max-width: calc(
-        100vw - var(--sidebar-width) - var(--toc-width) - var(--inset-left) - var(
-            --inset-right
-          )
-      );
-      overflow: hidden;
+        margin: var(--inset-top) var(--gutter-right) var(--inset-bottom)
+          var(--gutter-left);
+        border: 1px solid var(--base-a6);
+        border-radius: var(--radius-2);
+        background-color: var(--color-2);
+        padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
+          var(--inset-left);
+        max-width: calc(
+          100vw - var(--sidebar-width) - var(--toc-width) - var(--inset-left) - var(
+              --inset-right
+            )
+        );
+        overflow: hidden;
 
-      @media (min-width: 1024px) {
-        --inset-top: var(--space-7);
-        --inset-bottom: var(--space-7);
+        @media (min-width: 1024px) {
+          --inset-top: var(--space-7);
+          --inset-bottom: var(--space-7);
+        }
       }
-    }
 
-    &.frame-viewport {
-      padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
-        var(--inset-left);
-      min-height: 100vh;
-    }
+      &.frame-viewport {
+        padding: var(--inset-top) var(--inset-right) var(--inset-bottom)
+          var(--inset-left);
+        min-height: 100vh;
+      }
 
-    @media (min-width: 1024px) {
-      &:nth-of-type(odd).split.reverse-odd {
-        > :first-child {
-          order: 999;
-        }
+      @media (min-width: 1024px) {
+        &:nth-of-type(odd).split.reverse-odd {
+          > :first-child {
+            order: 999;
+          }
 
-        > :last-child {
-          order: 0;
+          > :last-child {
+            order: 0;
+          }
         }
-      }
 
-      &:nth-of-type(even).split.reverse-even {
-        > :first-child {
-          order: 0;
-        }
+        &:nth-of-type(even).split.reverse-even {
+          > :first-child {
+            order: 0;
+          }
 
-        > :last-child {
-          order: 999;
+          > :last-child {
+            order: 999;
+          }
         }
       }
     }

package/src/components/Select.astro

@@ -69,76 +69,78 @@ const {
 </Root>
 
 <style is:global lang="scss">
-  .select {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    gap: var(--space-1);
-    width: 100%;
-
-    .icon {
-      position: absolute;
-      right: var(--space-4);
-      bottom: var(--space-4);
-      width: var(--text-2);
-      height: var(--text-2);
-      pointer-events: none;
-    }
-
-    select {
+  @layer fulldev {
+    .select {
       display: flex;
       position: relative;
-      align-items: center;
-      appearance: none;
-      appearance: none;
-      outline: none;
-      border: 1px solid var(--color-6);
-      border-radius: var(--radius-1);
-      background-color: transparent;
-      padding-right: calc(var(--text-2) + 2 * var(--space-4));
-      padding-left: var(--space-4);
+      flex-direction: column;
+      gap: var(--space-1);
       width: 100%;
-      min-width: var(--space-4);
-      height: calc(var(--text-2) + 2 * var(--space-4));
-      color: var(--color-11);
-      font-size: var(--text-2);
-      line-height: 1.25;
 
-      &:hover {
-        outline: none;
+      .icon {
+        position: absolute;
+        right: var(--space-4);
+        bottom: var(--space-4);
+        width: var(--text-2);
+        height: var(--text-2);
+        pointer-events: none;
       }
 
-      &:focus {
+      select {
+        display: flex;
+        position: relative;
+        align-items: center;
+        appearance: none;
+        appearance: none;
         outline: none;
-        box-shadow: inset 0 0 0 2px var(--color-7);
-        border-color: var(--color-7);
-      }
+        border: 1px solid var(--color-6);
+        border-radius: var(--radius-1);
+        background-color: transparent;
+        padding-right: calc(var(--text-2) + 2 * var(--space-4));
+        padding-left: var(--space-4);
+        width: 100%;
+        min-width: var(--space-4);
+        height: calc(var(--text-2) + 2 * var(--space-4));
+        color: var(--color-11);
+        font-size: var(--text-2);
+        line-height: 1.25;
 
-      &:disabled {
-        opacity: 50%;
-        cursor: not-allowed;
-        pointer-events: none;
-      }
+        &:hover {
+          outline: none;
+        }
 
-      &.radius-none {
-        border-radius: 0;
-      }
+        &:focus {
+          outline: none;
+          box-shadow: inset 0 0 0 2px var(--color-7);
+          border-color: var(--color-7);
+        }
 
-      &.radius-auto {
-        border-radius: var(--radius-1);
-      }
+        &:disabled {
+          opacity: 50%;
+          cursor: not-allowed;
+          pointer-events: none;
+        }
 
-      &.radius-full {
-        border-radius: 9999px;
+        &.radius-none {
+          border-radius: 0;
+        }
+
+        &.radius-auto {
+          border-radius: var(--radius-1);
+        }
+
+        &.radius-full {
+          border-radius: 9999px;
+        }
       }
-    }
 
-    option {
-      color: var(--text);
-      font-weight: var(--font-weight);
-      font-size: var(--text-2);
-      line-height: 1;
-      font-family: var(--font-family);
+      option {
+        color: var(--text);
+        font-weight: var(--font-weight);
+        font-size: var(--text-2);
+        line-height: 1;
+        font-family: var(--font-family);
+      }
     }
   }
 </style>

package/src/components/Sidebar.astro

@@ -51,21 +51,24 @@ const url = Astro.url.href
 </Column>
 
 <style lang="scss" is:global>
-  .sidebar {
-    display: none !important;
-    box-sizing: border-box;
-    border-right: 1px solid var(--color-a6);
-    padding: var(--space-6) min(var(--space-5), var(--gutter)) var(--space-6) 0;
-    height: 100vh;
-    max-height: 100vh;
-    overflow-y: auto;
+  @layer fulldev {
+    .sidebar {
+      display: none !important;
+      box-sizing: border-box;
+      border-right: 1px solid var(--color-a6);
+      padding: var(--space-6) min(var(--space-5), var(--gutter)) var(--space-6)
+        0;
+      height: 100vh;
+      max-height: 100vh;
+      overflow-y: auto;
 
-    .sidebar-link {
-      font-size: var(--text-2);
-    }
+      .sidebar-link {
+        font-size: var(--text-2);
+      }
 
-    @media (min-width: 1024px) {
-      display: flex !important;
+      @media (min-width: 1024px) {
+        display: flex !important;
+      }
     }
   }
 </style>

package/src/components/Split.astro

@@ -22,36 +22,38 @@ const { space = 'auto', align = 'center', ...rest } = Astro.props
 </Root>
 
 <style is:global lang="scss">
-  .split {
-    display: grid;
-    grid-template-columns: 1fr;
-    column-gap: var(--space-6);
-    width: 100%;
-
-    @media (max-width: 1023.9999px) {
-      &.space-auto {
-        > * + * {
-          margin-top: var(--space-auto);
+  @layer fulldev {
+    .split {
+      display: grid;
+      grid-template-columns: 1fr;
+      column-gap: var(--space-6);
+      width: 100%;
+
+      @media (max-width: 1023.9999px) {
+        &.space-auto {
+          > * + * {
+            margin-top: var(--space-auto);
+          }
         }
       }
-    }
 
-    @media (min-width: 1024px) {
-      grid-auto-columns: 1fr;
-      grid-auto-flow: column;
-    }
+      @media (min-width: 1024px) {
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+      }
 
-    &.align-start {
-      align-items: flex-start;
-      text-align: left;
-    }
+      &.align-start {
+        align-items: flex-start;
+        text-align: left;
+      }
 
-    &.align-center {
-      align-items: center;
-    }
+      &.align-center {
+        align-items: center;
+      }
 
-    &.align-end {
-      align-items: flex-end;
+      &.align-end {
+        align-items: flex-end;
+      }
     }
   }
 </style>

package/src/components/Spread.astro

@@ -20,25 +20,27 @@ const { align = 'center', ...rest } = Astro.props
 </Root>
 
 <style is:global lang="scss">
-  .spread {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    gap: var(--space-5);
-    width: 100%;
+  @layer fulldev {
+    .spread {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      gap: var(--space-5);
+      width: 100%;
 
-    &.align-start {
-      align-items: flex-start;
-      text-align: left;
-    }
+      &.align-start {
+        align-items: flex-start;
+        text-align: left;
+      }
 
-    &.align-center {
-      align-items: center;
-    }
+      &.align-center {
+        align-items: center;
+      }
 
-    &.align-end {
-      align-items: flex-end;
+      &.align-end {
+        align-items: flex-end;
+      }
     }
   }
 </style>

package/src/components/Switch.astro

@@ -52,62 +52,64 @@ const {
 </Root>
 
 <style is:global lang="scss">
-  .switch {
-    position: relative;
-    align-items: center;
-    gap: var(--space-1);
-    width: 100%;
-
-    .switch-element {
-      display: block;
+  @layer fulldev {
+    .switch {
       position: relative;
-      transition: var(--transition);
-      cursor: pointer;
-      box-sizing: border-box;
-      border: 1px solid var(--border);
-      border-radius: 999px;
-      background-color: var(--base-2);
-      padding: var(--space-1);
-      width: fit-content;
-      min-width: calc(
-        (var(--text-2) + 2 * var(--space-2) * 2) + 2 * var(--space-1)
-      );
-      height: calc(var(--text-2) + 2 * var(--space-2));
-
-      .checkbox {
-        position: absolute;
-        opacity: 0;
-        width: 0;
-        height: 0;
-      }
+      align-items: center;
+      gap: var(--space-1);
+      width: 100%;
 
-      .checkmark {
-        transform: 0%;
+      .switch-element {
+        display: block;
+        position: relative;
         transition: var(--transition);
+        cursor: pointer;
+        box-sizing: border-box;
+        border: 1px solid var(--border);
         border-radius: 999px;
-        background-color: var(--base-1);
-        width: 50%;
-        height: 100%;
-      }
+        background-color: var(--base-2);
+        padding: var(--space-1);
+        width: fit-content;
+        min-width: calc(
+          (var(--text-2) + 2 * var(--space-2) * 2) + 2 * var(--space-1)
+        );
+        height: calc(var(--text-2) + 2 * var(--space-2));
 
-      .checkbox:checked ~ .checkmark {
-        transform: translateX(100%);
-        background-color: var(--color-12);
-      }
+        .checkbox {
+          position: absolute;
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
 
-      &:hover {
-        background-color: var(--base-3);
-      }
+        .checkmark {
+          transform: 0%;
+          transition: var(--transition);
+          border-radius: 999px;
+          background-color: var(--base-1);
+          width: 50%;
+          height: 100%;
+        }
 
-      &:focus-visible {
-        outline: 2px solid var(--focus) !important;
-        outline-offset: 2px;
-      }
+        .checkbox:checked ~ .checkmark {
+          transform: translateX(100%);
+          background-color: var(--color-12);
+        }
+
+        &:hover {
+          background-color: var(--base-3);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--focus) !important;
+          outline-offset: 2px;
+        }
 
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        pointer-events: none;
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+          pointer-events: none;
+        }
       }
     }
   }