@shohojdhara/atomix 0.6.7 → 0.6.8

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

@@ -22,6 +22,11 @@
 @use 'utilities.text-gradient' as textGradient;
 @use 'utilities.visibility' as visibility;
 @use 'utilities.z-index' as z-index;
+@use 'utilities.grid' as grid;
+@use 'utilities.interaction' as interaction;
+@use 'utilities.transition' as transition;
+@use 'utilities.transform' as transform;
+@use 'utilities.state' as state;
 
 // Merge all utility maps
 $utilities: ();
@@ -42,6 +47,11 @@ $utilities: map.merge($utilities, text.$utilities-text);
 $utilities: map.merge($utilities, visibility.$utilities-visibility);
 $utilities: map.merge($utilities, z-index.$utilities-z-index);
 $utilities: map.merge($utilities, textGradient.$utilities-text-gradient);
+$utilities: map.merge($utilities, grid.$utilities-grid);
+$utilities: map.merge($utilities, interaction.$utilities-interaction);
+$utilities: map.merge($utilities, transition.$utilities-transition);
+$utilities: map.merge($utilities, transform.$utilities-transform);
+$utilities: map.merge($utilities, state.$utilities-state);
 
 // Generate all utility classes
 @include util-api.generate-utilities($utilities, breakpoints.$grid-breakpoints);

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

@@ -10,8 +10,6 @@ $utilities-sizes: (
     values: map.merge(
         $spacing-sizes,
         (
-          5: 5%,
-          10: 10%,
           25: 25%,
           50: 50%,
           75: 75%,
@@ -63,8 +61,6 @@ $utilities-sizes: (
     values: map.merge(
         $spacing-sizes,
         (
-          5: 5%,
-          10: 10%,
           25: 25%,
           50: 50%,
           75: 75%,

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

@@ -178,18 +178,18 @@ $utilities-spacing: (
       responsive: true,
       property: gap,
       class: u-gap,
-      values: $spacing-sizes,
+      values: map.merge($spacing-sizes, $semantic-gap-sizes),
     ),
   'row-gap': (
     responsive: true,
     property: row-gap,
     class: u-row-gap,
-    values: $spacing-sizes,
+    values: map.merge($spacing-sizes, $semantic-gap-sizes),
   ),
   'column-gap': (
     responsive: true,
     property: column-gap,
     class: u-column-gap,
-    values: $spacing-sizes,
+    values: map.merge($spacing-sizes, $semantic-gap-sizes),
   ),
 );

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

@@ -0,0 +1,64 @@
+@use 'sass:map';
+@use '../01-settings/settings.design-tokens' as color-maps;
+@use '../01-settings/settings.box-shadow' as shadows;
+
+// State-variant utilities (hover, focus, active) using pseudo-class wrapping
+$utilities-state: (
+  'hover-background-color': (
+    property: background-color,
+    class: u-hover-bg,
+    pseudo: hover,
+    responsive: false,
+    values: color-maps.$utilities-bg-colors,
+  ),
+  'hover-color': (
+    property: color,
+    class: u-hover-text,
+    pseudo: hover,
+    responsive: false,
+    values: color-maps.$utilities-text-colors,
+  ),
+  'hover-box-shadow': (
+    property: box-shadow,
+    class: u-hover-shadow,
+    pseudo: hover,
+    responsive: false,
+    values: (
+      sm: shadows.$box-shadow-sm,
+      md: shadows.$box-shadow-md,
+      lg: shadows.$box-shadow-lg,
+      xl: shadows.$box-shadow-xl,
+    ),
+  ),
+  'hover-transform-scale': (
+    property: transform,
+    class: u-hover-scale,
+    pseudo: hover,
+    responsive: false,
+    values: (
+      95: scale(0.95),
+      100: scale(1),
+      105: scale(1.05),
+      110: scale(1.1),
+    ),
+  ),
+  'active-transform-scale': (
+    property: transform,
+    class: u-active-scale,
+    pseudo: active,
+    responsive: false,
+    values: (
+      95: scale(0.95),
+      100: scale(1),
+    ),
+  ),
+  'focus-outline': (
+    property: outline,
+    class: u-focus-outline,
+    pseudo: focus-visible,
+    responsive: false,
+    values: (
+      none: none,
+    ),
+  ),
+);

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

@@ -1,45 +1,34 @@
 // Text gradient utilities - requires special CSS properties
 // These utilities apply gradient colors to text using background-clip technique
-// Using utility generator system with advanced best practices
 
-@use 'sass:map';
 @use '../01-settings/settings.design-tokens' as *;
 
-// Define utilities for text gradients
-$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: (
-        null: null,
-      ),
-      local-vars: (
-        'background-clip': text,
-        '-webkit-background-clip': text,
-        '-webkit-text-fill-color': transparent,
-      ),
-    ),
+// Base clip properties shared by all text-gradient variants
+.u-text-gradient {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
 
-  // Text gradient color variations using existing CSS gradient tokens
+// Define utilities for text gradient color variants
+$utilities-text-gradient: (
   '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

@@ -7,22 +7,11 @@
 // Define utilities for text
 $utilities-text: (
   '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'),

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

@@ -0,0 +1,15 @@
+@use '../01-settings/settings.motion' as motion;
+
+// Define utilities for CSS transforms
+$utilities-transform: (
+  'transform': (
+    property: transform,
+    class: u-scale,
+    values: motion.$utility-transform-scales,
+  ),
+  'transform-rotate': (
+    property: transform,
+    class: u-rotate,
+    values: motion.$utility-transform-rotates,
+  ),
+);

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

@@ -0,0 +1,20 @@
+@use '../01-settings/settings.motion' as motion;
+
+// Define utilities for CSS transitions
+$utilities-transition: (
+  'transition-property': (
+    property: transition-property,
+    class: u-transition,
+    values: motion.$utility-transition-properties,
+  ),
+  'transition-duration': (
+    property: transition-duration,
+    class: u-duration,
+    values: motion.$utility-transition-durations,
+  ),
+  'transition-timing-function': (
+    property: transition-timing-function,
+    class: u-ease,
+    values: motion.$utility-transition-timing-functions,
+  ),
+);

package/src/styles/__tests__/utilities-compile.test.ts

@@ -0,0 +1,37 @@
+import { execSync } from 'node:child_process';
+import { mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const projectRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../..');
+
+const utilityBundles = [
+  'src/styles/99-utilities/_index.scss',
+  'src/styles/99-utilities/_index.core.scss',
+  'src/styles/99-utilities/_index.grid.scss',
+  'src/styles/99-utilities/_index.interaction.scss',
+  'src/styles/99-utilities/_index.motion.scss',
+] as const;
+
+function compileUtilityBundle(entry: string): void {
+  const tempDir = mkdtempSync(join(tmpdir(), 'atomix-utilities-'));
+  const outputFile = join(tempDir, 'out.css');
+
+  try {
+    execSync(`npx sass "${entry}" "${outputFile}"`, {
+      cwd: projectRoot,
+      stdio: 'pipe',
+      encoding: 'utf8',
+    });
+  } finally {
+    rmSync(tempDir, { recursive: true, force: true });
+  }
+}
+
+describe('utility SCSS bundles', () => {
+  it.each(utilityBundles)('compiles %s without errors', (entry) => {
+    expect(() => compileUtilityBundle(entry)).not.toThrow();
+  });
+});