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

package/src/scss/utilities/alignment/_defaults.scss

@@ -0,0 +1,57 @@
+// 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";
+
+// Align content properties.
+$align-content-class-prefix: "align-content-" !default;
+$base-align-content-properties: (
+  normal: normal,
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly,
+  baseline: baseline,
+  stretch: stretch,
+);
+$custom-align-content-properties: () !default;
+$align-content-properties: map.merge(
+  $base-align-content-properties,
+  $custom-align-content-properties
+);
+
+// Align items properties.
+$align-items-class-prefix: "align-items-" !default;
+$base-align-items-properties: (
+  start: start,
+  end: end,
+  center: center,
+  baseline: baseline,
+  stretch: stretch,
+);
+$custom-align-items-properties: () !default;
+$align-items-properties: map.merge(
+  $base-align-items-properties,
+  $custom-align-items-properties
+);
+
+// Align self properties.
+$align-self-class-prefix: "align-self-" !default;
+$base-align-self-properties: (
+  auto: auto,
+  start: start,
+  end: end,
+  center: center,
+  baseline: baseline,
+  stretch: stretch,
+);
+$custom-align-self-properties: () !default;
+$align-self-properties: map.merge(
+  $base-align-self-properties,
+  $custom-align-self-properties
+);

package/src/scss/utilities/alignment/_index.scss

@@ -0,0 +1,29 @@
+// Graupl alignment utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each align content property, create a utility class.
+  @each $name, $property in defaults.$align-content-properties {
+    .#{defaults.$align-content-class-prefix}#{$name} {
+      align-content: important.insert($property);
+    }
+  }
+
+  // For each align items property, create a utility class.
+  @each $name, $property in defaults.$align-items-properties {
+    .#{defaults.$align-items-class-prefix}#{$name} {
+      align-items: important.insert($property);
+    }
+  }
+
+  // For each align self property, create a utility class.
+  @each $name, $property in defaults.$align-self-properties {
+    .#{defaults.$align-self-class-prefix}#{$name} {
+      align-self: important.insert($property);
+    }
+  }
+}

package/src/scss/utilities/alignment/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/color/_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";
+
+// Background utility properties.
+$background-class-prefix: "bg-" !default;
+$base-background-properties: (
+  inherit: inherit,
+  current: currentcolor,
+  transparent: transparent,
+);
+$custom-background-properties: () !default;
+$background-properties: map.merge(
+  $base-background-properties,
+  $custom-background-properties
+);
+
+// Text utility properties.
+$text-class-prefix: "text-" !default;
+$base-text-properties: (
+  inherit: inherit,
+  current: currentcolor,
+  transparent: transparent,
+);
+$custom-text-properties: () !default;
+$text-properties: map.merge($base-text-properties, $custom-text-properties);

package/src/scss/utilities/color/_index.scss

@@ -0,0 +1,38 @@
+// Graupl color utilities.
+
+@use "variables" as *;
+@use "defaults";
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+@use "../../theme/color/variables" as color;
+
+@include layer(utilities) {
+  // For each theme colour, create a utility class for background and color.
+  @each $color, $map in color.$theme-active {
+    @each $shade, $value in $map {
+      $name: #{$color}-#{$shade};
+
+      .#{defaults.$background-class-prefix}#{$name} {
+        background: important.insert($value);
+      }
+
+      .#{defaults.$text-class-prefix}#{$name} {
+        color: important.insert($value);
+      }
+    }
+  }
+
+  // For each background property, create a utility class.
+  @each $name, $property in defaults.$background-properties {
+    .#{defaults.$background-class-prefix}#{$name} {
+      background: important.insert($property);
+    }
+  }
+
+  // For each text property, create a utility class.
+  @each $name, $property in defaults.$text-properties {
+    .#{defaults.$text-class-prefix}#{$name} {
+      color: important.insert($property);
+    }
+  }
+}

package/src/scss/utilities/color/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/display/_defaults.scss

@@ -0,0 +1,27 @@
+// 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";
+
+$display-class-prefix: "display-" !default;
+$base-display-properties: (
+  block: block,
+  inline-block: inline-block,
+  inline: inline,
+  flex: flex,
+  inline-flex: inline-flex,
+  grid: grid,
+  inline-grid: inline-grid,
+  flow-root: flow-root,
+  none: none,
+  contents: contents,
+  list-item: list-item,
+);
+$custom-display-properties: () !default;
+$display-properties: map.merge(
+  $base-display-properties,
+  $custom-display-properties
+);

package/src/scss/utilities/display/_index.scss

@@ -0,0 +1,15 @@
+// Graupl display utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each display property, create a utility class.
+  @each $name, $property in defaults.$display-properties {
+    .#{defaults.$display-class-prefix}#{$name} {
+      display: important.insert($property);
+    }
+  }
+}

package/src/scss/utilities/display/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/flex/_defaults.scss

@@ -0,0 +1,58 @@
+// 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";
+
+// Flex direction properties.
+$flex-direction-class-prefix: "flex-" !default;
+$base-flex-direction-properties: (
+  row: row,
+  row-reverse: row-reverse,
+  col: column,
+  col-reverse: column-reverse,
+);
+$custom-flex-direction-properties: () !default;
+$flex-direction-properties: map.merge(
+  $base-flex-direction-properties,
+  $custom-flex-direction-properties
+);
+
+// Flex wrap properties.
+$flex-wrap-class-prefix: "flex-" !default;
+$base-flex-wrap-properties: (
+  wrap: wrap,
+  wrap-reverse: wrap-reverse,
+  nowrap: nowrap,
+);
+$custom-flex-wrap-properties: () !default;
+$flex-wrap-properties: map.merge(
+  $base-flex-wrap-properties,
+  $custom-flex-wrap-properties
+);
+
+// Flex grow properties.
+$flex-grow-class-prefix: "flex-" !default;
+$base-flex-grow-properties: (
+  grow: 1,
+  no-grow: 0,
+);
+$custom-flex-grow-properties: () !default;
+$flex-grow-properties: map.merge(
+  $base-flex-grow-properties,
+  $custom-flex-grow-properties
+);
+
+// Flex shrink properties.
+$flex-shrink-class-prefix: "flex-" !default;
+$base-flex-shrink-properties: (
+  shrink: 1,
+  no-shrink: 0,
+);
+$custom-flex-shrink-properties: () !default;
+$flex-shrink-properties: map.merge(
+  $base-flex-shrink-properties,
+  $custom-flex-shrink-properties
+);

package/src/scss/utilities/flex/_index.scss

@@ -0,0 +1,36 @@
+// Graupl flex utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each flex direction property, create a utility class.
+  @each $name, $property in defaults.$flex-direction-properties {
+    .#{defaults.$flex-direction-class-prefix}#{$name} {
+      flex-direction: important.insert($property);
+    }
+  }
+
+  // For each flex wrap property, create a utility class.
+  @each $name, $property in defaults.$flex-wrap-properties {
+    .#{defaults.$flex-wrap-class-prefix}#{$name} {
+      flex-wrap: important.insert($property);
+    }
+  }
+
+  // For each flex grow property, create a utility class.
+  @each $name, $property in defaults.$flex-grow-properties {
+    .#{defaults.$flex-grow-class-prefix}#{$name} {
+      flex-grow: important.insert($property);
+    }
+  }
+
+  // For each flex shrink property, create a utility class.
+  @each $name, $property in defaults.$flex-shrink-properties {
+    .#{defaults.$flex-shrink-class-prefix}#{$name} {
+      flex-shrink: important.insert($property);
+    }
+  }
+}

package/src/scss/utilities/flex/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/inset/_defaults.scss

@@ -0,0 +1,36 @@
+// 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";
+
+// Inset properties.
+$base-inset-properties: (
+  inset: inset,
+  inset-x: left right,
+  inset-y: top bottom,
+  inset-start: inset-inline-start,
+  inset-end: inset-inline-end,
+  top: top,
+  right: right,
+  bottom: bottom,
+  left: left,
+);
+$custom-inset-properties: () !default;
+$inset-properties: map.merge($base-inset-properties, $custom-inset-properties);
+
+// Inset values.
+$base-inset-values: (
+  0: 0,
+  auto: auto,
+  full: 100%,
+  quarter: 25%,
+  half: 50%,
+  three-quarters: 75%,
+  third: calc(100% / 3),
+  two-thirds: calc(100% / 1.5),
+);
+$custom-inset-values: () !default;
+$inset-values: map.merge($base-inset-values, $custom-inset-values);

package/src/scss/utilities/inset/_index.scss

@@ -0,0 +1,19 @@
+// Graupl inset utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each inset property, create a utility class.
+  @each $type, $property in defaults.$inset-properties {
+    @each $name, $value in defaults.$inset-values {
+      .#{$type}-#{$name} {
+        @each $prop in $property {
+          #{$prop}: important.insert($value);
+        }
+      }
+    }
+  }
+}

package/src/scss/utilities/inset/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/justification/_defaults.scss

@@ -0,0 +1,54 @@
+// 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";
+
+// Justify content properties.
+$justify-content-class-prefix: "justify-content-" !default;
+$base-justify-content-properties: (
+  normal: normal,
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly,
+  stretch: stretch,
+);
+$custom-justify-content-properties: () !default;
+$justify-content-properties: map.merge(
+  $base-justify-content-properties,
+  $custom-justify-content-properties
+);
+
+// Justify items properties.
+$justify-items-class-prefix: "justify-items-" !default;
+$base-justify-items-properties: (
+  start: start,
+  end: end,
+  center: center,
+  stretch: stretch,
+);
+$custom-justify-items-properties: () !default;
+$justify-items-properties: map.merge(
+  $base-justify-items-properties,
+  $custom-justify-items-properties
+);
+
+// Justify self properties.
+$justify-self-class-prefix: "justify-self-" !default;
+$base-justify-self-properties: (
+  auto: auto,
+  start: start,
+  end: end,
+  center: center,
+  stretch: stretch,
+);
+$custom-justify-self-properties: () !default;
+$justify-self-properties: map.merge(
+  $base-justify-self-properties,
+  $custom-justify-self-properties
+);

package/src/scss/utilities/justification/_index.scss

@@ -0,0 +1,29 @@
+// Graupl justification utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each justify content property, create a utility class.
+  @each $name, $property in defaults.$justify-content-properties {
+    .#{defaults.$justify-content-class-prefix}#{$name} {
+      justify-content: important.insert($property);
+    }
+  }
+
+  // For each justify items property, create a utility class.
+  @each $name, $property in defaults.$justify-items-properties {
+    .#{defaults.$justify-items-class-prefix}#{$name} {
+      justify-items: important.insert($property);
+    }
+  }
+
+  // For each justify self property, create a utility class.
+  @each $name, $property in defaults.$justify-self-properties {
+    .#{defaults.$justify-self-class-prefix}#{$name} {
+      justify-self: important.insert($property);
+    }
+  }
+}

package/src/scss/utilities/justification/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/list/_defaults.scss

@@ -0,0 +1,34 @@
+// 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";
+
+// List style type properties.
+$list-style-type-class-prefix: "list-style-" !default;
+$base-list-style-type-properties: (
+  none: none,
+  disc: disc,
+  decimal: decimal,
+  circle: circle,
+  square: square,
+);
+$custom-list-style-type-properties: () !default;
+$list-style-type-properties: map.merge(
+  $base-list-style-type-properties,
+  $custom-list-style-type-properties
+);
+
+// List style position properties.
+$list-style-postion-class-prefix: "list-style-" !default;
+$base-list-style-postion-properties: (
+  inside: inside,
+  outside: outside,
+);
+$custom-list-style-postion-properties: () !default;
+$list-style-postion-properties: map.merge(
+  $base-list-style-postion-properties,
+  $custom-list-style-postion-properties
+);

package/src/scss/utilities/list/_index.scss

@@ -0,0 +1,22 @@
+// Graupl visibility utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each list style type property, create a utility class.
+  @each $name, $property in defaults.$list-style-type-properties {
+    .#{defaults.$list-style-type-class-prefix}#{$name} {
+      list-style-type: important.insert($property);
+    }
+  }
+
+  // For each list style position property, create a utility class.
+  @each $name, $property in defaults.$list-style-postion-properties {
+    .#{defaults.$list-style-type-class-prefix}#{$name} {
+      list-style-position: important.insert($property);
+    }
+  }
+}

package/src/scss/utilities/list/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/position/_defaults.scss

@@ -0,0 +1,21 @@
+// 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";
+
+$position-class-prefix: "position-" !default;
+$base-position-properties: (
+  static: static,
+  fixed: fixed,
+  absolute: absolute,
+  relative: relative,
+  sticky: sticky,
+);
+$custom-position-properties: () !default;
+$position-properties: map.merge(
+  $base-position-properties,
+  $custom-position-properties
+);

package/src/scss/utilities/position/_index.scss

@@ -0,0 +1,15 @@
+// Graupl position utilities.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each position property, create a utility class.
+  @each $name, $property in defaults.$position-properties {
+    .#{defaults.$position-class-prefix}#{$name} {
+      position: important.insert($property);
+    }
+  }
+}

package/src/scss/utilities/position/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/src/scss/utilities/spacing/_defaults.scss

@@ -0,0 +1,44 @@
+// 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";
+
+$base-spacing-properties: (
+  g: gap,
+  rg: row-gap,
+  cg: column-gap,
+  p: padding,
+  pt: padding-top,
+  pr: padding-right,
+  pb: padding-bottom,
+  pl: padding-left,
+  px: padding-left padding-right,
+  py: padding-top padding-bottom,
+  pbs: padding-block-start,
+  pbe: padding-block-end,
+  pbse: padding-block-start padding-block-end,
+  pis: padding-inline-start,
+  pie: padding-inline-end,
+  pise: padding-inline-start padding-inline-end,
+  m: margin,
+  mt: margin-top,
+  mr: margin-right,
+  mb: margin-bottom,
+  ml: margin-left,
+  mx: margin-left margin-right,
+  my: margin-top margin-bottom,
+  mbs: margin-block-start,
+  mbe: margin-block-end,
+  mbse: margin-block-start margin-block-end,
+  mis: margin-inline-start,
+  mie: margin-inline-end,
+  mise: margin-inline-start margin-inline-end,
+);
+$custom-spacing-properties: () !default;
+$spacing-properties: map.merge(
+  $base-spacing-properties,
+  $custom-spacing-properties
+);