fulldev-ui 0.3.35 → 0.4.0-beta.0

package/src/css/custom.css

@@ -0,0 +1,59 @@
+.hero:not(.window .hero)::before {
+  position: absolute;
+  top: -80%;
+  left: 0;
+  z-index: -1;
+  background: radial-gradient(
+    ellipse closest-side,
+    rgba(255, 85, 0, 0.1),
+    #f500 90%
+  );
+  width: 100%;
+  height: 170%;
+  content: '';
+}
+
+.header:not(.window .header) {
+  backdrop-filter: blur(10px);
+  border-color: var(--base-a6) !important;
+  background-color: rgba(17, 17, 16, 0.2) !important;
+}
+
+.cta:not(.window .cta) {
+  backdrop-filter: blur(10px);
+  border-color: var(--base-a6) !important;
+  background-color: rgba(17, 17, 16, 0.2) !important;
+  overflow: visible;
+
+  &::before {
+    position: absolute;
+    top: -30%;
+    left: 0;
+    z-index: -1;
+    background: radial-gradient(
+      ellipse closest-side,
+      rgba(255, 85, 0, 0.06),
+      #f500 90%
+    );
+    width: 100%;
+    height: 160%;
+    content: '';
+  }
+}
+
+mark {
+  background-color: var(--brand-12) !important;
+  color: var(--brand-1) !important;
+}
+
+.astro-code {
+  margin: 0;
+  border: 1px solid var(--base-6);
+  border-radius: var(--radius-2);
+  background-color: var(--base-2) !important;
+  padding: var(--space-5);
+}
+
+a {
+  color: var(--primary-5);
+}

package/src/css/size.css

@@ -0,0 +1,130 @@
+:root {
+  --space-sm-1: 4px;
+  --space-sm-2: 6px;
+  --space-sm-3: 8px;
+  --space-sm-4: 12px;
+  --space-sm-5: 20px;
+  --space-sm-6: 40px;
+  --space-sm-7: 60px;
+
+  --space-md-1: 5px;
+  --space-md-2: 8px;
+  --space-md-3: 11px;
+  --space-md-4: 14px;
+  --space-md-5: 28px;
+  --space-md-6: 56px;
+  --space-md-7: 84px;
+
+  --space-lg-1: 6px;
+  --space-lg-2: 10px;
+  --space-lg-3: 14px;
+  --space-lg-4: 18px;
+  --space-lg-5: 36px;
+  --space-lg-6: 72px;
+  --space-lg-7: 120px;
+
+  --text-sm-1: 12px;
+  --text-sm-2: 14px;
+  --text-sm-3: 14px;
+  --text-sm-4: 16px;
+  --text-sm-5: 18px;
+  --text-sm-6: 20px;
+  --text-sm-7: 24px;
+  --text-sm-8: 30px;
+
+  --text-md-1: 12px;
+  --text-md-2: 14px;
+  --text-md-3: 16px;
+  --text-md-4: 18px;
+  --text-md-5: 20px;
+  --text-md-6: 24px;
+  --text-md-7: 30px;
+  --text-md-8: 36px;
+
+  --text-lg-1: 14px;
+  --text-lg-2: 14px;
+  --text-lg-3: 18px;
+  --text-lg-4: 20px;
+  --text-lg-5: 24px;
+  --text-lg-6: 30px;
+  --text-lg-7: 36px;
+  --text-lg-8: 48px;
+}
+
+@media (min-width: 768px) {
+  :root {
+    --text-sm-8: 36px;
+    --text-md-8: 48px;
+    --text-lg-8: 60px;
+  }
+}
+
+.size-sm {
+  --space-1: var(--space-sm-1);
+  --space-2: var(--space-sm-2);
+  --space-3: var(--space-sm-3);
+  --space-4: var(--space-sm-4);
+  --space-5: var(--space-sm-5);
+  --space-6: var(--space-sm-6);
+  --space-7: var(--space-sm-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-sm-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-sm-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-sm-3));
+
+  --text-1: var(--text-sm-1);
+  --text-2: var(--text-sm-2);
+  --text-3: var(--text-sm-3);
+  --text-4: var(--text-sm-4);
+  --text-5: var(--text-sm-5);
+  --text-6: var(--text-sm-6);
+  --text-7: var(--text-sm-7);
+  --text-8: var(--text-sm-8);
+}
+
+:root,
+.size-md {
+  --space-1: var(--space-md-1);
+  --space-2: var(--space-md-2);
+  --space-3: var(--space-md-3);
+  --space-4: var(--space-md-4);
+  --space-5: var(--space-md-5);
+  --space-6: var(--space-md-6);
+  --space-7: var(--space-md-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-md-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-md-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-md-3));
+
+  --text-1: var(--text-md-1);
+  --text-2: var(--text-md-2);
+  --text-3: var(--text-md-3);
+  --text-4: var(--text-md-4);
+  --text-5: var(--text-md-5);
+  --text-6: var(--text-md-6);
+  --text-7: var(--text-md-7);
+  --text-8: var(--text-md-8);
+}
+
+.size-lg {
+  --space-1: var(--space-lg-1);
+  --space-2: var(--space-lg-2);
+  --space-3: var(--space-lg-3);
+  --space-4: var(--space-lg-4);
+  --space-5: var(--space-lg-5);
+  --space-6: var(--space-lg-6);
+  --space-7: var(--space-lg-7);
+
+  --radius-1: calc(var(--border-radius, 1) * var(--space-lg-1));
+  --radius-2: calc(var(--border-radius, 1) * var(--space-lg-2));
+  --radius-3: calc(var(--border-radius, 1) * var(--space-lg-3));
+
+  --text-1: var(--text-lg-1);
+  --text-2: var(--text-lg-2);
+  --text-3: var(--text-lg-3);
+  --text-4: var(--text-lg-4);
+  --text-5: var(--text-lg-5);
+  --text-6: var(--text-lg-6);
+  --text-7: var(--text-lg-7);
+  --text-8: var(--text-lg-8);
+}

package/src/css/space.css

@@ -1,32 +1,49 @@
-.full + .full,
-.full + .box,
-.full + .masonry,
-.full + .carousel,
-.image + .full,
-.icon + .full {
+.root + .root,
+.root + .box,
+.root + .masonry,
+.root + .carousel,
+.image + .root,
+.icon + .root {
   --space-auto: var(--space-6);
 }
 
-.full + .group,
-.full + .row,
-.full + .wrap,
-.full + .button,
-.full + .price,
-.full + .switch {
+.root + .group,
+.root + .row,
+.root + .wrap,
+.root + .button,
+.root + .price,
+.root + .switch {
   --space-auto: var(--space-5);
 }
 
-.full + .heading,
-.full + .link,
-.full + .list,
-.full + .paragraph,
-.full + .text,
-.full + .tagline,
-.full + .input,
-.full + .textarea,
-.full + .select,
-.full + .badge,
-.full + .rating {
+.card
+  :is(
+    .root + .root,
+    .root + .box,
+    .root + .masonry,
+    .root + .carousel,
+    .image + .root,
+    .icon + .root,
+    .root + .group,
+    .root + .row,
+    .root + .wrap,
+    .root + .button,
+    .root + .price,
+    .root + .switch
+  ) {
+  --space-auto: var(--space-4);
+}
+
+.root + .heading,
+.root + .link,
+.root + .paragraph,
+.root + .text,
+.root + .tagline,
+.root + .input,
+.root + .textarea,
+.root + .select,
+.root + .badge,
+.root + .rating {
   --space-auto: var(--space-4);
 }
 
@@ -37,7 +54,7 @@
   --space-auto: var(--space-3);
 }
 
-.full + .label,
+.root + .label,
 .label + .input,
 .label + .textarea,
 .label + .select,
@@ -50,11 +67,15 @@
   --space-auto: var(--space-1);
 }
 
-.image + .full,
-.icon + .full {
+.image + .root,
+.icon + .root {
   --space-auto: var(--space-6);
 }
 
+.link + .heading {
+  --space-auto: var(--space-5);
+}
+
 /* // .button:not(.variant-link) + .button:not(.variant-link) {
 //   margin-top: var(--space-3);
 // }

package/src/css/styles.css

@@ -1,8 +1,10 @@
+@import url(https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900);
+
 :root,
-.full {
+.root {
   --transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
 
-  --font-family: 'Raleway', sans-serif;
+  --font-family: 'Inter', sans-serif;
   --font-weight: 400;
 
   --text-heading-font-family: var(--font-family);

package/src/env.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="astro/client" />
-/// <reference path="../.astro/types.d.ts" />
+/// <reference path="../.astro/types.d.ts" />