vanilla-framework 4.26.0 → 4.27.0

package/scss/_patterns_notifications.scss

@@ -58,7 +58,7 @@ $notification-content-icon-space: 2 * $sph--large + map-get($icon-sizes, default
 // the icon is a background element, so it needs to be manually positioned to match the text next to it;
 // Step 1: push down by the same amount applied as padding top on text ($spv-nudge)
 // Step 2: to center the icon within the line-height of text, we subtract icon height from text line-height and multiply by .5; this is the amount we need to push the icon down by
-$borderless-notification-icon-vert-offset: $spv-nudge + 0.5 * (map-get($line-heights, default-text) - map-get($icon-sizes, default));
+$borderless-notification-icon-vert-offset: $spv-nudge + 0.5 * (map-get($settings-text-default, line-height) - map-get($icon-sizes, default));
 // Step 3: Add the notification padding-top (if it exists); we have two cases, so at this point we create a second var that contains the first one + the notification padding-top
 $notification-icon-vert-offset: $spv--small + $borderless-notification-icon-vert-offset;
 
@@ -133,7 +133,7 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
     .p-notification__title {
       font-size: 1rem;
       font-weight: $font-weight-bold;
-      line-height: map-get($line-heights, default-text);
+      line-height: map-get($settings-text-default, line-height);
       margin: 0;
       padding: 0;
     }

package/scss/_patterns_search-and-filter.scss

@@ -19,7 +19,7 @@
   // When the search and filter is not expanded, but is overflowing with chips, we need to
   // specify a height that matches that of a standard input element. This height is a combination
   // of an input's line-height, its vertical padding, and the (top transparent) border.
-  $input-height: calc(map-get($line-heights, default-text) + $input-vertical-padding + $input-vertical-padding + $input-border-thickness);
+  $input-height: calc(map-get($settings-text-default, line-height) + $input-vertical-padding + $input-vertical-padding + $input-border-thickness);
 
   .p-search-and-filter {
     border-bottom: $input-border-thickness solid $colors--theme--border-high-contrast;
@@ -103,7 +103,7 @@
 
       border: none;
       bottom: $focus-outline-offset;
-      line-height: map-get($line-heights, small);
+      line-height: map-get($settings-text-small, line-height);
       margin: 0;
       position: absolute;
       right: $focus-outline-offset;

package/scss/_patterns_search-box.scss

@@ -1,7 +1,7 @@
 @mixin vf-p-search-box {
   %search-box-button {
     display: block;
-    height: calc((2 * $spv-nudge + map-get($line-heights, default-text)) - (2 * $bar-thickness)); // side padding + icon width - focus outline width * 2
+    height: calc((2 * $spv-nudge + map-get($settings-text-default, line-height)) - (2 * $bar-thickness)); // side padding + icon width - focus outline width * 2
     margin: $bar-thickness 0;
     position: relative;
 
@@ -37,7 +37,7 @@
     .p-search-box__input {
       flex: 1 1 100%;
       margin-bottom: 0;
-      padding-right: calc(2 * (2 * $spv-nudge + map-get($line-heights, default-text)));
+      padding-right: calc(2 * (2 * $spv-nudge + map-get($settings-text-default, line-height)));
       position: absolute;
       right: 0;
 

package/scss/_patterns_status-label.scss

@@ -19,7 +19,7 @@
 
     display: inline-block;
     font-weight: $font-weight-bold;
-    padding: map-get($nudges, x-small) $sph--small;
+    padding: map-get($settings-text-x-small, nudge) $sph--small;
     text-align: center;
     text-decoration: none;
     white-space: nowrap;

package/scss/_patterns_table-mobile-card.scss

@@ -56,7 +56,7 @@
           &[data-heading]::before {
             content: attr(data-heading);
             display: block;
-            margin-bottom: map-get($sp-after, x-small) - map-get($nudges, x-small) - $sp-unit;
+            margin-bottom: map-get($settings-text-x-small, sp-after) - map-get($settings-text-x-small, nudge) - $sp-unit;
             overflow: hidden;
             padding-left: 0;
             padding-right: 0;

package/scss/_patterns_table-sortable.scss

@@ -15,7 +15,7 @@
     display: inline-block;
     margin-left: $sp-x-small;
     // table heading text is smaller than the icon, so we need to compensate with negative top margin
-    margin-top: calc(#{map-get($font-sizes, x-small)}rem - $default-icon-size);
+    margin-top: calc(#{map-get($settings-text-x-small, font-size)}rem - $default-icon-size);
     vertical-align: calc($vertical-offset + 0.5 * $cap-height - 0.5 * $default-icon-size);
   }
 

package/scss/_patterns_tabs.scss

@@ -45,7 +45,7 @@
       display: flex;
       gap: $sph--small;
       height: 100%;
-      line-height: map-get($line-heights, default-text);
+      line-height: map-get($settings-text-default, line-height);
       margin-bottom: 0;
       padding: $spv--medium $sph--large;
       position: relative;

package/scss/_settings.scss

@@ -7,12 +7,12 @@
 @import 'global_functions';
 
 // Settings
+@import 'settings_font';
 @import 'settings_spacing';
 @import 'settings_animations';
 @import 'settings_assets';
 @import 'settings_breakpoints';
 @import 'settings_colors';
-@import 'settings_font';
 @import 'settings_grid';
 @import 'settings_placeholders';
 @import 'settings_tables';

package/scss/_settings_font.scss

@@ -11,10 +11,20 @@ $base-font-sizes: (
   base: 1rem,
   large: $font-size-largescreen,
 ) !default;
-$font-weight-display-heading: 100 !default;
+
+// TODO removeme? This variable is not used in Vanilla - worth seeing if it's used downstream.
 $font-weight-thin: 300 !default;
 $font-weight-regular-text: 400 !default;
 $font-weight-bold: 550 !default;
+$font-weight-display-heading: 100 !default;
+
+// Heading levels - allow overriding of weights for headings
+$font-weight-h1: $font-weight-bold !default;
+$font-weight-h2: 180 !default;
+$font-weight-h3: $font-weight-bold !default;
+$font-weight-h4: 275 !default;
+$font-weight-h5: $font-weight-bold !default;
+$font-weight-h6: $font-weight-regular-text !default;
 
 // Ubuntu Font metrics
 $baseline-position: 0.932em !default; // HHead Ascent from the font file's metrics. Viewable in Fontforge Font Information>OS/2

package/scss/_settings_grid.scss

@@ -6,8 +6,12 @@ $grid-max-width: 80rem !default;
 $grid-columns-small: 4 !default;
 $grid-columns-medium: 6 !default;
 $grid-columns: 12 !default;
+// legacy grid only
 $threshold-4-6-col: $breakpoint-small !default;
 $threshold-6-12-col: $breakpoint-large !default;
+// New grid thresholds
+$threshold-4-small-4-med-col: $breakpoint-small !default;
+$threshold-4-8-col: $breakpoint-large !default;
 
 $grid-column-prefix: 'col-' !default;
 $grid-small-col-prefix: '#{$grid-column-prefix}small-' !default;

package/scss/_settings_spacing.scss

@@ -7,59 +7,343 @@ $sp-unit-ratio: 0.5 !default;
 // Baseline grid settings
 $sp-unit: 1rem * $sp-unit-ratio !default;
 
+// Main spacing variables. spv stands spacing-vertical; sph stands for spacing-horizontal.
+
+$spv--x-small: $sp-unit * 0.5 !default;
+$spv--small: $sp-unit !default;
+$spv--medium: $sp-unit * 1.5 !default;
+$spv--large: $sp-unit * 2;
+$spv--x-large: $sp-unit * 3 !default;
+$spv--strip-shallow: $sp-unit * 3 !default;
+$spv--strip-regular: $sp-unit * 8 !default;
+$spv--strip-deep: $sp-unit * 16 !default;
+
+$sph--x-small: $sp-unit * 0.5 !default; // to be used in place of an inline space between characters/words
+$sph--small: $sp-unit !default;
+$sph--large: $sp-unit * 2 !default;
+$sph--x-large: $sp-unit * 3 !default;
+
+// Typography settings - per-level configuration maps
+// Each settings map contains: nudge, line-height, font-size, sp-after, and sp-before (font-weight handled separately)
+
+$settings-text-display: (
+  nudge: 0.35rem,
+  line-height: 11 * $sp-unit,
+  font-size: 5,
+  sp-after: $spv--x-large,
+  sp-before: 0,
+) !default;
+
+$settings-text-display-mobile: (
+  nudge: 0.25rem,
+  line-height: 9 * $sp-unit,
+  font-size: 4,
+  sp-after: $spv--x-large,
+  sp-before: 0,
+) !default;
+
+$settings-text-h1: (
+  nudge: 0.55rem,
+  line-height: 6 * $sp-unit,
+  font-size: 2.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h1-large: (
+  nudge: 0.55rem,
+  line-height: 6 * $sp-unit,
+  font-size: 2.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h1-mobile: (
+  nudge: 0.55rem,
+  line-height: 5 * $sp-unit,
+  font-size: 2,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h2: (
+  nudge: 0.55rem,
+  line-height: 6 * $sp-unit,
+  font-size: 2.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h2-large: (
+  nudge: 0.55rem,
+  line-height: 6 * $sp-unit,
+  font-size: 2.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h2-mobile: (
+  nudge: 0.55rem,
+  line-height: 5 * $sp-unit,
+  font-size: 2,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h3: (
+  nudge: 0.45rem,
+  line-height: 4 * $sp-unit,
+  font-size: 1.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h3-large: (
+  nudge: 0.45rem,
+  line-height: 4 * $sp-unit,
+  font-size: 1.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h3-mobile: (
+  nudge: 0.45rem,
+  line-height: 4 * $sp-unit,
+  font-size: 1.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h4: (
+  nudge: 0.45rem,
+  line-height: 4 * $sp-unit,
+  font-size: 1.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h4-large: (
+  nudge: 0.45rem,
+  line-height: 4 * $sp-unit,
+  font-size: 1.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h4-mobile: (
+  nudge: 0.45rem,
+  line-height: 4 * $sp-unit,
+  font-size: 1.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h5: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h5-large: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h5-mobile: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h6: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h6-large: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h6-mobile: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-p: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: 0,
+) !default;
+
+$settings-text-small: (
+  nudge: 0.05rem,
+  line-height: 2.5 * $sp-unit,
+  font-size: 0.875,
+  sp-after: $spv--large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-small-dense: (
+  nudge: 0.05rem,
+  line-height: 2.5 * $sp-unit,
+  font-size: 0.875,
+  sp-after: $spv--large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-x-small: (
+  nudge: 0.25rem,
+  line-height: 2 * $sp-unit,
+  font-size: 0.75,
+  sp-after: $spv--large,
+  sp-before: 0,
+) !default;
+
+$settings-text-default: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $sp-unit,
+  sp-before: 0,
+) !default;
+
+// Legacy maps for backwards compatibility
 $font-sizes: (
-  display: 5,
-  display-mobile: 4,
-  h1: 2.5,
-  h1-mobile: 2,
-  h2: 2.5,
-  h2-mobile: 2,
-  h3: 1.5,
-  h3-mobile: 1.5,
-  h4: 1.5,
-  h4-mobile: 1.5,
-  default: 1,
-  small: 0.875,
-  x-small: 0.75,
+  display: map-get($settings-text-display, font-size),
+  display-mobile: map-get($settings-text-display-mobile, font-size),
+  h1: map-get($settings-text-h1, font-size),
+  h1-large: map-get($settings-text-h1-large, font-size),
+  h1-mobile: map-get($settings-text-h1-mobile, font-size),
+  h2: map-get($settings-text-h2, font-size),
+  h2-large: map-get($settings-text-h2-large, font-size),
+  h2-mobile: map-get($settings-text-h2-mobile, font-size),
+  h3: map-get($settings-text-h3, font-size),
+  h3-large: map-get($settings-text-h3-large, font-size),
+  h3-mobile: map-get($settings-text-h3-mobile, font-size),
+  h4: map-get($settings-text-h4, font-size),
+  h4-large: map-get($settings-text-h4-large, font-size),
+  h4-mobile: map-get($settings-text-h4-mobile, font-size),
+  h5: map-get($settings-text-h5, font-size),
+  h5-large: map-get($settings-text-h5-large, font-size),
+  h5-mobile: map-get($settings-text-h5-mobile, font-size),
+  h6: map-get($settings-text-h6, font-size),
+  h6-large: map-get($settings-text-h6-large, font-size),
+  h6-mobile: map-get($settings-text-h6-mobile, font-size),
+  default: map-get($settings-text-default, font-size),
+  small: map-get($settings-text-small, font-size),
+  x-small: map-get($settings-text-x-small, font-size),
 ) !default;
 
 $line-heights: (
-  display: 11 * $sp-unit,
-  display-mobile: 9 * $sp-unit,
-  h1: 6 * $sp-unit,
-  h1-mobile: 5 * $sp-unit,
-  h2: 6 * $sp-unit,
-  h2-mobile: 5 * $sp-unit,
-  h3: 4 * $sp-unit,
-  h3-mobile: 4 * $sp-unit,
-  h4: 4 * $sp-unit,
-  h4-mobile: 4 * $sp-unit,
-  default-text: 3 * $sp-unit,
-  small: 2.5 * $sp-unit,
-  x-small: 2 * $sp-unit,
+  display: map-get($settings-text-display, line-height),
+  display-mobile: map-get($settings-text-display-mobile, line-height),
+  h1: map-get($settings-text-h1, line-height),
+  h1-large: map-get($settings-text-h1-large, line-height),
+  h1-mobile: map-get($settings-text-h1-mobile, line-height),
+  h2: map-get($settings-text-h2, line-height),
+  h2-large: map-get($settings-text-h2-large, line-height),
+  h2-mobile: map-get($settings-text-h2-mobile, line-height),
+  h3: map-get($settings-text-h3, line-height),
+  h3-large: map-get($settings-text-h3-large, line-height),
+  h3-mobile: map-get($settings-text-h3-mobile, line-height),
+  h4: map-get($settings-text-h4, line-height),
+  h4-large: map-get($settings-text-h4-large, line-height),
+  h4-mobile: map-get($settings-text-h4-mobile, line-height),
+  h5: map-get($settings-text-h5, line-height),
+  h5-large: map-get($settings-text-h5-large, line-height),
+  h5-mobile: map-get($settings-text-h5-mobile, line-height),
+  h6: map-get($settings-text-h6, line-height),
+  h6-large: map-get($settings-text-h6-large, line-height),
+  h6-mobile: map-get($settings-text-h6-mobile, line-height),
+  default-text: map-get($settings-text-default, line-height),
+  small: map-get($settings-text-small, line-height),
+  x-small: map-get($settings-text-x-small, line-height),
 ) !default;
 
 // baseline nudges for type scale ratio of (16/14)^2
 $nudges: (
-  display: 0.35rem,
-  display-mobile: 0.25rem,
-  h1-large: 0.55rem,
-  h1-mobile: 0.55rem,
-  h1: 0.55rem,
-  h2: 0.55rem,
-  h2-mobile: 0.55rem,
-  h3: 0.45rem,
-  h3-mobile: 0.45rem,
-  h4-large: 0.45rem,
-  h4: 0.45rem,
-  h4-mobile: 0.45rem,
-  h5: 0.375rem,
-  h6: 0.375em,
-  h6-large: 0.375rem,
-  p: 0.375rem,
+  display: map-get($settings-text-display, nudge),
+  display-mobile: map-get($settings-text-display-mobile, nudge),
+  h1-large: map-get($settings-text-h1, nudge),
+  // fallback to h1 nudge
+  h1-mobile: map-get($settings-text-h1-mobile, nudge),
+  h1: map-get($settings-text-h1, nudge),
+  h2: map-get($settings-text-h2, nudge),
+  h2-mobile: map-get($settings-text-h2-mobile, nudge),
+  h2-large: map-get($settings-text-h2, nudge),
+  // fallback to h2 nudge
+  h3: map-get($settings-text-h3, nudge),
+  h3-mobile: map-get($settings-text-h3-mobile, nudge),
+  h3-large: map-get($settings-text-h3, nudge),
+  // fallback to h3 nudge
+  h4-large: map-get($settings-text-h4, nudge),
+  // fallback to h4 nudge
+  h4: map-get($settings-text-h4, nudge),
+  h4-mobile: map-get($settings-text-h4-mobile, nudge),
+  h5: map-get($settings-text-h5, nudge),
+  h5-large: map-get($settings-text-h5, nudge),
+  // fallback to h5 nudge
+  h5-mobile: map-get($settings-text-h5-mobile, nudge),
+  h6: map-get($settings-text-h6, nudge),
+  h6-mobile: map-get($settings-text-h6-mobile, nudge),
+  h6-large: map-get($settings-text-h6, nudge),
+  // fallback to h6 nudge
+  p: map-get($settings-text-p, nudge),
+  default: map-get($settings-text-default, nudge),
+  // not currently used in Vanilla, kept for backwards compatibility
   p-ubuntumono: 0.45rem,
-  small: 0.05rem,
-  x-small: 0.25rem,
+  // fallback
+  small: map-get($settings-text-small, nudge),
+  x-small: map-get($settings-text-x-small, nudge),
+) !default;
+
+$sp-after: (
+  display: map-get($settings-text-display, sp-after),
+  display-mobile: map-get($settings-text-display-mobile, sp-after),
+  h1: map-get($settings-text-h1, sp-after),
+  h1-large: map-get($settings-text-h1-large, sp-after),
+  h1-mobile: map-get($settings-text-h1-mobile, sp-after),
+  h2: map-get($settings-text-h2, sp-after),
+  h2-large: map-get($settings-text-h2-large, sp-after),
+  h2-mobile: map-get($settings-text-h2-mobile, sp-after),
+  h3: map-get($settings-text-h3, sp-after),
+  h3-large: map-get($settings-text-h3-large, sp-after),
+  h3-mobile: map-get($settings-text-h3-mobile, sp-after),
+  h4: map-get($settings-text-h4, sp-after),
+  h4-large: map-get($settings-text-h4-large, sp-after),
+  h4-mobile: map-get($settings-text-h4-mobile, sp-after),
+  h5: map-get($settings-text-h5, sp-after),
+  h5-large: map-get($settings-text-h5-large, sp-after),
+  h5-mobile: map-get($settings-text-h5-mobile, sp-after),
+  h6: map-get($settings-text-h6, sp-after),
+  h6-large: map-get($settings-text-h6-large, sp-after),
+  h6-mobile: map-get($settings-text-h6-mobile, sp-after),
+  p: map-get($settings-text-p, sp-after),
+  p-small-caps: map-get($settings-text-small, sp-after),
+  p-dense: map-get($settings-text-small, sp-after),
+  default-text: map-get($settings-text-default, sp-after),
+  small: map-get($settings-text-small, sp-after),
+  small--dense: map-get($settings-text-small, sp-after),
+  x-small: map-get($settings-text-x-small, sp-after),
 ) !default;
 
 // Correct baseline drift due to browser rounding. (Visible in text > 1000 lines)
@@ -77,45 +361,8 @@ $browser-rounding-compensations: (
   small: 0,
 ) !default;
 
-// Main spacing variables. spv stands spacing-vertical; sph stands for spacing-horizontal.
-
-$spv--x-small: $sp-unit * 0.5 !default;
-$spv--small: $sp-unit !default;
-$spv--medium: $sp-unit * 1.5 !default;
-$spv--large: $sp-unit * 2;
-$spv--x-large: $sp-unit * 3 !default;
-$spv--strip-shallow: $sp-unit * 3 !default;
-$spv--strip-regular: $sp-unit * 8 !default;
-$spv--strip-deep: $sp-unit * 16 !default;
-
-$sph--x-small: $sp-unit * 0.5 !default; // to be used in place of an inline space between characters/words
-$sph--small: $sp-unit !default;
-$sph--large: $sp-unit * 2 !default;
-$sph--x-large: $sp-unit * 3 !default;
-
-// Space after text elements
-$sp-after: (
-  display: $spv--x-large,
-  display-mobile: $spv--x-large,
-  h1: $spv--x-large,
-  h1-mobile: $spv--x-large,
-  h2: $spv--x-large,
-  h2-mobile: $spv--x-large,
-  h3: $spv--x-large,
-  h3-mobile: $spv--x-large,
-  h4: $spv--x-large,
-  h4-mobile: $spv--x-large,
-  p: $spv--x-large,
-  p-small-caps: $spv--large,
-  p-dense: $spv--large,
-  default-text: $sp-unit,
-  small: $spv--large,
-  small--dense: $spv--large,
-  x-small: $spv--large,
-) !default;
-
 // commonly occuring calculations available as variables
-$spv-nudge: map-get($nudges, p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
+$spv-nudge: map-get($settings-text-p, nudge) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
 $spv-nudge-compensation: $sp-unit - $spv-nudge !default;
 
 // form input spacing variables

package/scss/_utilities_content-align.scss

@@ -69,10 +69,10 @@
   }
 
   .u-align-text--small-to-default {
-    padding-top: map-get($nudges, small) + $sp-unit;
+    padding-top: map-get($settings-text-small, nudge) + $sp-unit;
   }
 
   .u-align-text--x-small-to-default {
-    padding-top: map-get($nudges, x-small) + $sp-unit;
+    padding-top: map-get($settings-text-x-small, nudge) + $sp-unit;
   }
 }

package/templates/_macros/vf_rich-vertical-list.jinja

@@ -103,21 +103,21 @@
   {%- endmacro -%}
 
   <div class="p-section">
-    <div class="row--50-50-on-large">
+    <div class="grid-row--50-50-on-large">
       <hr>
       {% if not is_flipped -%}
-        <div class="col">
+        <div class="grid-col">
           {{- _text_column_contents(list_items) -}}
         </div>
-        <div class="col">
+        <div class="grid-col">
           {{- _image_column_contents() -}}
         </div>
       {%- else -%}
         {#- For flipped layout, place the image contents in the first column and the text in the second column -#}
-        <div class="col">
+        <div class="grid-col">
           {{- _image_column_contents() -}}
         </div>
-        <div class="col">
+        <div class="grid-col">
           {{- _text_column_contents(list_items) -}}
         </div>
       {%- endif -%}

package/templates/_macros/vf_text-spotlight.jinja

@@ -8,11 +8,11 @@
   {% set has_list = list_items | length >= 2 and list_items | length <= 7 %}
   <section class="p-section">
     <hr class="p-rule is-fixed-width" />
-    <div class="row--25-75-on-large">
-      <div class="col">
+    <div class="grid-row--25-75-on-large">
+      <div class="grid-col">
         <h2 class="p-text--small-caps">{{ title_text }}</h2>
       </div>
-      <div class="col">
+      <div class="grid-col">
         {%- if has_list -%}
           {%- for list_item in list_items -%}
             <p class="p-heading--2">{{- list_item -}}</p>