@shohojdhara/atomix 0.3.15 → 0.4.1

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

@@ -3,141 +3,193 @@
 
 // Define utilities for spacing
 $utilities-spacing: (
-  'margin': (responsive: true,
+  'margin': (
+    responsive: true,
     property: margin,
     class: u-m,
-    values: map.merge($spacing-sizes,
-      (auto: auto,
-      )),
-  ),
-  'margin-x': (responsive: true,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-x': (
+    responsive: true,
     property: margin-inline,
     class: u-mx,
-    values: map.merge($spacing-sizes,
-      (auto: auto,
-      )),
-  ),
-  'margin-y': (responsive: true,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-y': (
+    responsive: true,
     property: margin-block,
     class: u-my,
-    values: map.merge($spacing-sizes,
-      (auto: auto,
-      )),
-  ),
-  'margin-top': (responsive: true,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-top': (
+    responsive: true,
     property: margin-top,
     class: u-mt,
-    values: map.merge($spacing-sizes,
-      (auto: auto,
-      )),
-  ),
-  'margin-end': (responsive: true,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-end': (
+    responsive: true,
     property: margin-inline-end,
     class: u-me,
-    values: map.merge($spacing-sizes,
-      (auto: auto,
-      )),
-  ),
-  'margin-bottom': (responsive: true,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-bottom': (
+    responsive: true,
     property: margin-bottom,
     class: u-mb,
-    values: map.merge($spacing-sizes,
-      (auto: auto,
-      )),
-  ),
-  'margin-start': (responsive: true,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-start': (
+    responsive: true,
     property: margin-inline-start,
     class: u-ms,
-    values: map.merge($spacing-sizes,
-      (auto: auto,
-      )),
-  ),
-  // Negative margin utilities
-  'negative-margin': (responsive: true,
-    property: margin,
-    class: u-m,
-    values: $negative-spacers,
-  ),
-  'negative-margin-x': (responsive: true,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  // Negative margin utilities — only generated when $enable-negative-margins is true
+  'negative-margin': (
+      responsive: true,
+      property: margin,
+      class: u-m,
+      values: $negative-spacers,
+      generated: $enable-negative-margins,
+    ),
+  'negative-margin-x': (
+    responsive: true,
     property: margin-inline,
     class: u-mx,
     values: $negative-spacers,
+    generated: $enable-negative-margins,
   ),
-  'negative-margin-y': (responsive: true,
+  'negative-margin-y': (
+    responsive: true,
     property: margin-block,
     class: u-my,
     values: $negative-spacers,
+    generated: $enable-negative-margins,
   ),
-  'negative-margin-top': (responsive: true,
+  'negative-margin-top': (
+    responsive: true,
     property: margin-top,
     class: u-mt,
     values: $negative-spacers,
+    generated: $enable-negative-margins,
   ),
-  'negative-margin-end': (responsive: true,
+  'negative-margin-end': (
+    responsive: true,
     property: margin-inline-end,
     class: u-me,
     values: $negative-spacers,
+    generated: $enable-negative-margins,
   ),
-  'negative-margin-bottom': (responsive: true,
+  'negative-margin-bottom': (
+    responsive: true,
     property: margin-bottom,
     class: u-mb,
     values: $negative-spacers,
+    generated: $enable-negative-margins,
   ),
-  'negative-margin-start': (responsive: true,
+  'negative-margin-start': (
+    responsive: true,
     property: margin-inline-start,
     class: u-ms,
     values: $negative-spacers,
+    generated: $enable-negative-margins,
   ),
   // Padding utilities
-  'padding': (responsive: true,
-    property: padding,
-    class: u-p,
-    values: $spacing-sizes,
-  ),
-  'padding-x': (responsive: true,
+  'padding': (
+      responsive: true,
+      property: padding,
+      class: u-p,
+      values: $spacing-sizes,
+    ),
+  'padding-x': (
+    responsive: true,
     property: padding-inline,
     class: u-px,
     values: $spacing-sizes,
   ),
-  'padding-y': (responsive: true,
+  'padding-y': (
+    responsive: true,
     property: padding-block,
     class: u-py,
     values: $spacing-sizes,
   ),
-  'padding-top': (responsive: true,
+  'padding-top': (
+    responsive: true,
     property: padding-top,
     class: u-pt,
     values: $spacing-sizes,
   ),
-  'padding-end': (responsive: true,
+  'padding-end': (
+    responsive: true,
     property: padding-inline-end,
     class: u-pe,
     values: $spacing-sizes,
   ),
-  'padding-bottom': (responsive: true,
+  'padding-bottom': (
+    responsive: true,
     property: padding-bottom,
     class: u-pb,
     values: $spacing-sizes,
   ),
-  'padding-start': (responsive: true,
+  'padding-start': (
+    responsive: true,
     property: padding-inline-start,
     class: u-ps,
     values: $spacing-sizes,
   ),
   // Gap utility
-  'gap': (responsive: true,
-    property: gap,
-    class: u-gap,
-    values: $spacing-sizes,
-  ),
-  'row-gap': (responsive: true,
+  'gap': (
+      responsive: true,
+      property: gap,
+      class: u-gap,
+      values: $spacing-sizes,
+    ),
+  'row-gap': (
+    responsive: true,
     property: row-gap,
     class: u-row-gap,
     values: $spacing-sizes,
   ),
-  'column-gap': (responsive: true,
+  'column-gap': (
+    responsive: true,
     property: column-gap,
     class: u-column-gap,
     values: $spacing-sizes,
   ),
-);
+);

package/src/styles/99-utilities/_utilities.text-gradient.scss

@@ -9,37 +9,37 @@
 $utilities-text-gradient: (
   // Base text gradient utility - applies the core text gradient properties
   'text-gradient': (
-    property: null,  // No specific CSS property, we're only using local-vars
-    class: u-text-gradient,
-    values: (
-      // Base class with no modifier applies the core text gradient styles
-      'base': null
+      property: null,
+      // No specific CSS property, we're only using local-vars
+      class: u-text-gradient,
+      values: (
+        null: null,
+      ),
+      local-vars: (
+        'background-clip': text,
+        '-webkit-background-clip': text,
+        '-webkit-text-fill-color': transparent,
+      ),
     ),
-    local-vars: (
-      'background-clip': text,
-      '-webkit-background-clip': text,
-      '-webkit-text-fill-color': transparent
-    )
-  ),
-  
+
   // Text gradient color variations using existing CSS gradient tokens
   'text-gradient-colors': (
-    property: background-image,
-    class: u-text-gradient,
-    values: (
-      primary: var(--atomix-primary-gradient),
-      secondary: var(--atomix-secondary-gradient),
-      success: var(--atomix-success-gradient),
-      warning: var(--atomix-warning-gradient),
-      error: var(--atomix-error-gradient),
-      info: var(--atomix-info-gradient),
-      light: var(--atomix-light-gradient),
-      dark: var(--atomix-dark-gradient)
-    ),
-    local-vars: (
-      'background-clip': text,
-      '-webkit-background-clip': text,
-      '-webkit-text-fill-color': transparent
+      property: background-image,
+      class: u-text-gradient,
+      values: (
+        primary: var(--atomix-primary-gradient),
+        secondary: var(--atomix-secondary-gradient),
+        success: var(--atomix-success-gradient),
+        warning: var(--atomix-warning-gradient),
+        error: var(--atomix-error-gradient),
+        info: var(--atomix-info-gradient),
+        light: var(--atomix-light-gradient),
+        dark: var(--atomix-dark-gradient),
+      ),
+      local-vars: (
+        'background-clip': text,
+        '-webkit-background-clip': text,
+        '-webkit-text-fill-color': transparent,
+      ),
     )
-  )
-);
+);

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

@@ -6,59 +6,73 @@
 
 // Define utilities for text
 $utilities-text: (
-  'font-size': (rfs: true,
+  'font-size': (
+    rfs: true,
     property: font-size,
-    class: u-text,
-    values: map.merge(color-maps.$font-sizes-extended,
-      (xs: map.get(color-maps.$font-sizes-extended, 'xs'),
-        sm: map.get(color-maps.$font-sizes-extended, 'sm'),
-        base: map.get(color-maps.$font-sizes-extended, 'base'),
-        lg: map.get(color-maps.$font-sizes-extended, 'lg'),
-        xl: map.get(color-maps.$font-sizes-extended, 'xl'),
-        '2xl': map.get(color-maps.$font-sizes-extended, '2xl'),
-        '3xl': map.get(color-maps.$font-sizes-extended, '3xl'),
-        '4xl': map.get(color-maps.$font-sizes-extended, '4xl'),
-        '5xl': map.get(color-maps.$font-sizes-extended, '5xl'),
-        '6xl': map.get(color-maps.$font-sizes-extended, '6xl'),
-        1: map.get(color-maps.$font-sizes-extended, 'h1'),
-        2: map.get(color-maps.$font-sizes-extended, 'h2'),
-        3: map.get(color-maps.$font-sizes-extended, 'h3'),
-        4: map.get(color-maps.$font-sizes-extended, 'h4'),
-        5: map.get(color-maps.$font-sizes-extended, 'h5'),
-        6: map.get(color-maps.$font-sizes-extended, 'h6'),
-      )),
+    class: u-fs,
+    values: map.merge(
+        color-maps.$font-sizes-extended,
+        (
+          xs: map.get(color-maps.$font-sizes-extended, 'xs'),
+          sm: map.get(color-maps.$font-sizes-extended, 'sm'),
+          base: map.get(color-maps.$font-sizes-extended, 'base'),
+          lg: map.get(color-maps.$font-sizes-extended, 'lg'),
+          xl: map.get(color-maps.$font-sizes-extended, 'xl'),
+          '2xl': map.get(color-maps.$font-sizes-extended, '2xl'),
+          '3xl': map.get(color-maps.$font-sizes-extended, '3xl'),
+          '4xl': map.get(color-maps.$font-sizes-extended, '4xl'),
+          '5xl': map.get(color-maps.$font-sizes-extended, '5xl'),
+          '6xl': map.get(color-maps.$font-sizes-extended, '6xl'),
+          1: map.get(color-maps.$font-sizes-extended, 'h1'),
+          2: map.get(color-maps.$font-sizes-extended, 'h2'),
+          3: map.get(color-maps.$font-sizes-extended, 'h3'),
+          4: map.get(color-maps.$font-sizes-extended, 'h4'),
+          5: map.get(color-maps.$font-sizes-extended, 'h5'),
+          6: map.get(color-maps.$font-sizes-extended, 'h6'),
+        )
+      ),
   ),
-  'font-style': (property: font-style,
-    class: u-fst,
-    values: (italic: italic,
-      normal: normal,
+  'font-style': (
+    property: font-style,
+    class: u,
+    values: (
+      italic: italic,
+      not-italic: normal,
     ),
   ),
-  'font-weight': (property: font-weight,
+  'font-weight': (
+    property: font-weight,
     class: u-font,
     values: color-maps.$theme-font-weight,
   ),
-  'line-height': (property: line-height,
+  'line-height': (
+    property: line-height,
     class: u-leading,
-    values: map.merge(color-maps.$line-heights,
-      (none: 1,
-        tight: 1.25,
-        snug: 1.375,
-        normal: 1.5,
-        relaxed: 1.625,
-        loose: 2,
-        1: 1,
-      )),
+    values: map.merge(
+        color-maps.$line-heights,
+        (
+          none: 1,
+          tight: 1.25,
+          snug: 1.375,
+          normal: 1.5,
+          relaxed: 1.625,
+          loose: 2,
+          1: 1,
+        )
+      ),
   ),
-  'text-align': (responsive: true,
+  'text-align': (
+    responsive: true,
     property: text-align,
     class: u-text,
-    values: (start: start,
+    values: (
+      start: start,
       end: end,
       center: center,
     ),
   ),
-  'text-decoration': (property: text-decoration,
+  'text-decoration': (
+    property: text-decoration,
     class: u,
     values: (
       'underline': underline,
@@ -66,28 +80,34 @@ $utilities-text: (
       'no-underline': none,
     ),
   ),
-  'text-transform': (property: text-transform,
+  'text-transform': (
+    property: text-transform,
     class: u-text,
     values: lowercase uppercase capitalize,
   ),
-  'white-space': (property: white-space,
+  'white-space': (
+    property: white-space,
     class: u-text,
-    values: (wrap: normal,
+    values: (
+      wrap: normal,
       nowrap: nowrap,
     ),
   ),
-  'word-wrap': (property: word-wrap word-break,
+  'word-wrap': (
+    property: word-wrap word-break,
     class: u-text,
-    values: (break: break-word,
+    values: (
+      break: break-word,
     ),
-    rtl: false,
   ),
-  'color': (property: color,
+  'color': (
+    property: color,
     class: u-text,
     values: color-maps.$utilities-text-colors,
   ),
-  'text-emphasis-color': (property: color,
+  'text-emphasis-color': (
+    property: color,
     class: u-text,
     values: color-maps.$utilities-text-emphasis-colors,
   ),
-);
+);