@shohojdhara/atomix 0.6.6 → 0.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [
@@ -83,6 +83,26 @@
       "require": "./src/styles/99-utilities/_index.scss",
       "default": "./src/styles/99-utilities/_index.scss"
     },
+    "./scss/utilities/core": {
+      "import": "./src/styles/99-utilities/_index.core.scss",
+      "require": "./src/styles/99-utilities/_index.core.scss",
+      "default": "./src/styles/99-utilities/_index.core.scss"
+    },
+    "./scss/utilities/grid": {
+      "import": "./src/styles/99-utilities/_index.grid.scss",
+      "require": "./src/styles/99-utilities/_index.grid.scss",
+      "default": "./src/styles/99-utilities/_index.grid.scss"
+    },
+    "./scss/utilities/interaction": {
+      "import": "./src/styles/99-utilities/_index.interaction.scss",
+      "require": "./src/styles/99-utilities/_index.interaction.scss",
+      "default": "./src/styles/99-utilities/_index.interaction.scss"
+    },
+    "./scss/utilities/motion": {
+      "import": "./src/styles/99-utilities/_index.motion.scss",
+      "require": "./src/styles/99-utilities/_index.motion.scss",
+      "default": "./src/styles/99-utilities/_index.motion.scss"
+    },
     "./theme": {
       "types": "./dist/theme.d.ts",
       "import": "./dist/theme.js",

package/src/layouts/Grid/Grid.stories.tsx

@@ -670,13 +670,47 @@ export const AlignmentAndSpacing: Story = {
         </div>
       </div>
 
+      {/* Row Gap */}
+      <div className="u-mb-8">
+        <h2 className="u-mb-4 u-text-brand-emphasis">Row Gap</h2>
+        <p className="u-mb-4 u-text-secondary-emphasis">
+          Wrapped rows use vertical spacing from the grid gutter width (`row-gap` via
+          `--atomix-gutter-y`):
+        </p>
+
+        <Row className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
+          <GridCol xs={4}>
+            <DemoCard variant="secondary">Column 1</DemoCard>
+          </GridCol>
+          <GridCol xs={4}>
+            <DemoCard variant="secondary">Column 2</DemoCard>
+          </GridCol>
+          <GridCol xs={4}>
+            <DemoCard variant="secondary">Column 3</DemoCard>
+          </GridCol>
+          <GridCol xs={4}>
+            <DemoCard variant="secondary">Column 4</DemoCard>
+          </GridCol>
+          <GridCol xs={4}>
+            <DemoCard variant="secondary">Column 5</DemoCard>
+          </GridCol>
+          <GridCol xs={4}>
+            <DemoCard variant="secondary">Column 6</DemoCard>
+          </GridCol>
+        </Row>
+      </div>
+
       {/* No Gutters */}
       <div className="u-mb-8">
         <h2 className="u-mb-4 u-text-brand-emphasis">No Gutters</h2>
-        <p className="u-mb-4 u-text-secondary-emphasis">Remove spacing between columns:</p>
+        <p className="u-mb-4 u-text-secondary-emphasis">
+          Remove horizontal and vertical gutter spacing between columns:
+        </p>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">With gutters (default)</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
+            With gutters (default)
+          </h3>
           <Row className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={4}>
               <DemoCard variant="secondary">Column 1</DemoCard>
@@ -687,6 +721,15 @@ export const AlignmentAndSpacing: Story = {
             <GridCol xs={4}>
               <DemoCard variant="secondary">Column 3</DemoCard>
             </GridCol>
+            <GridCol xs={4}>
+              <DemoCard variant="secondary">Column 4</DemoCard>
+            </GridCol>
+            <GridCol xs={4}>
+              <DemoCard variant="secondary">Column 5</DemoCard>
+            </GridCol>
+            <GridCol xs={4}>
+              <DemoCard variant="secondary">Column 6</DemoCard>
+            </GridCol>
           </Row>
         </div>
 
@@ -702,6 +745,15 @@ export const AlignmentAndSpacing: Story = {
             <GridCol xs={4}>
               <DemoCard variant="accent">Column 3</DemoCard>
             </GridCol>
+            <GridCol xs={4}>
+              <DemoCard variant="accent">Column 4</DemoCard>
+            </GridCol>
+            <GridCol xs={4}>
+              <DemoCard variant="accent">Column 5</DemoCard>
+            </GridCol>
+            <GridCol xs={4}>
+              <DemoCard variant="accent">Column 6</DemoCard>
+            </GridCol>
           </Row>
         </div>
       </div>

package/src/layouts/Grid/README.md

@@ -30,9 +30,11 @@ import { Grid, GridCol } from '@/layouts/Grid';
   - Adds utility class `u-justify-content-[value]`
 - `alignItems`: Control vertical alignment ('start', 'end', 'center', 'baseline', 'stretch')
   - Adds utility class `u-align-items-[value]`
-- `noGutters`: Remove gutters between columns
+- `noGutters`: Remove horizontal and vertical gutter spacing
   - Adds modifier class `o-grid--no-gutters`
 
+Grids apply `row-gap` from `--atomix-gutter-y` (defaults to `$grid-gutter-width`) when columns wrap to multiple rows. Horizontal gutters use the existing column padding model. Override vertical spacing with `--atomix-gutter-y` on any `.o-grid`.
+
 ### GridCol
 
 Column component with responsive sizing options.
@@ -89,9 +91,11 @@ import { Container, Row, GridCol } from '@/layouts/Grid';
   - Adds utility class `u-justify-content-[value]`
 - `alignItems`: Control vertical alignment ('start', 'end', 'center', 'baseline', 'stretch')
   - Adds utility class `u-align-items-[value]`
-- `noGutters`: Remove gutters between columns
+- `noGutters`: Remove horizontal and vertical gutter spacing
   - Adds modifier class `o-grid--no-gutters`
 
+Grids apply `row-gap` from `--atomix-gutter-y` (defaults to `$grid-gutter-width`) when columns wrap to multiple rows. Horizontal gutters use the existing column padding model. Override vertical spacing with `--atomix-gutter-y` on any `.o-grid`.
+
 ## Breakpoints
 
 The grid system uses the following breakpoints:

package/src/styles/01-settings/_settings.colors.scss

@@ -11,81 +11,81 @@ $black: #000000 !default;
 $color-contrast-dark: #000000 !default;
 $color-contrast-light: #ffffff !default;
 
-// Primitives Primary Colors (Purple Scale)
-$primary-1: #f5f3ff !default;
-$primary-2: #ede9fe !default;
-$primary-3: #ddd6fe !default;
-$primary-4: #c4b5fd !default;
-$primary-5: #a78bfa !default;
-$primary-6: #8b5cf6 !default; // Balanced primary - main brand color (WCAG AA compliant)
-$primary-7: #7c3aed !default;
-$primary-8: #6d28d9 !default;
-$primary-9: #5b21b6 !default;
-$primary-10: #4c1d95 !default;
-
-// Primitives Red Colors
-$red-1: #fef2f2 !default;
-$red-2: #fee2e2 !default;
-$red-3: #fecaca !default;
-$red-4: #fca5a5 !default;
-$red-5: #f87171 !default;
-$red-6: #ef4444 !default; // Vibrant, accessible red
-$red-7: #dc2626 !default;
-$red-8: #b91c1c !default;
-$red-9: #991b1b !default;
-$red-10: #7f1d1d !default;
-
-// Primitives Green Colors
-$green-1: #f0fdf4 !default;
-$green-2: #dcfce7 !default;
-$green-3: #bbf7d0 !default;
-$green-4: #86efac !default;
-$green-5: #4ade80 !default;
-$green-6: #22c55e !default; // Balanced, accessible green
-$green-7: #16a34a !default;
-$green-8: #15803d !default;
-$green-9: #166534 !default;
-$green-10: #14532d !default;
-
-// Primitives Yellow Colors
-$yellow-1: #fefce8 !default;
-$yellow-2: #fef9c3 !default;
-$yellow-3: #fef08a !default;
-$yellow-4: #fde047 !default;
-$yellow-5: #facc15 !default;
-$yellow-6: #eab308 !default; // Accessible, high-visibility yellow
-$yellow-7: #ca8a04 !default;
-$yellow-8: #a16207 !default;
-$yellow-9: #854d0e !default;
-$yellow-10: #713f12 !default;
-
-// Primitives Blue Colors
-$blue-1: #eff6ff !default;
-$blue-2: #dbeafe !default;
-$blue-3: #bfdbfe !default;
-$blue-4: #93c5fd !default;
-$blue-5: #60a5fa !default;
-$blue-6: #3b82f6 !default; // Balanced, accessible blue
-$blue-7: #2563eb !default;
-$blue-8: #1d4ed8 !default;
-$blue-9: #1e40af !default;
-$blue-10: #1e3a8a !default;
-
-// Primitives Gray Colors
-$gray-1: #f9fafb !default;
-$gray-2: #f3f4f6 !default;
-$gray-3: #e5e7eb !default;
-$gray-4: #d1d5db !default;
-$gray-5: #9ca3af !default;
-$gray-6: #6b7280 !default;
-$gray-7: #4b5563 !default;
-$gray-8: #374151 !default;
-$gray-9: #1f2937 !default;
-$gray-10: #111827 !default;
+// Primitives Primary Colors (Premium Violet Scale)
+$primary-1: #f6f4ff !default;
+$primary-2: #ece7ff !default;
+$primary-3: #dccfff !default;
+$primary-4: #c1aafd !default;
+$primary-5: #a07ff9 !default;
+$primary-6: #7c4dff !default; // Premium brand violet - rich, refined main brand color
+$primary-7: #6b3ae8 !default;
+$primary-8: #5a2bc9 !default;
+$primary-9: #47209f !default;
+$primary-10: #341776 !default;
+
+// Primitives Red Colors (Premium Rose Scale)
+$red-1: #fff1f2 !default;
+$red-2: #ffe4e6 !default;
+$red-3: #fecdd3 !default;
+$red-4: #fda4af !default;
+$red-5: #fb7185 !default;
+$red-6: #f43f5e !default; // Refined, accessible rose-red
+$red-7: #e11d48 !default;
+$red-8: #be123c !default;
+$red-9: #9f1239 !default;
+$red-10: #881337 !default;
+
+// Primitives Green Colors (Premium Emerald Scale)
+$green-1: #ecfdf5 !default;
+$green-2: #d1fae5 !default;
+$green-3: #a7f3d0 !default;
+$green-4: #6ee7b7 !default;
+$green-5: #34d399 !default;
+$green-6: #10b981 !default; // Refined, accessible emerald
+$green-7: #059669 !default;
+$green-8: #047857 !default;
+$green-9: #065f46 !default;
+$green-10: #064e3b !default;
+
+// Primitives Yellow Colors (Premium Amber Scale)
+$yellow-1: #fffbeb !default;
+$yellow-2: #fef3c7 !default;
+$yellow-3: #fde68a !default;
+$yellow-4: #fcd34d !default;
+$yellow-5: #fbbf24 !default;
+$yellow-6: #f59e0b !default; // Warm, accessible amber
+$yellow-7: #d97706 !default;
+$yellow-8: #b45309 !default;
+$yellow-9: #92400e !default;
+$yellow-10: #78350f !default;
+
+// Primitives Blue Colors (Premium Azure Scale)
+$blue-1: #eff8ff !default;
+$blue-2: #d8edff !default;
+$blue-3: #b6ddff !default;
+$blue-4: #84c5ff !default;
+$blue-5: #52a6fa !default;
+$blue-6: #2f80ed !default; // Refined, accessible azure blue
+$blue-7: #1f66d4 !default;
+$blue-8: #1a4fad !default;
+$blue-9: #1a428a !default;
+$blue-10: #173770 !default;
+
+// Primitives Gray Colors (Premium Cool Slate Scale)
+$gray-1: #f8fafc !default;
+$gray-2: #f1f5f9 !default;
+$gray-3: #e2e8f0 !default;
+$gray-4: #cbd5e1 !default;
+$gray-5: #94a3b8 !default;
+$gray-6: #64748b !default;
+$gray-7: #475569 !default;
+$gray-8: #334155 !default;
+$gray-9: #1e293b !default;
+$gray-10: #0f172a !default;
 
 // Primitives Overlay
-$overlay-1: rgba(20, 20, 20, 0.302) !default;
-$overlay-2: rgba($gray-6, 0.6) !default;
+$overlay-1: rgba($gray-10, 0.32) !default;
+$overlay-2: rgba($gray-9, 0.6) !default;
 
 //Text colors emphasis
 $primary-text: $gray-10 !default;

package/src/styles/01-settings/_settings.design-tokens.scss

@@ -392,6 +392,10 @@ $font-sizes-extended: (
   'lg': $font-size-lg,
   'xl': $font-size-xl,
   '2xl': $font-size-2xl,
+  '3xl': $font-size-3xl,
+  '4xl': $font-size-4xl,
+  '5xl': $font-size-5xl,
+  '6xl': $font-size-6xl,
   'h1': $h1-font-size,
   'h2': $h2-font-size,
   'h3': $h3-font-size,

package/src/styles/01-settings/_settings.grid.scss

@@ -13,3 +13,56 @@ $container-max-widths: (
   xl: 1140px,
   xxl: 1320px,
 ) !default;
+
+// Utility class value maps for CSS Grid layout
+$utility-grid-template-columns: (
+  1: repeat(1, minmax(0, 1fr)),
+  2: repeat(2, minmax(0, 1fr)),
+  3: repeat(3, minmax(0, 1fr)),
+  4: repeat(4, minmax(0, 1fr)),
+  5: repeat(5, minmax(0, 1fr)),
+  6: repeat(6, minmax(0, 1fr)),
+  7: repeat(7, minmax(0, 1fr)),
+  8: repeat(8, minmax(0, 1fr)),
+  9: repeat(9, minmax(0, 1fr)),
+  10: repeat(10, minmax(0, 1fr)),
+  11: repeat(11, minmax(0, 1fr)),
+  12: repeat(12, minmax(0, 1fr)),
+) !default;
+
+$utility-grid-template-rows: (
+  1: repeat(1, minmax(0, 1fr)),
+  2: repeat(2, minmax(0, 1fr)),
+  3: repeat(3, minmax(0, 1fr)),
+  4: repeat(4, minmax(0, 1fr)),
+  5: repeat(5, minmax(0, 1fr)),
+  6: repeat(6, minmax(0, 1fr)),
+) !default;
+
+@use 'sass:string';
+
+$utility-grid-column-spans: (
+  1: span 1 / span 1,
+  2: span 2 / span 2,
+  3: span 3 / span 3,
+  4: span 4 / span 4,
+  5: span 5 / span 5,
+  6: span 6 / span 6,
+  7: span 7 / span 7,
+  8: span 8 / span 8,
+  9: span 9 / span 9,
+  10: span 10 / span 10,
+  11: span 11 / span 11,
+  12: span 12 / span 12,
+  full: string.unquote('1 / -1'),
+) !default;
+
+$utility-grid-row-spans: (
+  1: span 1 / span 1,
+  2: span 2 / span 2,
+  3: span 3 / span 3,
+  4: span 4 / span 4,
+  5: span 5 / span 5,
+  6: span 6 / span 6,
+  full: string.unquote('1 / -1'),
+) !default;

package/src/styles/01-settings/_settings.motion.scss

@@ -0,0 +1,50 @@
+@use 'sass:string';
+
+// Motion tokens for transition and transform utilities (utility-layer only)
+
+$utility-transition-durations: (
+  75: 75ms,
+  100: 100ms,
+  150: 150ms,
+  200: 200ms,
+  300: 300ms,
+  500: 500ms,
+  700: 700ms,
+  1000: 1000ms,
+) !default;
+
+$utility-transition-timing-functions: (
+  linear: linear,
+  in: cubic-bezier(0.4, 0, 1, 1),
+  out: cubic-bezier(0, 0, 0.2, 1),
+  'in-out': cubic-bezier(0.4, 0, 0.2, 1),
+) !default;
+
+$utility-transition-properties: (
+  none: none,
+  all: all,
+  colors: string.unquote('color, background-color, border-color, text-decoration-color, fill, stroke'),
+  opacity: opacity,
+  shadow: box-shadow,
+  transform: transform,
+) !default;
+
+$utility-transform-scales: (
+  0: scale(0),
+  50: scale(0.5),
+  75: scale(0.75),
+  90: scale(0.9),
+  95: scale(0.95),
+  100: scale(1),
+  105: scale(1.05),
+  110: scale(1.1),
+  125: scale(1.25),
+  150: scale(1.5),
+) !default;
+
+$utility-transform-rotates: (
+  0: rotate(0deg),
+  45: rotate(45deg),
+  90: rotate(90deg),
+  180: rotate(180deg),
+) !default;

package/src/styles/01-settings/_settings.spacing.scss

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use '../02-tools/tools.map-loop' as map-loop;
+
 $spacer: 1rem !default;
 
 $spacing-sizes: (
@@ -74,12 +77,21 @@ $spacing-sizes: (
   200: 50rem, //800px
 ) !default;
 
+// Semantic gap aliases (optional shorthand for common spacing steps)
+$semantic-gap-sizes: (
+  xs: map.get($spacing-sizes, 1),
+  sm: map.get($spacing-sizes, 2),
+  md: map.get($spacing-sizes, 4),
+  lg: map.get($spacing-sizes, 6),
+  xl: map.get($spacing-sizes, 8),
+) !default;
+
 $spacing-important: false !default;
 $enable-negative-margins: false !default;
 
 $negative-spacers: null !default;
 
 @if $enable-negative-margins {
-  $negative-spacers: negativify-map($spacing-sizes) !default;
+  $negative-spacers: map-loop.negativify-map($spacing-sizes) !default;
 }
 

package/src/styles/01-settings/_settings.typography.scss

@@ -50,7 +50,11 @@ $font-size-sm: $font-size-base * 0.875 !default; //14px
 $font-size-md: $font-size-base * 1.125 !default; //18px
 $font-size-lg: $font-size-base * 1.25 !default; //20px
 $font-size-xl: $font-size-base * 1.5 !default; //20px
-$font-size-2xl: $font-size-base * 2 !default; //20px
+$font-size-2xl: $font-size-base * 2 !default; //32px
+$font-size-3xl: $font-size-base * 2.25 !default; //36px
+$font-size-4xl: $font-size-base * 2.5 !default; //40px
+$font-size-5xl: $font-size-base * 3 !default; //48px
+$font-size-6xl: $font-size-base * 3.75 !default; //60px
 
 $h1-font-size: $font-size-base * 2.5 !default; //40px
 $h2-font-size: $font-size-base * 2 !default; //32px

package/src/styles/02-tools/_tools.map-loop.scss

@@ -29,3 +29,22 @@
   }
   @return $result;
 }
+
+/// Negates numeric values in a map and prefixes keys with `n` (e.g. `1` → `n1: -0.25rem`).
+/// Skips zero values. Used for negative margin utilities.
+@function negativify-map($map) {
+  $result: ();
+
+  @each $key, $value in $map {
+    @if $key != 0 {
+      $result: map.merge(
+        $result,
+        (
+          'n#{$key}': $value * -1,
+        )
+      );
+    }
+  }
+
+  @return $result;
+}

package/src/styles/02-tools/_tools.utility-api.scss

@@ -29,6 +29,12 @@ $utility-defaults: (
 @mixin generate-utility($utility, $infix: '', $is-rfs: false) {
   $values: map.get($utility, values);
   $css-var: map.get($utility, css-var);
+  $pseudo: map.get($utility, pseudo);
+  $legacy-state: map.get($utility, state);
+
+  @if $pseudo == null and $legacy-state != null {
+    $pseudo: $legacy-state;
+  }
 
   // If the values are a list or string, convert it to a map
   @if meta.type-of($values) == 'string' or meta.type-of($values) == 'list' {
@@ -38,6 +44,13 @@ $utility-defaults: (
   @each $key, $value in $values {
     $properties: map.get($utility, property);
     $property-class: map.get($utility, class);
+    $local-vars: map.get($utility, local-vars);
+    $local-vars-only: $value == null and $properties == null and $local-vars and list.length($local-vars) > 0;
+
+    @if $value == null and not $local-vars-only {
+      $warn-class: if($property-class, $property-class, $properties);
+      @warn 'Utility value is null for class "#{ $warn-class }" key "#{ $key }" — class will not be generated.';
+    }
 
     // Handle case where property-class is null
     @if $property-class == null and $properties {
@@ -48,15 +61,8 @@ $utility-defaults: (
       );
     }
 
-    // State variants (hover, focus, active, etc.)
     // Create a local copy of infix to avoid affecting other utilities
     $local-infix: $infix;
-    $state: map.get($utility, state);
-    $local-infix: if(
-      $state,
-      if(meta.type-of($state) == 'string', '#{$state}#{$local-infix}', $local-infix),
-      $local-infix
-    );
 
     // Escape special characters in key for valid CSS class names
     $escaped-key: if($key, _escape-key($key), null);
@@ -69,28 +75,14 @@ $utility-defaults: (
         '#{$property-class}#{$local-infix}-#{$escaped-key}',
         '#{$property-class}#{$local-infix}'
       );
+      $selector: '.#{$class-name}';
 
-      .#{$class-name} {
-        @if $css-var {
-          // Handle CSS variable generation
-          $css-variable-name: str-replace(#{$property-class}, '.', '\\.');
-          --atomix-u-#{$css-variable-name}: #{$value};
-        } @else if $properties {
-          @each $property in $properties {
-            #{$property}: $value;
-          }
-        } @else if $value != null {
-          // Guard: only emit property declaration if value is not null
-          #{$property-class}: $value;
-        }
+      @if $pseudo {
+        $selector: '#{$selector}:#{$pseudo}';
+      }
 
-        // Add local CSS variables if specified
-        $local-vars: map.get($utility, local-vars);
-        @if $local-vars and list.length($local-vars) > 0 {
-          @each $local-var-name, $local-var-value in $local-vars {
-            --#{$local-var-name}: #{$local-var-value};
-          }
-        }
+      #{$selector} {
+        @include _apply-utility-declarations($utility, $property-class, $properties, $css-var, $value);
       }
     } @else {
       // Generate class with custom class name
@@ -98,34 +90,45 @@ $utility-defaults: (
       $modifier: if($key, '-#{$escaped-key}', '');
 
       // Responsive infix goes between class and modifier: .u-class-{bp}-{value}
-      .#{$base-class}#{$local-infix}#{$modifier} {
-        @if $css-var and $properties {
-          // Handle CSS variable generation with properties
-          @each $property in $properties {
-            $css-variable-name: str-replace(#{$property}, '.', '\\.');
-            --atomix-u-#{$css-variable-name}: #{$value};
-          }
-        } @else if $css-var {
-          // Handle CSS variable generation without properties
-          $css-variable-name: str-replace(#{$base-class}, '.', '\\.');
-          --atomix-u-#{$css-variable-name}#{$modifier}: #{$value};
-        } @else if $properties {
-          @each $property in $properties {
-            #{$property}: $value;
-          }
-        } @else if $value != null {
-          // Guard: only emit property declaration if value is not null
-          #{$base-class}: $value;
-        }
+      $selector: '.#{$base-class}#{$local-infix}#{$modifier}';
 
-        // Add local CSS variables if specified
-        $local-vars: map.get($utility, local-vars);
-        @if $local-vars and list.length($local-vars) > 0 {
-          @each $local-var-name, $local-var-value in $local-vars {
-            --#{$local-var-name}: #{$local-var-value};
-          }
-        }
+      @if $pseudo {
+        $selector: '#{$selector}:#{$pseudo}';
       }
+
+      #{$selector} {
+        @include _apply-utility-declarations($utility, $base-class, $properties, $css-var, $value);
+      }
+    }
+  }
+}
+
+@mixin _apply-utility-declarations($utility, $class-name, $properties, $css-var, $value) {
+  @if $css-var and $properties {
+    // Handle CSS variable generation with properties
+    @each $property in $properties {
+      $css-variable-name: str-replace(#{$property}, '.', '\\.');
+      --atomix-u-#{$css-variable-name}: #{$value};
+    }
+  } @else if $css-var {
+    // Handle CSS variable generation without properties
+    $css-variable-name: str-replace(#{$class-name}, '.', '\\.');
+    --atomix-u-#{$css-variable-name}: #{$value};
+  } @else if $properties {
+    @each $property in $properties {
+      @if $value != null {
+        #{$property}: $value;
+      }
+    }
+  } @else if $value != null {
+    #{$class-name}: $value;
+  }
+
+  // Add local CSS variables if specified
+  $local-vars: map.get($utility, local-vars);
+  @if $local-vars and list.length($local-vars) > 0 {
+    @each $local-var-name, $local-var-value in $local-vars {
+      --#{$local-var-name}: #{$local-var-value};
     }
   }
 }
@@ -169,6 +172,7 @@ $utility-defaults: (
         values: map.get($config, values),
         class: map.get($config, class),
         state: map.get($config, state),
+        pseudo: map.get($config, pseudo),
         rtl: map.get($config, rtl),
         css-var: map.get($config, css-var),
         local-vars: map.get($config, local-vars),

package/src/styles/05-objects/_objects.grid.scss

@@ -2,16 +2,19 @@
 @use '../01-settings/settings.grid' as grid;
 @use '../02-tools/tools.grid' as *;
 @use '../02-tools/tools.breakpoints' as *;
+@use '../02-tools/tools.rem' as *;
 
 .o-grid {
-  --#{config.$prefix}gutter-y: #{grid.$grid-gutter-width};
+  --#{config.$prefix}gutter-y: #{rem(grid.$grid-gutter-width)};
   @include make-row();
+  row-gap: var(--#{config.$prefix}gutter-y);
 
   &__col {
     @include make-col-ready();
   }
 
   &--no-gutters {
+    --#{config.$prefix}gutter-y: 0;
     margin-right: 0;
     margin-left: 0;