@codeforamerica/marcomms-design-system 1.19.0 → 1.19.1

package/src/core/grid.scss

@@ -0,0 +1,394 @@
+@use "sass:math";
+@use "sass:list";
+
+// ===========
+// Grid System
+// ===========
+
+// -------------
+// Configuration
+// -------------
+
+$grid-columns: 12;
+$base-font-size: 20px;
+$gap-width: 1.5 * $base-font-size; // 30px - equivalent to --spacing-layout-1
+$outer-margin: 1.5 * $base-font-size; // 30px - equivalent to --spacing-layout-1
+$max-width: 1200px;
+
+// Breakpoints: name, min-width, container-width
+$breakpoints: (
+  sm: (480px, 480px),
+  md: (768px, 768px),
+  lg: (1024px, $max-width)
+);
+
+// Calculated values
+$gap-compensation: calc($gap-width * -0.5);
+$half-gap-width: calc($gap-width * 0.5);
+
+// ------
+// Mixins
+// ------
+
+@mixin flex-container($direction: row, $wrap: wrap) {
+  display: flex;
+  flex-flow: $direction $wrap;
+}
+
+@mixin col-base {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+}
+
+@mixin col-size($size) {
+  // Calculate width accounting for gaps between columns
+  $gap-count: $grid-columns - 1;
+  $total-gap-width: $gap-count * $gap-width;
+  $available-width: calc(100% - #{$total-gap-width});
+  $width: calc(#{$available-width} / #{$grid-columns} * #{$size});
+  
+  // For single column, add back the gap space
+  @if $size == $grid-columns {
+    $width: 100%;
+  }
+
+  @else {
+    $additional-gaps: $size - 1;
+    $width: calc(#{$width} + #{$additional-gaps * $gap-width});
+  }
+
+  flex-basis: $width;
+  max-width: $width;
+}
+
+@mixin col-offset($size) {
+  @if $size == 0 {
+    margin-left: 0;
+  }
+
+  @else {
+    // Calculate offset accounting for gaps between columns
+    $gap-count: $grid-columns - 1;
+    $total-gap-width: $gap-count * $gap-width;
+    $available-width: calc(100% - #{$total-gap-width});
+    $additional-gaps: $size;
+    
+    margin-left: calc(#{$available-width} / #{$grid-columns} * #{$size} + #{$additional-gaps * $gap-width});
+  }
+}
+
+// ----------
+// Containers
+// ----------
+
+.wrapper {
+  box-sizing: border-box;
+  max-width: $max-width;
+  margin: 0 auto;
+  padding-inline: $outer-margin;
+}
+
+.container-fluid {
+  margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+// No gap variant
+.container-fluid--no-gap {
+  row-gap: 0;
+}
+
+// Apply gaps only when direct children are rows
+.container-fluid:has(> .row):not(.container-fluid--no-gap) {
+  row-gap: var(--row-gap, #{$gap-width});
+}
+
+// When wrapper and container-fluid are combined, wrapper handles padding
+.wrapper.container-fluid {
+  padding-inline: $outer-margin;
+}
+
+.container {
+  margin-inline: auto;
+  padding-inline: $outer-margin;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+// ----
+// Rows
+// ----
+
+.row {
+  @include flex-container(row, wrap);
+
+  box-sizing: border-box;
+  flex-basis: 100%;
+  column-gap: var(--column-gap, #{$gap-width});
+  row-gap: var(--row-gap, var(--column-gap, #{$gap-width}));
+
+  // Row variants
+  &.reverse {
+    flex-direction: row-reverse;
+  }
+
+  // No gap modifier
+  &--no-gap {
+    column-gap: 0;
+    row-gap: 0;
+    
+    // Override column sizing to use simple percentages
+    @for $i from 1 through $grid-columns {
+      .col-xs-#{$i} {
+        flex-basis: math.percentage(math.div($i, $grid-columns));
+        max-width: math.percentage(math.div($i, $grid-columns));
+      }
+    }
+    
+    // Responsive column overrides
+    @each $name, $values in $breakpoints {
+      $min-width: list.nth($values, 1);
+      
+      @media only screen and (min-width: $min-width) {
+        @for $i from 1 through $grid-columns {
+          .col-#{$name}-#{$i} {
+            flex-basis: math.percentage(math.div($i, $grid-columns));
+            max-width: math.percentage(math.div($i, $grid-columns));
+          }
+        }
+      }
+    }
+  }
+}
+
+.container-fluid > .row {
+  flex: 1;
+}
+
+// Testing variant - shows grid lines between columns
+.container-fluid--grid-test {
+  position: relative;
+  
+  // Fill the outer margins with light grey
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 0;
+    background: 
+      // Left margin
+      linear-gradient(
+        to right,
+        rgba(200, 200, 200, 0.3) 0,
+        rgba(200, 200, 200, 0.3) $outer-margin,
+        transparent $outer-margin
+      ),
+      // Right margin  
+      linear-gradient(
+        to left,
+        rgba(200, 200, 200, 0.3) 0,
+        rgba(200, 200, 200, 0.3) $outer-margin,
+        transparent $outer-margin
+      );
+  }
+  
+  // Fill the gaps between columns with light grey
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: $outer-margin;
+    right: $outer-margin;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 1;
+    background-image: repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent calc((100% - #{$gap-width * 11}) / 12), // Column width
+      rgba(200, 200, 200, 0.4) calc((100% - #{$gap-width * 11}) / 12), // Start of gap
+      rgba(200, 200, 200, 0.4) calc((100% - #{$gap-width * 11}) / 12 + #{$gap-width}), // End of gap
+      transparent calc((100% - #{$gap-width * 11}) / 12 + #{$gap-width}) // Next column starts
+    );
+  }
+  
+  .row {
+    position: relative;
+    z-index: 2;
+  }
+}
+
+// -------
+// Columns
+// -------
+
+// Auto-width column
+.col-xs {
+  @include col-base;
+
+  flex-grow: 1;
+  flex-basis: 0;
+  max-width: 100%;
+}
+
+// Sized columns (1-12)
+@for $i from 1 through $grid-columns {
+  .col-xs-#{$i} {
+    @include col-base;
+    @include col-size($i);
+  }
+}
+
+// Offset columns (0-12)
+@for $i from 0 through $grid-columns {
+  .col-xs-offset-#{$i} {
+    @include col-offset($i);
+  }
+}
+
+// Column reverse
+.col.reverse {
+  flex-direction: column-reverse;
+}
+
+// ------------------
+// Responsive columns
+// ------------------
+
+@each $name, $values in $breakpoints {
+  $min-width: list.nth($values, 1);
+  $container-width: list.nth($values, 2);
+
+  @media only screen and (min-width: $min-width) {
+    .container {
+      width: $container-width;
+    }
+
+    // Auto-width column
+    .col-#{$name} {
+      @include col-base;
+
+      flex-grow: 1;
+      flex-basis: 0;
+      max-width: 100%;
+    }
+
+    // Sized columns (1-12)
+    @for $i from 1 through $grid-columns {
+      .col-#{$name}-#{$i} {
+        @include col-base;
+        @include col-size($i);
+      }
+    }
+
+    // Offset columns (0-12)
+    @for $i from 0 through $grid-columns {
+      .col-#{$name}-offset-#{$i} {
+        @include col-offset($i);
+      }
+    }
+
+    // Row flex sizing
+    @for $i from 1 through 3 {
+      .row-#{$name}-#{$i} {
+        flex: $i !important;
+      }
+    }
+
+    // Row ordering
+    .row-first-#{$name} {
+      order: -1;
+    }
+
+    .row-last-#{$name} {
+      order: 1;
+    }
+  }
+}
+
+// -------------------
+// Alignment Utilities
+// -------------------
+
+// Horizontal alignment (justify-content)
+.start-xs { justify-content: flex-start; }
+
+.center-xs { justify-content: center; }
+
+.end-xs { justify-content: flex-end; }
+
+.around-xs { justify-content: space-around; }
+
+.between-xs { justify-content: space-between; }
+
+// Vertical alignment (align-items)
+.top-xs { align-items: flex-start; }
+
+.middle-xs { align-items: center; }
+
+.bottom-xs { align-items: flex-end; }
+
+.stretch-xs { 
+  align-items: stretch;
+  
+  > * {
+    display: flex;
+  }
+}
+
+// Ordering
+.first-xs { order: -1; }
+
+.last-xs { order: 1; }
+
+// Responsive alignment utilities
+@each $name, $values in $breakpoints {
+  $min-width: list.nth($values, 1);
+
+  @media only screen and (min-width: $min-width) {
+    // Horizontal alignment
+    .start-#{$name} { justify-content: flex-start; }
+    .center-#{$name} { justify-content: center; }
+    .end-#{$name} { justify-content: flex-end; }
+    .around-#{$name} { justify-content: space-around; }
+    .between-#{$name} { justify-content: space-between; }
+
+    // Vertical alignment
+    .top-#{$name} { align-items: flex-start; }
+    .middle-#{$name} { align-items: center; }
+    .bottom-#{$name} { align-items: flex-end; }
+    .stretch-#{$name} { 
+      align-items: stretch;
+
+      & > * {
+        display: flex;
+        flex-direction: column;
+      }
+
+      & > * > *{
+        height: 100%;
+      }
+    }
+
+    // Ordering
+    .first-#{$name} { order: -1; }
+    .last-#{$name} { order: 1; }
+  }
+}
+
+// -----------------
+// Utility Functions
+// -----------------
+
+@function column-span($columns) {
+  $width: math.div($max-width - $outer-margin, $grid-columns) * $columns - $gap-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,103 @@
+@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);
+  }
+} 
+
+// Special case: when stack is combined with flex containers, use gap instead of margins
+.container-fluid.stack {
+  gap: var(--spacing);
+  
+  // Reset margin-based spacing since gap handles it
+  & > * + * {
+    margin-block-start: 0;
+  }
+}
+
+.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
+
+:has(> .grid) {
+  container-type: inline-size;
+}
+
+.grid {
+  --spacing: var(--spacing-layout-1);
+
+  align-items: stretch;
+  column-gap: var(--spacing);
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  row-gap: var(--spacing);
+
+  & > * {
+    flex: 0 0 auto;
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  @container (width >= 768px) {
+    & > * {
+      flex-basis: calc((100% - var(--spacing) * 2) / 3);
+      max-width: calc((100% - var(--spacing) * 2) / 3);
+    }
+
+    /* Center align when there are fewer than 3 items */
+    &:has(> :nth-child(1):nth-last-child(1)),
+    &:has(> :nth-child(2):nth-last-child(1)) {
+      justify-content: center;
+    }
+  }
+}
+