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

package/scss/utilities/visibility.scss

@@ -0,0 +1,3 @@
+// Graupl visibility utilities.
+
+@forward "../../src/scss/utilities/visibility";

package/scss/utilities.scss

@@ -0,0 +1,3 @@
+// Graupl utilities.
+
+@forward "../src/scss/utilities";

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

@@ -4,14 +4,44 @@
 // 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;
 
+// Settings.
+$use-important: true !default;
+
 // Layout properties.
 $content-max-width: 96ch !default;
 
+// Screen sizes.
+$base-screen-sizes: (
+  xs: "(0 <= width <= 48ch)",
+);
+$custom-screen-sizes: () !default;
+$screen-sizes: map.merge($base-screen-sizes, $custom-screen-sizes);
+
 // 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,
+);
+$custom-spacer-multipliers: () !default;
+$spacer-multipliers: map.merge(
+  $base-spacer-multipliers,
+  $custom-spacer-multipliers
+);
 
 // Size properties.
 $interactive-min-width: 44px !default;
@@ -22,19 +52,16 @@ $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: (
+$transition-duration-base: 100 !default;
+$transition-timing-function: ease !default;
+$base-transition-durations: (
   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;
+);
+$custom-transition-durations: () !default;
+$transition-durations: map.merge(
+  $base-transition-durations,
+  $custom-transition-durations
+);

package/src/scss/_index.scss

@@ -0,0 +1,14 @@
+// Graupl Components.
+//
+// Forwards all components for easy development.
+
+// Forward the layer initialization.
+@forward "init";
+
+// Forward all layers.
+@forward "base";
+@forward "layout";
+@forward "component";
+@forward "state";
+@forward "theme";
+@forward "utilities";

package/src/scss/_init.scss

@@ -0,0 +1,3 @@
+// Graupl layer initialization.
+
+@layer graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;

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,41 +29,22 @@ $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: (
+$transition-durations: (
   fast:
     var(
       --#{defaults.$prefix}-transition-duration-fast,
-      map.get(defaults.$transition-duration, fast)
+      map.get(defaults.$transition-durations, fast)
     ),
   default:
     var(
       --#{defaults.$prefix}-transition-duration-default,
-      map.get(defaults.$transition-duration, default)
+      map.get(defaults.$transition-durations, default)
     ),
   slow:
     var(
       --#{defaults.$prefix}-transition-duration-slow,
-      map.get(defaults.$transition-duration, slow)
+      map.get(defaults.$transition-durations, slow)
     ),
 );
 $transition-timing-function: var(

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

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

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

@@ -4,6 +4,4 @@
 // They are mainly used to provide default fallbacks for custom properties
 // which can be found in the `variables.scss` file.
 
-@forward "../../defaults";
-
 $fieldset-direction: column !default;

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

@@ -31,6 +31,14 @@
     border-style: $fieldset-border-style;
     border-radius: $fieldset-border-radius;
     font-size: $fieldset-font-size;
+
+    &:disabled {
+      input,
+      textarea,
+      select {
+        cursor: not-allowed;
+      }
+    }
   }
 }
 
@@ -73,6 +81,10 @@
     &:disabled {
       border-color: $fieldset-disabled-border-color;
       color: $fieldset-disabled-color;
+
+      label {
+        color: $label-disabled-color;
+      }
     }
   }
 }

package/src/scss/base/form/_variables.scss

@@ -0,0 +1,145 @@
+// Variables referencing custom properties.
+
+@use "defaults";
+@use "../../variables" as root-variables;
+@use "../../defaults" as root-defaults;
+@use "../../theme/typography/variables" as typography;
+@use "../../theme/color//variables" as color;
+@use "../../functions/theme";
+@use "sass:map";
+
+$input-padding-x: var(
+  --#{root-defaults.$prefix}-input-padding-x,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$input-padding-y: var(
+  --#{root-defaults.$prefix}-input-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$input-padding: var(
+  --#{root-defaults.$prefix}-input-padding,
+  #{$input-padding-y} #{$input-padding-x}
+);
+$input-font-size: var(
+  --#{root-defaults.$prefix}-input-font-size,
+  #{map.get(typography.$font-sizes, base)}
+);
+$label-font-size: var(
+  --#{root-defaults.$prefix}-label-font-size,
+  #{$input-font-size}
+);
+$fieldset-direction: var(
+  --#{root-defaults.$prefix}-fieldset-direction,
+  #{defaults.$fieldset-direction}
+);
+$fieldset-gap: var(
+  --#{root-defaults.$prefix}-fieldset-gap,
+  map.get(root-variables.$spacers, 2)
+);
+$fieldset-padding-x: var(
+  --#{root-defaults.$prefix}-fieldset-padding-x,
+  #{$input-padding-x}
+);
+$fieldset-padding-y: var(
+  --#{root-defaults.$prefix}-fieldset-padding-y,
+  #{$input-padding-y}
+);
+$fieldset-padding: var(
+  --#{root-defaults.$prefix}-fieldset-padding,
+  #{$fieldset-padding-y} #{$fieldset-padding-x}
+);
+$fieldset-font-size: var(
+  --#{root-defaults.$prefix}-fieldset-font-size,
+  #{$input-font-size}
+);
+
+// Background properties.
+$input-background: var(
+  --#{root-defaults.$prefix}-input-background,
+  #{color.$root-background}
+);
+$fieldset-background: var(
+  --#{root-defaults.$prefix}-fieldset-background,
+  #{$input-background}
+);
+
+// Text properties.
+$input-color: var(
+  --#{root-defaults.$prefix}-input-color,
+  #{theme.get(primary, 900)}
+);
+$input-placeholder-color: var(
+  --#{root-defaults.$prefix}-input-placeholder-color,
+  #{theme.get(secondary, 600)}
+);
+$label-color: var(--#{root-defaults.$prefix}-label-color, #{$input-color});
+$fieldset-color: var(
+  --#{root-defaults.$prefix}-fieldset-color,
+  #{$input-color}
+);
+$input-disabled-color: var(
+  --#{root-defaults.$prefix}-input-disabled-color,
+  #{theme.get(secondary, 400)}
+);
+$input-disabled-placeholder-color: var(
+  --#{root-defaults.$prefix}-input-disabled-placeholder-color,
+  #{$input-disabled-color}
+);
+$label-disabled-color: var(
+  --#{root-defaults.$prefix}-label-disabled-color,
+  #{$input-disabled-color}
+);
+$fieldset-disabled-color: var(
+  --#{root-defaults.$prefix}-fieldset-disabled-color,
+  #{$input-disabled-color}
+);
+
+// Border properties.
+$input-border-width: var(
+  --#{root-defaults.$prefix}-input-border-width,
+  #{root-variables.$border-width}
+);
+$input-border-style: var(
+  --#{root-defaults.$prefix}-botton-border-style,
+  #{root-variables.$border-style}
+);
+$input-border-radius: var(
+  --#{root-defaults.$prefix}-input-border-radius,
+  #{root-variables.$border-radius}
+);
+$fieldset-border-width: var(
+  --#{root-defaults.$prefix}-fieldset-border-width,
+  #{$input-border-width}
+);
+$fieldset-border-style: var(
+  --#{root-defaults.$prefix}-fieldset-border-style,
+  #{$input-border-style}
+);
+$fieldset-border-radius: var(
+  --#{root-defaults.$prefix}-fieldset-border-radius,
+  #{$input-border-radius}
+);
+
+// Border colour properties.
+$input-border-color: var(
+  --#{root-defaults.$prefix}-input-border-color,
+  #{theme.get(secondary, 700)}
+);
+$input-disabled-border-color: var(
+  --#{root-defaults.$prefix}-input-disabled-border-color,
+  #{theme.get(secondary, 200)}
+);
+$fieldset-border-color: var(
+  --#{root-defaults.$prefix}-fieldset-border-color,
+  #{$input-border-color}
+);
+$fieldset-disabled-border-color: var(
+  --#{root-defaults.$prefix}-fieldset-disabled-border-color,
+  #{$input-disabled-border-color}
+);
+
+// Accent color properties.
+$input-accent-color: var(
+  --#{root-defaults.$prefix}-input-accent-color,
+  #{theme.get(primary, 700)}
+);

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

@@ -4,6 +4,4 @@
 // 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/src/scss/base/link/_index.scss

@@ -0,0 +1,50 @@
+// Link base styles.
+
+@use "variables" as *;
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+
+@include layer(base) {
+  a {
+    text-decoration: $link-text-decoration;
+    text-decoration-thickness: $link-text-decoration-thickness;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+}
+
+@include layer(theme) {
+  a {
+    color: $link-color;
+
+    &:hover {
+      --#{root-defaults.$prefix}-link-color: #{$link-hover-color};
+    }
+
+    &:active {
+      --#{root-defaults.$prefix}-link-color: #{$link-active-color};
+    }
+
+    // stylelint-disable no-descending-specificity
+    &:visited {
+      &,
+      &:hover {
+        --#{root-defaults.$prefix}-link-color: #{$link-hover-color};
+      }
+    }
+
+    &[disabled] {
+      pointer-events: none;
+
+      &,
+      &:hover,
+      &:active,
+      &:visited {
+        --#{root-defaults.$prefix}-link-color: #{$link-disabled-color};
+      }
+    }
+    // stylelint-enable no-descending-specificity
+  }
+}

package/src/scss/base/link/_variables.scss

@@ -0,0 +1,36 @@
+// Variables referencing custom properties.
+
+@use "defaults";
+@use "../../variables" as root-variables;
+@use "../../defaults" as root-defaults;
+@use "../../functions/theme";
+
+// Link properties.
+$link-text-decoration: var(
+  --#{root-defaults.$prefix}-link-text-decoration,
+  #{defaults.$link-text-decoration}
+);
+$link-text-decoration-thickness: var(
+  --#{root-defaults.$prefix}-link-text-decoration-thickness,
+  #{root-variables.$border-width}
+);
+$link-color: var(
+  --#{root-defaults.$prefix}-link-color,
+  #{theme.get(primary, 700)}
+);
+$link-hover-color: var(
+  --#{root-defaults.$prefix}-link-hover-color,
+  #{theme.get(tertiary, 700)}
+);
+$link-active-color: var(
+  --#{root-defaults.$prefix}-link-active-color,
+  #{theme.get(tertiary, 700)}
+);
+$link-visited-color: var(
+  --#{root-defaults.$prefix}-link-visited-color,
+  #{theme.get(primary, 700)}
+);
+$link-disabled-color: var(
+  --#{root-defaults.$prefix}-link-disabled-color,
+  #{theme.get(primary, 200)}
+);

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.
+$table-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 "../../theme/color/variables" as color;
+@use "sass:map";
+
+// Table caption properties.
+$table-caption-side: var(
+  --#{root-defaults.$prefix}-table-caption-side,
+  #{defaults.$table-caption-side}
+);
+$table-caption-padding-x: var(
+  --#{root-defaults.$prefix}-table-caption-padding-x,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$table-caption-padding-y: var(
+  --#{root-defaults.$prefix}-table-caption-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$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}
+);
+$table-header-padding-x: var(
+  --#{root-defaults.$prefix}-table-header-padding-x,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$table-header-padding-y: var(
+  --#{root-defaults.$prefix}-table-header-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$table-header-padding: $table-header-padding-y $table-header-padding-x;
+$table-header-background: var(
+  --#{root-defaults.$prefix}-table-header-background,
+  #{color.$root-background}
+);
+$table-header-color: var(
+  --#{root-defaults.$prefix}-table-header-color,
+  #{color.$root-color}
+);
+
+// Table cell properties.
+$table-cell-padding-x: var(
+  --#{root-defaults.$prefix}-table-cell-padding-x,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$table-cell-padding-y: var(
+  --#{root-defaults.$prefix}-table-cell-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$table-cell-padding: $table-cell-padding-y $table-cell-padding-x;
+$table-cell-background: var(
+  --#{root-defaults.$prefix}-table-cell-background,
+  #{color.$root-background}
+);
+$table-cell-color: var(
+  --#{root-defaults.$prefix}-table-cell-color,
+  #{color.$root-color}
+);

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

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

package/src/scss/component/button/_defaults.scss

@@ -0,0 +1,39 @@
+// 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";
+
+$button-hover-transform: none !default;
+$button-hover-transform-reduced-motion: none !default;
+$button-active-transform: scale(0.95) !default;
+$button-active-transform-reduced-motion: scale(0.98) !default;
+
+// Button state theme defaults.
+// This map is used to define the default colour shades for the
+// themed button components.
+//
+// e.g.
+// Primary buttons will use primary--900 as the text colour, primary--100 as the background
+// and primary--900 as the border colour.
+//
+// Secondary/tertiary buttons will use the same shade for their respective colours.
+$base-button-state-theme-map: (
+  color: 900,
+  border-color: 700,
+  hover-color: 100,
+  hover-background: 700,
+  hover-border-color: 700,
+  active-color: 100,
+  active-background: 700,
+  active-border-color: 700,
+  disabled-color: 200,
+  disabled-border-color: 200,
+);
+$custom-button-state-theme-map: () !default;
+$button-state-theme-map: map.merge(
+  $base-button-state-theme-map,
+  $custom-button-state-theme-map
+);