@graupl/graupl 1.0.0-alpha.1 → 1.0.0-alpha.11

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;EFWE;IACE,8CAAA;EETJ;EFcE;IACE,wBAAA;EEZJ;EFeE;IACE,uBAAA;EEbJ;EFQE;IACE,wBAAA;EENJ;EFSE;IACE,uBAAA;EEPJ;EFEE;IACE,wBAAA;EEAJ;EFGE;IACE,uBAAA;EEDJ;EFJE;IACE,wBAAA;EEMJ;EFHE;IACE,uBAAA;EEKJ;EFAA;IACE;MACE,8BAAA;IEEF;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,42 +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(235, 20%, 65%)));
-    --graupl-theme-active--secondary--dark:var(--graupl-theme-dark--secondary--dark, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
-    --graupl-theme-active--secondary--light:var(--graupl-theme-dark--secondary--light, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
-    --graupl-theme-active--tertiary:var(--graupl-theme-dark--tertiary, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
-    --graupl-theme-active--tertiary--dark:var(--graupl-theme-dark--tertiary--dark, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
-    --graupl-theme-active--tertiary--light:var(--graupl-theme-dark--tertiary--light, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
-    --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%)));
-    --graupl-theme-active--shade--light:var(--graupl-theme-dark--shade--light, var(--graupl-primary--800, hsl(219, 90%, 20%)));
-    --graupl-theme-active--shade--dark:var(--graupl-theme-dark--shade--dark, var(--graupl-primary--700, hsl(219, 80%, 35%)));
-    color-scheme:dark;
-  }
-  .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(235, 20%, 35%)));
-    --graupl-theme-active--secondary--dark:var(--graupl-theme-light--secondary--dark, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
-    --graupl-theme-active--secondary--light:var(--graupl-theme-light--secondary--light, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
-    --graupl-theme-active--tertiary:var(--graupl-theme-light--tertiary, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
-    --graupl-theme-active--tertiary--dark:var(--graupl-theme-light--tertiary--dark, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
-    --graupl-theme-active--tertiary--light:var(--graupl-theme-light--tertiary--light, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
-    --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%)));
-    --graupl-theme-active--shade--light:var(--graupl-theme-light--shade--light, var(--graupl-primary--200, hsl(219, 90%, 80%)));
-    --graupl-theme-active--shade--dark:var(--graupl-theme-light--shade--dark, var(--graupl-primary--300, hsl(219, 80%, 65%)));
-    color-scheme:light;
-  }
-}
-
-/*# 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,+HCgPkB;ID/OlB,wHC6PiB;ID5PjB,wIC4RU;ID3RV,0EC4RQ;ECjSV;EFSA;IACE,gHAAA;IACA,4HAAA;IACA,8HAAA;IACA,sHAAA;IACA,kIAAA;IACA,oIAAA;IACA,mHAAA;IACA,+HAAA;IACA,iIAAA;IACA,6GAAA;IACA,2GAAA;IACA,0HAAA;IACA,wHAAA;IAEA,iBAAA;EERF;EFYA;IACE,iHAAA;IACA,6HAAA;IACA,+HAAA;IACA,uHAAA;IACA,mIAAA;IACA,qIAAA;IACA,oHAAA;IACA,gIAAA;IACA,kIAAA;IACA,8GAAA;IACA,4GAAA;IACA,2HAAA;IACA,yHAAA;IAEA,kBAAA;EEXF;AACF","file":"theme.css"}

package/scss/base/form/_variables.scss

@@ -1,133 +0,0 @@
-// Variables referencing custom properties.
-
-@use "../../variables" as base;
-@use "../../theme/variables" as theme;
-@use "defaults";
-@use "sass:map";
-
-$input-padding-x: var(--#{defaults.$prefix}-input-padding-x, #{base.$gap});
-$input-padding-y: var(
-  --#{defaults.$prefix}-input-padding-y,
-  calc(#{base.$gap} / 2)
-);
-$input-padding: var(
-  --#{defaults.$prefix}-input-padding,
-  #{$input-padding-y} #{$input-padding-x}
-);
-$input-font-size: var(
-  --#{defaults.$prefix}-input-font-size,
-  #{map.get(base.$font-size, default)}
-);
-$label-font-size: var(
-  --#{defaults.$prefix}-label-font-size,
-  #{$input-font-size}
-);
-$fieldset-direction: var(
-  --#{defaults.$prefix}-fieldset-direction,
-  #{defaults.$fieldset-direction}
-);
-$fieldset-gap: var(--#{defaults.$prefix}-fieldset-gap, calc(#{base.$gap} / 4));
-$fieldset-padding-x: var(
-  --#{defaults.$prefix}-fieldset-padding-x,
-  #{$input-padding-x}
-);
-$fieldset-padding-y: var(
-  --#{defaults.$prefix}-fieldset-padding-y,
-  #{$input-padding-y}
-);
-$fieldset-padding: var(
-  --#{defaults.$prefix}-fieldset-padding,
-  #{$fieldset-padding-y} #{$fieldset-padding-x}
-);
-$fieldset-font-size: var(
-  --#{defaults.$prefix}-fieldset-font-size,
-  #{$input-font-size}
-);
-
-// Background properties.
-$input-background: var(
-  --#{defaults.$prefix}-input-background,
-  #{theme.$theme-active--light}
-);
-$fieldset-background: var(
-  --#{defaults.$prefix}-fieldset-background,
-  #{$input-background}
-);
-
-// Text properties.
-$input-color: var(
-  --#{defaults.$prefix}-input-color,
-  #{theme.$theme-active--dark}
-);
-$input-placeholder-color: var(
-  --#{defaults.$prefix}-input-placeholder-color,
-  #{theme.$theme-active--secondary--light}
-);
-$label-color: var(--#{defaults.$prefix}-label-color, #{$input-color});
-$fieldset-color: var(--#{defaults.$prefix}-fieldset-color, #{$input-color});
-$input-disabled-color: var(
-  --#{defaults.$prefix}-input-disabled-color,
-  #{theme.$theme-active--secondary--light}
-);
-$input-disabled-placeholder-color: var(
-  --#{defaults.$prefix}-input-disabled-placeholder-color,
-  #{$input-disabled-color}
-);
-$label-disabled-color: var(
-  --#{defaults.$prefix}-label-disabled-color,
-  #{$input-disabled-color}
-);
-$fieldset-disabled-color: var(
-  --#{defaults.$prefix}-fieldset-disabled-color,
-  #{$input-disabled-color}
-);
-
-// Border properties.
-$input-border-width: var(
-  --#{defaults.$prefix}-input-border-width,
-  #{base.$border-width}
-);
-$input-border-style: var(
-  --#{defaults.$prefix}-botton-border-style,
-  #{base.$border-style}
-);
-$input-border-radius: var(
-  --#{defaults.$prefix}-input-border-radius,
-  #{base.$border-radius}
-);
-$fieldset-border-width: var(
-  --#{defaults.$prefix}-fieldset-border-width,
-  #{$input-border-width}
-);
-$fieldset-border-style: var(
-  --#{defaults.$prefix}-fieldset-border-style,
-  #{$input-border-style}
-);
-$fieldset-border-radius: var(
-  --#{defaults.$prefix}-fieldset-border-radius,
-  #{$input-border-radius}
-);
-
-// Border colour properties.
-$input-border-color: var(
-  --#{defaults.$prefix}-input-border-color,
-  #{theme.$theme-active--secondary}
-);
-$input-disabled-border-color: var(
-  --#{defaults.$prefix}-input-disabled-border-color,
-  #{theme.$theme-active--shade--light}
-);
-$fieldset-border-color: var(
-  --#{defaults.$prefix}-fieldset-border-color,
-  #{$input-border-color}
-);
-$fieldset-disabled-border-color: var(
-  --#{defaults.$prefix}-fieldset-disabled-border-color,
-  #{$input-disabled-border-color}
-);
-
-// Accent color properties.
-$input-accent-color: var(
-  --#{defaults.$prefix}-input-accent-color,
-  #{theme.$theme-active--primary}
-);

package/scss/base/form/form.scss

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

package/scss/base/link/_index.scss

@@ -1,33 +0,0 @@
-// Link base styles.
-
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-
-@include layer(base) {
-  a {
-    text-decoration: $link-text-decoration;
-    text-decoration-thickness: $link-text-decoration-thickness;
-  }
-}
-
-@include layer(theme) {
-  a {
-    color: $link-color;
-
-    &:hover {
-      color: $link-hover-color;
-    }
-
-    &:active {
-      color: $link-active-color;
-    }
-
-    &:visited {
-      color: $link-visited-color;
-
-      &:hover {
-        color: $link-hover-color;
-      }
-    }
-  }
-}

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--tertiary}
-);
-$link-active-color: var(
-  --#{defaults.$prefix}-link-active-color,
-  #{theme.$theme-active--tertiary}
-);
-$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/_defaults.scss

@@ -1,10 +0,0 @@
-// 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.
-
-@forward "../../defaults";
-
-$button-hover-transform: none !default;
-$button-active-transform: scale(0.95) !default;

package/scss/component/button/_index.scss

@@ -1,75 +0,0 @@
-// Graupl Button Component.
-
-@use "defaults";
-@use "../../theme/variables" as theme;
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-
-@include layer(component) {
-  .button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: $button-min-width;
-    min-height: $button-min-height;
-    padding: $button-padding;
-    transition: $button-transition;
-    border-width: $button-border-width;
-    border-style: $button-border-style;
-    border-radius: $button-border-radius;
-    font-size: $button-font-size;
-    cursor: pointer;
-
-    &:hover {
-      transform: $button-hover-transform;
-    }
-
-    &:active {
-      transform: $button-active-transform;
-    }
-  }
-}
-
-@include layer(theme) {
-  .button {
-    border-color: $button-border-color;
-    background: $button-background;
-    color: $button-color;
-
-    &:hover {
-      border-color: $button-hover-border-color;
-      background: $button-hover-background;
-      color: $button-hover-color;
-    }
-
-    &:active {
-      border-color: $button-active-border-color;
-      background: $button-active-background;
-      color: $button-active-color;
-    }
-
-    &.primary {
-      --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--primary};
-      --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--primary};
-      --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--primary};
-      --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--primary};
-      --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--primary};
-    }
-
-    &.secondary {
-      --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--secondary};
-      --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--secondary};
-      --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--secondary};
-      --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--secondary};
-      --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--secondary};
-    }
-
-    &.tertiary {
-      --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--tertiary};
-      --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--tertiary};
-      --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--tertiary};
-      --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--tertiary};
-      --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--tertiary};
-    }
-  }
-}

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,38 +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;
-
-    > * {
-      grid-column: span $columns-span;
-    }
-  }
-
-  @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
-    .columns-#{$i} {
-      --#{defaults.$prefix}-columns-count: #{$i};
-    }
-
-    .span-#{$i} {
-      --#{defaults.$prefix}-columns-span: #{$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};
-    }
-  }
-}

package/scss/layout/columns/_variables.scss

@@ -1,24 +0,0 @@
-// Variables referencing custom properties.
-
-@use "../../variables" as base;
-@use "defaults";
-
-$columns-gap: var(--#{defaults.$prefix}-columns-gap, #{base.$gap});
-$columns-count: var(
-  --#{defaults.$prefix}-columns-count,
-  #{defaults.$columns-count}
-);
-$columns-min-width: var(
-  --#{defaults.$prefix}-columns-min-width,
-  calc(
-    (#{base.$content-max-width} - #{$columns-gap} * (#{$columns-count} - 1)) / #{$columns-count}
-  )
-);
-$columns-max-width: var(
-  --#{defaults.$prefix}-columns-max-width,
-  #{defaults.$columns-max-width}
-);
-$columns-span: var(
-  --#{defaults.$prefix}-columns-span,
-  #{defaults.$columns-span}
-);

package/scss/layout/columns/columns.scss

@@ -1,3 +0,0 @@
-// Graupl Columns layout.
-
-@forward "index";

package/scss/layout/container/_index.scss

@@ -1,50 +0,0 @@
-// Graupl Container layout.
-
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-@use "defaults";
-
-@include layer(layout) {
-  .container,
-  .container > .full-width {
-    --#{defaults.$prefix}-container-full-width: minmax(#{$container-gap}, 1fr);
-    --#{defaults.$prefix}-container-content: min(
-      #{$container-content-max-width},
-      calc(100% - #{$container-gap} * 2)
-    );
-    --#{defaults.$prefix}-container-breakout: minmax(
-      0,
-      #{$container-breakout-width}
-    );
-    --#{defaults.$prefix}-container-feature: minmax(
-      0,
-      #{$container-feature-width}
-    );
-
-    display: grid;
-    grid-template-columns:
-      [full-width-start] var(--#{defaults.$prefix}-container-full-width)
-      [feature-start] var(--#{defaults.$prefix}-container-feature)
-      [breakout-start] var(--#{defaults.$prefix}-container-breakout)
-      [content-start] var(--#{defaults.$prefix}-container-content) [content-end]
-      var(--#{defaults.$prefix}-container-breakout) [breakout-end]
-      var(--#{defaults.$prefix}-container-feature) [feature-end]
-      var(--#{defaults.$prefix}-container-full-width) [full-width-end];
-
-    > :not(.breakout, .full-width, .feature) {
-      grid-column: content;
-    }
-
-    .breakout {
-      grid-column: breakout;
-    }
-
-    .feature {
-      grid-column: feature;
-    }
-
-    .full-width {
-      grid-column: full-width;
-    }
-  }
-}

package/scss/layout/container/_variables.scss

@@ -1,26 +0,0 @@
-// Variables referencing custom properties.
-
-@use "../../variables" as base;
-@use "defaults";
-
-$container-gap: var(--#{defaults.$prefix}-container-gap, #{base.$gap});
-$container-content-max-width: var(
-  --#{defaults.$prefix}-container-content-max-width,
-  #{base.$content-max-width}
-);
-$container-breakout-max-width: var(
-  --#{defaults.$prefix}-container-breakout-max-width,
-  calc(#{$container-content-max-width} + #{defaults.$container-breakout-width})
-);
-$container-breakout-width: var(
-  --#{defaults.$prefix}-container-breakout-width,
-  calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)
-);
-$container-feature-max-width: var(
-  --#{defaults.$prefix}-container-feature-max-width,
-  calc(#{$container-breakout-max-width} + #{defaults.$container-feature-width})
-);
-$container-feature-width: var(
-  --#{defaults.$prefix}-container-feature-width,
-  calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)
-);

package/scss/layout/container/container.scss

@@ -1,3 +0,0 @@
-// Graupl Container layout.
-
-@forward "index";