@graupl/graupl 1.0.0-alpha.6 → 1.0.0-alpha.8

package/package.json

@@ -1,32 +1,47 @@
 {
   "name": "@graupl/graupl",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.8",
   "description": "A modular and modern CSS framework.",
   "type": "module",
   "exports": {
     ".": {
-      "sass": "./scss"
+      "sass": "./scss/graupl.scss"
     },
-    "./base": {
-      "sass": "./scss/base"
+    "./base.scss": {
+      "sass": "./scss/base.scss"
     },
-    "./components": {
-      "sass": "./scss/component"
+    "./base/*.scss": {
+      "sass": "./scss/base/*.scss"
     },
-    "./layout": {
-      "sass": "./scss/layout"
+    "./component.scss": {
+      "sass": "./scss/component.scss"
     },
-    "./mixins": {
-      "sass": "./scss/mixins"
+    "./component/*.scss": {
+      "sass": "./scss/component/*.scss"
     },
-    "./state": {
-      "sass": "./scss/state"
+    "./layout.scss": {
+      "sass": "./scss/layout.scss"
     },
-    "./theme": {
-      "sass": "./scss/theme"
+    "./layout/*.scss": {
+      "sass": "./scss/layout/*.scss"
     },
-    "./utilities": {
-      "sass": "./scss/utilities"
+    "./state.scss": {
+      "sass": "./scss/state.scss"
+    },
+    "./state/*.scss": {
+      "sass": "./scss/state/*.scss"
+    },
+    "./theme.scss": {
+      "sass": "./scss/theme.scss"
+    },
+    "./theme/*.scss": {
+      "sass": "./scss/theme/*.scss"
+    },
+    "./utilities.scss": {
+      "sass": "./scss/utilities.scss"
+    },
+    "./utilities/*.scss": {
+      "sass": "./scss/utilities/*.scss"
     }
   },
   "scripts": {
@@ -39,6 +54,7 @@
     "sass": "rm -rf dist && sass scss:dist",
     "postcss": "postcss 'dist/**/*.css' --replace",
     "build": "npm run sass && npm run postcss",
+    "postbuild": "npm run docs:build",
     "release": "git add dist/. && standard-version -a",
     "prerelease": "npm run lint && npm run build",
     "docs:dev": "vitepress dev docs",

package/scss/base/form.scss

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

package/scss/base/link.scss

@@ -0,0 +1,3 @@
+// Link base styles.
+
+@forward "../../src/scss/base/link";

package/scss/base/table.scss

@@ -0,0 +1,3 @@
+// Table base styles.
+
+@forward "../../src/scss/base/table";

package/scss/base.scss

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

package/scss/component/button.scss

@@ -0,0 +1,3 @@
+// Graupl Button Component.
+
+@forward "../../src/scss/component/button";

package/scss/component/input-group.scss

@@ -0,0 +1,3 @@
+// Graupl Input group Component.
+
+@forward "../../src/scss/component/input-group";

package/scss/component/table.scss

@@ -0,0 +1,3 @@
+// Table component styles.
+
+@forward "../../src/scss/component/table";

package/scss/component.scss

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

package/scss/graupl.scss

@@ -2,4 +2,4 @@
 //
 // Forwards all components for easy development.
 
-@forward "index";
+@forward "../src/scss";

package/scss/layout/columns.scss

@@ -0,0 +1,3 @@
+// Graupl Columns layout.
+
+@forward "../../src/scss/layout/columns";

package/scss/layout/container.scss

@@ -0,0 +1,3 @@
+// Graupl Container layout.
+
+@forward "../../src/scss/layout/container";

package/scss/layout.scss

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

package/scss/state/focus.scss

@@ -0,0 +1,3 @@
+// Focus state styles.
+
+@forward "../../src/scss/state/focus";

package/scss/state.scss

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

package/scss/theme/color.scss

@@ -0,0 +1,3 @@
+// Color theme styles.
+
+@forward "../../src/scss/theme/color";

package/scss/theme/typography.scss

@@ -0,0 +1,3 @@
+// Typography theme styles.
+
+@forward "../../src/scss/theme/typography";

package/scss/theme.scss

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

package/scss/utilities/colors.scss

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

package/scss/utilities/spacing.scss

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

package/scss/utilities/typography.scss

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

package/scss/utilities.scss

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

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,9 +15,16 @@ $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.
 $spacer: 1rem !default;
-$spacer-multipliers: (
+$base-spacer-multipliers: (
   0: 0,
   1: 0.125,
   2: 0.25,
@@ -27,7 +36,12 @@ $spacer-multipliers: (
   8: 3,
   9: 5,
   10: 10,
-) !default;
+);
+$custom-spacer-multipliers: () !default;
+$spacer-multipliers: map.merge(
+  $base-spacer-multipliers,
+  $custom-spacer-multipliers
+);
 
 // Size properties.
 $interactive-min-width: 44px !default;
@@ -39,10 +53,15 @@ $border-width: 2px !default;
 $border-style: solid !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/{scss → src/scss}/_variables.scss

@@ -30,21 +30,21 @@ $border-width: var(--#{defaults.$prefix}-border-width, defaults.$border-width);
 $border-style: var(--#{defaults.$prefix}-border-style, defaults.$border-style);
 
 // 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/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 "../../functions/theme" as theme;
+@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,
+  #{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)}
+);
+$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,
+  #{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/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
+);

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

@@ -1,5 +1,6 @@
 // Graupl Button Component.
 
+@use "defaults";
 @use "../../defaults" as root-defaults;
 @use "../../theme/color/variables" as color;
 @use "variables" as *;
@@ -88,27 +89,9 @@
 
     @each $color, $map in color.$theme-active {
       &.#{$color} {
-        --#{root-defaults.$prefix}-button-hover-background: #{map.get(
-            $map,
-            700
-          )};
-        --#{root-defaults.$prefix}-button-active-background: #{map.get(
-            $map,
-            700
-          )};
-        --#{root-defaults.$prefix}-button-border-color: #{map.get($map, 700)};
-        --#{root-defaults.$prefix}-button-hover-border-color: #{map.get(
-            $map,
-            700
-          )};
-        --#{root-defaults.$prefix}-button-active-border-color: #{map.get(
-            $map,
-            700
-          )};
-        --#{root-defaults.$prefix}-button-disabled-border-color: #{map.get(
-            $map,
-            200
-          )};
+        @each $prop, $shade in defaults.$button-state-theme-map {
+          --#{root-defaults.$prefix}-button-#{$prop}: #{map.get($map, $shade)};
+        }
       }
     }
   }

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

@@ -34,16 +34,14 @@ $button-font-size: var(
 );
 $button-transition: var(
   --#{root-defaults.$prefix}-button-transition,
-  background #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function},
-  color #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function},
-  border-color #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function},
-  transform #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function}
+  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-duration, none)} #{root-variables.$transition-timing-function},
-  color #{map.get(root-variables.$transition-duration, none)} #{root-variables.$transition-timing-function},
-  border-color #{map.get(root-variables.$transition-duration, none)} #{root-variables.$transition-timing-function}
+  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.

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);