@splendidlabz/styles 2.3.2 → 3.0.0

package/src/tools/pigment.css

@@ -0,0 +1,205 @@
+/*********************
+ * Pigment *
+ * Previously known as the Fill system"
+ *********************/
+
+/* Use splendidFills plugin to generate colours with the Fill system.
+Usage with the Fill System
+--bg-color
+--bg-hover-color
+--bg-focus-color
+--bg-active-color
+--bg-selected-color
+--text-color
+--text-hover-color
+--text-focus-color
+--text-active-color
+--text-selected-color
+--border-color
+--border-hover-color
+--border-focus-color
+--border-active-color
+--border-selected-color
+--stroke-color
+--stroke-hover-color
+--stroke-focus-color
+--stroke-active-color
+*/
+
+/*********************
+ * Pigment scaffolds *
+ *********************/
+@utility pigment-scaffold {
+  & {
+    @apply border-scaffold;
+    @apply transition-scaffold;
+    border-color: var(--border-color, currentcolor);
+    color: var(--text-color, currentcolor);
+    background-color: var(--bg-color);
+  }
+}
+
+@utility pigment-svg-scaffold {
+  & {
+    :where(svg path) {
+      @apply transition-scaffold;
+      fill: var(--fill-color, var(--text-color));
+      stroke: var(
+        --stroke-color,
+        var(--text-color)
+      ); /* Fallback to text color */
+    }
+  }
+}
+
+@utility pigment-hover-scaffold {
+  &:hover {
+    border-color: var(--border-hover-color, var(--border-color));
+    color: var(--text-hover-color, var(--text-color));
+    background-color: var(--bg-hover-color, var(--bg-color));
+  }
+}
+
+@utility pigment-hover-svg-scaffold {
+  &:hover {
+    :where(svg path) {
+      fill: var(
+        --fill-hover-color,
+        var(--text-hover-color, var(--fill-color, var(--text-color)))
+      );
+      stroke: var(
+        --stroke-hover-color,
+        var(--text-hover-color, var(--stroke-color, var(--text-color)))
+      );
+    }
+  }
+}
+
+@utility pigment-focus-scaffold {
+  &:focus {
+    border-color: var(
+      --border-focus-color,
+      var(--border-hover-color, var(--border-color))
+    );
+    color: var(--text-focus-color, var(--text-hover-color, var(--text-color)));
+    background-color: var(
+      --bg-focus-color,
+      var(--bg-hover-color, var(--bg-color))
+    );
+  }
+}
+
+@utility pigment-focus-svg-scaffold {
+  &:focus {
+    :where(svg path) {
+      fill: var(
+        --fill-focus-color,
+        var(
+          --text-focus-color,
+          var(
+            --fill-hover-color,
+            var(--text-hover-color, var(--fill-color, var(--text-color)))
+          )
+        )
+      );
+      stroke: var(
+        --stroke-focus-color,
+        var(
+          --text-focus-color,
+          var(
+            --stroke-hover-color,
+            var(--text-hover-color, var(--stroke-color, var(--text-color)))
+          )
+        )
+      );
+    }
+  }
+}
+
+@utility pigment-active-scaffold {
+  &:active {
+    border-color: var(--border-active-color, var(--border-color));
+    color: var(--text-active-color, var(--text-color));
+    background-color: var(--bg-active-color, var(--bg-color));
+  }
+}
+
+@utility pigment-active-svg-scaffold {
+  &:active {
+    :where(svg path) {
+      fill: var(
+        --fill-active-color,
+        var(--text-active-color, var(--fill-color, var(--text-color)))
+      );
+      stroke: var(
+        --stroke-active-color,
+        var(--text-active-color, var(--stroke-color, var(--text-color)))
+      );
+    }
+  }
+}
+
+@utility pigment-selected-scaffold {
+  &.selected,
+  &.checked,
+  &[aria-current],
+  &[aria-selected],
+  &[aria-expanded='true'] {
+    border-color: var(--border-selected-color, var(--border-color));
+    color: var(--text-selected-color, var(--text-color));
+    background-color: var(--bg-selected-color, var(--bg-color));
+  }
+}
+
+@utility pigment-selected-svg-scaffold {
+  &.selected,
+  &.checked,
+  &[aria-current],
+  &[aria-selected],
+  &[aria-expanded='true'] {
+    :where(svg path) {
+      fill: var(--fill-selected-color, var(--fill-color, var(--text-color)));
+      stroke: var(
+        --stroke-selected-color,
+        var(--stroke-color, var(--text-color))
+      );
+    }
+  }
+}
+
+/*********************
+ * Actual pigment utility *
+ *********************/
+
+@utility pigment {
+  @apply pigment-scaffold;
+  @apply pigment-hover-scaffold;
+  @apply pigment-focus-scaffold;
+  @apply pigment-active-scaffold;
+  @apply pigment-selected-scaffold;
+}
+
+@utility pigment-with-svg {
+  @apply pigment-scaffold;
+  @apply pigment-svg-scaffold;
+  @apply pigment-hover-scaffold;
+  @apply pigment-hover-svg-scaffold;
+  @apply pigment-focus-scaffold;
+  @apply pigment-focus-svg-scaffold;
+  @apply pigment-active-scaffold;
+  @apply pigment-active-svg-scaffold;
+  @apply pigment-selected-scaffold;
+  @apply pigment-selected-svg-scaffold;
+}
+
+/*********************
+ * Additional utilities *
+ *********************/
+@utility pigment-outline {
+  --bg-color: transparent;
+}
+
+@utility pigment-ghost {
+  --bg-color: transparent;
+  --border-color: transparent;
+}

package/src/tools/transitions.css

@@ -0,0 +1,14 @@
+/*********************
+ * Default transition properties and values *
+ *********************/
+@utility transition-scaffold {
+  & {
+    --transition-values: var(--transition-duration) var(--transition-delay)
+      var(--transition-easing);
+    --transition-props:
+      backdrop-filter, background, border, color, fill, filter, gap, opacity,
+      opacity, outline, stroke, transform;
+    transition: var(--transition-values);
+    transition-property: var(--transition-props);
+  }
+}

package/src/type/font-position.css

@@ -0,0 +1,18 @@
+/* --font-position-adjust: 1;
+--padding-block: 1em; */
+
+@utility font-position {
+  & {
+    > .font-position-adjust,
+    &:not(:has(.font-position-adjust)) {
+      padding-block: calc(
+          var(--padding-block, 1em) * var(--font-position-adjust, 1)
+        )
+        calc(var(--padding-block, 1em) / var(--font-position-adjust, 1));
+    }
+
+    &:has(.font-position-adjust) {
+      padding-block: 0;
+    }
+  }
+}

package/src/type/index.css

@@ -0,0 +1 @@
+@import './font-position.css';

package/src/variables/breakpoints.css

@@ -0,0 +1,103 @@
+@theme {
+  /* Breakpoints */
+  --breakpoint-bp1: 100px;
+  --breakpoint-bp1.5: 150px;
+  --breakpoint-bp2: 200px;
+  --breakpoint-bp2.5: 250px;
+  --breakpoint-bp3: 300px;
+  --breakpoint-bp3.5: 350px;
+  --breakpoint-bp4: 400px;
+  --breakpoint-bp4.5: 450px;
+  --breakpoint-bp5: 500px;
+  --breakpoint-bp5.5: 550px;
+  --breakpoint-bp6: 600px;
+  --breakpoint-bp6.5: 650px;
+  --breakpoint-bp7: 700px;
+  --breakpoint-bp7.5: 750px;
+  --breakpoint-bp8: 800px;
+  --breakpoint-bp8.5: 850px;
+  --breakpoint-bp9: 900px;
+  --breakpoint-bp9.5: 950px;
+  --breakpoint-bp10: 1000px;
+  --breakpoint-bp10.5: 1050px;
+  --breakpoint-bp11: 1100px;
+  --breakpoint-bp11.5: 1150px;
+  --breakpoint-bp12: 1200px;
+  --breakpoint-bp12.5: 1250px;
+  --breakpoint-bp13: 1300px;
+  --breakpoint-bp13.5: 1350px;
+  --breakpoint-bp14: 1400px;
+  --breakpoint-bp14.5: 1450px;
+  --breakpoint-bp15: 1500px;
+  --breakpoint-bp15.5: 1550px;
+  --breakpoint-bp16: 1600px;
+  --breakpoint-bp16.5: 1650px;
+  --breakpoint-bp17: 1700px;
+  --breakpoint-bp17.5: 1750px;
+  --breakpoint-bp18: 1800px;
+  --breakpoint-bp18.5: 1850px;
+  --breakpoint-bp19: 1900px;
+  --breakpoint-bp19.5: 1950px;
+  --breakpoint-bp20: 2000px;
+  --breakpoint-bp20.5: 2050px;
+  --breakpoint-bp21: 2100px;
+  --breakpoint-bp21.5: 2150px;
+  --breakpoint-bp22: 2200px;
+  --breakpoint-bp22.5: 2250px;
+  --breakpoint-bp23: 2300px;
+  --breakpoint-bp23.5: 2350px;
+  --breakpoint-bp24: 2400px;
+  --breakpoint-bp24.5: 2450px;
+  --breakpoint-bp25: 2500px;
+
+  /* Container */
+  --container-bp1: 100px;
+  --container-bp1.5: 150px;
+  --container-bp2: 200px;
+  --container-bp2.5: 250px;
+  --container-bp3: 300px;
+  --container-bp3.5: 350px;
+  --container-bp4: 400px;
+  --container-bp4.5: 450px;
+  --container-bp5: 500px;
+  --container-bp5.5: 550px;
+  --container-bp6: 600px;
+  --container-bp6.5: 650px;
+  --container-bp7: 700px;
+  --container-bp7.5: 750px;
+  --container-bp8: 800px;
+  --container-bp8.5: 850px;
+  --container-bp9: 900px;
+  --container-bp9.5: 950px;
+  --container-bp10: 1000px;
+  --container-bp10.5: 1050px;
+  --container-bp11: 1100px;
+  --container-bp11.5: 1150px;
+  --container-bp12: 1200px;
+  --container-bp12.5: 1250px;
+  --container-bp13: 1300px;
+  --container-bp13.5: 1350px;
+  --container-bp14: 1400px;
+  --container-bp14.5: 1450px;
+  --container-bp15: 1500px;
+  --container-bp15.5: 1550px;
+  --container-bp16: 1600px;
+  --container-bp16.5: 1650px;
+  --container-bp17: 1700px;
+  --container-bp17.5: 1750px;
+  --container-bp18: 1800px;
+  --container-bp18.5: 1850px;
+  --container-bp19: 1900px;
+  --container-bp19.5: 1950px;
+  --container-bp20: 2000px;
+  --container-bp20.5: 2050px;
+  --container-bp21: 2100px;
+  --container-bp21.5: 2150px;
+  --container-bp22: 2200px;
+  --container-bp22.5: 2250px;
+  --container-bp23: 2300px;
+  --container-bp23.5: 2350px;
+  --container-bp24: 2400px;
+  --container-bp24.5: 2450px;
+  --container-bp25: 2500px;
+}

package/src/variables/font.css

@@ -0,0 +1,88 @@
+/* Font Size *
+ *********************/
+
+/* prettier-ignore */
+@theme {
+  --text-1: 0.625rem;   /* 10px */
+  --text-2: 0.6875rem;  /* 11px */
+  --text-3: 0.75rem;    /* 12px */
+  --text-4: 0.8125rem;  /* 13px */
+  --text-5: 0.875rem;   /* 14px */
+  --text-6: 0.9375rem;  /* 15px */
+  --text-7: 1rem;       /* 16px */
+  --text-8: 1.125rem;   /* 18px */
+  --text-9: 1.3125rem;  /* 21px */
+  --text-10: 1.5rem;    /* 24px */
+  --text-11: 1.75rem;   /* 28px */
+  --text-12: 2rem;      /* 32px */
+  --text-13: 2.25rem;   /* 36px */
+  --text-14: 2.625rem;  /* 42px */
+  --text-15: 3rem;      /* 48px */
+  --text-16: 3.375rem;  /* 54px */
+  --text-17: 3.75rem;   /* 60px */
+  --text-18: 4.5rem;    /* 72px */
+  --text-19: 5.25rem;   /* 84px */
+  --text-20: 6rem;      /* 96px */
+  --text-21: 6.75rem;   /* 108px */
+  --text-22: 7.5rem;    /* 120px */
+  --text-1e: 0.625em;   /* 10px */
+  --text-2e: 0.6875em;  /* 11px */
+  --text-3e: 0.75em;    /* 12px */
+  --text-4e: 0.8125em;  /* 13px */
+  --text-5e: 0.875em;   /* 14px */
+  --text-6e: 0.9375em;  /* 15px */
+  --text-7e: 1em;       /* 16px */
+  --text-8e: 1.125em;   /* 18px */
+  --text-9e: 1.3125em;  /* 21px */
+  --text-10e: 1.5em;    /* 24px */
+  --text-11e: 1.75em;   /* 28px */
+  --text-12e: 2em;      /* 32px */
+  --text-13e: 2.25em;   /* 36px */
+  --text-14e: 2.625em;  /* 42px */
+  --text-15e: 3em;      /* 48px */
+  --text-16e: 3.375em;  /* 54px */
+  --text-17e: 3.75em;   /* 60px */
+  --text-18e: 4.5em;    /* 72px */
+  --text-19e: 5.25em;   /* 84px */
+  --text-20e: 6em;      /* 96px */
+  --text-21e: 6.75em;   /* 108px */
+  --text-22e: 7.5em;    /* 120px */
+}
+
+/* Font weights *
+ *********************/
+@theme {
+  --font-weight-100: 100;
+  --font-weight-125: 125;
+  --font-weight-150: 150;
+  --font-weight-175: 175;
+  --font-weight-200: 200;
+  --font-weight-225: 225;
+  --font-weight-250: 250;
+  --font-weight-275: 275;
+  --font-weight-300: 300;
+  --font-weight-325: 325;
+  --font-weight-350: 350;
+  --font-weight-375: 375;
+  --font-weight-400: 400;
+  --font-weight-425: 425;
+  --font-weight-450: 450;
+  --font-weight-475: 475;
+  --font-weight-500: 500;
+  --font-weight-525: 525;
+  --font-weight-550: 550;
+  --font-weight-575: 575;
+  --font-weight-600: 600;
+  --font-weight-625: 625;
+  --font-weight-650: 650;
+  --font-weight-675: 675;
+  --font-weight-700: 700;
+  --font-weight-725: 725;
+  --font-weight-750: 750;
+  --font-weight-775: 775;
+  --font-weight-800: 800;
+  --font-weight-825: 825;
+  --font-weight-850: 850;
+  --font-weight-875: 875;
+  --font-weight-900: 900;
+}

package/src/variables/index.css

@@ -0,0 +1,4 @@
+@import './variables.css';
+@import './breakpoints.css';
+@import './font.css';
+@import './radius.css';

package/src/variables/radius.css

@@ -0,0 +1,54 @@
+/* Border radius *
+ *********************/
+@theme {
+  --radius-0.5: 0.125rem;
+  --radius-1: 0.25rem;
+  --radius-1.5: 0.375rem;
+  --radius-2: 0.5rem;
+  --radius-2.5: 0.625rem;
+  --radius-3: 0.75rem;
+  --radius-3.5: 0.875rem;
+  --radius-4: 1rem;
+  --radius-4.5: 1.125rem;
+  --radius-5: 1.25rem;
+  --radius-5.5: 1.375rem;
+  --radius-6: 1.5rem;
+  --radius-6.5: 1.625rem;
+  --radius-7: 1.75rem;
+  --radius-7.5: 1.875rem;
+  --radius-8: 2rem;
+  --radius-8.5: 2.125rem;
+  --radius-9: 2.25rem;
+  --radius-9.5: 2.375rem;
+  --radius-10: 2.5rem;
+  --radius-10.5: 2.625rem;
+  --radius-11: 2.75rem;
+  --radius-11.5: 2.875rem;
+  --radius-12: 3rem;
+  --radius-12.5: 3.125rem;
+  --radius-13: 3.25rem;
+  --radius-13.5: 3.375rem;
+  --radius-14: 3.5rem;
+  --radius-14.5: 3.625rem;
+  --radius-15: 3.75rem;
+  --radius-15.5: 3.875rem;
+  --radius-16: 4rem;
+  --radius-16.5: 4.125rem;
+  --radius-17: 4.25rem;
+  --radius-17.5: 4.375rem;
+  --radius-18: 4.5rem;
+  --radius-18.5: 4.625rem;
+  --radius-19: 4.75rem;
+  --radius-19.5: 4.875rem;
+  --radius-20: 5rem;
+  --radius-0.5r: calc(var(--radius) * 0.5);
+  --radius-1r: var(--radius);
+  --radius-1.5r: calc(var(--radius) * 1.5);
+  --radius-2r: calc(var(--radius) * 2);
+  --radius-2.5r: calc(var(--radius) * 2.5);
+  --radius-3r: calc(var(--radius) * 3);
+  --radius-3.5r: calc(var(--radius) * 3.5);
+  --radius-4r: calc(var(--radius) * 4);
+  --radius-4.5r: calc(var(--radius) * 4.5);
+  --radius-5r: calc(var(--radius) * 5);
+}

package/src/variables/variables.css

@@ -0,0 +1,34 @@
+@theme {
+  /* Typography */
+  --bg-color: white;
+  --text-color: black;
+  --leading: 1.5;
+
+  /* Padding */
+  --padding: 1rem;
+
+  /* Borders */
+  --border-width: 1px;
+  --border-style: solid;
+  --border-color: currentcolor;
+  --radius: 0.5rem;
+
+  /* Outline */
+  --outline-width: 3px;
+  --outline-style: solid;
+  --outline-color: oklch(61.52% 0.178 257.59deg);
+  --outline-offset: 0px;
+
+  /* Transition */
+  --transition-duration: 200ms;
+  --transition-delay: 0ms;
+  --transition-easing: ease-in-out;
+
+  /* Forms */
+  --input-font: inherit;
+
+  /* Tables */
+  --header-row-border-top: 1px solid transparent;
+  --header-row-border-bottom: 1px solid var(--border-color);
+  --alt-row-color: transparent;
+}

package/dist/UI/Codepen.css

@@ -1,13 +0,0 @@
-@layer components {
-  .Codepen {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    margin: 1em 0;
-    padding: 1em;
-    border: 2px solid;
-  }
-}
-
-/*# sourceMappingURL=Codepen.css.map */

package/dist/UI/Codepen.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/UI/Codepen.scss"],"names":[],"mappings":"AAAA;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA","file":"Codepen.css"}

package/dist/UI/Tweet.css

@@ -1,7 +0,0 @@
-@layer components {
-  .Tweet .twitter-tweet {
-    margin: 0 !important;
-  }
-}
-
-/*# sourceMappingURL=Tweet.css.map */

package/dist/UI/Tweet.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/UI/Tweet.scss"],"names":[],"mappings":"AAAA;EACE;IACE","file":"Tweet.css"}

package/dist/UI/Youtube.css

@@ -1,13 +0,0 @@
-@layer components {
-  .Youtube div,
-  .Vimeo div {
-    aspect-ratio: 16/9;
-  }
-  .Youtube iframe,
-  .Vimeo iframe {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-/*# sourceMappingURL=Youtube.css.map */

package/dist/UI/Youtube.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/UI/Youtube.scss"],"names":[],"mappings":"AAAA;EAGI;AAAA;IACE;;EAGF;AAAA;IACE;IACA","file":"Youtube.css"}

package/dist/styles.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/Variables/_Globals.scss","../src/Base/_Accessibility.scss","../src/Base/_Base.scss","../src/Base/_Focus.scss","../src/_Fill.scss","../src/Forms/_FormBase.scss","../src/Forms/_Button.scss","../src/Forms/_TextField.scss","../src/Forms/_Textarea.scss","../src/Forms/_FormControls.scss","../src/Forms/_Select.scss","../src/Forms/_Combobox.scss","../src/Forms/_Switch.scss","../src/Components/_Box.scss","../src/Components/_Scrollbars.scss","../src/Components/_BrowserFrame.scss","../src/Components/_List.scss","../src/Components/_Prose.scss","../src/Components/_Figure.scss","../src/Components/_SimpleSVG.scss","../src/UI/_Accordion.scss","../src/UI/_Breadcrumbs.scss","../src/UI/_Callout.scss","../src/UI/_Drawer.scss","../src/UI/_Dropdown.scss","../src/UI/_FancyList.scss","../src/UI/_PerspectiveHover.scss","../src/UI/_Popover.scss","../src/UI/_Resizer.scss","../src/UI/_Spotlight.scss","../src/UI/_Status.scss","../src/UI/_Tabs.scss","../src/UI/_Textwall.scss","../src/UI/Youtube.scss","../src/UI/Codepen.scss","../src/UI/Tweet.scss","../src/UI/_CQChecker.scss","../src/Effects/_Elevation.scss","../src/Effects/_SpecialShadows.scss","../src/Effects/_Glow.scss","../src/Effects/_Gradients.scss","../src/Effects/_Shadows.scss","../src/Effects/_Text-Outline.scss","../src/Effects/_Backdrop.scss","../src/_Animations.scss","../src/Utilities/_Shapes.scss","../src/Typography/_WritingMode.scss"],"names":[],"mappings":"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IACE;;EAIF;AAAA;IACE;;EAIF;AAAA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;AAAA;IACE;;;AC3FN;EAEI;IACE;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAEA;IACE;IAIA;;EAQJ;IACE;IAIA;IAIA;;EAKA;IACE;IAUA;;EAcN;AAAA;IAEE;IACA;;EAEA;AAAA;IACE;IACA;IACA;;EAOF;AAAA;IACE;IACA;;EAOF;AAAA;IACE;IAKA;;EAOF;AAAA;IACE;IACA;;;ACvGR;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AACA;EACE;;AAIJ;EACE;;;AAMF;EACE;;;AAMJ;AAAA;EAEE;EACA;EACA;;AAEA;EANF;AAAA;IAOI;;;AAGF;AAAA;EACE;EACA;;;AAIJ;EACE;;;AC/CF;EAgBE;IACE;IACA;IACA;IAEA;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAIF;IACE;AAAA;AAAA;AAAA;AAAA;AAAA;IAOA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;;AC9DN;EACE;IAEE;IACA;IAEA;;;ACLJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;IACA;;;AAGF;EAVF;IAWI;IACA;;;;AAIJ;EACE;IACE;IACA;IACA;AAEA;;EACA;IACE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;;ACrBN;EAEI;IACE;IACA;IACA;IACA;IAEA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;;EAIJ;IACE;IAEA;IACA;;EAEA;IAEE;;EAGF;IACE;IACA;;EAQF;IACE;;EAGF;IACE;;EAGF;IACE;;;ACpFR;EAEE;IACE;IACA;;EAEA;IACE;;EAIJ;IACE;;EAGF;IACE;;;AChBJ;EAEE;IACE;IACA;IACA;IACA;;EAGA;AAAA;IAEE;;EAGF;AAAA;IAIE;;EAGF;IACE;;EAIF;AAAA;IAEE;IACA;;EAEA;AAAA;IACE;;EAGF;AAAA;IACE;;EAGF;AAAA;IACE;;EAGF;AAAA;IACE;;EAGF;AAAA;IACE;;EAIJ;IACE;;EAGF;IACE;IACA;IACA;;EAIF;IACE;IACA;;EAEA;IACE;;EAIJ;IACE;;EAGF;IACE;IACA;;;AC9EN;EACE;EACA;EACA;;;ACHF;EAEI;IACE;IACA;IACA;;;ACLN;EAEI;IACE;IACA;;EAGF;IACE;;EAIJ;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGA;IAEE;;EAIJ;IACE;;;AC9BJ;EACE;IACE;IACA;;EAEA;AAAA;IAEE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;;;ACfR;EACE;IACE;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;;AC3BN;EACE;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAKF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;;ACzBJ;EACE;IACE;;EAEA;IACE;IACA;;EAGF;IACE;;;ACVN;EACE;IACE;IACA;IAEA;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAKA;AAAA;IAEE;IACA;;EAMN;IACE;;;AC3BJ;EACE;IACE;IACA;IACA;IACA;IACA;;;ACNJ;EAEE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;ACtBJ;EACE;IACE;IACA;;EAEA;IACE;;EAIJ;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAOA;IAAkB;;EAElB;IAAiB;;EAMjB;AAAA;IAAW;;EAEX;AAAA;IAAkB;;EAElB;AAAA;IAAiB;;;ACxCrB;EACE;IACE;IACA;IACA;IACA;IAEA;IACA;;EAGA;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAKA;IACA;IACA;IACA;;EAGF;IACE;;;ACtCN;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAIJ;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;;AC9BJ;EACE;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAOF;IACE;IACA;IACA;;EAIF;IACE;IACA;;EAEA;IACE;;EAIJ;IACE;;EAMF;IACE;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAKF;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;;AC3GJ;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;AAIF;EACE;;;ACnBJ;EAGI;AAAA;IACE;;EAGF;AAAA;IACE;IACA;;;ACTN;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;ACRJ;EACE;IACE;;;ACFJ;EACE;EACA;EACA;EAEA;;AAEA;EACE;;;AAIJ;EACE;EACA;;;ACZF;EAEI;IACE;ICsCJ,YAXW;;ED5BT;IACE;ICsCJ,YAXW;;ED5BT;IACE;ICsCJ,YAXW;;ED5BT;IACE;ICsCJ,YAXW;;ED5BT;IACE;ICsCJ,YAXW;;ED5BT;IACE;ICsCJ,YAXW;;EDrBX;IACE;;EAGF;IACE,YACE;;EAIJ;IACE,YACE;;EAIJ;IACE,YACE;;EAIJ;IACE,YACE;;EAIJ;IACE;;EAGF;IACE,YACE;;EAKJ;IACE,YACE;;EAKJ;IACE,YACE;;EAKJ;IACE,YACE;;EAKJ;IACE,YACE;;EAKJ;IACE,YACE;;EAKJ;IACE,YACE;;;AEtFN;EACE;IACE;IACA;IACA;IACA;IACA;IAEA;;EAEA;IACE;IACA;;EAGF;IAEE;;EAGF;IACE;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;;EAIJ;IACE;IACA;;EAGF;IACE;IACA;;;AC/CJ;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EAEE;IACE;;EAKA;IANF;MAOI;;;EAOJ;IACE;;EAMF;IACE;;EAUF;IACE;;EAKA;IANF;MAOI;;;EAOJ;IAGE;;EAMF;IAGE;;EAMF;IACE;IACA;IACA;IAEA;;;ACtEJ;EACE;IACE;AAAA;IAEA;;EAGF;IACE;AAAA;IAEA;;EAGF;IACE;AAAA;IAGA;;;AChCJ;EAEI;IADF;MAGI;MACA;MACA;;;EAMJ;IACE;;EAEA;IAHF;MAII;MACA;MACA;MAEA;MACA;;;;ACrBN;EACE;EACA;;;ACFF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;;;ACfJ;EACE;IACE;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;;ACjBJ;EAEE;IACE;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;EAIF;IACE;IACA;;EAGF;AAAA;IAEE;IACA;;EAGF;IACE;IACA","file":"styles.css"}

package/src/Base/_Base.scss

@@ -1,57 +0,0 @@
-// ========================
-// HTML and Body
-// We don't set a default typography size here because it's better for the user to set it in the root of the project.
-// ========================
-@layer components {
-  html {
-    font-family: system-ui, sans-serif;
-    line-height: var(--leading, 1.5);
-    font-variant-ligatures: common-ligatures;
-  }
-
-  body {
-    color: var(--text-color);
-    background-color: var(--bg-color);
-    text-rendering: optimizelegibility;
-  }
-
-  // ========================
-  // Nicer Headers
-  // ========================
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-variant-numeric: oldstyle-nums proportional-nums;
-  }
-
-  // ========================
-  // Default form and buttons decorations
-  // ========================
-  fieldset {
-    border: none;
-  }
-
-  a {
-    color: var(--text-color, currentcolor);
-    text-decoration: none;
-
-    &:visited {
-      color: var(--text-visited-color, var(--text-color, currentcolor));
-    }
-
-    &:hover {
-      color: var(--text-hover-color);
-    }
-
-    &:focus {
-      color: var(--text-focus-color, var(--text-hover-color));
-    }
-
-    &:active {
-      color: var(--text-active-color, var(--text-hover-color));
-    }
-  }
-}

package/src/Base/_Focus.scss

@@ -1,38 +0,0 @@
-// Might have to rename this file to Outlines instead
-// Setup Outlines for all elements for transitions and animations. If we do this, we don't have to specify each focusable element (which can be a lot).
-
-@layer components {
-  * {
-    outline: var(--outline-width) var(--outline-style) transparent;
-    outline-offset: var(--outline-offset);
-  }
-
-  // Styling Focus Visible States
-  a,
-  button,
-  :where([tabindex]:not([tabindex='-1'])) {
-    &:focus-visible {
-      outline-color: var(--outline-color);
-    }
-  }
-
-  .Focus-within {
-    &:focus-within {
-      outline: var(--outline-width) var(--outline-style) transparent;
-      outline-offset: var(--outline-offset);
-    }
-
-    *:focus-visible {
-      outline-color: transparent;
-    }
-  }
-
-  // TODO: Blog about this.
-  // These three properties used to preserve outlines, because overflow cuts off outlines. For scrollable elements.
-  // Content-box is necessary. If not, box will cut on the right side.
-  .Preserve-outlines {
-    box-sizing: content-box;
-    margin: calc(var(--outline-width) * -1);
-    padding: calc(var(--outline-width));
-  }
-}