@graupl/graupl 1.0.0-alpha.5 → 1.0.0-alpha.7

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

@@ -4,6 +4,8 @@
 // They are mainly used to provide default fallbacks for custom properties
 // which can be found in the `variables.scss` file.
 
+@use "sass:map";
+
 // Prefix for custom properties and other naming conventions.
 $prefix: "graupl" !default;
 
@@ -13,8 +15,40 @@ $use-important: true !default;
 // Layout properties.
 $content-max-width: 96ch !default;
 
+// Screen sizes.
+$base-screen-sizes: (
+  xs: 0,
+  sm: 469px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  hd: 1920px,
+  qhd: 2560px,
+  uhd: 3840px,
+) !default;
+$custom-screen-sizes: () !default;
+$screen-sizes: map.merge($base-screen-sizes, $custom-screen-sizes) !default;
+
 // Spacing properties.
-$gap: 1rem !default;
+$spacer: 1rem !default;
+$base-spacer-multipliers: (
+  0: 0,
+  1: 0.125,
+  2: 0.25,
+  3: 0.5,
+  4: 0.75,
+  5: 1,
+  6: 1.5,
+  7: 2,
+  8: 3,
+  9: 5,
+  10: 10,
+) !default;
+$custom-spacer-multipliers: () !default;
+$spacer-multipliers: map.merge(
+  $base-spacer-multipliers,
+  $custom-spacer-multipliers
+) !default;
 
 // Size properties.
 $interactive-min-width: 44px !default;
@@ -25,14 +59,6 @@ $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: (

package/{scss → src/scss}/_variables.scss

@@ -10,7 +10,16 @@ $content-max-width: var(
 );
 
 // Spacing properties.
-$gap: var(--#{defaults.$prefix}-gap, defaults.$gap);
+$spacer: var(--#{defaults.$prefix}-spacer, defaults.$spacer);
+$spacers: ();
+
+@each $key, $value in defaults.$spacer-multipliers {
+  $space: var(
+    --#{defaults.$prefix}-spacer-#{$key},
+    calc(#{$value} * #{$spacer})
+  );
+  $spacers: map.set($spacers, $key, $space);
+}
 
 // Border properties.
 $border-radius: var(
@@ -20,25 +29,6 @@ $border-radius: var(
 $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:

package/{scss → src/scss}/base/_index.scss

@@ -2,3 +2,4 @@
 
 @forward "form";
 @forward "link";
+@forward "table";

package/{scss → src/scss}/base/form/_variables.scss

@@ -3,16 +3,17 @@
 @use "defaults";
 @use "../../variables" as root-variables;
 @use "../../defaults" as root-defaults;
+@use "../../theme/typography/variables" as typography;
 @use "../../functions/theme";
 @use "sass:map";
 
 $input-padding-x: var(
   --#{root-defaults.$prefix}-input-padding-x,
-  #{root-variables.$gap}
+  #{map.get(root-variables.$spacers, 5)}
 );
 $input-padding-y: var(
   --#{root-defaults.$prefix}-input-padding-y,
-  calc(#{root-variables.$gap} / 2)
+  #{map.get(root-variables.$spacers, 3)}
 );
 $input-padding: var(
   --#{root-defaults.$prefix}-input-padding,
@@ -20,7 +21,7 @@ $input-padding: var(
 );
 $input-font-size: var(
   --#{root-defaults.$prefix}-input-font-size,
-  #{map.get(root-variables.$font-size, default)}
+  #{map.get(typography.$font-sizes, base)}
 );
 $label-font-size: var(
   --#{root-defaults.$prefix}-label-font-size,
@@ -32,7 +33,7 @@ $fieldset-direction: var(
 );
 $fieldset-gap: var(
   --#{root-defaults.$prefix}-fieldset-gap,
-  calc(#{root-variables.$gap} / 4)
+  map.get(root-variables.$spacers, 2)
 );
 $fieldset-padding-x: var(
   --#{root-defaults.$prefix}-fieldset-padding-x,

package/src/scss/base/table/_defaults.scss

@@ -0,0 +1,8 @@
+// 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.
+
+// Table properties.
+$caption-side: bottom !default;

package/src/scss/base/table/_index.scss

@@ -0,0 +1,27 @@
+// Table base styles.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+
+@include layer(base) {
+  table {
+    caption {
+      padding: $table-caption-padding;
+      caption-side: $table-caption-side;
+    }
+
+    th {
+      padding: $table-header-padding;
+      background: $table-header-background;
+      color: $table-header-color;
+      font-weight: $table-header-font-weight;
+    }
+
+    td,
+    tbody th {
+      padding: $table-cell-padding;
+      background: $table-cell-background;
+      color: $table-cell-color;
+    }
+  }
+}

package/src/scss/base/table/_variables.scss

@@ -0,0 +1,65 @@
+// Variables referencing custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
+@use "../../theme/typography/variables" as typography;
+@use "../../functions/theme" as theme;
+@use "sass:map";
+
+// Table caption properties.
+$table-caption-side: var(
+  --#{root-defaults.$prefix}-table-caption-side,
+  #{defaults.$caption-side}
+) !default;
+$table-caption-padding-x: var(
+  --#{root-defaults.$prefix}-table-caption-padding-x,
+  #{map.get(root-variables.$spacers, 3)}
+) !default;
+$table-caption-padding-y: var(
+  --#{root-defaults.$prefix}-table-caption-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+) !default;
+$table-caption-padding: $table-caption-padding-y $table-caption-padding-x;
+
+// Table header properties.
+$table-header-font-weight: var(
+  --#{root-defaults.$prefix}-table-header-font-weight,
+  #{typography.$font-weight-bold}
+) !default;
+$table-header-padding-x: var(
+  --#{root-defaults.$prefix}-table-header-padding-x,
+  #{map.get(root-variables.$spacers, 3)}
+) !default;
+$table-header-padding-y: var(
+  --#{root-defaults.$prefix}-table-header-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+) !default;
+$table-header-padding: $table-header-padding-y $table-header-padding-x;
+$table-header-background: var(
+  --#{root-defaults.$prefix}-table-header-background,
+  #{theme.get(primary, 100)}
+);
+$table-header-color: var(
+  --#{root-defaults.$prefix}-table-header-color,
+  #{theme.get(primary, 900)}
+);
+
+// Table cell properties.
+$table-cell-padding-x: var(
+  --#{root-defaults.$prefix}-table-cell-padding-x,
+  #{map.get(root-variables.$spacers, 3)}
+) !default;
+$table-cell-padding-y: var(
+  --#{root-defaults.$prefix}-table-cell-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+) !default;
+$table-cell-padding: $table-cell-padding-y $table-cell-padding-x;
+$table-cell-background: var(
+  --#{root-defaults.$prefix}-table-cell-background,
+  #{theme.get(primary, 100)}
+);
+$table-cell-color: var(
+  --#{root-defaults.$prefix}-table-cell-color,
+  #{theme.get(primary, 900)}
+);

package/{scss → src/scss}/component/_index.scss

@@ -1,3 +1,5 @@
 // Graupl components.
 
 @forward "button";
+@forward "input-group";
+@forward "table";

package/{scss → src/scss}/component/button/_index.scss

@@ -1,7 +1,7 @@
 // Graupl Button Component.
 
 @use "../../defaults" as root-defaults;
-@use "../../theme/variables" as theme;
+@use "../../theme/color/variables" as color;
 @use "variables" as *;
 @use "../../mixins/layer" as *;
 @use "../../mixins/media-queries" as *;
@@ -86,8 +86,12 @@
       }
     }
 
-    @each $color, $map in theme.$theme-active {
+    @each $color, $map in color.$theme-active {
       &.#{$color} {
+        --#{root-defaults.$prefix}-button-color: #{map.get($map, 900)};
+        --#{root-defaults.$prefix}-button-hover-color: #{map.get($map, 100)};
+        --#{root-defaults.$prefix}-button-active-color: #{map.get($map, 100)};
+        --#{root-defaults.$prefix}-button-disabled-color: #{map.get($map, 200)};
         --#{root-defaults.$prefix}-button-hover-background: #{map.get(
             $map,
             700

package/{scss → src/scss}/component/button/_variables.scss

@@ -3,6 +3,7 @@
 @use "defaults";
 @use "../../variables" as root-variables;
 @use "../../defaults" as root-defaults;
+@use "../../theme/typography/variables" as typography;
 @use "../../functions/theme";
 @use "sass:map";
 
@@ -17,11 +18,11 @@ $button-min-height: var(
 );
 $button-padding-x: var(
   --#{root-defaults.$prefix}-button-padding-x,
-  #{root-variables.$gap}
+  #{map.get(root-variables.$spacers, 5)}
 );
 $button-padding-y: var(
   --#{root-defaults.$prefix}-button-padding-y,
-  calc(#{root-variables.$gap} / 2)
+  #{map.get(root-variables.$spacers, 3)}
 );
 $button-padding: var(
   --#{root-defaults.$prefix}-button-padding,
@@ -29,7 +30,7 @@ $button-padding: var(
 );
 $button-font-size: var(
   --#{root-defaults.$prefix}-button-font-size,
-  #{map.get(root-variables.$font-size, default)}
+  #{map.get(typography.$font-sizes, base)}
 );
 $button-transition: var(
   --#{root-defaults.$prefix}-button-transition,

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-under(sm) {
+    .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/_index.scss

@@ -0,0 +1,106 @@
+// Table component styles.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "../../defaults" as root-defaults;
+@use "../../functions/theme";
+
+@include layer(component) {
+  table {
+    @each $variant in theme.variants() {
+      &.#{$variant},
+      .#{$variant} {
+        --#{root-defaults.$prefix}-table-header-background: #{theme.get(
+            $variant,
+            700
+          )};
+        --#{root-defaults.$prefix}-table-header-color: #{theme.get(
+            $variant,
+            100
+          )};
+        --#{root-defaults.$prefix}-table-striped-background: #{theme.get(
+            $variant,
+            200
+          )};
+        --#{root-defaults.$prefix}-table-striped-color: #{theme.get(
+            $variant,
+            900
+          )};
+        --#{root-defaults.$prefix}-table-hover-background: #{theme.get(
+            $variant,
+            300
+          )};
+        --#{root-defaults.$prefix}-table-hover-color: #{theme.get(
+            $variant,
+            900
+          )};
+        --#{root-defaults.$prefix}-table-border-color: #{theme.get(
+            $variant,
+            900
+          )};
+        --#{root-defaults.$prefix}-table-highlight-background: #{theme.get(
+            $variant,
+            500
+          )};
+        --#{root-defaults.$prefix}-table-highlight-color: #{theme.get(
+            $variant,
+            100
+          )};
+      }
+    }
+
+    &.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/_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

@@ -6,7 +6,6 @@
 
 $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/{scss → src/scss}/layout/columns/_index.scss

@@ -4,15 +4,13 @@
 @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: var(
-      --#{root-defaults.$prefix}-columns,
-      repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
-    );
-    gap: $columns-gap;
+    grid-template-columns: $columns-grid-template-columns;
+    gap: $columns-row-gap $columns-column-gap;
 
     > * {
       grid-column: span $columns-span;
@@ -30,7 +28,7 @@
   }
 
   // Disable columns on small screens to avoid horizontal bleeding.
-  @media screen and (max-width: #{defaults.$columns-disable-width}) {
+  @include screen-under(sm) {
     .columns {
       --#{root-defaults.$prefix}-columns-min-width: #{defaults.$columns-max-width};
     }