@codeforamerica/marcomms-design-system 1.18.2 → 1.19.0

package/src/core/grid.scss

@@ -1,394 +0,0 @@
-@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

@@ -1,111 +0,0 @@
-
-// 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

@@ -1,103 +0,0 @@
-@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;
-    }
-  }
-}
-