@graupl/graupl 1.0.0-alpha.0

package/scss/_defaults.scss

@@ -0,0 +1,40 @@
+// 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.
+
+// Prefix for custom properties and other naming conventions.
+$prefix: "graupl" !default;
+
+// Layout properties.
+$content-max-width: 96ch !default;
+
+// Spacing properties.
+$gap: 1rem !default;
+
+// Size properties.
+$interactive-min-width: 44px !default;
+$interactive-min-height: 44px !default;
+
+// Border properties.
+$border-radius: 0.125rem !default;
+$border-width: 2px !default;
+$border-style: solid !default;
+
+// Font properties.
+$font-size-base: 1rem !default;
+$font-size: (
+  small: $font-size-base * 0.875,
+  default: $font-size-base,
+  large: $font-size-base * 1.125,
+) !default;
+
+// Transition properties.
+$transition-duration-base: 100;
+$transition-duration: (
+  fast: #{$transition-duration-base * 1.5}ms,
+  default: #{$transition-duration-base * 2.5}ms,
+  slow: #{$transition-duration-base * 3}ms,
+) !default;
+$transition-timing-function: ease !default;

package/scss/_variables.scss

@@ -0,0 +1,63 @@
+// Variables referencing custom properties.
+
+@use "defaults";
+@use "sass:map";
+
+// Layout properties.
+$content-max-width: var(
+  --#{defaults.$prefix}-content-max-width,
+  defaults.$content-max-width
+);
+
+// Spacing properties.
+$gap: var(--#{defaults.$prefix}-gap, defaults.$gap);
+
+// Border properties.
+$border-radius: var(
+  --#{defaults.$prefix}-border-radius,
+  defaults.$border-radius
+);
+$border-width: var(--#{defaults.$prefix}-border-width, defaults.$border-width);
+$border-style: var(--#{defaults.$prefix}-border-style, defaults.$border-style);
+
+// Font properties.
+$font-size: (
+  small:
+    var(
+      --#{defaults.$prefix}-font-size-small,
+      map.get(defaults.$font-size, small)
+    ),
+  default:
+    var(
+      --#{defaults.$prefix}-font-size-default,
+      map.get(defaults.$font-size, default)
+    ),
+  large:
+    var(
+      --#{defaults.$prefix}-font-size-large,
+      map.get(defaults.$font-size, large)
+    ),
+);
+
+// Transition properties.
+$transition-duration: (
+  fast:
+    var(
+      --#{defaults.$prefix}-transition-duration-fast,
+      map.get(defaults.$transition-duration, fast)
+    ),
+  default:
+    var(
+      --#{defaults.$prefix}-transition-duration-default,
+      map.get(defaults.$transition-duration, default)
+    ),
+  slow:
+    var(
+      --#{defaults.$prefix}-transition-duration-slow,
+      map.get(defaults.$transition-duration, slow)
+    ),
+);
+$transition-timing-function: var(
+  --#{defaults.$prefix}-transition-timing-function,
+  defaults.$transition-timing-function
+);

package/scss/base/_index.scss

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

package/scss/base/link/_defaults.scss

@@ -0,0 +1,9 @@
+// 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";
+
+$link-text-decoration: underline;

package/scss/base/link/_index.scss

@@ -0,0 +1,33 @@
+// 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

@@ -0,0 +1,31 @@
+// 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

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

package/scss/component/_index.scss

@@ -0,0 +1,3 @@
+// Graupl components.
+
+@forward "button";

package/scss/component/button/_defaults.scss

@@ -0,0 +1,10 @@
+// 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

@@ -0,0 +1,67 @@
+// 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};
+    }
+  }
+}

package/scss/component/button/_variables.scss

@@ -0,0 +1,102 @@
+// 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

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

package/scss/graupl.scss

@@ -0,0 +1,9 @@
+// Graupl Components.
+//
+// Forwards all components for easy development.
+
+@forward "base";
+@forward "layout";
+@forward "component";
+@forward "state";
+@forward "theme";

package/scss/layout/_index.scss

@@ -0,0 +1,4 @@
+// Graupl layouts.
+
+@forward "container";
+@forward "columns";

package/scss/layout/columns/_defaults.scss

@@ -0,0 +1,13 @@
+// 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";
+
+$columns-max-width: 1fr !default;
+$columns-count: 3 !default;
+$columns-disable-width: 48ch !default;
+$columns-min-count: 1 !default;
+$columns-max-count: 4 !default;

package/scss/layout/columns/_index.scss

@@ -0,0 +1,30 @@
+// 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};
+    }
+  }
+}

package/scss/layout/columns/_variables.scss

@@ -0,0 +1,20 @@
+// 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}
+);

package/scss/layout/columns/columns.scss

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

package/scss/layout/container/_defaults.scss

@@ -0,0 +1,10 @@
+// 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";
+
+$container-breakout-width: 15ch !default;
+$container-feature-width: 20ch !default;

package/scss/layout/container/_index.scss

@@ -0,0 +1,50 @@
+// 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

@@ -0,0 +1,26 @@
+// 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

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

package/scss/mixins/_layer.scss

@@ -0,0 +1,14 @@
+// Layer mixins.
+//
+// These should be used to define the layers of your components to ensure that
+// they are output in the correct order in the final compiled CSS.
+
+@use "../defaults" as base;
+
+@mixin layer($layer) {
+  @at-root {
+    @layer #{base.$prefix}.#{$layer} {
+      @content;
+    }
+  }
+}

package/scss/mixins/_media-queries.scss

@@ -0,0 +1,15 @@
+// Media query mixins.
+
+// A media query for targetting users who have not requested reduced motion.
+@mixin animation-on {
+  @media (prefers-reduced-motion: no-preference) {
+    @content;
+  }
+}
+
+// A media query for targetting users who have requested reduced motion.
+@mixin animation-off {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}

package/scss/state/_index.scss

@@ -0,0 +1,3 @@
+// Graupl states.
+
+@forward "focus";

package/scss/state/focus/_defaults.scss

@@ -0,0 +1,10 @@
+// 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";
+
+$focus-outline-style: dotted !default;
+$focus-box-shadow-style: inset !default;

package/scss/state/focus/_index.scss

@@ -0,0 +1,13 @@
+// Focus state styles.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+
+@include layer(state) {
+  *:focus-visible {
+    border-color: transparent;
+    outline: $focus-outline-width $focus-outline-style $focus-outline-color;
+    outline-offset: $focus-outline-offset;
+    box-shadow: $focus-box-shadow;
+  }
+}

package/scss/state/focus/_variables.scss

@@ -0,0 +1,36 @@
+// Variables referencing custom properties.
+
+@use "../../variables" as base;
+@use "../../theme/variables" as theme;
+@use "defaults";
+
+$focus-width: var(--#{defaults.$prefix}-focus-width, #{base.$border-width});
+$focus-outline-color: var(
+  --#{defaults.$prefix}-focus-outline-color,
+  #{theme.$theme-active--dark}
+);
+$focus-outline-width: var(
+  --#{defaults.$prefix}-focus-outline-width,
+  #{$focus-width}
+);
+$focus-outline-style: var(
+  --#{defaults.$prefix}-focus-outline-style,
+  #{defaults.$focus-outline-style}
+);
+$focus-outline-offset: var(
+  --#{defaults.$prefix}-focus-outline-offset,
+  calc(-1 * #{$focus-outline-width})
+);
+$focus-box-shadow-color: var(
+  --#{defaults.$prefix}-focus-box-shadow-color,
+  #{theme.$theme-active--light}
+);
+$focus-box-shadow-style: var(
+  --#{defaults.$prefix}-focus-box-shadow-style,
+  #{defaults.$focus-box-shadow-style}
+);
+$focus-box-shadow: var(
+  --#{defaults.$prefix}-focus-box-shadow,
+  #{$focus-width $focus-width} 0 0 #{$focus-box-shadow-style} #{$focus-box-shadow-color},
+  0 0 0 #{$focus-width} #{$focus-box-shadow-style} #{$focus-box-shadow-color}
+);

package/scss/state/focus/focus.scss

@@ -0,0 +1,3 @@
+// Focus state styles.
+
+@forward "index";