@graupl/graupl 1.0.0-alpha.0 → 1.0.0-alpha.10

package/src/scss/utilities/spacing/_index.scss

@@ -0,0 +1,64 @@
+// Graupl spacing utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+@use "../../variables" as root-variables;
+@use "../../defaults" as root-defaults;
+
+@include layer(utilities) {
+  // For each spacing property, create a utility class.
+  @each $name, $property in defaults.$spacing-properties {
+    @each $key, $value in root-variables.$spacers {
+      .#{$name}-#{$key} {
+        // If we're dealing with gap, column-gap, or row-gap inside of .columns, we should update
+        // the columns-column-gap property instead of the raw property.
+        @if $name == "g" {
+          &.columns {
+            --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
+                $value
+              )};
+            --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
+                $value
+              )};
+          }
+
+          &:not(.columns) {
+            @each $prop in $property {
+              #{$prop}: important.insert($value);
+            }
+          }
+        } @else if $name == "cg" {
+          &.columns {
+            --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
+                $value
+              )};
+          }
+
+          &:not(.columns) {
+            @each $prop in $property {
+              #{$prop}: important.insert($value);
+            }
+          }
+        } @else if $name == "rg" {
+          &.columns {
+            --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
+                $value
+              )};
+          }
+
+          &:not(.columns) {
+            @each $prop in $property {
+              #{$prop}: important.insert($value);
+            }
+          }
+        } @else {
+          @each $prop in $property {
+            #{$prop}: important.insert($value);
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/utilities/spacing/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/typography/_defaults.scss

@@ -0,0 +1,25 @@
+// Default values for Graupl.
+//
+// Generally, these should not be used directly when styling components.
+// They are mainly used to provide default fallbacks for custom properties
+// which can be found in the `variables.scss` file.
+
+@use "sass:map";
+
+// Text size properties.
+$text-class-prefix: "text-" !default;
+
+// Font weight properties.
+$font-weight-class-prefix: "font-" !default;
+
+// Font style properties.
+$font-style-class-prefix: "font-" !default;
+$base-font-style-properties: (
+  normal: normal,
+  italic: italic,
+);
+$custom-font-style-properties: () !default;
+$font-style-properties: map.merge(
+  $base-font-style-properties,
+  $custom-font-style-properties
+);

package/src/scss/utilities/typography/_index.scss

@@ -0,0 +1,95 @@
+// Graupl typography utilities.
+
+@use "variables" as *;
+@use "defaults";
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+@use "../../theme/typography/variables" as typography;
+
+@include layer(utilities) {
+  // For each font size property, create a utility class.
+  @each $size, $value in typography.$font-sizes {
+    .#{defaults.$text-class-prefix}#{$size} {
+      font-size: important.insert($value);
+    }
+  }
+
+  // Create utility classes for each type of text style in Graupl.
+  // These will apply not only the font size, but also the margin, font weight, and line height.
+  // This will allow for a more consistent and maintainable typography system.
+  .#{defaults.$text-class-prefix}paragraph {
+    margin: important.insert(typography.$paragraph-margin);
+    font-size: important.insert(typography.$paragraph-font-size);
+    font-weight: important.insert(typography.$paragraph-font-weight);
+    line-height: important.insert(typography.$paragraph-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}small {
+    margin: important.insert(typography.$small-margin);
+    font-size: important.insert(typography.$small-font-size);
+    font-weight: important.insert(typography.$small-font-weight);
+    line-height: important.insert(typography.$small-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}h1 {
+    margin: important.insert(typography.$h1-margin);
+    font-family: important.insert(typography.$h1-font-family);
+    font-size: important.insert(typography.$h1-font-size);
+    font-weight: important.insert(typography.$h1-font-weight);
+    line-height: important.insert(typography.$h1-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}h2 {
+    margin: important.insert(typography.$h2-margin);
+    font-family: important.insert(typography.$h2-font-family);
+    font-size: important.insert(typography.$h2-font-size);
+    font-weight: important.insert(typography.$h2-font-weight);
+    line-height: important.insert(typography.$h2-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}h3 {
+    margin: important.insert(typography.$h3-margin);
+    font-family: important.insert(typography.$h3-font-family);
+    font-size: important.insert(typography.$h3-font-size);
+    font-weight: important.insert(typography.$h3-font-weight);
+    line-height: important.insert(typography.$h3-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}h4 {
+    margin: important.insert(typography.$h4-margin);
+    font-family: important.insert(typography.$h4-font-family);
+    font-size: important.insert(typography.$h4-font-size);
+    font-weight: important.insert(typography.$h4-font-weight);
+    line-height: important.insert(typography.$h4-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}h5 {
+    margin: important.insert(typography.$h5-margin);
+    font-family: important.insert(typography.$h5-font-family);
+    font-size: important.insert(typography.$h5-font-size);
+    font-weight: important.insert(typography.$h5-font-weight);
+    line-height: important.insert(typography.$h5-line-height);
+  }
+
+  .#{defaults.$text-class-prefix}h6 {
+    margin: important.insert(typography.$h6-margin);
+    font-family: important.insert(typography.$h6-font-family);
+    font-size: important.insert(typography.$h6-font-size);
+    font-weight: important.insert(typography.$h6-font-weight);
+    line-height: important.insert(typography.$h6-line-height);
+  }
+
+  // For each font weight property, create a utility class.
+  @each $size, $value in typography.$font-weights {
+    .#{defaults.$font-weight-class-prefix}#{$size} {
+      font-weight: important.insert($value);
+    }
+  }
+
+  // For each font style property, create a utility class.
+  @each $size, $value in defaults.$font-style-properties {
+    .#{defaults.$font-style-class-prefix}#{$size} {
+      font-style: important.insert($value);
+    }
+  }
+}

package/src/scss/utilities/typography/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/visibility/_defaults.scss

@@ -0,0 +1,20 @@
+// Default values for Graupl.
+//
+// Generally, these should not be used directly when styling components.
+// They are mainly used to provide default fallbacks for custom properties
+// which can be found in the `variables.scss` file.
+
+@use "sass:map";
+
+// Visibility properties.
+$visibility-class-prefix: "visibility-" !default;
+$base-visibility-properties: (
+  visible: visible,
+  hidden: hidden,
+  collapse: collapse,
+);
+$custom-visibility-properties: () !default;
+$visibility-properties: map.merge(
+  $base-visibility-properties,
+  $custom-visibility-properties
+);

package/src/scss/utilities/visibility/_index.scss

@@ -0,0 +1,15 @@
+// Graupl visibility utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each visibility property, create a utility class.
+  @each $name, $property in defaults.$visibility-properties {
+    .#{defaults.$visibility-class-prefix}#{$name} {
+      visibility: important.insert($property);
+    }
+  }
+}

package/src/scss/utilities/visibility/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/stylelint.config.js

@@ -8,6 +8,8 @@ const config = {
   rules: {
     "prettier/prettier": true,
     "scss/comment-no-empty": null,
+    "selector-max-compound-selectors": 4,
+    "selector-no-qualifying-type": null,
   },
 };
 

package/dist/base/link/link.css

@@ -1,26 +0,0 @@
-@layer graupl.base{
-  a{
-    -webkit-text-decoration:var(--graupl-link-text-decoration, underline);
-            text-decoration:var(--graupl-link-text-decoration, underline);
-    text-decoration-thickness:var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 2px));
-  }
-}
-@layer graupl.theme{
-  a{
-    color:var(--graupl-link-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
-  }
-  a:hover{
-    color:var(--graupl-link-hover-color, var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%)))));
-  }
-  a:active{
-    color:var(--graupl-link-active-color, var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%)))));
-  }
-  a:visited{
-    color:var(--graupl-link-visited-color, var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
-  }
-  a:visited:hover{
-    color:var(--graupl-link-hover-color, var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%)))));
-  }
-}
-
-/*# sourceMappingURL=link.css.map */

package/dist/base/link/link.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/base/link/_index.scss","../../../scss/base/link/_variables.scss","link.css"],"names":[],"mappings":"AASI;ECHF;IACE,qEAAA;YAAA,6DAAA;IACA,uGCG6B;ECN/B;AACF;AHGI;ECIF;IACE,uJCCS;ECLX;EFME;IACE,mKCEa;ECNjB;EFOE;IACE,oKCEc;ECPlB;EFQE;IACE,+JCEe;ECRnB;EFQI;IACE,mKCTW;ECGjB;AACF","file":"link.css"}

package/dist/component/button/button.css

@@ -1,55 +0,0 @@
-@layer graupl.component{
-  .button{
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    min-width:var(--graupl-button-min-width, 44px);
-    min-height:var(--graupl-button-min-height, 44px);
-    padding:var(--graupl-button-padding, var(--graupl-button-padding-y, calc(var(--graupl-gap, 1rem) / 2)) var(--graupl-button-padding-x, var(--graupl-gap, 1rem)));
-    transition:var(--graupl-button-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), border-color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));
-    border-width:var(--graupl-button-border-width, var(--graupl-border-width, 2px));
-    border-style:var(--graupl-botton-border-style, var(--graupl-border-style, solid));
-    border-radius:var(--graupl-button-border-radius, var(--graupl-border-radius, 0.125rem));
-    font-size:var(--graupl-button-font-size, var(--graupl-font-size-default, 1rem));
-    cursor:pointer;
-  }
-  .button:hover{
-    transform:var(--graupl-button-hover-transform, none);
-  }
-  .button:active{
-    transform:var(--graupl-button-active-transform, scale(0.95));
-  }
-}
-@layer graupl.theme{
-  .button{
-    border-color:var(--graupl-button-border-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    background:var(--graupl-button-background, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
-    color:var(--graupl-button-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-  }
-  .button:hover{
-    border-color:var(--graupl-button-hover-border-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    background:var(--graupl-button-hover-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    color:var(--graupl-button-hover-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
-  }
-  .button:active{
-    border-color:var(--graupl-button-active-border-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    background:var(--graupl-button-active-background, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    color:var(--graupl-button-active-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
-  }
-  .button.primary{
-    --graupl-button-hover-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-    --graupl-button-active-background:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-    --graupl-button-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-    --graupl-button-hover-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-    --graupl-button-active-border-color:var(--graupl-theme-active--primary, var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%))));
-  }
-  .button.secondary{
-    --graupl-button-hover-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
-    --graupl-button-active-background:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
-    --graupl-button-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
-    --graupl-button-hover-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
-    --graupl-button-active-border-color:var(--graupl-theme-active--secondary, var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%))));
-  }
-}
-
-/*# sourceMappingURL=button.css.map */

package/dist/component/button/button.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/component/button/_index.scss","../../../scss/component/button/_variables.scss","button.css"],"names":[],"mappings":"AASI;ECDF;IACE,YAAA;IACA,kBAAA;IACA,sBAAA;IACA,8CCJe;IDKf,gDCDgB;IDEhB,+JCOa;IDNb,0cCcgB;IDbhB,+EC4DkB;ID3DlB,iFC+DkB;ID9DlB,uFCkEmB;IDjEnB,+ECMe;IDLf,cAAA;EELF;EFOE;IACE,oDCemB;ECpBvB;EFQE;IACE,4DCeoB;ECrBxB;AACF;AHbI;ECwBF;IACE,kKCwDkB;IDvDlB,gKCagB;IDZhB,oJC0BW;EClCb;EFUE;IACE,wKCuDsB;IDtDtB,oKCYoB;IDXpB,4JCyBe;ECjCnB;EFWE;IACE,yKCqDuB;IDpDvB,qKCUqB;IDTrB,6JCuBgB;EChCpB;EFYE;IACE,wJAAA;IACA,yJAAA;IACA,oJAAA;IACA,0JAAA;IACA,2JAAA;EEVJ;EFaE;IACE,8JAAA;IACA,+JAAA;IACA,0JAAA;IACA,gKAAA;IACA,iKAAA;EEXJ;AACF","file":"button.css"}

package/dist/layout/columns/columns.css

@@ -1,26 +0,0 @@
-@layer graupl.layout{
-  .columns{
-    display:grid;
-    grid-template-columns:var(--graupl-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem)) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));
-    gap:var(--graupl-columns-gap, var(--graupl-gap, 1rem));
-  }
-  .columns-1{
-    --graupl-columns-count:1;
-  }
-  .columns-2{
-    --graupl-columns-count:2;
-  }
-  .columns-3{
-    --graupl-columns-count:3;
-  }
-  .columns-4{
-    --graupl-columns-count:4;
-  }
-  @media screen and (max-width: 48ch){
-    .columns{
-      --graupl-columns-min-width:1fr;
-    }
-  }
-}
-
-/*# sourceMappingURL=columns.css.map */

package/dist/layout/columns/columns.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/columns/_index.scss","../../../scss/layout/columns/_variables.scss","columns.css"],"names":[],"mappings":"AASI;ECDF;IACE,YAAA;IACA,wTAAA;IAIA,sDCTU;ECAZ;EFaE;IACE,wBAAA;EEXJ;EFUE;IACE,wBAAA;EERJ;EFOE;IACE,wBAAA;EELJ;EFIE;IACE,wBAAA;EEFJ;EFOA;IACE;MACE,8BAAA;IELF;EACF;AACF","file":"columns.css"}

package/dist/layout/container/container.css

@@ -1,38 +0,0 @@
-@layer graupl.layout{
-  .container,
-  .container > .full-width{
-    --graupl-container-full-width:minmax(var(--graupl-container-gap, var(--graupl-gap, 1rem)), 1fr);
-    --graupl-container-content:min(
-      var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)),
-      calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem)) * 2)
-    );
-    --graupl-container-breakout:minmax(
-      0,
-      var(--graupl-container-breakout-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))
-    );
-    --graupl-container-feature:minmax(
-      0,
-      var(--graupl-container-feature-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2))
-    );
-    display:grid;
-    grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end];
-  }
-  .container > :not(.breakout, .full-width, .feature),
-  .container > .full-width > :not(.breakout, .full-width, .feature){
-    grid-column:content;
-  }
-  .container .breakout,
-  .container > .full-width .breakout{
-    grid-column:breakout;
-  }
-  .container .feature,
-  .container > .full-width .feature{
-    grid-column:feature;
-  }
-  .container .full-width,
-  .container > .full-width .full-width{
-    grid-column:full-width;
-  }
-}
-
-/*# sourceMappingURL=container.css.map */

package/dist/layout/container/container.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/container/_index.scss","container.css"],"names":[],"mappings":"AASI;ECFF;;IAEE,+FAAA;IACA;;;KAAA;IAIA;;;KAAA;IAIA;;;KAAA;IAKA,YAAA;IACA,6XACE;ECPJ;EDeE;;IACE,mBAAA;ECZJ;EDeE;;IACE,oBAAA;ECZJ;EDeE;;IACE,mBAAA;ECZJ;EDeE;;IACE,sBAAA;ECZJ;AACF","file":"container.css"}

package/dist/state/focus/focus.css

@@ -1,10 +0,0 @@
-@layer graupl.state{
-  *:focus-visible{
-    border-color:transparent;
-    outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
-    outline-offset:var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))));
-    box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
-  }
-}
-
-/*# sourceMappingURL=focus.css.map */

package/dist/state/focus/focus.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/state/focus/_index.scss","../../../scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI;ECHF;IACE,wBAAA;IACA,qSAAA;IACA,2JCUmB;IDTnB,onBCqBe;ECxBjB;AACF","file":"focus.css"}

package/dist/theme/theme.css

@@ -1,26 +0,0 @@
-@layer graupl.theme{
-  :root{
-    background:var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))));
-    color:var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%))));
-    font-family:var(--graupl-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);
-    font-size:var(--graupl-font-size, clamp(0.85rem, 0.8rem + 0.5vw, 1.25rem));
-  }
-  .dark-mode{
-    --graupl-theme-active--primary:var(--graupl-theme-dark--primary, var(--graupl-primary--300, hsl(219, 80%, 65%)));
-    --graupl-theme-active--primary--dark:var(--graupl-theme-dark--primary--dark, var(--graupl-primary--200, hsl(219, 90%, 80%)));
-    --graupl-theme-active--primary--light:var(--graupl-theme-dark--primary--light, var(--graupl-primary--400, hsl(219, 75%, 55%)));
-    --graupl-theme-active--secondary:var(--graupl-theme-dark--secondary, var(--graupl-secondary--300, hsl(340, 65%, 65%)));
-    --graupl-theme-active--light:var(--graupl-theme-dark--light, var(--graupl-primary--900, hsl(219, 100%, 10%)));
-    --graupl-theme-active--dark:var(--graupl-theme-dark--dark, var(--graupl-primary--100, hsl(219, 100%, 95%)));
-  }
-  .light-mode{
-    --graupl-theme-active--primary:var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)));
-    --graupl-theme-active--primary--dark:var(--graupl-theme-light--primary--dark, var(--graupl-primary--800, hsl(219, 90%, 20%)));
-    --graupl-theme-active--primary--light:var(--graupl-theme-light--primary--light, var(--graupl-primary--600, hsl(219, 75%, 45%)));
-    --graupl-theme-active--secondary:var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%)));
-    --graupl-theme-active--light:var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)));
-    --graupl-theme-active--dark:var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)));
-  }
-}
-
-/*# sourceMappingURL=theme.css.map */

package/dist/theme/theme.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../scss/mixins/_layer.scss","../../scss/theme/_index.scss","../../scss/theme/_variables.scss","theme.css"],"names":[],"mappings":"AASI;ECDF;IACE,+HCoJkB;IDnJlB,wHC+JiB;ID9JjB,wICoKU;IDnKV,0ECoKQ;ECzKV;EFSA;IACE,gHAAA;IACA,4HAAA;IACA,8HAAA;IACA,sHAAA;IACA,6GAAA;IACA,2GAAA;EEPF;EFWA;IACE,iHAAA;IACA,6HAAA;IACA,+HAAA;IACA,uHAAA;IACA,8GAAA;IACA,4GAAA;EETF;AACF","file":"theme.css"}

package/scss/base/_index.scss

@@ -1,3 +0,0 @@
-// Graupl base.
-
-@forward "link";

package/scss/base/link/_variables.scss

@@ -1,31 +0,0 @@
-// Variables referencing custom properties.
-
-@use "../../variables" as base;
-@use "../../theme/variables" as theme;
-@use "defaults";
-
-// Link properties.
-$link-text-decoration: var(
-  --#{defaults.$prefix}-link-text-decoration,
-  #{defaults.$link-text-decoration}
-);
-$link-text-decoration-thickness: var(
-  --#{defaults.$prefix}-link-text-decoration-thickness,
-  #{base.$border-width}
-);
-$link-color: var(
-  --#{defaults.$prefix}-link-color,
-  #{theme.$theme-active--primary}
-);
-$link-hover-color: var(
-  --#{defaults.$prefix}-link-hover-color,
-  #{theme.$theme-active--secondary}
-);
-$link-active-color: var(
-  --#{defaults.$prefix}-link-active-color,
-  #{theme.$theme-active--secondary}
-);
-$link-visited-color: var(
-  --#{defaults.$prefix}-link-visited-color,
-  #{theme.$theme-active--primary}
-);

package/scss/base/link/link.scss

@@ -1,3 +0,0 @@
-// Link base styles.
-
-@forward "index";

package/scss/component/button/_variables.scss

@@ -1,102 +0,0 @@
-// Variables referencing custom properties.
-
-@use "../../variables" as base;
-@use "../../theme/variables" as theme;
-@use "defaults";
-@use "sass:map";
-
-// Button properties.
-$button-min-width: var(
-  --#{defaults.$prefix}-button-min-width,
-  #{defaults.$interactive-min-width}
-);
-$button-min-height: var(
-  --#{defaults.$prefix}-button-min-height,
-  #{defaults.$interactive-min-height}
-);
-$button-padding-x: var(--#{defaults.$prefix}-button-padding-x, #{base.$gap});
-$button-padding-y: var(
-  --#{defaults.$prefix}-button-padding-y,
-  calc(#{base.$gap} / 2)
-);
-$button-padding: var(
-  --#{defaults.$prefix}-button-padding,
-  #{$button-padding-y} #{$button-padding-x}
-);
-$button-font-size: var(
-  --#{defaults.$prefix}-button-font-size,
-  #{map.get(base.$font-size, default)}
-);
-$button-transition: var(
-  --#{defaults.$prefix}-button-transition,
-  background #{map.get(base.$transition-duration, fast)} #{base.$transition-timing-function},
-  color #{map.get(base.$transition-duration, fast)} #{base.$transition-timing-function},
-  border-color #{map.get(base.$transition-duration, fast)} #{base.$transition-timing-function},
-  transform #{map.get(base.$transition-duration, fast)} #{base.$transition-timing-function}
-);
-
-// Transform properties.
-$button-hover-transform: var(
-  --#{defaults.$prefix}-button-hover-transform,
-  #{defaults.$button-hover-transform}
-);
-$button-active-transform: var(
-  --#{defaults.$prefix}-button-active-transform,
-  #{defaults.$button-active-transform}
-);
-
-// Background properties.
-$button-background: var(
-  --#{defaults.$prefix}-button-background,
-  #{theme.$theme-active--light}
-);
-$button-hover-background: var(
-  --#{defaults.$prefix}-button-hover-background,
-  #{theme.$theme-active--dark}
-);
-$button-active-background: var(
-  --#{defaults.$prefix}-button-active-background,
-  #{theme.$theme-active--dark}
-);
-
-// Text properties.
-$button-color: var(
-  --#{defaults.$prefix}-button-color,
-  #{theme.$theme-active--dark}
-);
-$button-hover-color: var(
-  --#{defaults.$prefix}-button-hover-color,
-  #{theme.$theme-active--light}
-);
-$button-active-color: var(
-  --#{defaults.$prefix}-button-active-color,
-  #{theme.$theme-active--light}
-);
-
-// Border properties.
-$button-border-width: var(
-  --#{defaults.$prefix}-button-border-width,
-  #{base.$border-width}
-);
-$button-border-style: var(
-  --#{defaults.$prefix}-botton-border-style,
-  #{base.$border-style}
-);
-$button-border-radius: var(
-  --#{defaults.$prefix}-button-border-radius,
-  #{base.$border-radius}
-);
-
-// Border colour properties.
-$button-border-color: var(
-  --#{defaults.$prefix}-button-border-color,
-  #{theme.$theme-active--dark}
-);
-$button-hover-border-color: var(
-  --#{defaults.$prefix}-button-hover-border-color,
-  #{theme.$theme-active--dark}
-);
-$button-active-border-color: var(
-  --#{defaults.$prefix}-button-active-border-color,
-  #{theme.$theme-active--dark}
-);

package/scss/component/button/button.scss

@@ -1,3 +0,0 @@
-// Graupl Button Component.
-
-@forward "index";

package/scss/layout/columns/_index.scss

@@ -1,30 +0,0 @@
-// Graupl Columns layout.
-
-@use "variables" as *;
-@use "defaults";
-@use "../../variables" as base;
-@use "../../mixins/layer" as *;
-
-@include layer(layout) {
-  .columns {
-    display: grid;
-    grid-template-columns: var(
-      --#{defaults.$prefix}-columns,
-      repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
-    );
-    gap: $columns-gap;
-  }
-
-  @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
-    .columns-#{$i} {
-      --#{defaults.$prefix}-columns-count: #{$i};
-    }
-  }
-
-  // Disable columns on small screens to avoid horizontal bleeding.
-  @media screen and (max-width: #{defaults.$columns-disable-width}) {
-    .columns {
-      --#{defaults.$prefix}-columns-min-width: #{defaults.$columns-max-width};
-    }
-  }
-}