@shohojdhara/atomix 0.3.1 → 0.3.3

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

@@ -5,85 +5,62 @@
 
 // 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-right,
+  '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-left,
+  '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-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),
@@ -94,11 +71,9 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-  'rounded-top': (
-    property: border-top-left-radius border-top-right-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),
@@ -109,11 +84,9 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-  'rounded-end': (
-    property: border-top-right-radius border-bottom-right-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),
@@ -124,11 +97,9 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-  'rounded-bottom': (
-    property: border-bottom-right-radius border-bottom-left-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),
@@ -139,11 +110,9 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-  'rounded-start': (
-    property: border-bottom-left-radius border-top-left-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),
@@ -154,4 +123,4 @@ $utilities-border: (
       pill: var(--#{config.$prefix}border-radius-pill),
     ),
   ),
-);
+);

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

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../01-settings/settings.design-tokens' as color-maps;
+@use '../01-settings/settings.config' as config;
+
+// Define utilities for gradient backgrounds
+$utilities-gradient: (
+  'background-image': (
+    property: background-image,
+    class: u-bg-gradient,
+    values: color-maps.$gradient-colors,
+  ),
+);

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

@@ -3,38 +3,31 @@
 
 // Define utilities for position
 $utilities-position: (
-  'position': (
-    property: position,
+  'position': (property: position,
     class: u-position,
     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: left,
+  'start': (property: inset-inline-start,
     class: u-start,
     values: $position-values,
   ),
-  'end': (
-    property: right,
+  '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

@@ -9,6 +9,7 @@
 @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;
@@ -27,6 +28,7 @@ $utilities: map.merge($utilities, bg.$utilities-bg);
 $utilities: map.merge($utilities, border.$utilities-border);
 $utilities: map.merge($utilities, display.$utilities-display);
 $utilities: map.merge($utilities, flex.$utilities-flex);
+$utilities: map.merge($utilities, gradient.$utilities-gradient);
 $utilities: map.merge($utilities, link.$utilities-link);
 $utilities: map.merge($utilities, obj-fit.$utilities-object-fit);
 $utilities: map.merge($utilities, opacity.$utilities-opacity);

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

@@ -3,186 +3,141 @@
 
 // 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,
-    property: margin-right margin-left,
+    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,
-    property: margin-top margin-bottom,
+    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,
-    property: margin-right,
+    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,
-    property: margin-left,
+    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,
-        )
-      ),
+    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,
-    property: margin-right margin-left,
+  'negative-margin': (responsive: true,
+    property: margin,
+    class: u-m,
+    values: $negative-spacers,
+  ),
+  'negative-margin-x': (responsive: true,
+    property: margin-inline,
     class: u-mx,
     values: $negative-spacers,
   ),
-  'negative-margin-y': (
-    responsive: true,
-    property: margin-top margin-bottom,
+  'negative-margin-y': (responsive: true,
+    property: margin-block,
     class: u-my,
     values: $negative-spacers,
   ),
-  'negative-margin-top': (
-    responsive: true,
+  'negative-margin-top': (responsive: true,
     property: margin-top,
     class: u-mt,
     values: $negative-spacers,
   ),
-  'negative-margin-end': (
-    responsive: true,
-    property: margin-right,
+  'negative-margin-end': (responsive: true,
+    property: margin-inline-end,
     class: u-me,
     values: $negative-spacers,
   ),
-  'negative-margin-bottom': (
-    responsive: true,
+  'negative-margin-bottom': (responsive: true,
     property: margin-bottom,
     class: u-mb,
     values: $negative-spacers,
   ),
-  'negative-margin-start': (
-    responsive: true,
-    property: margin-left,
+  'negative-margin-start': (responsive: true,
+    property: margin-inline-start,
     class: u-ms,
     values: $negative-spacers,
   ),
   // Padding utilities
-  'padding': (
-      responsive: true,
-      property: padding,
-      class: u-p,
-      values: $spacing-sizes,
-    ),
-  'padding-x': (
-    responsive: true,
-    property: padding-right padding-left,
+  '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,
-    property: padding-top padding-bottom,
+  '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,
-    property: padding-right,
+  '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,
-    property: padding-left,
+  '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.scss

@@ -1,92 +1,73 @@
 @use 'sass:map';
-@use '../01-settings/settings.typography' as *;
+
 @use '../01-settings/settings.config' as config;
 @use '../01-settings/settings.design-tokens' as color-maps;
 @use '../01-settings/settings.colors' as colors;
 
 // Define utilities for text
 $utilities-text: (
-  'font-size': (
-    rfs: true,
+  'font-size': (rfs: true,
     property: font-size,
     class: u-fs,
-    values: $font-sizes,
+    values: map.merge(color-maps.$font-sizes-extended,
+      (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,
+  'font-style': (property: font-style,
     class: u-fst,
-    values: (
-      italic: italic,
+    values: (italic: italic,
       normal: normal,
     ),
   ),
-  'font-weight': (
-    property: font-weight,
+  'font-weight': (property: font-weight,
     class: u-fw,
-    values: (
-      light: $font-weight-light,
-      normal: $font-weight-normal,
-      medium: $font-weight-medium,
-      semibold: $font-weight-semibold,
-      bold: $font-weight-bold,
-      heavy: $font-weight-heavy,
-      black: $font-weight-black,
-    ),
+    values: color-maps.$theme-font-weight,
   ),
-  'line-height': (
-    property: line-height,
+  'line-height': (property: line-height,
     class: u-lh,
-    values: (
-      1: 1,
-      sm: $line-height-sm,
-      base: $line-height-base,
-      lg: $line-height-lg,
-    ),
+    values: map.merge(color-maps.$line-heights,
+      (1: 1,
+      )),
   ),
-  'text-align': (
-    responsive: true,
+  'text-align': (responsive: true,
     property: text-align,
     class: u-text,
-    values: (
-      start: left,
-      end: right,
+    values: (start: start,
+      end: end,
       center: center,
     ),
   ),
-  'text-decoration': (
-    class: u-td,
+  'text-decoration': (class: u-td,
     property: text-decoration,
     values: none underline line-through,
   ),
-  '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,
   ),
-);
+);