@octaviaflow/grid 1.0.0

package/scss/_mixins.scss

@@ -0,0 +1,297 @@
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:meta';
+@use 'sass:math';
+
+@use 'config' as *;
+@use 'breakpoint' as *;
+
+// -----------------------------------------------------------------------------
+// Columns
+// -----------------------------------------------------------------------------
+
+/// Used to initialize the default properties for a column class, most notably
+/// for setting width and default gutters when a column's breakpoint has not been
+/// hit yet.
+/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
+/// @param {Number} $collapsed-gutter [$grid-gutter--condensed] - The condensed mode gutter
+/// @access private
+/// @group @octaviaflow/grid
+@mixin -make-col-ready(
+  $gutter: $grid-gutter,
+  $condensed-gutter: $grid-gutter--condensed
+) {
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  inline-size: 100%;
+  padding-inline: ($gutter * 0.5);
+
+  // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
+  // side.
+  .#{$prefix}--row--condensed &,
+  .#{$prefix}--grid--condensed & {
+    padding-inline: ($condensed-gutter * 0.5);
+  }
+
+  // For our narrow use-case, our container hangs 16px into the gutter
+  .#{$prefix}--row--narrow &,
+  .#{$prefix}--grid--narrow & {
+    padding-inline: 0 ($gutter * 0.5);
+  }
+}
+
+/// Define the width of the column for a given span and column count.
+/// A width of 0 will hide the column entirely.
+/// @param {Number} $span - The number of columns covered
+/// @param {Number} $columns - The total number of columns available
+/// @access private
+/// @group @octaviaflow/grid
+@mixin -make-col($span, $columns) {
+  @if $span == 0 {
+    display: none;
+  } @else {
+    // Explicitly include `display: block` to override
+    display: block;
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    flex: 0 0 math.percentage(math.div($span, $columns));
+    max-inline-size: math.percentage(math.div($span, $columns));
+  }
+}
+
+/// Create a column offset for a given span and column count.
+/// @param {Number} $span - The number of columns the offset should cover
+/// @param {Number} $columns - The total number of columns available
+/// @access private
+/// @group @octaviaflow/grid
+@mixin -make-col-offset($span, $columns) {
+  $offset: 0;
+  $offset: math.div($span, $columns);
+  @if $offset == 0 {
+    margin-inline-start: 0;
+  } @else {
+    margin-inline-start: math.percentage($offset);
+  }
+}
+
+/// Output the CSS required for all the columns in a given grid system.
+/// @param {Map} $breakpoints [$grid-breakpoints] - The breakpoints in the grid system
+/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
+/// @access private
+/// @group @octaviaflow/grid
+@mixin -make-grid-columns(
+  $breakpoints: $grid-breakpoints,
+  $gutter: $grid-gutter
+) {
+  .#{$prefix}--col {
+    @include -make-col-ready($gutter);
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint);
+    $columns: map.get(map.get($breakpoints, $breakpoint), columns);
+
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 0 through $columns {
+      .#{$prefix}--col#{$infix}-#{$i} {
+        @include -make-col-ready($gutter);
+      }
+    }
+
+    .#{$prefix}--col#{$infix},
+    .#{$prefix}--col#{$infix}--auto {
+      @include -make-col-ready($gutter);
+    }
+
+    @include breakpoint($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .#{$prefix}--col,
+      .#{$prefix}--col#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-inline-size: 100%;
+      }
+
+      .#{$prefix}--col--auto,
+      .#{$prefix}--col#{$infix}--auto {
+        flex: 1 0 0%;
+        inline-size: auto;
+        // Reset earlier grid tiers
+        max-inline-size: 100%;
+      }
+
+      @for $i from 0 through $columns {
+        .#{$prefix}--col#{$infix}-#{$i} {
+          @include -make-col($i, $columns);
+        }
+      }
+
+      @for $i from 0 through ($columns - 1) {
+        @if not($infix == '') {
+          .#{$prefix}--offset#{$infix}-#{$i} {
+            @include -make-col-offset($i, $columns);
+          }
+        }
+      }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Rows
+// -----------------------------------------------------------------------------
+
+/// Define the properties for a selector assigned to a row in the grid system.
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
+/// @access private
+/// @group @octaviaflow/grid
+@mixin make-row($gutter: $grid-gutter) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-inline: -1 * $gutter * 0.5;
+}
+
+// -----------------------------------------------------------------------------
+// No gutter
+// -----------------------------------------------------------------------------
+
+/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
+/// classes are useful for dropping the gutter in fluid situations.
+/// @access private
+/// @group @octaviaflow/grid
+@mixin -no-gutter {
+  .#{$prefix}--no-gutter,
+  .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
+    padding-inline: 0;
+  }
+
+  .#{$prefix}--no-gutter--start,
+  .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
+    padding-inline-start: 0;
+  }
+
+  .#{$prefix}--no-gutter--end,
+  .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
+    padding-inline-end: 0;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Hang
+// -----------------------------------------------------------------------------
+
+/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are
+/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type.
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
+/// @access private
+/// @group @octaviaflow/grid
+@mixin -hang($gutter: $grid-gutter) {
+  .#{$prefix}--hang--start {
+    padding-inline-start: ($gutter * 0.5);
+  }
+
+  .#{$prefix}--hang--end {
+    padding-inline-end: ($gutter * 0.5);
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Grid
+// -----------------------------------------------------------------------------
+
+/// Create the container for a grid. Will cause full-bleed for the grid unless
+/// max-width properties are added with `-make-container-max-widths`
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @octaviaflow/grid
+@mixin -make-container($breakpoints: $grid-breakpoints) {
+  margin-inline: auto;
+
+  @include -set-largest-breakpoint();
+
+  @each $name, $value in $breakpoints {
+    $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
+    $margin: map.get($value, margin);
+
+    @if $prev-breakpoint {
+      $prev-margin: map.get($prev-breakpoint, margin);
+      @if $prev-margin != $margin {
+        @include breakpoint($name) {
+          padding-inline: #{($grid-gutter * 0.5) + $margin};
+        }
+      }
+    } @else {
+      @include breakpoint($name) {
+        padding-inline: #{($grid-gutter * 0.5) + $margin};
+      }
+    }
+  }
+}
+
+/// Get the last breakpoint width and set max-width to its value
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @octaviaflow/grid
+@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
+  $largest-breakpoint: last-map-item($breakpoints);
+
+  max-inline-size: map.get($largest-breakpoint, 'width');
+}
+
+/// Add in the max-widths for each breakpoint to the container
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @octaviaflow/grid
+@mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
+  @each $name, $value in $breakpoints {
+    @include breakpoint($name) {
+      max-inline-size: map.get($value, width);
+    }
+  }
+}
+
+/// Generate the CSS for a grid for the given breakpoints and gutters
+/// @param {Map} $breakpoints [$grid-breakpoints] - The default breakpoints
+/// @param {Number} $grid-gutter [$grid-gutter] - The default gutters
+/// @param {Number} $condensed-gutter [$grid-gutter--condensed] - The condensed mode gutter
+/// @access public
+/// @group @octaviaflow/grid
+@mixin grid(
+  $breakpoints: $grid-breakpoints,
+  $grid-gutter: $grid-gutter,
+  $condensed-gutter: $grid-gutter--condensed
+) {
+  .#{$prefix}--grid {
+    @include -make-container($breakpoints);
+  }
+
+  @include largest-breakpoint($breakpoints) {
+    .#{$prefix}--grid--full-width {
+      max-inline-size: 100%;
+    }
+  }
+
+  .#{$prefix}--row {
+    @include make-row();
+  }
+
+  .#{$prefix}--row-padding [class*='#{$prefix}--col'],
+  .#{$prefix}--col-padding {
+    padding-block: $grid-gutter * 0.5;
+  }
+
+  .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
+    padding-block: $condensed-gutter * 0.5;
+  }
+
+  @include -make-grid-columns($breakpoints, $grid-gutter);
+  @include -no-gutter();
+  @include -hang($grid-gutter);
+}

package/scss/vendor/@octaviaflow/layout/_convert.scss

@@ -0,0 +1,56 @@
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:meta';
+@use 'sass:math';
+
+/// Default font size
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$base-font-size: 16px !default;
+
+/// Convert a given px unit to a rem unit
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @octaviaflow/layout
+@function to-rem($px) {
+  @if math.unit($px) != 'px' {
+    @error "Expected argument $px to be of type `px`, instead received: `#{math.unit($px)}`";
+  }
+
+  @return math.div($px, $base-font-size) * 1rem;
+}
+
+/// This function causes an error when using sass > 1.65.0
+/// Replaced with `to-rem` function
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @deprecated
+/// @group @octaviaflow/layout
+@function rem($px) {
+  @if unit($px) != 'px' {
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return math.div($px, $base-font-size) * 1rem;
+}
+
+/// Convert a given px unit to a em unit
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with em unit
+/// @access public
+/// @group @octaviaflow/layout
+@function em($px) {
+  @if unit($px) != 'px' {
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return math.div($px, $base-font-size) * 1em;
+}

package/scss/vendor/@octaviaflow/layout/_spacing.scss

@@ -0,0 +1,10 @@
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward './generated/fluid-spacing';
+@forward './generated/spacing';
+@forward './generated/layout';

package/scss/vendor/@octaviaflow/layout/_utilities.scss

@@ -0,0 +1,41 @@
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Map deep get
+/// @author Hugo Giraudel
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Arglist} $keys - Key chain
+/// @return {*} Desired value
+/// @group @octaviaflow/layout
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+  }
+  @return $map;
+}
+
+/// Provide a map and index, and get back the relevant key value
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Integer} $index - Key chain
+/// @return {String} Desired value
+/// @group @octaviaflow/layout
+@function key-by-index($map, $index) {
+  $keys: map.keys($map);
+  @return nth($keys, $index);
+}
+
+/// Pass in a map, and get the last one in the list back
+/// @access public
+/// @param {Map} $map - Map
+/// @return {*} Desired value
+/// @group @octaviaflow/layout
+@function last-map-item($map) {
+  $total-length: list.length($map);
+  @return map-get($map, carbon--key-by-index($map, $total-length));
+}

package/scss/vendor/@octaviaflow/layout/generated/_container.scss

@@ -0,0 +1,43 @@
+// Code generated by @octaviaflow/layout. DO NOT EDIT.
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$container-01: 1.5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$container-02: 2rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$container-03: 2.5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$container-04: 3rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$container-05: 4rem !default;
+
+/// @type Map
+/// @access public
+/// @group @octaviaflow/layout
+$container: (
+  container-01: $container-01,
+  container-02: $container-02,
+  container-03: $container-03,
+  container-04: $container-04,
+  container-05: $container-05,
+);

package/scss/vendor/@octaviaflow/layout/generated/_fluid-spacing.scss

@@ -0,0 +1,37 @@
+// Code generated by @octaviaflow/layout. DO NOT EDIT.
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$fluid-spacing-01: 0 !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$fluid-spacing-02: 2vw !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$fluid-spacing-03: 5vw !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$fluid-spacing-04: 10vw !default;
+
+/// @type Map
+/// @access public
+/// @group @octaviaflow/layout
+$fluid-spacing: (
+  fluid-spacing-01: $fluid-spacing-01,
+  fluid-spacing-02: $fluid-spacing-02,
+  fluid-spacing-03: $fluid-spacing-03,
+  fluid-spacing-04: $fluid-spacing-04,
+);

package/scss/vendor/@octaviaflow/layout/generated/_icon-size.scss

@@ -0,0 +1,25 @@
+// Code generated by @octaviaflow/layout. DO NOT EDIT.
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$icon-size-01: 1rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$icon-size-02: 1.25rem !default;
+
+/// @type Map
+/// @access public
+/// @group @octaviaflow/layout
+$icon-size: (
+  icon-size-01: $icon-size-01,
+  icon-size-02: $icon-size-02,
+);

package/scss/vendor/@octaviaflow/layout/generated/_layout.scss

@@ -0,0 +1,55 @@
+// Code generated by @octaviaflow/layout. DO NOT EDIT.
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$layout-01: 1rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$layout-02: 1.5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$layout-03: 2rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$layout-04: 3rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$layout-05: 4rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$layout-06: 6rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$layout-07: 10rem !default;
+
+/// @type Map
+/// @access public
+/// @group @octaviaflow/layout
+$layout: (
+  layout-01: $layout-01,
+  layout-02: $layout-02,
+  layout-03: $layout-03,
+  layout-04: $layout-04,
+  layout-05: $layout-05,
+  layout-06: $layout-06,
+  layout-07: $layout-07,
+);

package/scss/vendor/@octaviaflow/layout/generated/_size.scss

@@ -0,0 +1,17 @@
+// Code generated by @octaviaflow/layout. DO NOT EDIT.
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$size-xs: 1.5rem;
+$size-sm: 2rem;
+$size-md: 2.5rem;
+$size-lg: 3rem;
+$size-xl: 4rem;
+$size-2xl: 5rem;

package/scss/vendor/@octaviaflow/layout/generated/_spacing.scss

@@ -0,0 +1,91 @@
+// Code generated by @octaviaflow/layout. DO NOT EDIT.
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-01: 0.125rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-02: 0.25rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-03: 0.5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-04: 0.75rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-05: 1rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-06: 1.5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-07: 2rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-08: 2.5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-09: 3rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-10: 4rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-11: 5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-12: 6rem !default;
+
+/// @type Number
+/// @access public
+/// @group @octaviaflow/layout
+$spacing-13: 10rem !default;
+
+/// @type Map
+/// @access public
+/// @group @octaviaflow/layout
+$spacing: (
+  spacing-01: $spacing-01,
+  spacing-02: $spacing-02,
+  spacing-03: $spacing-03,
+  spacing-04: $spacing-04,
+  spacing-05: $spacing-05,
+  spacing-06: $spacing-06,
+  spacing-07: $spacing-07,
+  spacing-08: $spacing-08,
+  spacing-09: $spacing-09,
+  spacing-10: $spacing-10,
+  spacing-11: $spacing-11,
+  spacing-12: $spacing-12,
+  spacing-13: $spacing-13,
+);