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

package/{scss → src/scss}/mixins/_media-queries.scss

@@ -1,5 +1,8 @@
 // Media query mixins.
 
+@use "../defaults" as root-defaults;
+@use "sass:map";
+
 // A media query for targetting users who have not requested reduced motion.
 @mixin animation-on {
   @media (prefers-reduced-motion: no-preference) {
@@ -13,3 +16,11 @@
     @content;
   }
 }
+
+@mixin screen($size) {
+  $screen-size: map.get(root-defaults.$screen-sizes, $size);
+
+  @media screen and #{$screen-size} {
+    @content;
+  }
+}

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

@@ -4,7 +4,5 @@
 // They are mainly used to provide default fallbacks for custom properties
 // which can be found in the `variables.scss` file.
 
-@forward "../../defaults";
-
 $focus-outline-style: dotted !default;
 $focus-box-shadow-style: inset !default;

package/src/scss/state/focus/_variables.scss

@@ -0,0 +1,40 @@
+// Variables referencing custom properties.
+
+@use "../../variables" as root-variables;
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../functions/theme";
+
+$focus-width: var(
+  --#{root-defaults.$prefix}-focus-width,
+  #{root-variables.$border-width}
+);
+$focus-outline-color: var(
+  --#{root-defaults.$prefix}-focus-outline-color,
+  #{theme.get(primary, 900)}
+);
+$focus-outline-width: var(
+  --#{root-defaults.$prefix}-focus-outline-width,
+  #{$focus-width}
+);
+$focus-outline-style: var(
+  --#{root-defaults.$prefix}-focus-outline-style,
+  #{defaults.$focus-outline-style}
+);
+$focus-outline-offset: var(
+  --#{root-defaults.$prefix}-focus-outline-offset,
+  calc(-1 * #{$focus-outline-width})
+);
+$focus-box-shadow-color: var(
+  --#{root-defaults.$prefix}-focus-box-shadow-color,
+  #{theme.get(primary, 100)}
+);
+$focus-box-shadow-style: var(
+  --#{root-defaults.$prefix}-focus-box-shadow-style,
+  #{defaults.$focus-box-shadow-style}
+);
+$focus-box-shadow: var(
+  --#{root-defaults.$prefix}-focus-box-shadow,
+  #{$focus-width $focus-width} 0 0 #{$focus-box-shadow-style} #{$focus-box-shadow-color},
+  0 0 0 #{$focus-width} #{$focus-box-shadow-style} #{$focus-box-shadow-color}
+);

package/src/scss/theme/_index.scss

@@ -0,0 +1,4 @@
+// Graupl theme.
+
+@forward "color";
+@forward "typography";

package/src/scss/theme/color/_defaults.scss

@@ -0,0 +1,61 @@
+// 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";
+
+// Colours.
+$default-colors: (
+  primary: (
+    100: hsl(219deg 100% 95%),
+    200: hsl(219deg 90% 80%),
+    300: hsl(219deg 80% 65%),
+    400: hsl(219deg 75% 55%),
+    500: hsl(219deg 75% 50%),
+    600: hsl(219deg 75% 45%),
+    700: hsl(219deg 80% 35%),
+    800: hsl(219deg 90% 20%),
+    900: hsl(219deg 100% 10%),
+  ),
+  secondary: (
+    100: hsl(235deg 40% 95%),
+    200: hsl(235deg 30% 80%),
+    300: hsl(235deg 20% 65%),
+    400: hsl(235deg 15% 55%),
+    500: hsl(235deg 15% 50%),
+    600: hsl(235deg 15% 45%),
+    700: hsl(235deg 20% 35%),
+    800: hsl(235deg 30% 20%),
+    900: hsl(235deg 40% 10%),
+  ),
+  tertiary: (
+    100: hsl(340deg 85% 95%),
+    200: hsl(340deg 75% 80%),
+    300: hsl(340deg 65% 65%),
+    400: hsl(340deg 60% 55%),
+    500: hsl(340deg 60% 50%),
+    600: hsl(340deg 60% 45%),
+    700: hsl(340deg 65% 35%),
+    800: hsl(340deg 75% 20%),
+    900: hsl(340deg 85% 10%),
+  ),
+);
+$custom-colors: () !default;
+$colors: map.merge($default-colors, $custom-colors);
+
+// A map for reversing the shade values of the dark theme.
+$base-dark-map: (
+  100: 900,
+  200: 800,
+  300: 700,
+  400: 600,
+  500: 500,
+  600: 400,
+  700: 300,
+  800: 200,
+  900: 100,
+);
+$custom-dark-map: () !default;
+$dark-map: map.merge($base-dark-map, $custom-dark-map);

package/src/scss/theme/color/_index.scss

@@ -0,0 +1,42 @@
+// Color theme styles.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "../../defaults" as root-defaults;
+@use "sass:map";
+@use "../../functions/theme";
+
+@include layer(theme) {
+  :root {
+    background: $root-background;
+    color: $root-font-color;
+
+    @each $color, $map in $theme-light {
+      @each $shade, $value in $map {
+        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+      }
+    }
+  }
+
+  // Set the active theme for dark mode.
+  .dark-mode {
+    @each $color, $map in $theme-dark {
+      @each $shade, $value in $map {
+        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+      }
+    }
+
+    color-scheme: dark;
+  }
+
+  // Set the active theme for light mode.
+  .light-mode {
+    @each $color, $map in $theme-light {
+      @each $shade, $value in $map {
+        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+      }
+    }
+
+    color-scheme: light;
+  }
+}

package/src/scss/theme/color/_variables.scss

@@ -0,0 +1,121 @@
+// Variables referencing custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "sass:map";
+
+// A colour map of base colours and their shades.
+$colors: ();
+
+// Create a map for each colour.
+@each $color, $map in defaults.$colors {
+  // A map for the current colour.
+  $color-map: ();
+
+  @each $shade, $value in $map {
+    // Set the custom prop name and fallback value.
+    $color-property: var(
+      --#{root-defaults.$prefix}-#{$color}--#{$shade},
+      $value
+    );
+
+    // Add the custom prop to the map.
+    $color-map: map.merge(
+      $color-map,
+      (
+        $shade: $color-property,
+      )
+    );
+  }
+
+  // Merge the colour map with the existing colours.
+  $colors: map.merge(
+    $colors,
+    (
+      $color: $color-map,
+    )
+  );
+}
+
+// Theme properties.
+$theme-light: ();
+$theme-dark: ();
+$theme-active: ();
+
+// Create a map for each colour theme.
+@each $color, $map in $colors {
+  // Maps for the current colour theme variants.
+  $light-map: ();
+  $dark-map: ();
+  $active-map: ();
+
+  @each $shade, $value in $map {
+    // Get the dark shade and value.
+    $dark-shade: map.get(defaults.$dark-map, $shade);
+    $dark-value: map.get($map, $dark-shade);
+
+    // Set the custom prop names and fallback values.
+    $light-property: var(
+      --#{root-defaults.$prefix}-theme-light--#{$color}--#{$shade},
+      $value
+    );
+    $dark-property: var(
+      --#{root-defaults.$prefix}-theme-dark--#{$color}--#{$shade},
+      $dark-value
+    );
+    $active-property: var(
+      --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade},
+      $light-property
+    );
+
+    // Add the custom props to the maps.
+    $light-map: map.merge(
+      $light-map,
+      (
+        $shade: $light-property,
+      )
+    );
+    $dark-map: map.merge(
+      $dark-map,
+      (
+        $shade: $dark-property,
+      )
+    );
+    $active-map: map.merge(
+      $active-map,
+      (
+        $shade: $active-property,
+      )
+    );
+  }
+
+  // Merge the theme maps with the existing themes.
+  $theme-light: map.merge(
+    $theme-light,
+    (
+      $color: $light-map,
+    )
+  );
+  $theme-dark: map.merge(
+    $theme-dark,
+    (
+      $color: $dark-map,
+    )
+  );
+  $theme-active: map.merge(
+    $theme-active,
+    (
+      $color: $active-map,
+    )
+  );
+}
+
+// Colour properties.
+$root-font-color: var(
+  --#{root-defaults.$prefix}-root-font-color,
+  #{map.get(map.get($theme-active, primary), 900)}
+);
+$root-background: var(
+  --#{root-defaults.$prefix}-root-background,
+  #{map.get(map.get($theme-active, primary), 100)}
+);

package/src/scss/theme/typography/_defaults.scss

@@ -0,0 +1,52 @@
+// 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";
+
+// font properties.
+$font-size: 1rem !default;
+$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;
+$line-height: 1.2em !default;
+
+// Multipliers for font sizes.
+// This uses a minor third scale.
+// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000
+$base-font-size-multipliers: (
+  xs: 0.694,
+  sm: 0.833,
+  base: 1,
+  lg: 1.2,
+  xl: 1.44,
+  2xl: 1.728,
+  3xl: 2.074,
+  4xl: 2.488,
+  5xl: 2.986,
+);
+$custom-font-size-multipliers: () !default;
+$font-size-multipliers: map.merge(
+  $base-font-size-multipliers,
+  $custom-font-size-multipliers
+);
+
+// Weights.
+$base-font-weights: (
+  light: 300,
+  normal: 400,
+  bold: 700,
+);
+$custom-font-weights: () !default;
+$font-weights: map.merge($base-font-weights, $custom-font-weights);
+
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+$root-font-family:
+  system-ui,
+  -apple-system,
+  blinkmacsystemfont,
+  "Segoe UI",
+  roboto,
+  "Helvetica Neue",
+  arial,
+  sans-serif !default;

package/src/scss/theme/typography/_index.scss

@@ -0,0 +1,111 @@
+// Typography theme styles.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "sass:map";
+
+@include layer(base) {
+  p {
+    margin: $paragraph-margin;
+  }
+
+  small {
+    margin: $small-margin;
+  }
+
+  h1 {
+    margin: $h1-margin;
+  }
+
+  h2 {
+    margin: $h2-margin;
+  }
+
+  h3 {
+    margin: $h3-margin;
+  }
+
+  h4 {
+    margin: $h4-margin;
+  }
+
+  h5 {
+    margin: $h5-margin;
+  }
+
+  h6 {
+    margin: $h6-margin;
+  }
+}
+
+@include layer(theme) {
+  :root {
+    font-family: $root-font-family;
+    font-size: $root-font-size;
+  }
+
+  b,
+  strong {
+    font-weight: $font-weight-bold;
+  }
+
+  body {
+    font-size: $body-font-size;
+    font-weight: $body-font-weight;
+    line-height: $body-line-height;
+  }
+
+  p {
+    font-size: $paragraph-font-size;
+    font-weight: $paragraph-font-weight;
+    line-height: $paragraph-line-height;
+  }
+
+  small {
+    font-size: $small-font-size;
+    font-weight: $small-font-weight;
+    line-height: $small-line-height;
+  }
+
+  h1 {
+    font-family: $h1-font-family;
+    font-size: $h1-font-size;
+    font-weight: $h1-font-weight;
+    line-height: $h1-line-height;
+  }
+
+  h2 {
+    font-family: $h2-font-family;
+    font-size: $h2-font-size;
+    font-weight: $h2-font-weight;
+    line-height: $h2-line-height;
+  }
+
+  h3 {
+    font-family: $h3-font-family;
+    font-size: $h3-font-size;
+    font-weight: $h3-font-weight;
+    line-height: $h3-line-height;
+  }
+
+  h4 {
+    font-family: $h4-font-family;
+    font-size: $h4-font-size;
+    font-weight: $h4-font-weight;
+    line-height: $h4-line-height;
+  }
+
+  h5 {
+    font-family: $h5-font-family;
+    font-size: $h5-font-size;
+    font-weight: $h5-font-weight;
+    line-height: $h5-line-height;
+  }
+
+  h6 {
+    font-family: $h6-font-family;
+    font-size: $h6-font-size;
+    font-weight: $h6-font-weight;
+    line-height: $h6-line-height;
+  }
+}

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