@shohojdhara/atomix 0.3.15 → 0.4.0

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

@@ -5,62 +5,96 @@
 
 // Define utilities for borders
 $utilities-border: (
-  'border': (property: border,
+  'border': (
+    property: border,
     class: u-border,
-    values: (null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color),
+    values: (
+      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
+        var(--#{config.$prefix}border-color),
       0: 0,
     ),
   ),
-  'border-top': (property: border-top,
+  'border-top': (
+    property: border-top,
     class: u-border-t,
-    values: (null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color),
+    values: (
+      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
+        var(--#{config.$prefix}border-color),
       0: 0,
     ),
   ),
-  'border-end': (property: border-inline-end,
+  'border-end': (
+    property: border-inline-end,
     class: u-border-e,
-    values: (null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color),
+    values: (
+      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
+        var(--#{config.$prefix}border-color),
       0: 0,
     ),
   ),
-  'border-bottom': (property: border-bottom,
+  'border-bottom': (
+    property: border-bottom,
     class: u-border-b,
-    values: (null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color),
+    values: (
+      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
+        var(--#{config.$prefix}border-color),
       0: 0,
     ),
   ),
-  'border-start': (property: border-inline-start,
+  'border-start': (
+    property: border-inline-start,
     class: u-border-s,
-    values: (null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color),
+    values: (
+      null: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style)
+        var(--#{config.$prefix}border-color),
       0: 0,
     ),
   ),
-  'border-color': (property: border-color,
+  'border-color': (
+    property: border-color,
     class: u-border,
-    local-vars: ('border-opacity': 1,
+    local-vars: (
+      'border-opacity': 1,
     ),
     values: color-maps.$utilities-border-colors,
   ),
-  'subtle-border-color': (property: border-color,
+  'subtle-border-color': (
+    property: border-color,
     class: u-border,
     values: color-maps.$utilities-border-subtle,
   ),
-  'border-width': (property: border-width,
+  'border-width': (
+    property: border-width,
     class: u-border,
     values: border.$border-widths,
   ),
-  'border-opacity': (css-var: true,
+  'border-style': (
+    property: border-style,
+    class: u-border,
+    values: (
+      solid: solid,
+      dashed: dashed,
+      dotted: dotted,
+      double: double,
+      none: none,
+    ),
+  ),
+  'border-opacity': (
+    css-var: true,
     class: u-border-opacity,
-    values: (10: 0.1,
+    values: (
+      10: 0.1,
       25: 0.25,
       50: 0.5,
       75: 0.75,
       100: 1,
     ),
   ),
-  'rounded': (property: border-radius,
+  'rounded': (
+    property: border-radius,
     class: u-rounded,
-    values: (null: var(--#{config.$prefix}border-radius),
+    values: (
+      null: var(--#{config.$prefix}border-radius),
       0: 0,
       sm: var(--#{config.$prefix}border-radius-sm),
       md: var(--#{config.$prefix}border-radius),
@@ -71,9 +105,11 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-  'rounded-top': (property: border-start-start-radius border-start-end-radius,
+  'rounded-top': (
+    property: border-start-start-radius border-start-end-radius,
     class: u-rounded-top,
-    values: (null: var(--#{config.$prefix}border-radius),
+    values: (
+      null: var(--#{config.$prefix}border-radius),
       0: 0,
       sm: var(--#{config.$prefix}border-radius-sm),
       md: var(--#{config.$prefix}border-radius),
@@ -84,9 +120,11 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-  'rounded-end': (property: border-start-end-radius border-end-end-radius,
+  'rounded-end': (
+    property: border-start-end-radius border-end-end-radius,
     class: u-rounded-end,
-    values: (null: var(--#{config.$prefix}border-radius),
+    values: (
+      null: var(--#{config.$prefix}border-radius),
       0: 0,
       sm: var(--#{config.$prefix}border-radius-sm),
       md: var(--#{config.$prefix}border-radius),
@@ -97,9 +135,11 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-  'rounded-bottom': (property: border-end-end-radius border-end-start-radius,
+  'rounded-bottom': (
+    property: border-end-end-radius border-end-start-radius,
     class: u-rounded-bottom,
-    values: (null: var(--#{config.$prefix}border-radius),
+    values: (
+      null: var(--#{config.$prefix}border-radius),
       0: 0,
       sm: var(--#{config.$prefix}border-radius-sm),
       md: var(--#{config.$prefix}border-radius),
@@ -110,9 +150,11 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-  'rounded-start': (property: border-end-start-radius border-start-start-radius,
+  'rounded-start': (
+    property: border-end-start-radius border-start-start-radius,
     class: u-rounded-start,
-    values: (null: var(--#{config.$prefix}border-radius),
+    values: (
+      null: var(--#{config.$prefix}border-radius),
       0: 0,
       sm: var(--#{config.$prefix}border-radius-sm),
       md: var(--#{config.$prefix}border-radius),
@@ -123,4 +165,4 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-);
+);

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

@@ -9,7 +9,7 @@ $utilities-display: (
     class: u,
     values: (
       inline: inline,
-      'inline-block': inline-block, 
+      'inline-block': inline-block,
       block: block,
       grid: grid,
       'inline-grid': inline-grid,

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

@@ -7,9 +7,19 @@ $utilities-opacity: (
     class: u-opacity,
     values: (
       0: 0,
+      5: 0.05,
+      10: 0.1,
+      20: 0.2,
       25: 0.25,
+      30: 0.3,
+      40: 0.4,
       50: 0.5,
+      60: 0.6,
+      70: 0.7,
       75: 0.75,
+      80: 0.8,
+      90: 0.9,
+      95: 0.95,
       100: 1,
     ),
   ),

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

@@ -3,31 +3,38 @@
 
 // Define utilities for position
 $utilities-position: (
-  'position': (property: position,
-    class: u-position,
+  'position': (
+    property: position,
+    class: u,
     values: static relative absolute fixed sticky,
   ),
-  'top': (property: top,
+  'top': (
+    property: top,
     class: u-top,
     values: $position-values,
   ),
-  'bottom': (property: bottom,
+  'bottom': (
+    property: bottom,
     class: u-bottom,
     values: $position-values,
   ),
-  'start': (property: inset-inline-start,
+  'start': (
+    property: inset-inline-start,
     class: u-start,
     values: $position-values,
   ),
-  'end': (property: inset-inline-end,
+  'end': (
+    property: inset-inline-end,
     class: u-end,
     values: $position-values,
   ),
-  'translate-middle': (property: transform,
+  'translate-middle': (
+    property: transform,
     class: u-translate-middle,
-    values: (null: translate(-50%, -50%),
+    values: (
+      null: translate(-50%, -50%),
       x: translateX(-50%),
       y: translateY(-50%),
     ),
   ),
-);
+);

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

@@ -44,4 +44,4 @@ $utilities: map.merge($utilities, z-index.$utilities-z-index);
 $utilities: map.merge($utilities, textGradient.$utilities-text-gradient);
 
 // Generate all utility classes
-@include util-api.generate-utilities($utilities, breakpoints.$grid-breakpoints);
+@include util-api.generate-utilities($utilities, breakpoints.$grid-breakpoints);

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

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../01-settings/settings.spacing' as *;
 
 // Define utilities for sizes
 $utilities-sizes: (
@@ -6,22 +7,37 @@ $utilities-sizes: (
     responsive: true,
     property: width,
     class: u-w,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          5: 5%,
+          10: 10%,
+          25: 25%,
+          50: 50%,
+          75: 75%,
+          100: 100%,
+          full: 100%,
+          auto: auto,
+        )
+      ),
+  ),
+  'max-width': (
+    responsive: true,
+    property: max-width,
+    class: u-max-w,
     values: (
-      5: 5%,
-      10: 10%,
-      25: 25%,
-      50: 50%,
-      75: 75%,
       100: 100%,
-      auto: auto,
+      full: 100%,
     ),
   ),
-  'max-width': (
+  'min-width': (
     responsive: true,
-    property: max-width,
-    class: u-mw,
+    property: min-width,
+    class: u-min-w,
     values: (
+      0: 0,
       100: 100%,
+      full: 100%,
     ),
   ),
   'viewport-width': (
@@ -44,21 +60,34 @@ $utilities-sizes: (
     responsive: true,
     property: height,
     class: u-h,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          5: 5%,
+          10: 10%,
+          25: 25%,
+          50: 50%,
+          75: 75%,
+          100: 100%,
+          full: 100%,
+          auto: auto,
+        )
+      ),
+  ),
+  'max-height': (
+    responsive: true,
+    property: max-height,
+    class: u-max-h,
     values: (
-      5: 5%,
-      10: 10%,
-      25: 25%,
-      50: 50%,
-      75: 75%,
       100: 100%,
-      auto: auto,
     ),
   ),
-  'max-height': (
+  'min-height': (
     responsive: true,
-    property: max-height,
-    class: u-mh,
+    property: min-height,
+    class: u-min-h,
     values: (
+      0: 0,
       100: 100%,
     ),
   ),

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,
+      ),
     )
-  )
-);
+);