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

package/src/scss/component/button/_variables.scss

@@ -0,0 +1,132 @@
+// Variables referencing custom properties.
+
+@use "defaults";
+@use "../../variables" as root-variables;
+@use "../../defaults" as root-defaults;
+@use "../../theme/color/variables" as color;
+@use "../../theme/typography/variables" as typography;
+@use "../../functions/theme";
+@use "sass:map";
+
+// Button properties.
+$button-min-width: var(
+  --#{root-defaults.$prefix}-button-min-width,
+  #{root-defaults.$interactive-min-width}
+);
+$button-min-height: var(
+  --#{root-defaults.$prefix}-button-min-height,
+  #{root-defaults.$interactive-min-height}
+);
+$button-padding-x: var(
+  --#{root-defaults.$prefix}-button-padding-x,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$button-padding-y: var(
+  --#{root-defaults.$prefix}-button-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$button-padding: var(
+  --#{root-defaults.$prefix}-button-padding,
+  #{$button-padding-y} #{$button-padding-x}
+);
+$button-font-size: var(
+  --#{root-defaults.$prefix}-button-font-size,
+  #{map.get(typography.$font-sizes, base)}
+);
+$button-transition: var(
+  --#{root-defaults.$prefix}-button-transition,
+  background #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function},
+  color #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function},
+  transform #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function}
+);
+$button-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-button-transition-reduced-motion,
+  background #{map.get(root-variables.$transition-durations, none)} #{root-variables.$transition-timing-function},
+  color #{map.get(root-variables.$transition-durations, none)} #{root-variables.$transition-timing-function}
+);
+
+// Transform properties.
+$button-hover-transform: var(
+  --#{root-defaults.$prefix}-button-hover-transform,
+  #{defaults.$button-hover-transform}
+);
+$button-active-transform: var(
+  --#{root-defaults.$prefix}-button-active-transform,
+  #{defaults.$button-active-transform}
+);
+$button-hover-transform-reduced-motion: var(
+  --#{root-defaults.$prefix}-button-hover-transform-reduced-motion,
+  #{defaults.$button-hover-transform-reduced-motion}
+);
+$button-active-transform-reduced-motion: var(
+  --#{root-defaults.$prefix}-button-active-transform-reduced-motion,
+  #{defaults.$button-active-transform-reduced-motion}
+);
+
+// Background properties.
+$button-background: var(
+  --#{root-defaults.$prefix}-button-background,
+  #{color.$root-background}
+);
+$button-hover-background: var(
+  --#{root-defaults.$prefix}-button-hover-background,
+  #{theme.get(primary, 900)}
+);
+$button-active-background: var(
+  --#{root-defaults.$prefix}-button-active-background,
+  #{theme.get(primary, 900)}
+);
+$button-disabled-background: var(
+  --#{root-defaults.$prefix}-button-disabled-background,
+  #{color.$root-background}
+);
+
+// Text properties.
+$button-color: var(
+  --#{root-defaults.$prefix}-button-color,
+  #{theme.get(primary, 900)}
+);
+$button-hover-color: var(
+  --#{root-defaults.$prefix}-button-hover-color,
+  #{theme.get(primary, 100)}
+);
+$button-active-color: var(
+  --#{root-defaults.$prefix}-button-active-color,
+  #{theme.get(primary, 100)}
+);
+$button-disabled-color: var(
+  --#{root-defaults.$prefix}-button-disabled-color,
+  #{theme.get(primary, 200)}
+);
+
+// Border properties.
+$button-border-width: var(
+  --#{root-defaults.$prefix}-button-border-width,
+  #{root-variables.$border-width}
+);
+$button-border-style: var(
+  --#{root-defaults.$prefix}-botton-border-style,
+  #{root-variables.$border-style}
+);
+$button-border-radius: var(
+  --#{root-defaults.$prefix}-button-border-radius,
+  #{root-variables.$border-radius}
+);
+
+// Border colour properties.
+$button-border-color: var(
+  --#{root-defaults.$prefix}-button-border-color,
+  #{theme.get(primary, 900)}
+);
+$button-hover-border-color: var(
+  --#{root-defaults.$prefix}-button-hover-border-color,
+  #{theme.get(primary, 900)}
+);
+$button-active-border-color: var(
+  --#{root-defaults.$prefix}-button-active-border-color,
+  #{theme.get(primary, 900)}
+);
+$button-disabled-border-color: var(
+  --#{root-defaults.$prefix}-button-disabled-border-color,
+  #{theme.get(primary, 200)}
+);

package/src/scss/component/input-group/_defaults.scss

@@ -0,0 +1,23 @@
+// 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.
+
+// Grid names.
+$input-group-grid-label-name: label !default;
+$input-group-grid-input-name: input !default;
+$input-group-grid-help-name: help !default;
+
+// Input group properties.
+$input-group-grid-template-columns: 100% !default;
+$input-group-grid-template-rows: auto auto auto !default;
+
+// Inline input group properties.
+$input-group-inline-grid-template-columns: auto 1fr !default;
+$input-group-inline-grid-template-rows: auto auto !default;
+
+// Inner element properties.
+$input-group-label-grid-area: $input-group-grid-label-name !default;
+$input-group-input-grid-area: $input-group-grid-input-name !default;
+$input-group-help-grid-area: $input-group-grid-help-name !default;

package/src/scss/component/input-group/_index.scss

@@ -0,0 +1,45 @@
+// Graupl Input group Component.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "../../mixins/media-queries" as *;
+
+// stylelint-disable declaration-block-no-redundant-longhand-properties
+@include layer(component) {
+  .input-group {
+    display: grid;
+    grid-template-areas: $input-group-grid-template-areas;
+    grid-template-columns: $input-group-grid-template-columns;
+    grid-template-rows: $input-group-grid-template-rows;
+    align-items: center;
+    gap: $input-group-gap;
+
+    label {
+      grid-area: $input-group-label-grid-area;
+    }
+
+    input,
+    textarea,
+    select {
+      grid-area: $input-group-input-grid-area;
+    }
+
+    .help-text {
+      grid-area: $input-group-help-grid-area;
+    }
+
+    &.inline {
+      grid-template-areas: $input-group-inline-grid-template-areas;
+      grid-template-columns: $input-group-inline-grid-template-columns;
+      grid-template-rows: $input-group-inline-grid-template-rows;
+    }
+  }
+
+  @include screen(xs) {
+    .input-group.inline {
+      grid-template-areas: $input-group-grid-template-areas;
+      grid-template-columns: $input-group-grid-template-columns;
+      grid-template-rows: $input-group-grid-template-rows;
+    }
+  }
+}

package/src/scss/component/input-group/_variables.scss

@@ -0,0 +1,63 @@
+// Variables referencing custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
+@use "sass:map";
+
+// Input group properties.
+$input-group-grid-template-areas: var(
+  --#{root-defaults.$prefix}-input-group-grid-template-areas,
+  "#{defaults.$input-group-grid-label-name}"
+    "#{defaults.$input-group-grid-input-name}"
+    "#{defaults.$input-group-grid-help-name}"
+);
+$input-group-grid-template-columns: var(
+  --#{root-defaults.$prefix}-input-group-grid-template-columns,
+  #{defaults.$input-group-grid-template-columns}
+);
+$input-group-grid-template-rows: var(
+  --#{root-defaults.$prefix}-input-group-grid-template-rows,
+  #{defaults.$input-group-grid-template-rows}
+);
+$input-group-row-gap: var(
+  --#{root-defaults.$prefix}-input-group-row-gap,
+  #{map.get(root-variables.$spacers, 2)}
+);
+$input-group-column-gap: var(
+  --#{root-defaults.$prefix}-input-group-column-gap,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$input-group-gap: var(
+  --#{root-defaults.$prefix}-input-group-gap,
+  #{$input-group-row-gap} #{$input-group-column-gap}
+);
+
+// Inline input group properties.
+$input-group-inline-grid-template-areas: var(
+  --#{root-defaults.$prefix}-input-group-inline-grid-template-areas,
+  "#{defaults.$input-group-grid-label-name} #{defaults.$input-group-grid-input-name}"
+    "- #{defaults.$input-group-grid-help-name}"
+);
+$input-group-inline-grid-template-columns: var(
+  --#{root-defaults.$prefix}-input-group-inline-grid-template-columns,
+  #{defaults.$input-group-inline-grid-template-columns}
+);
+$input-group-inline-grid-template-rows: var(
+  --#{root-defaults.$prefix}-input-group-inline-grid-template-rows,
+  #{defaults.$input-group-inline-grid-template-rows}
+);
+
+// Inner element properties.
+$input-group-label-grid-area: var(
+  --#{root-defaults.$prefix}-input-group-label-grid-area,
+  #{defaults.$input-group-label-grid-area}
+);
+$input-group-input-grid-area: var(
+  --#{root-defaults.$prefix}-input-group-input-grid-area,
+  #{defaults.$input-group-input-grid-area}
+);
+$input-group-help-grid-area: var(
+  --#{root-defaults.$prefix}-input-group-help-grid-area,
+  #{defaults.$input-group-help-grid-area}
+);

package/src/scss/component/table/_defaults.scss

@@ -0,0 +1,30 @@
+// 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";
+
+// Table theme defaults.
+// This map is used to define the default colour shades for the
+// themed table components.
+//
+// e.g.
+// Primary tables will use primary--700 as the header background,
+// and primary--100 as the header text colour.
+//
+// Secondary/tertiary tables will use the same shade for their respective colours.
+$base-table-theme-map: (
+  header-background: 700,
+  header-color: 100,
+  striped-background: 200,
+  striped-color: 900,
+  hover-background: 300,
+  hover-color: 900,
+  border-color: 900,
+  highlight-background: 500,
+  highlight-color: 100,
+);
+$custom-table-theme-map: () !default;
+$table-theme-map: map.merge($base-table-theme-map, $custom-table-theme-map);

package/src/scss/component/table/_index.scss

@@ -0,0 +1,77 @@
+// Table component styles.
+
+@use "variables" as *;
+@use "defaults";
+@use "../../mixins/layer" as *;
+@use "../../defaults" as root-defaults;
+@use "../../functions/theme";
+
+@include layer(component) {
+  table {
+    @each $variant in theme.variants() {
+      &.#{$variant},
+      .#{$variant} {
+        @each $prop, $key in defaults.$table-theme-map {
+          --#{root-defaults.$prefix}-table-#{$prop}: #{theme.get(
+              $variant,
+              $key
+            )};
+        }
+      }
+    }
+
+    &.bordered {
+      border-collapse: collapse;
+      border-width: $table-border-width;
+      border-style: $table-border-style;
+      border-color: $table-border-color;
+
+      tr > * {
+        border-width: $table-cell-border-width;
+        border-style: $table-cell-border-style;
+        border-color: $table-cell-border-color;
+      }
+    }
+
+    &.striped-columns {
+      tbody tr:nth-child(odd) > * {
+        background: $table-striped-background;
+        color: $table-striped-color;
+      }
+    }
+
+    &.striped-rows {
+      tbody tr > :nth-child(odd) {
+        background: $table-striped-background;
+        color: $table-striped-color;
+      }
+    }
+
+    &.hoverable {
+      tbody tr:hover > * {
+        background: $table-hover-background;
+        color: $table-hover-color;
+      }
+    }
+
+    .highlight {
+      --#{root-defaults.$prefix}-table-cell-background: #{$table-highlight-background};
+      --#{root-defaults.$prefix}-table-cell-color: #{$table-highlight-color};
+      --#{root-defaults.$prefix}-table-header-background: #{$table-highlight-background};
+      --#{root-defaults.$prefix}-table-header-color: #{$table-highlight-color};
+      --#{root-defaults.$prefix}-table-striped-background: #{$table-highlight-background};
+      --#{root-defaults.$prefix}-table-striped-color: #{$table-highlight-color};
+    }
+  }
+
+  .responsive-table {
+    display: block;
+    width: 100%;
+    overflow: scroll hidden;
+
+    table {
+      width: 100%;
+      margin-bottom: 0;
+    }
+  }
+}

package/src/scss/component/table/_variables.scss

@@ -0,0 +1,64 @@
+// Variables referencing custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
+@use "../../functions/theme";
+
+// Table border properties.
+$table-border-width: var(
+  --#{root-defaults.$prefix}-table-border-width,
+  #{root-variables.$border-width}
+);
+$table-border-style: var(
+  --#{root-defaults.$prefix}-table-border-style,
+  #{root-variables.$border-style}
+);
+$table-border-color: var(
+  --#{root-defaults.$prefix}-table-border-color,
+  #{theme.get(primary, 900)}
+);
+
+// Table cell border properties.
+$table-cell-border-width: var(
+  --#{root-defaults.$prefix}-table-cell-border-width,
+  #{$table-border-width}
+);
+$table-cell-border-style: var(
+  --#{root-defaults.$prefix}-table-cell-border-style,
+  #{$table-border-style}
+);
+$table-cell-border-color: var(
+  --#{root-defaults.$prefix}-table-cell-border-color,
+  #{$table-border-color}
+);
+
+// Table striped properties.
+$table-striped-background: var(
+  --#{root-defaults.$prefix}-table-striped-background,
+  #{theme.get(secondary, 200)}
+);
+$table-striped-color: var(
+  --#{root-defaults.$prefix}-table-striped-color,
+  #{theme.get(secondary, 900)}
+);
+
+// Table hover properties.
+$table-hover-background: var(
+  --#{root-defaults.$prefix}-table-hover-background,
+  #{theme.get(secondary, 300)}
+);
+$table-hover-color: var(
+  --#{root-defaults.$prefix}-table-hover-color,
+  #{theme.get(secondary, 900)}
+);
+
+// Table highlight properties.
+$table-highlight-background: var(
+  --#{root-defaults.$prefix}-table-highlight-background,
+  #{theme.get(secondary, 500)}
+);
+$table-highlight-color: var(
+  --#{root-defaults.$prefix}-table-highlight-color,
+  #{theme.get(secondary, 100)}
+);

package/src/scss/functions/_important.scss

@@ -0,0 +1,11 @@
+// A function to determine if the !important flag should be added to a property.
+
+@use "../defaults";
+
+@function insert($value) {
+  @if defaults.$use-important {
+    @return #{$value !important};
+  }
+
+  @return #{$value};
+}

package/src/scss/functions/_theme.scss

@@ -0,0 +1,18 @@
+// Functions to help with getting information about the theme.
+
+@use "sass:map";
+@use "../theme/color/variables" as color;
+
+// A function to get the specific theme shades.
+@function get($color, $shade) {
+  $color-map: map.get(color.$theme-active, $color);
+  $value: map.get($color-map, $shade);
+
+  @return $value;
+}
+
+@function variants() {
+  $variants: map.keys(color.$theme-active);
+
+  @return $variants;
+}

package/{scss → src/scss}/layout/columns/_defaults.scss

@@ -4,11 +4,8 @@
 // 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;
+$columns-max-count: 6 !default;
 $columns-span: 1 !default;

package/src/scss/layout/columns/_index.scss

@@ -0,0 +1,36 @@
+// Graupl Columns layout.
+
+@use "variables" as *;
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../mixins/media-queries" as *;
+
+@include layer(layout) {
+  .columns {
+    display: grid;
+    grid-template-columns: $columns-grid-template-columns;
+    gap: $columns-row-gap $columns-column-gap;
+
+    > * {
+      grid-column: span $columns-span;
+    }
+  }
+
+  @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
+    .count-#{$i} {
+      --#{root-defaults.$prefix}-columns-count: #{$i};
+    }
+
+    .span-#{$i} {
+      --#{root-defaults.$prefix}-columns-span: #{$i};
+    }
+  }
+
+  // Disable columns on small screens to avoid horizontal bleeding.
+  @include screen(xs) {
+    .columns {
+      --#{root-defaults.$prefix}-columns-min-width: #{defaults.$columns-max-width};
+    }
+  }
+}

package/src/scss/layout/columns/_variables.scss

@@ -0,0 +1,47 @@
+// Variables referencing custom properties.
+
+@use "defaults";
+@use "../../variables" as root-variables;
+@use "../../defaults" as root-defaults;
+@use "sass:map";
+
+$columns-row-gap: var(
+  --#{root-defaults.$prefix}-columns-row-gap,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$columns-column-gap: var(
+  --#{root-defaults.$prefix}-columns-column-gap,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$columns-count: var(
+  --#{root-defaults.$prefix}-columns-count,
+  #{defaults.$columns-count}
+);
+
+// Calculate the min-width of each column based on the content-max-width and column-gap.
+// We take the maximum width of the page and subtract the gap width multiplied by the number of
+// columns minus one (to account for the gaps between columns).
+// We then divide this by the number of columns to get the min-width of each column.
+/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+$columns-min-width: var(
+  --#{root-defaults.$prefix}-columns-min-width,
+  calc(
+    (
+        #{root-variables.$content-max-width} - #{$columns-column-gap} *
+          (#{$columns-count} - 1)
+      ) / #{$columns-count}
+  )
+);
+/* stylelint-enable  scss/operator-no-newline-after */
+$columns-max-width: var(
+  --#{root-defaults.$prefix}-columns-max-width,
+  #{defaults.$columns-max-width}
+);
+$columns-grid-template-columns: var(
+  --#{root-defaults.$prefix}-columns-grid-template-columns,
+  repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
+);
+$columns-span: var(
+  --#{root-defaults.$prefix}-columns-span,
+  #{defaults.$columns-span}
+);

package/{scss → src/scss}/layout/container/_defaults.scss

@@ -4,7 +4,5 @@
 // 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/src/scss/layout/container/_index.scss

@@ -0,0 +1,36 @@
+// Graupl Container layout.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+
+@include layer(layout) {
+  .container,
+  .container > .full-width {
+    display: grid;
+    grid-template-columns:
+      [full-width-start] $container-full-width-section-width
+      [feature-start] $container-feature-section-width
+      [breakout-start] $container-breakout-section-width
+      [content-start] $container-content-section-width
+      [content-end]
+      $container-breakout-section-width [breakout-end]
+      $container-feature-section-width [feature-end]
+      $container-full-width-section-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/src/scss/layout/container/_variables.scss

@@ -0,0 +1,47 @@
+// Variables referencing custom properties.
+
+@use "defaults";
+@use "../../variables" as root-variables;
+@use "../../defaults" as root-defaults;
+@use "sass:map";
+
+$container-gap: var(
+  --#{root-defaults.$prefix}-container-gap,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$container-content-max-width: var(
+  --#{root-defaults.$prefix}-container-content-max-width,
+  #{root-variables.$content-max-width}
+);
+$container-breakout-max-width: var(
+  --#{root-defaults.$prefix}-container-breakout-max-width,
+  calc(#{$container-content-max-width} + #{defaults.$container-breakout-width})
+);
+$container-breakout-width: var(
+  --#{root-defaults.$prefix}-container-breakout-width,
+  calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)
+);
+$container-feature-max-width: var(
+  --#{root-defaults.$prefix}-container-feature-max-width,
+  calc(#{$container-breakout-max-width} + #{defaults.$container-feature-width})
+);
+$container-feature-width: var(
+  --#{root-defaults.$prefix}-container-feature-width,
+  calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)
+);
+$container-content-section-width: var(
+  --#{root-defaults.$prefix}-container-content-section-width,
+  min(#{$container-content-max-width}, calc(100% - #{$container-gap} * 2))
+);
+$container-full-width-section-width: var(
+  --#{root-defaults.$prefix}-container-full-width-section-width,
+  minmax(#{$container-gap}, 1fr)
+);
+$container-breakout-section-width: var(
+  --#{root-defaults.$prefix}-container-breakout-section-width,
+  minmax(0, #{$container-breakout-width})
+);
+$container-feature-section-width: var(
+  --#{root-defaults.$prefix}-container-feature-section-width,
+  minmax(0, #{$container-feature-width})
+);

package/{scss → src/scss}/mixins/_layer.scss

@@ -3,11 +3,11 @@
 // 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;
+@use "../defaults" as root-defaults;
 
 @mixin layer($layer) {
   @at-root {
-    @layer #{base.$prefix}.#{$layer} {
+    @layer #{root-defaults.$prefix}.#{$layer} {
       @content;
     }
   }