@coopdigital/styles 0.16.6 → 0.18.0

package/src/utilities/grid.scss

@@ -0,0 +1,184 @@
+@use "sass:selector";
+@use "sass:string";
+@use "../breakpoints" as *;
+
+$columns: 12;
+$breakpoints: (
+  // "xxs" 320 2,
+  // "xs" 414 2,
+  "sm" $mq-small 6,
+  "md" $mq-medium 12,
+  "lg" $mq-large 12,
+  "xl" $mq-xlarge 12,
+  "xxl" $mq-xxlarge 12
+);
+
+/* prettier-ignore */
+$gaps: (
+  2,
+  4 "sm",
+  6, 
+  8 "md",
+  12 "lg"
+);
+
+/**
+ * Generate .gap-* classes
+ * Currently does not generate .gap-x-* or .gap-y-*
+ */
+
+@function get-safe-prefix($prefix: "") {
+  $safe-prefix: "";
+
+  @if string.length($prefix) > 0 {
+    $safe-prefix: $prefix + "\\:";
+  }
+
+  @return $safe-prefix;
+}
+
+/**
+ * Generate .gap-* classes
+ * Currently does not generate .gap-x-* or .gap-y-*
+ */
+
+@mixin gap-classes($prefix: "") {
+  $safe-prefix: get-safe-prefix($prefix);
+
+  @each $size, $name in $gaps {
+    $px: ".#{$safe-prefix}gap-#{$size}";
+    $selector: ($px);
+
+    @if $name {
+      $selector: selector.extend($selector, $px, (".#{$safe-prefix}gap-#{$name}"));
+    }
+    #{$selector} {
+      gap: calc(var(--spacing-4) * $size);
+    }
+  }
+}
+
+/**
+ * Generate .grid-* classes
+ * Generally of the format .grid-cols-*
+ */
+
+@mixin grid-classes($prefix: "") {
+  $safe-prefix: get-safe-prefix($prefix);
+
+  @for $number from 1 through $columns {
+    .#{$safe-prefix}grid-cols-#{$number} {
+      grid-template-columns: repeat(#{$number}, minmax(0, 1fr));
+    }
+  }
+}
+
+/**
+ * Generate .col-* classes
+ */
+
+@mixin column-classes($prefix: "") {
+  $safe-prefix: get-safe-prefix($prefix);
+
+  @for $number from 1 through $columns {
+    .#{$safe-prefix}col-span-#{$number} {
+      grid-column: span #{$number} / span #{$number};
+    }
+    .#{$safe-prefix}col-start-#{$number} {
+      grid-column-start: #{$number};
+    }
+    .#{$safe-prefix}col-end-#{$number} {
+      grid-column-end: #{$number};
+    }
+  }
+}
+
+@include gap-classes;
+
+@include grid-classes;
+
+@include column-classes;
+
+// Static .grid-cols-* classes
+
+.grid-cols-none {
+  grid-template-columns: none;
+}
+
+.grid-cols-subgrid {
+  grid-template-columns: subgrid;
+}
+
+// Static .col-* classes
+
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
+.col-span-stretch {
+  grid-column-end: -1;
+}
+
+.col-start-auto {
+  grid-column-start: auto;
+}
+
+.col-end-auto {
+  grid-column-end: auto;
+}
+
+.col-auto {
+  grid-column: auto;
+}
+
+// Static .grid-flow-* classes
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
+.grid-flow-dense {
+  grid-auto-flow: dense;
+}
+
+.grid-flow-col-dense {
+  grid-auto-flow: column dense;
+}
+
+// Static .auto-cols-* classes
+
+.auto-cols-auto {
+  grid-auto-columns: auto;
+}
+
+.auto-cols-min {
+  grid-auto-columns: min-content;
+}
+
+.auto-cols-max {
+  grid-auto-columns: max-content;
+}
+
+.auto-cols-fr {
+  grid-auto-columns: minmax(0, 1fr);
+}
+
+@each $breakpoint, $size, $cols in $breakpoints {
+  @media (min-width: $size) {
+
+    @include gap-classes($breakpoint);
+
+    @include grid-classes($breakpoint);
+
+    @include column-classes($breakpoint);
+  }
+}
+
+// Static gap-* classes
+.gap-auto {
+  gap: 1rem;
+
+  @media (min-width: $mq-medium) {
+    gap: 2rem;
+  }
+}

package/src/utilities/spacing.scss

@@ -0,0 +1,46 @@
+$spacing: ("64", "56", "48", "32", "24", "20", "18", "16", "14", "12", "10", "8", "6", "4", "2");
+
+@each $k in $spacing {
+  .m-#{$k} {
+    margin: var(--spacing-#{$k});
+  }
+  .mx-#{$k} {
+    margin-inline: var(--spacing-#{$k});
+  }
+  .my-#{$k} {
+    margin-block: var(--spacing-#{$k});
+  }
+  .mt-#{$k} {
+    margin-top: var(--spacing-#{$k});
+  }
+  .mb-#{$k} {
+    margin-bottom: var(--spacing-#{$k});
+  }
+  .ml-#{$k} {
+    margin-left: var(--spacing-#{$k});
+  }
+  .mr-#{$k} {
+    margin-right: var(--spacing-#{$k});
+  }
+  .p-#{$k} {
+    padding: var(--spacing-#{$k});
+  }
+  .px-#{$k} {
+    padding-inline: var(--spacing-#{$k});
+  }
+  .py-#{$k} {
+    padding-block: var(--spacing-#{$k});
+  }
+  .pt-#{$k} {
+    padding-top: var(--spacing-#{$k});
+  }
+  .pb-#{$k} {
+    padding-bottom: var(--spacing-#{$k});
+  }
+  .pl-#{$k} {
+    padding-left: var(--spacing-#{$k});
+  }
+  .pr-#{$k} {
+    padding-right: var(--spacing-#{$k});
+  }
+}

package/src/utilities/text-size.scss

@@ -1,63 +1,37 @@
 @use "sass:selector";
 
 $sizes: (
-  10: (),
-  11: (),
-  12: (
-    "xs",
-  ),
-  13: (),
-  14: (
-    "sm",
-  ),
-  16: (
-    "base",
-  ),
-  18: (
-    "lg",
-  ),
-  20: (
-    "xl",
-  ),
-  22: (),
-  24: (
-    "2xl",
-  ),
-  26: (),
-  28: (),
-  30: (
-    "3xl",
-  ),
-  32: (),
-  36: (
-    "4xl",
-  ),
-  40: (),
-  46: (),
-  48: (
-    "5xl",
-  ),
-  56: (),
-  60: (
-    "6xl",
-  ),
-  64: (),
-  72: (
-    "7xl",
-  ),
-  82: (
-    "mega",
-  ),
-  96: (
-    "8xl",
-  ),
+  10,
+  11,
+  12 "xs",
+  13,
+  14 "sm",
+  16 "base",
+  18 "lg",
+  20 "xl",
+  22,
+  24 "2xl",
+  26,
+  28,
+  30 "3xl",
+  32,
+  36 "4xl",
+  40,
+  46,
+  48 "5xl",
+  56,
+  60 "6xl",
+  64,
+  72 "7xl",
+  82 "mega",
+  96 "8xl"
 );
 
-@each $size, $names in $sizes {
+@each $size, $name in $sizes {
   $px: ".text-#{$size}";
   $selector: ($px);
 
-  @each $name in $names {
+  @if $name {
     $selector: selector.extend($selector, $px, (".text-#{$name}"));
   }
 

package/src/utilities.scss

@@ -1,2 +1,5 @@
 @use "./utilities/color";
 @use "./utilities/text-size";
+@use "./utilities/grid";
+@use "./utilities/display";
+@use "./utilities/spacing";

package/src/vars/_spacing.scss

@@ -1,7 +1,9 @@
 :root {
   /* Spacing */
   --spacing-64: 4rem;
+  --spacing-60: 3.75rem;
   --spacing-58: 3.625rem;
+  --spacing-56: 3.5rem;
   --spacing-54: 3.375rem;
   --spacing-52: 3.25rem;
   --spacing-48: 3rem;

package/src/vars/_typography.scss

@@ -1,5 +1,5 @@
 :root {
-  --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-family: "Avenir Next", "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
 
   /* Weights */

package/src/vars-legacy/_typography-legacy.scss

@@ -1,5 +1,5 @@
 :root {
-  --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-family: "Avenir Next", "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
 
   /* Typography */