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

package/src/scss/theme/typography/_variables.scss

@@ -0,0 +1,227 @@
+// Variables referencing custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
+@use "sass:map";
+
+// Font properties.
+$font-size: var(--#{root-defaults.$prefix}-font-base, #{defaults.$font-size});
+$line-height: var(
+  --#{root-defaults.$prefix}-line-height,
+  #{defaults.$line-height}
+);
+
+// Generate all of the font-size-x custom properties.
+$font-sizes: ();
+
+@each $key, $value in defaults.$font-size-multipliers {
+  $size: var(
+    --#{root-defaults.$prefix}-font-#{$key},
+    calc(#{$value} * #{$font-size})
+  );
+  $font-sizes: map.set($font-sizes, $key, $size);
+}
+
+$font-weights: ();
+
+@each $key, $value in defaults.$font-weights {
+  $weight: var(--#{root-defaults.$prefix}-font-weight-#{$key}, $value);
+  $font-weights: map.set($font-weights, $key, $weight);
+}
+
+$font-weight-bold: var(
+  --#{root-defaults.$prefix}-font-weight-bold,
+  #{map.get($font-weights, bold)}
+);
+
+// Root properties.
+$root-font-family: var(
+  --#{root-defaults.$prefix}-root-font-family,
+  #{defaults.$root-font-family}
+);
+$root-font-size: var(
+  --#{root-defaults.$prefix}-root-font-size,
+  #{defaults.$root-font-size}
+);
+
+// Typography properties.
+$body-font-size: var(
+  --#{root-defaults.$prefix}-body-font-size,
+  #{map.get($font-sizes, base)}
+);
+$body-line-height: var(
+  --#{root-defaults.$prefix}-body-line-height,
+  #{$line-height}
+);
+$body-font-weight: var(
+  --#{root-defaults.$prefix}-body-font-weight,
+  #{map.get($font-weights, normal)}
+);
+$paragraph-font-size: var(
+  --#{root-defaults.$prefix}-paragraph-font-size,
+  #{$body-font-size}
+);
+$paragraph-line-height: var(
+  --#{root-defaults.$prefix}-paragraph-line-height,
+  #{$body-line-height}
+);
+$paragraph-margin: var(
+  --#{root-defaults.$prefix}-paragraph-margin,
+  0 0 #{map.get(root-variables.$spacers, 2)} 0
+);
+$paragraph-font-weight: var(
+  --#{root-defaults.$prefix}-paragraph-font-weight,
+  #{$body-font-weight}
+);
+$small-font-size: var(
+  --#{root-defaults.$prefix}-small-font-size,
+  #{map.get($font-sizes, sm)}
+);
+$small-line-height: var(
+  --#{root-defaults.$prefix}-small-line-height,
+  #{$line-height}
+);
+$small-margin: var(
+  --#{root-defaults.$prefix}-small-margin,
+  0 0 #{map.get(root-variables.$spacers, 2)} 0
+);
+$small-font-weight: var(
+  --#{root-defaults.$prefix}-small-font-weight,
+  #{$body-font-weight}
+);
+
+// Headings properties.
+$heading-font-family: var(
+  --#{root-defaults.$prefix}-heading-font-family,
+  $root-font-family
+);
+$heading-line-height: var(
+  --#{root-defaults.$prefix}-heading-line-height,
+  #{$line-height}
+);
+$heading-margin: var(
+  --#{root-defaults.$prefix}-heading-margin,
+  #{map.get(root-variables.$spacers, 5)} 0 #{map.get(
+      root-variables.$spacers,
+      2
+    )} 0
+);
+$heading-font-weight: var(
+  --#{root-defaults.$prefix}-heading-font-weight,
+  #{$font-weight-bold}
+);
+
+// H1 properties.
+$h1-font-size: var(
+  --#{root-defaults.$prefix}-h1-font-size,
+  #{map.get($font-sizes, 5xl)}
+);
+$h1-line-height: var(
+  --#{root-defaults.$prefix}-h1-line-height,
+  #{$heading-line-height}
+);
+$h1-margin: var(--#{root-defaults.$prefix}-h1-margin, #{$heading-margin});
+$h1-font-family: var(
+  --#{root-defaults.$prefix}-h1-font-family,
+  $heading-font-family
+);
+$h1-font-weight: var(
+  --#{root-defaults.$prefix}-h1-font-weight,
+  $heading-font-weight
+);
+
+// H2 properties.
+$h2-font-size: var(
+  --#{root-defaults.$prefix}-h2-font-size,
+  #{map.get($font-sizes, 4xl)}
+);
+$h2-line-height: var(
+  --#{root-defaults.$prefix}-h2-line-height,
+  #{$heading-line-height}
+);
+$h2-margin: var(--#{root-defaults.$prefix}-h2-margin, #{$heading-margin});
+$h2-font-family: var(
+  --#{root-defaults.$prefix}-h2-font-family,
+  $heading-font-family
+);
+$h2-font-weight: var(
+  --#{root-defaults.$prefix}-h2-font-weight,
+  $heading-font-weight
+);
+
+// H3 properties.
+$h3-font-size: var(
+  --#{root-defaults.$prefix}-h3-font-size,
+  #{map.get($font-sizes, 3xl)}
+);
+$h3-line-height: var(
+  --#{root-defaults.$prefix}-h3-line-height,
+  #{$heading-line-height}
+);
+$h3-margin: var(--#{root-defaults.$prefix}-h3-margin, #{$heading-margin});
+$h3-font-family: var(
+  --#{root-defaults.$prefix}-h3-font-family,
+  $heading-font-family
+);
+$h3-font-weight: var(
+  --#{root-defaults.$prefix}-h3-font-weight,
+  $heading-font-weight
+);
+
+// H4 properties.
+$h4-font-size: var(
+  --#{root-defaults.$prefix}-h4-font-size,
+  #{map.get($font-sizes, 2xl)}
+);
+$h4-line-height: var(
+  --#{root-defaults.$prefix}-h4-line-height,
+  #{$heading-line-height}
+);
+$h4-margin: var(--#{root-defaults.$prefix}-h4-margin, #{$heading-margin});
+$h4-font-family: var(
+  --#{root-defaults.$prefix}-h4-font-family,
+  $heading-font-family
+);
+$h4-font-weight: var(
+  --#{root-defaults.$prefix}-h4-font-weight,
+  $heading-font-weight
+);
+
+// H5 properties.
+$h5-font-size: var(
+  --#{root-defaults.$prefix}-h5-font-size,
+  #{map.get($font-sizes, xl)}
+);
+$h5-line-height: var(
+  --#{root-defaults.$prefix}-h5-line-height,
+  #{$heading-line-height}
+);
+$h5-margin: var(--#{root-defaults.$prefix}-h5-margin, #{$heading-margin});
+$h5-font-family: var(
+  --#{root-defaults.$prefix}-h5-font-family,
+  $heading-font-family
+);
+$h5-font-weight: var(
+  --#{root-defaults.$prefix}-h5-font-weight,
+  $heading-font-weight
+);
+
+// H6 properties.
+$h6-font-size: var(
+  --#{root-defaults.$prefix}-h6-font-size,
+  #{map.get($font-sizes, lg)}
+);
+$h6-line-height: var(
+  --#{root-defaults.$prefix}-h6-line-height,
+  #{$heading-line-height}
+);
+$h6-margin: var(--#{root-defaults.$prefix}-h6-margin, #{$heading-margin});
+$h6-font-family: var(
+  --#{root-defaults.$prefix}-h6-font-family,
+  $heading-font-family
+);
+$h6-font-weight: var(
+  --#{root-defaults.$prefix}-h6-font-weight,
+  $heading-font-weight
+);

package/src/scss/utilities/_index.scss

@@ -0,0 +1,13 @@
+// Graupl utilities.
+
+@forward "alignment";
+@forward "color";
+@forward "display";
+@forward "flex";
+@forward "inset";
+@forward "justification";
+@forward "list";
+@forward "position";
+@forward "spacing";
+@forward "typography";
+@forward "visibility";

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