@shohojdhara/atomix 0.3.14 → 0.4.0

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

@@ -0,0 +1,45 @@
+// 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,
+      ),
+    ),
+
+  // 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,
+      ),
+    )
+);

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

package/themes/dark-complementary/README.md

@@ -0,0 +1,98 @@
+# dark-complementary Theme
+
+## Description
+
+The dark-complementary theme provides a modern dark theme with complementary colors optimized for low-light environments and reduced eye strain. This theme maintains excellent readability while providing a sophisticated dark aesthetic.
+
+## Usage
+
+### CSS Theme
+
+```scss
+@import 'themes/dark-complementary';
+```
+
+### JavaScript Theme
+
+```typescript
+import { darkComplementaryTheme } from './themes/dark-complementary';
+import { ThemeProvider } from '@shohojdhara/atomix/theme';
+
+function App() {
+  return (
+    <ThemeProvider theme={darkComplementaryTheme}>
+      {/* Your app */}
+    </ThemeProvider>
+  );
+}
+```
+
+## Customization
+
+Edit the theme variables in `index.scss` to customize colors, typography, spacing, and more. The theme uses CSS custom properties for easy customization.
+
+### Color Customization
+
+```scss
+:root[data-theme='dark-complementary'] {
+  --atomix-color-primary: #your-primary-color;
+  --atomix-color-background: #your-background-color;
+  // ... other variables
+}
+```
+
+### Background Customization
+
+For dark themes, consider the background hierarchy:
+
+```scss
+:root[data-theme='dark-complementary'] {
+  --atomix-color-background: #1a1a1a; // Main background
+  --atomix-color-background-paper: #2d2d2d; // Card/surface backgrounds
+  --atomix-color-background-subtle: #404040; // Hover states, subtle elements
+}
+```
+
+## Features
+
+- **Dark Mode Optimized**: Reduced blue light for better eye comfort
+- **High Contrast**: Maintained readability in low-light conditions
+- **Complementary Colors**: Brighter, more vibrant color palette for dark backgrounds
+- **Modern Design**: Clean aesthetic with enhanced shadows for depth
+- **Accessible**: Meets WCAG 2.1 AA standards with proper contrast ratios
+
+## Build
+
+```bash
+atomix build-theme themes/dark-complementary
+```
+
+## Color Palette
+
+- **Primary**: Light Blue (#4dabf7) - Brighter blue for dark backgrounds
+- **Secondary**: Light Gray (#868e96) - Muted for secondary elements
+- **Success**: Bright Green (#51cf66) - Highly visible success states
+- **Error**: Bright Red (#ff6b6b) - Attention-grabbing error states
+- **Warning**: Bright Yellow (#ffd43b) - Noticeable warning states
+- **Info**: Bright Cyan (#74c0fc) - Clear informational elements
+
+## Typography
+
+- **Base Font**: Inter (system font stack fallback)
+- **Mono Font**: Fira Code (for code elements)
+- **Font Sizes**: Responsive scale from xs to 5xl
+- **Font Weights**: Light (300) to Extra Bold (800)
+- **Text Colors**: White primary (#ffffff), Light gray secondary (#cccccc)
+
+## Background Hierarchy
+
+- **Main Background**: Dark gray (#1a1a1a)
+- **Paper/Surface**: Medium dark gray (#2d2d2d)
+- **Subtle Elements**: Light medium gray (#404040)
+
+## Shadows
+
+Enhanced shadow definitions for better depth perception in dark themes:
+
+- Inner shadows use white tints for subtle highlights
+- Outer shadows use increased opacity for better definition