@coopdigital/styles 0.42.2 → 0.44.0

package/src/utilities/flex.scss

@@ -1,194 +0,0 @@
-@use "sass:selector";
-@use "sass:string";
-@use "../breakpoints" as *;
-
-$breakpoints: (
-  // "xxs" 320,
-  // "xs" 414,
-  "sm" $mq-small,
-  "md" $mq-medium,
-  "lg" $mq-large,
-  "xl" $mq-xlarge,
-  "xxl" $mq-xxlarge
-);
-$flex-directions: (row, row-reverse, col column, col-reverse column-reverse);
-$flex-wraps: (nowrap, wrap, wrap-reverse);
-$justify-content: (
-  normal,
-  start flex-start,
-  center,
-  end flex-end,
-  between space-between,
-  around space-around,
-  evenly space-evenly,
-  baseline,
-  stretch
-); // except for justify-end-safe & justify-center-safe
-$align-content: (
-  normal,
-  start flex-start,
-  center,
-  end flex-end,
-  between space-between,
-  around space-around,
-  evenly space-evenly,
-  baseline,
-  stretch
-);
-$justify-items: (
-  normal,
-  start flex-start,
-  center,
-  end flex-end,
-  stretch
-); // except for center-safe and end-safe
-$align-items: (
-  start flex-start,
-  center,
-  end flex-end,
-  stretch,
-  baseline,
-  baseline-last "last baseline"
-); // except for center-safe and end-safe
-
-$justify-self: (auto, start, center, end, stretch); // except for safe center and safe end
-$align-self: (
-  auto,
-  start flex-start,
-  center,
-  end flex-end,
-  stretch,
-  baseline,
-  baseline-last "last baseline"
-); // except for safe center and safe end
-
-.flex {
-  display: flex;
-}
-
-.inline-flex {
-  display: inline-flex;
-}
-
-/**
- * Generate safe prefix
- * Adds this .sm\\: instead of .sm:
- */
-
-@function get-safe-prefix($prefix: "") {
-  $safe-prefix: "";
-
-  @if string.length($prefix) > 0 {
-    $safe-prefix: $prefix + "\\:";
-  }
-
-  @return $safe-prefix;
-}
-
-@mixin flex-direction($prefix: "") {
-  $safe-prefix: get-safe-prefix($prefix);
-
-  @each $k, $v in $flex-directions {
-    .#{$safe-prefix}flex-#{$k} {
-      flex-direction: #{if($v, $v, $k)};
-    }
-  }
-}
-
-@include flex-direction;
-
-@each $breakpoint, $size in $breakpoints {
-  @media (min-width: $size) {
-    @include flex-direction($breakpoint);
-  }
-}
-
-@each $option in $flex-wraps {
-  .flex-#{$option} {
-    flex-wrap: $option;
-  }
-}
-
-@each $k, $v in $justify-content {
-  .justify-#{$k} {
-    justify-content: #{if($v, $v, $k)};
-  }
-}
-
-@each $k, $v in $align-content {
-  .content-#{$k} {
-    align-content: #{if($v, $v, $k)};
-  }
-}
-
-@each $k, $v in $justify-items {
-  .justify-items-#{$k} {
-    justify-items: #{if($v, $v, $k)};
-  }
-}
-
-@each $k, $v in $align-items {
-  .items-#{$k} {
-    align-items: #{if($v, $v, $k)};
-  }
-}
-
-@each $k, $v in $justify-self {
-  .justify-self-#{$k} {
-    justify-self: #{if($v, $v, $k)};
-  }
-}
-
-@each $k, $v in $align-self {
-  .self-#{$k} {
-    align-self: #{if($v, $v, $k)};
-  }
-}
-
-.flex-none {
-  flex: none;
-}
-
-.flex-auto {
-  flex: 1 1 auto;
-}
-
-.flex-initial {
-  flex: 0 1 auto;
-}
-
-/* 
-Compound flex utilities
-*/
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flex-center-between {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.flex-center-around {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
-
-.flex-stack-vertical {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-// Column on small screens, row on medium and up
-.flex-responsive {
-  display: flex;
-  flex-direction: column;
-  @media (min-width: $mq-medium) {
-    flex-direction: row;
-  }
-}

package/src/utilities/grid.scss

@@ -1,192 +0,0 @@
-@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",
-  10,
-  12 "lg"
-);
-
-.grid {
-  display: grid;
-}
-
-.inline-grid {
-  display: inline-grid;
-}
-
-/**
- * Generate safe prefix
- * Adds this .sm\\: instead of .sm:
- */
-
-@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/position.scss

@@ -1,16 +0,0 @@
-// Positioning Utilities
-$positioning-options: (static, relative, absolute, fixed, sticky);
-
-@each $p in $positioning-options {
-  .#{$p} {
-    position: #{$p};
-  }
-}
-
-$z-indexes: (auto, 0, 10, 20, 30, 40, 50);
-
-@each $z in $z-indexes {
-  .z-#{$z} {
-    z-index: #{$z};
-  }
-}

package/src/utilities/sizing.scss

@@ -1,36 +0,0 @@
-@use "sass:string";
-
-// Sizing Utilities
-$property-options: (
-  width: "w",
-  // min-width: "min-w",
-  // max-width: "max-w",
-  height: "h",
-  // min-height: "min-h",
-   // max-height: "max-h",
-);
-$size-options: (
-  "auto": auto,
-  "full": 100%,
-  "1\\/2": 50%,
-  "1\\/3": calc(100% / 3),
-  "1\\/4": calc(100% / 4),
-  /*"1\\/5": calc(100% / 5),
-  "1\\/6": calc(100% / 6),
-  "1\\/8": calc(100% / 8),
-  "1\\/10": calc(100% / 10),
-  "1\\/12": calc(100% / 12),
-  */"2\\/3":
-    calc(200% / 3),
-  "3\\/4": calc(300% / 4) /*
-  "4\\/5": calc(400% / 5),
-  "5\\/6": calc(500% / 6),*/,
-);
-
-@each $property, $class in $property-options {
-  @each $class-suffix, $value in $size-options {
-    .#{$class}-#{string.unquote($class-suffix)} {
-      #{$property}: #{$value};
-    }
-  }
-}

package/src/utilities/spacing.scss

@@ -1,63 +0,0 @@
-$spacing: (
-  "64",
-  "56",
-  "48",
-  "32",
-  "24",
-  "20",
-  "18",
-  "16",
-  "14",
-  "12",
-  "10",
-  "8",
-  "6",
-  "4",
-  "2",
-  "0"
-);
-
-@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/typography.scss

@@ -1,131 +0,0 @@
-@use "sass:selector";
-@use "../vars/colors-palette" as *;
-
-$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"
-);
-
-@each $size, $name in $sizes {
-  $px: ".text-#{$size}";
-  $selector: ($px);
-
-  @if $name {
-    $selector: selector.extend($selector, $px, (".text-#{$name}"));
-  }
-
-  #{$selector} {
-    font-size: var(--text-size-#{$size});
-  }
-}
-
-.font-headline {
-  font-family: var(--font-family-headline);
-}
-
-.font-avenir {
-  font-family: var(--font-family);
-}
-
-.font-mono {
-  font-family: monospace;
-}
-
-$text-transform-options: (capitalize, uppercase, lowercase);
-
-@each $option in $text-transform-options {
-  .text-#{$option} {
-    text-transform: #{$option};
-  }
-}
-
-$text-wrap-options: ("wrap", "nowrap", "balance", "pretty");
-
-@each $option in $text-wrap-options {
-  .text-#{$option} {
-    text-wrap: #{$option};
-  }
-}
-
-$text-align-options: ("left", "center", "right", "justify", "start", "end");
-
-@each $option in $text-align-options {
-  .text-#{$option} {
-    text-align: #{$option};
-  }
-}
-
-$font-weight-options: (300 "light", 400 "normal", 500 "medium", 600 "semibold", 700 "bold");
-
-@each $weight, $name in $font-weight-options {
-  .font-#{$name} {
-    font-weight: #{$weight};
-  }
-}
-
-.italic {
-  font-style: italic;
-}
-
-$text-decoration-line-options: (underline, overline, line-through, no-underline);
-
-@each $option in $text-decoration-line-options {
-  .#{$option} {
-    text-decoration-line: if($option == "no-underline", none, $option);
-  }
-}
-
-$letter-spacing-options: (
-  "tracking-tighter": "-0.05em",
-  "tracking-tight": "-0.025em",
-  "tracking-normal": "0em",
-  "tracking-wide": "0.025em",
-  "tracking-wider": "0.05em",
-  "tracking-widest": "0.1em",
-);
-
-@each $option, $value in $letter-spacing-options {
-  .#{$option} {
-    letter-spacing: #{$value};
-  }
-}
-
-@each $key, $color in $dark-colors {
-  .text-dark-#{$key} {
-    color: #{$color};
-  }
-}
-
-@each $key, $color in $text-colors {
-  .text-#{$key} {
-    color: #{$color};
-  }
-}
-
-@each $key, $color in $standalone-colors {
-  .text-#{$key} {
-    color: #{$color};
-  }
-}

package/src/utilities.scss

@@ -1,9 +0,0 @@
-@use "./utilities/background";
-@use "./utilities/border";
-@use "./utilities/typography";
-@use "./utilities/grid";
-@use "./utilities/display";
-@use "./utilities/spacing";
-@use "./utilities/flex";
-@use "./utilities/position";
-@use "./utilities/sizing";