@shohojdhara/atomix 0.6.7 → 0.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.6.7",
+  "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/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/99-utilities/_index.core.scss

@@ -0,0 +1,24 @@
+// Core utilities bundle — spacing, flex, typography, colors, sizing, and effects
+@forward 'utilities.background';
+@forward 'utilities.border';
+@forward 'utilities.clearfix';
+@forward 'utilities.display';
+@forward 'utilities.flex';
+@forward 'utilities.gradient';
+@forward 'utilities.glass-fixes';
+@forward 'utilities.link';
+@forward 'utilities.object-fit';
+@forward 'utilities.opacity';
+@forward 'utilities.overflow';
+@forward 'utilities.position';
+@forward 'utilities.shadow';
+@forward 'utilities.sizes';
+@forward 'utilities.spacing';
+@forward 'utilities.text';
+@forward 'utilities.text-gradient';
+@forward 'utilities.visibility';
+@forward 'utilities.visually-hidden';
+@forward 'utilities.z-index';
+@forward 'utilities.touch-target';
+
+@use 'utilities.core';

package/src/styles/99-utilities/_index.grid.scss

@@ -0,0 +1,3 @@
+// Grid utilities bundle — CSS Grid template, span, and placement
+@forward 'utilities.grid';
+@use 'utilities.generate-grid';

package/src/styles/99-utilities/_index.interaction.scss

@@ -0,0 +1,3 @@
+// Interaction utilities bundle — cursor, pointer-events, user-select
+@forward 'utilities.interaction';
+@use 'utilities.generate-interaction';

package/src/styles/99-utilities/_index.motion.scss

@@ -0,0 +1,5 @@
+// Motion utilities bundle — transitions, transforms, and state variants
+@forward 'utilities.transition';
+@forward 'utilities.transform';
+@forward 'utilities.state';
+@use 'utilities.generate-motion';

package/src/styles/99-utilities/_index.scss

@@ -6,6 +6,8 @@
 @forward 'utilities.flex';
 @forward 'utilities.glass-fixes';
 @forward 'utilities.gradient';
+@forward 'utilities.grid';
+@forward 'utilities.interaction';
 @forward 'utilities.link';
 @forward 'utilities.object-fit';
 @forward 'utilities.opacity';
@@ -14,8 +16,11 @@
 @forward 'utilities.shadow';
 @forward 'utilities.sizes';
 @forward 'utilities.spacing';
+@forward 'utilities.state';
 @forward 'utilities.text';
 @forward 'utilities.text-gradient';
+@forward 'utilities.transition';
+@forward 'utilities.transform';
 @forward 'utilities.visibility';
 @forward 'utilities.visually-hidden';
 @forward 'utilities.z-index';

package/src/styles/99-utilities/_utilities.core.scss

@@ -0,0 +1,44 @@
+// Core utility generator (spacing, layout, typography, colors, sizing, effects)
+// Import via @shohojdhara/atomix/scss/utilities/core
+
+@use 'sass:map';
+@use '../02-tools/_tools.utility-api' as util-api;
+@use '../01-settings/settings.breakpoints' as breakpoints;
+@use 'utilities.background' as bg;
+@use 'utilities.border' as border;
+@use 'utilities.display' as display;
+@use 'utilities.flex' as flex;
+@use 'utilities.gradient' as gradient;
+@use 'utilities.link' as link;
+@use 'utilities.object-fit' as obj-fit;
+@use 'utilities.opacity' as opacity;
+@use 'utilities.overflow' as overflow;
+@use 'utilities.position' as position;
+@use 'utilities.shadow' as shadow;
+@use 'utilities.sizes' as sizes;
+@use 'utilities.spacing' as spacing;
+@use 'utilities.text' as text;
+@use 'utilities.text-gradient' as textGradient;
+@use 'utilities.visibility' as visibility;
+@use 'utilities.z-index' as z-index;
+
+$utilities-core: ();
+$utilities-core: map.merge($utilities-core, bg.$utilities-bg);
+$utilities-core: map.merge($utilities-core, border.$utilities-border);
+$utilities-core: map.merge($utilities-core, display.$utilities-display);
+$utilities-core: map.merge($utilities-core, flex.$utilities-flex);
+$utilities-core: map.merge($utilities-core, gradient.$utilities-gradient);
+$utilities-core: map.merge($utilities-core, link.$utilities-link);
+$utilities-core: map.merge($utilities-core, obj-fit.$utilities-object-fit);
+$utilities-core: map.merge($utilities-core, opacity.$utilities-opacity);
+$utilities-core: map.merge($utilities-core, overflow.$utilities-overflow);
+$utilities-core: map.merge($utilities-core, position.$utilities-position);
+$utilities-core: map.merge($utilities-core, shadow.$utilities-shadow);
+$utilities-core: map.merge($utilities-core, sizes.$utilities-sizes);
+$utilities-core: map.merge($utilities-core, spacing.$utilities-spacing);
+$utilities-core: map.merge($utilities-core, text.$utilities-text);
+$utilities-core: map.merge($utilities-core, visibility.$utilities-visibility);
+$utilities-core: map.merge($utilities-core, z-index.$utilities-z-index);
+$utilities-core: map.merge($utilities-core, textGradient.$utilities-text-gradient);
+
+@include util-api.generate-utilities($utilities-core, breakpoints.$grid-breakpoints);

package/src/styles/99-utilities/_utilities.generate-grid.scss

@@ -0,0 +1,7 @@
+// Grid utility generator — opt-in via @shohojdhara/atomix/scss/utilities/grid
+
+@use '../02-tools/_tools.utility-api' as util-api;
+@use '../01-settings/settings.breakpoints' as breakpoints;
+@use 'utilities.grid' as grid;
+
+@include util-api.generate-utilities(grid.$utilities-grid, breakpoints.$grid-breakpoints);

package/src/styles/99-utilities/_utilities.generate-interaction.scss

@@ -0,0 +1,7 @@
+// Interaction utility generator — opt-in via @shohojdhara/atomix/scss/utilities/interaction
+
+@use '../02-tools/_tools.utility-api' as util-api;
+@use '../01-settings/settings.breakpoints' as breakpoints;
+@use 'utilities.interaction' as interaction;
+
+@include util-api.generate-utilities(interaction.$utilities-interaction, breakpoints.$grid-breakpoints);

package/src/styles/99-utilities/_utilities.generate-motion.scss

@@ -0,0 +1,15 @@
+// Motion utility generator — opt-in via @shohojdhara/atomix/scss/utilities/motion
+
+@use 'sass:map';
+@use '../02-tools/_tools.utility-api' as util-api;
+@use '../01-settings/settings.breakpoints' as breakpoints;
+@use 'utilities.transition' as transition;
+@use 'utilities.transform' as transform;
+@use 'utilities.state' as state;
+
+$utilities-motion: ();
+$utilities-motion: map.merge($utilities-motion, transition.$utilities-transition);
+$utilities-motion: map.merge($utilities-motion, transform.$utilities-transform);
+$utilities-motion: map.merge($utilities-motion, state.$utilities-state);
+
+@include util-api.generate-utilities($utilities-motion, breakpoints.$grid-breakpoints);

package/src/styles/99-utilities/_utilities.grid.scss

@@ -0,0 +1,55 @@
+@use '../01-settings/settings.grid' as grid;
+
+// Define utilities for CSS Grid layout
+$utilities-grid: (
+  'grid-template-columns': (
+    responsive: true,
+    property: grid-template-columns,
+    class: u-grid-cols,
+    values: grid.$utility-grid-template-columns,
+  ),
+  'grid-template-rows': (
+    responsive: true,
+    property: grid-template-rows,
+    class: u-grid-rows,
+    values: grid.$utility-grid-template-rows,
+  ),
+  'grid-column': (
+    responsive: true,
+    property: grid-column,
+    class: u-col-span,
+    values: grid.$utility-grid-column-spans,
+  ),
+  'grid-row': (
+    responsive: true,
+    property: grid-row,
+    class: u-row-span,
+    values: grid.$utility-grid-row-spans,
+  ),
+  'place-items': (
+    responsive: true,
+    property: place-items,
+    class: u-place-items,
+    values: (
+      start: start,
+      end: end,
+      center: center,
+      baseline: baseline,
+      stretch: stretch,
+    ),
+  ),
+  'place-content': (
+    responsive: true,
+    property: place-content,
+    class: u-place-content,
+    values: (
+      start: start,
+      end: end,
+      center: center,
+      between: space-between,
+      around: space-around,
+      evenly: space-evenly,
+      stretch: stretch,
+    ),
+  ),
+);

package/src/styles/99-utilities/_utilities.interaction.scss

@@ -0,0 +1,44 @@
+// Define utilities for pointer, cursor, and selection interaction
+$utilities-interaction: (
+  'cursor': (
+    property: cursor,
+    class: u-cursor,
+    values: (
+      auto: auto,
+      default: default,
+      pointer: pointer,
+      wait: wait,
+      text: text,
+      move: move,
+      help: help,
+      'not-allowed': not-allowed,
+    ),
+  ),
+  'pointer-events': (
+    property: pointer-events,
+    class: u-pointer-events,
+    values: (
+      none: none,
+      auto: auto,
+    ),
+  ),
+  'user-select': (
+    property: user-select,
+    class: u-select,
+    values: (
+      none: none,
+      text: text,
+      all: all,
+      auto: auto,
+    ),
+  ),
+  'touch-action': (
+    property: touch-action,
+    class: u-touch-action,
+    values: (
+      auto: auto,
+      none: none,
+      manipulation: manipulation,
+    ),
+  ),
+);

package/src/styles/99-utilities/_utilities.link.scss

@@ -10,7 +10,7 @@ $utilities-link: (
   'link-opacity': (
     css-var: true,
     class: u-link-opacity,
-    state: hover,
+    pseudo: hover,
     values: (
       10: 0.1,
       25: 0.25,
@@ -22,7 +22,7 @@ $utilities-link: (
   'link-offset': (
     property: text-underline-offset,
     class: u-link-offset,
-    state: hover,
+    pseudo: hover,
     values: (
       1: 0.125em,
       2: 0.25em,
@@ -48,7 +48,7 @@ $utilities-link: (
   'link-underline-opacity': (
     css-var: true,
     class: u-link-underline-opacity,
-    state: hover,
+    pseudo: hover,
     values: (
       0: 0,
       10: 0.1,

package/src/styles/99-utilities/_utilities.position.scss

@@ -28,6 +28,21 @@ $utilities-position: (
     class: u-end,
     values: $position-values,
   ),
+  'inset': (
+    property: inset,
+    class: u-inset,
+    values: $position-values,
+  ),
+  'inset-x': (
+    property: inset-inline,
+    class: u-inset-x,
+    values: $position-values,
+  ),
+  'inset-y': (
+    property: inset-block,
+    class: u-inset-y,
+    values: $position-values,
+  ),
   'translate-middle': (
     property: transform,
     class: u-translate-middle,