fulldev-ui 0.4.10 → 0.4.11

package/src/components/Image.astro

@@ -71,89 +71,73 @@ const {
 }
 
 <style is:global lang="scss">
-  .image {
-    display: block;
-    width: 100%;
-    height: auto;
-
-    &.mask-sm {
-      -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
-      mask-image: linear-gradient(to top, transparent 0%, black 30%);
-    }
-
-    &.mask-md {
-      -webkit-mask-image: linear-gradient(to top, transparent 0%, black 65%);
-      mask-image: linear-gradient(to top, transparent 0%, black 65%);
-    }
-
-    &.mask-lg {
-      -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
-      mask-image: linear-gradient(to top, transparent 0%, black 100%);
-    }
-
-    &.radius-none {
-      border-radius: 0;
-    }
+  @layer fulldev {
+    .image {
+      display: block;
+      width: 100%;
+      height: auto;
 
-    &.radius-auto {
-      border-radius: var(--radius-1);
-    }
+      &.mask-sm {
+        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
+        mask-image: linear-gradient(to top, transparent 0%, black 30%);
+      }
 
-    &.radius-full {
-      border-radius: 9999px;
-    }
+      &.mask-md {
+        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 65%);
+        mask-image: linear-gradient(to top, transparent 0%, black 65%);
+      }
 
-    &.position-background {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: -1;
-      margin: 0 !important;
-      border-radius: 0;
-      width: 100%;
-      max-width: none;
-      height: 100%;
-      max-height: 100%;
-      object-fit: cover;
-    }
+      &.mask-lg {
+        -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
+        mask-image: linear-gradient(to top, transparent 0%, black 100%);
+      }
 
-    &.position-cover {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
+      &.radius-none {
+        border-radius: 0;
+      }
 
-    &.position-container {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      object-position: center;
-    }
+      &.radius-auto {
+        border-radius: var(--radius-1);
+      }
 
-    &.position-inset {
-      max-width: none;
-      object-fit: cover;
+      &.radius-full {
+        border-radius: 9999px;
+      }
 
-      &:is(.structure-column > &) {
-        margin-right: calc(var(--inset-right) * -1);
-        margin-left: calc(var(--inset-left) * -1);
-        width: calc(100% + var(--inset-left) + var(--inset-right));
+      &.position-background {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: -1;
+        margin: 0 !important;
+        border-radius: 0;
+        width: 100%;
+        max-width: none;
+        height: 100%;
+        max-height: 100%;
+        object-fit: cover;
+      }
 
-        &.image:first-child {
-          margin-top: calc(var(--inset-top) * -1);
-          height: calc(100% + var(--inset-top) * 1);
-        }
+      &.position-cover {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
 
-        &.image:last-child {
-          margin-bottom: calc(var(--inset-bottom) * -1);
-          height: calc(100% + var(--inset-bottom) * 1);
-        }
+      &.position-container {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        object-position: center;
       }
 
-      &:is(.structure-split > &) {
-        @media (max-width: 1023.999px) {
+      &.position-inset {
+        max-width: none;
+        object-fit: cover;
+
+        &:is(.structure-column > &) {
           margin-right: calc(var(--inset-right) * -1);
           margin-left: calc(var(--inset-left) * -1);
           width: calc(100% + var(--inset-left) + var(--inset-right));
@@ -169,34 +153,52 @@ const {
           }
         }
 
-        @media (min-width: 1024px) {
-          margin-top: calc(var(--inset-top) * -1);
-          margin-bottom: calc(var(--inset-bottom) * -1);
-          height: calc(100% + var(--inset-top) * 1 + var(--inset-bottom) * 1);
-
-          &.image:first-child {
+        &:is(.structure-split > &) {
+          @media (max-width: 1023.999px) {
+            margin-right: calc(var(--inset-right) * -1);
             margin-left: calc(var(--inset-left) * -1);
-            width: calc(100% + var(--inset-left) * 1);
+            width: calc(100% + var(--inset-left) + var(--inset-right));
+
+            &.image:first-child {
+              margin-top: calc(var(--inset-top) * -1);
+              height: calc(100% + var(--inset-top) * 1);
+            }
+
+            &.image:last-child {
+              margin-bottom: calc(var(--inset-bottom) * -1);
+              height: calc(100% + var(--inset-bottom) * 1);
+            }
           }
 
-          &.image:last-child {
-            margin-right: calc(var(--inset-right) * -1);
-            width: calc(100% + var(--inset-right) * 1);
+          @media (min-width: 1024px) {
+            margin-top: calc(var(--inset-top) * -1);
+            margin-bottom: calc(var(--inset-bottom) * -1);
+            height: calc(100% + var(--inset-top) * 1 + var(--inset-bottom) * 1);
+
+            &.image:first-child {
+              margin-left: calc(var(--inset-left) * -1);
+              width: calc(100% + var(--inset-left) * 1);
+            }
+
+            &.image:last-child {
+              margin-right: calc(var(--inset-right) * -1);
+              width: calc(100% + var(--inset-right) * 1);
+            }
           }
         }
       }
-    }
 
-    &.ratio-landscape {
-      aspect-ratio: 4/3;
-    }
+      &.ratio-landscape {
+        aspect-ratio: 4/3;
+      }
 
-    &.ratio-square {
-      aspect-ratio: 1/1;
-    }
+      &.ratio-square {
+        aspect-ratio: 1/1;
+      }
 
-    &.ratio-portrait {
-      aspect-ratio: 3/4;
+      &.ratio-portrait {
+        aspect-ratio: 3/4;
+      }
     }
   }
 </style>

package/src/components/Input.astro

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

package/src/components/Label.astro

@@ -25,14 +25,16 @@ const { as = 'label', html, text, ...rest } = Astro.props
 </Root>
 
 <style is:global lang="scss">
-  .label {
-    display: flex;
-    flex-direction: column;
-    color: var(--color-11);
-    font-size: var(--text-2);
-    line-height: 1;
-    font-family: var(--font-family);
-    text-align: left;
-    white-space: nowrap;
+  @layer fulldev {
+    .label {
+      display: flex;
+      flex-direction: column;
+      color: var(--color-11);
+      font-size: var(--text-2);
+      line-height: 1;
+      font-family: var(--font-family);
+      text-align: left;
+      white-space: nowrap;
+    }
   }
 </style>

package/src/components/Link.astro

@@ -27,47 +27,49 @@ const { html, text, as = 'a', underline = 'auto', ...rest } = Astro.props
 </Root>
 
 <style is:global lang="scss">
-  .link {
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--space-2);
-    cursor: pointer;
-    border: none;
-    background: none;
-    color: var(--color-11);
-    font-weight: var(--font-weight);
-    font-size: var(--text-3);
-    font-family: var(--font-family);
-    text-decoration-color: var(--border); // FIXME, werkt niet
-    white-space: nowrap;
+  @layer fulldev {
+    .link {
+      display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--space-2);
+      cursor: pointer;
+      border: none;
+      background: none;
+      color: var(--color-11);
+      font-weight: var(--font-weight);
+      font-size: var(--text-3);
+      font-family: var(--font-family);
+      text-decoration-color: var(--border); // FIXME, werkt niet
+      white-space: nowrap;
 
-    &:hover {
-      color: var(--color-12);
-    }
+      &:hover {
+        color: var(--color-12);
+      }
 
-    &.underline-auto {
-      text-decoration: none;
+      &.underline-auto {
+        text-decoration: none;
 
-      &:is(p > &) {
-        text-decoration: underline;
+        &:is(p > &) {
+          text-decoration: underline;
+        }
       }
-    }
 
-    &.underline-always {
-      text-decoration: underline;
-    }
+      &.underline-always {
+        text-decoration: underline;
+      }
 
-    &.underline-hover {
-      text-decoration: none;
+      &.underline-hover {
+        text-decoration: none;
 
-      &:hover {
-        text-decoration: underline;
+        &:hover {
+          text-decoration: underline;
+        }
       }
-    }
 
-    &.underline-none {
-      text-decoration: none;
+      &.underline-none {
+        text-decoration: none;
+      }
     }
   }
 </style>

package/src/components/List.astro

@@ -21,21 +21,23 @@ const { as = 'ul', items, ...rest } = Astro.props
 </Root>
 
 <style is:global lang="scss">
-  .list {
-    display: flex;
-    flex-direction: column;
-    padding-left: var(--space-5);
-    color: var(--color-11);
-    font-size: var(--text-2);
-    line-height: 1.625;
-    list-style-type: disc;
-
-    li {
-      align-items: center;
-      max-width: calc(var(--space-4) * 44);
+  @layer fulldev {
+    .list {
+      display: flex;
+      flex-direction: column;
+      padding-left: var(--space-5);
       color: var(--color-11);
       font-size: var(--text-2);
       line-height: 1.625;
+      list-style-type: disc;
+
+      li {
+        align-items: center;
+        max-width: calc(var(--space-4) * 44);
+        color: var(--color-11);
+        font-size: var(--text-2);
+        line-height: 1.625;
+      }
     }
   }
 </style>

package/src/components/Masonry.astro

@@ -18,23 +18,25 @@ const { ...rest } = Astro.props
 </Root>
 
 <style is:global lang="scss">
-  .masonry {
-    --column-width: calc(21 * var(--space-4));
-    --gap: var(--space-4);
+  @layer fulldev {
+    .masonry {
+      --column-width: calc(21 * var(--space-4));
+      --gap: var(--space-4);
 
-    position: relative;
-    column-gap: var(--gap);
-    column-fill: balance;
-    column-width: var(--column-width);
-    column-count: 6;
-    break-inside: avoid;
-    width: 100%;
-
-    & > .root + .root,
-    & > * + * {
+      position: relative;
+      column-gap: var(--gap);
+      column-fill: balance;
+      column-width: var(--column-width);
+      column-count: 6;
       break-inside: avoid;
-      margin-top: var(--gap);
-      margin-bottom: var(--gap);
+      width: 100%;
+
+      & > .root + .root,
+      & > * + * {
+        break-inside: avoid;
+        margin-top: var(--gap);
+        margin-bottom: var(--gap);
+      }
     }
   }
 </style>

package/src/components/Rating.astro

@@ -61,22 +61,24 @@ const getIcon = (count: number) => {
 </Root>
 
 <style is:global lang="scss">
-  .rating {
-    display: flex;
-    gap: var(--space-4);
+  @layer fulldev {
+    .rating {
+      display: flex;
+      gap: var(--space-4);
 
-    .avatar + .avatar {
-      margin-left: calc(var(--space-4) * -2.5);
-    }
+      .avatar + .avatar {
+        margin-left: calc(var(--space-4) * -2.5);
+      }
 
-    .label {
-      margin-top: var(--space-2) !important;
-    }
+      .label {
+        margin-top: var(--space-2) !important;
+      }
 
-    .stars {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
+      .stars {
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+      }
     }
   }
 </style>

package/src/components/Root.astro

@@ -79,13 +79,18 @@ const render =
 }
 
 <style is:global lang="scss">
+  @import '@unocss/reset/tailwind.css' layer(base);
   @import '../css/color.css';
   @import '../css/styles.css';
   @import '../css/size.css';
   @import '../css/space.css';
 
-  .root {
-    z-index: 1;
-    box-sizing: border-box;
+  @layer base, fulldev;
+
+  @layer fulldev {
+    .root {
+      z-index: 1;
+      box-sizing: border-box;
+    }
   }
 </style>

package/src/components/Row.astro

@@ -22,25 +22,27 @@ const { space = 'auto', align = 'center', ...rest } = Astro.props
 </Root>
 
 <style is:global lang="scss">
-  .row {
-    display: flex;
+  @layer fulldev {
+    .row {
+      display: flex;
 
-    &.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;
+      }
 
-    &.space-auto {
-      > * + * {
-        margin-left: var(--space-auto);
+      &.space-auto {
+        > * + * {
+          margin-left: var(--space-auto);
+        }
       }
     }
   }