@codeforamerica/marcomms-design-system 1.0.0 → 1.0.1

package/src/core/_grid.scss

@@ -0,0 +1,295 @@
+@use "sass:math";
+
+@import "~sass-flex-mixin/flex";
+
+$base-font-size: 20px;
+
+$grid-columns: 12;
+$gutter-width: 1.5 * $base-font-size; // equivalent to --gutter-width token (i.e. --spacing-layout-1)
+$outer-margin: 1.5 * $base-font-size; // equivalent to --outer-margin token (i.e. --spacing-layout-1)
+
+$breakpoints: sm 480px 480px, md 768px 768px;
+$flexboxgrid-max-width: 1200px;
+
+$gutter-compensation: $gutter-width * .5 * -1;
+$half-gutter-width: $gutter-width * .5;
+
+.wrapper {
+  box-sizing: border-box;
+  max-width: $flexboxgrid-max-width;
+  margin: 0 auto;
+}
+
+.container-fluid {
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $outer-margin;
+  padding-left: $outer-margin;
+}
+
+.row {
+  @include flexbox();
+  @include flex(0, 1, auto);
+  @include flex-direction(row);
+  @include flex-wrap(wrap);
+
+  box-sizing: border-box;
+  margin-right: $gutter-compensation;
+  margin-left: $gutter-compensation;
+}
+
+.row.reverse {
+  @include flex-direction(row-reverse);
+}
+
+.col.reverse {
+  @include flex-direction(column-reverse);
+}
+
+@mixin flexboxgrid-sass-col-common {
+  box-sizing: border-box;
+
+  // split @include flex(0, 0, auto) into individual props
+  @include flex-grow(0);
+  @include flex-shrink(0);
+
+  // we leave @include flex-basis(auto) out of common because  
+  // in some spots we need it and some we dont
+  // more why here: https://github.com/kristoferjoseph/flexboxgrid/issues/126
+
+  padding-right: $half-gutter-width;
+  padding-left: $half-gutter-width;
+}
+
+$name: xs;
+.col-#{$name} {
+  @include flexboxgrid-sass-col-common;
+  @include flex-basis(auto);
+}
+@for $i from 1 through $grid-columns {
+  .col-#{$name}-#{$i} {
+    @include flexboxgrid-sass-col-common;
+    @include flex-basis(math.div(100%, $grid-columns) * $i);
+    max-width: math.div(100%, $grid-columns) * $i;
+  }
+}
+@for $i from 1 through $grid-columns {
+  .col-#{$name}-offset-#{$i} {
+    @include flexboxgrid-sass-col-common;
+    margin-left: math.div(100%, $grid-columns) * $i;
+  }
+}
+.col-#{$name} {
+  @include flex-grow(1);
+  @include flex-basis(0);
+  max-width: 100%;
+}
+.start-#{$name} {
+  @include justify-content(flex-start);
+  text-align: start;
+}
+
+.center-#{$name} {
+  @include justify-content(center);
+  text-align: center;
+}
+
+.end-#{$name} {
+  @include justify-content(flex-end);
+  text-align: end;
+}
+
+.top-#{$name} {
+  @include align-items(flex-start);
+}
+
+.middle-#{$name} {
+  @include align-items(center);
+}
+
+.bottom-#{$name} {
+  @include align-items(flex-end);
+}
+
+.around-#{$name} {
+  @include justify-content(space-around);
+}
+
+.between-#{$name} {
+  @include justify-content(space-between);
+}
+
+.first-#{$name} {
+  order: -1;
+}
+
+.last-#{$name} {
+  order: 1;
+}
+
+
+@each $breakpoint in $breakpoints {
+  $name: nth($breakpoint, 1);
+  $size: nth($breakpoint, 2);
+  $container: nth($breakpoint, 3);
+  @media only screen and (min-width: $size) {
+    .container {
+      width: $container;
+    }
+
+    .col-#{$name} {
+      @include flexboxgrid-sass-col-common;
+      @include flex-basis(auto);
+    }
+    @for $i from 1 through $grid-columns {
+      .col-#{$name}-#{$i} {
+        @include flexboxgrid-sass-col-common;
+        @include flex-basis(math.div(100%, $grid-columns) * $i);
+        max-width: math.div(100%, $grid-columns) * $i;
+      }
+    }
+    @for $i from 1 through $grid-columns {
+      .col-#{$name}-offset-#{$i} {
+        @include flexboxgrid-sass-col-common;
+        margin-left: math.div(100%, $grid-columns) * $i
+      }
+    }
+    .col-#{$name} {
+      @include flex-grow(1);
+      @include flex-basis(0);
+      max-width: 100%;
+    }
+    .start-#{$name} {
+      @include justify-content(flex-start);
+      text-align: start;
+    }
+
+    .center-#{$name} {
+      @include justify-content(center);
+      text-align: center;
+    }
+
+    .end-#{$name} {
+      @include justify-content(flex-end);
+      text-align: end;
+    }
+
+    .top-#{$name} {
+      @include align-items(flex-start);
+    }
+
+    .middle-#{$name} {
+      @include align-items(center);
+    }
+
+    .bottom-#{$name} {
+      @include align-items(flex-end);
+    }
+
+    .around-#{$name} {
+      @include justify-content(space-around);
+    }
+
+    .between-#{$name} {
+      @include justify-content(space-between);
+    }
+
+    .first-#{$name} {
+      order: -1;
+    }
+
+    .last-#{$name} {
+      order: 1;
+    }
+  }
+}
+
+.row {
+  flex-basis: 100%;
+  row-gap: var(--spacing-layout-1);
+}
+
+.row--no-gutters {
+  margin-left: 0;
+  margin-right: 0;
+
+  & > *[class*='col-'] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.container-fluid {
+  display: flex;
+  flex-direction: column;
+
+  & > .row {
+    flex: 1;
+  }
+
+  @each $breakpoint in $breakpoints {
+    $name: nth($breakpoint, 1);
+    $size: nth($breakpoint, 2);
+    @media only screen and (min-width: $size) {
+      @for $i from 1 through 3 {
+        .row-#{$name}-#{$i} {
+          flex: $i !important;
+        }
+        .row-first-#{$name} {
+          order: -1;
+        }   
+        .row-last-#{$name} {
+          order: 1;
+        }
+      }
+    }  
+  }
+
+}
+
+@each $breakpoint in $breakpoints {
+  $name: nth($breakpoint, 1);
+
+  // Stop Flexbox Grid alignment from affecting text-alignment
+  .start-xs,
+  .center-xs,
+  .end-xs,
+  .start-#{$name},
+  .center-#{$name},
+  .end-#{$name} {
+    text-align: inherit;
+  }
+
+  // Alignment class for aligning row items at the top of a row
+  .top-xs,
+  .top-#{$name} {
+    align-items: flex-start;
+  }
+
+  // Alignment class for aligning row items in the middle of a row vertically
+  .middle-xs,
+  .middle-#{$name} {
+    align-items: center;
+  }
+
+  // Alignment class for aligning row items at the bottom of a row
+  .bottom-xs,
+  .bottom-#{$name} {
+    align-items: flex-end;
+  }
+
+  // Alignment class for stretching items to fill row
+  .stretch-xs,
+  .stretch-#{$name} {
+    align-items: stretch;
+
+    & > * {
+      display: flex;
+    }
+  }
+}
+
+@function column-span($columns) {
+  $width: ( math.div($flexboxgrid-max-width - $outer-margin, $grid-columns) * $columns ) - $gutter-width;
+  @return $width;
+}

package/src/core/_helpers.scss

@@ -0,0 +1,111 @@
+
+// Text alignment
+
+.text-left {
+  text-align: start !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-right {
+  text-align: end !important;
+}
+
+// Text color
+
+.color-purple { 
+  color: var(--purple-80); 
+}
+
+.color-red { 
+  color: var(--red-80); 
+}
+
+.color-green { 
+  color: var(--green-80);
+}
+
+// Margins
+
+.no-margin {
+  margin: 0;
+}
+
+// Rounded
+.rounded-corners {
+  border-radius: var(--rounded-corners);
+}
+
+// Hidden
+
+.is-hidden {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+// Loading
+
+.is-loading {
+  position: relative;
+  opacity: 0.4;
+
+  &:after {
+    content: '';
+    height: 100%;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
+
+// Screen-reader-only (for example, for adding screenreader labels to semantic icons)
+
+.sr-only,
+.screen-reader-text {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+// Skip link
+
+a.skip-link {
+  background-color: var(--white);
+  height: 1px;
+  left: -999px;
+  overflow: hidden;
+  position: absolute;
+  text-decoration: none;
+  top: auto;
+  width: 1px;
+  z-index: -999;
+
+  &:focus, 
+  &:active {
+    height: initial;
+    left: var(--spacing-component-2);
+    overflow: auto;
+    padding: var(--spacing-component-2);
+    text-align: center;
+    top: var(--spacing-component-2);
+    width: initial;
+    z-index: 999;
+  }
+}

package/src/core/_layout.scss

@@ -0,0 +1,79 @@
+@use "grid";
+
+// Sections
+
+.section {
+  --bg-color: var(--white);
+  --border: var(--hairline) solid var(--black-10);
+  --padding: var(--spacing-layout-2);
+  --spacing: var(--spacing-layout-1);
+
+  background-color: var(--bg-color);
+  border-block-start: var(--border);
+  padding-block: var(--padding);
+}
+
+// ======
+
+// Cluster
+
+.cluster {  
+  overflow: hidden;
+
+  & > * {
+    display: flex;
+    flex-wrap: wrap;
+    margin: var(--spacing, calc(var(--spacing-layout-1) / 2 * -1));
+  }
+
+  & > * > * {
+    margin: var(--spacing, calc(var(--spacing-layout-1) / 2));
+  }
+}
+
+// =====
+
+// Stack
+
+.stack {
+  --spacing: var(--spacing-layout-1);
+
+  & > * + * {
+    margin-block-start: var(--spacing);
+  }
+}
+
+.stack-with-lines {
+  & > * + *::before {
+    border-block-start: var(--hairline) solid var(--black-20);
+    content: "";
+    display: block;
+    margin-block: var(--spacing, var(--spacing-layout-1));
+    width: 100%;
+  }
+}
+
+// =====
+
+// Grid
+
+.grid {
+  --spacing: var(--spacing-layout-1);
+
+  display: grid;
+  grid-gap: var(--spacing);
+  grid-template-columns: repeat(auto-fit, minmax(var(--column-span-3), 1fr));
+  justify-content: center;
+  
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(auto-fit, minmax(var(--column-span-4), 1fr));
+
+    & > * {
+      max-width: var(--column-span-4);
+    }
+  }
+    
+  & > * {
+    height: 100%;
+  }
+}

package/src/core/_reset.scss

@@ -0,0 +1,53 @@
+// Use a more-intuitive box-sizing model.
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+// Remove default margin
+* {
+  margin: 0;
+}
+
+// Set default text-wrap of 'pretty'
+* {
+  text-wrap: pretty;
+}
+
+// Wrap overly long words
+* {
+  overflow-wrap: break-word;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+
+// Fix Safari antialiasing for variable fonts
+* {
+  font-synthesis: none !important;
+}
+
+// Improve text rendering
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+// Reasonable media defaults
+img, picture, video, canvas, svg {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+// Remove built-in form typography styles
+input, button, textarea, select {
+  font: inherit;
+}
+
+// Avoid text overflows
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+// Create a root stacking context
+#root, #__next {
+  isolation: isolate;
+}