@shohojdhara/atomix 0.6.6 → 0.6.8

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,

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();
+  });
+});