@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,96 @@
+@use 'sass:map';
+@use '../01-settings/settings.maps' as color-maps;
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.colors' as colors;
+@use '../02-tools/tools.to-rgb' as *;
+@use '../02-tools/tools.color-functions' as *;
+
+// Define utilities for links
+$utilities-link: (
+  'link-opacity': (
+    css-var: true,
+    class: u-link-opacity,
+    state: hover,
+    values: (
+      10: 0.1,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+  'link-offset': (
+    property: text-underline-offset,
+    class: u-link-offset,
+    state: hover,
+    values: (
+      1: 0.125em,
+      2: 0.25em,
+      3: 0.375em,
+    ),
+  ),
+  'link-underline': (
+    property: text-decoration-color,
+    class: u-link-underline,
+    local-vars: (
+      'link-underline-opacity': 1,
+    ),
+    values: map.merge(
+        color-maps.$utilities-links-underline,
+        (
+          null: rgba(
+              var(--#{config.$prefix}link-color-rgb),
+              var(--#{config.$prefix}u-link-underline-opacity, 1)
+            ),
+        )
+      ),
+  ),
+  'link-underline-opacity': (
+    css-var: true,
+    class: u-link-underline-opacity,
+    state: hover,
+    values: (
+      0: 0,
+      10: 0.1,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+);
+
+// Define variables with default values
+$enable-important-utilities: true !default;
+$link-shade-percentage: 15% !default;
+
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@each $color, $value in color-maps.$theme-colors {
+  .u-link-#{$color} {
+    color: RGBA(var(--#{config.$prefix}#{$color}-rgb), var(--#{config.$prefix}u-link-opacity, 1))
+      if($enable-important-utilities, !important, null);
+    text-decoration-color: RGBA(
+        var(--#{config.$prefix}#{$color}-rgb),
+        var(--#{config.$prefix}u-link-underline-opacity, 1)
+      )
+      if($enable-important-utilities, !important, null);
+
+    @if $link-shade-percentage != 0 {
+      &:hover,
+      &:focus {
+        $hover-color: if(
+          colors.$color-contrast-dark == 'white',
+          shade-color($value, $link-shade-percentage),
+          tint-color($value, $link-shade-percentage)
+        );
+        color: RGBA(#{to-rgb($hover-color)}, var(--#{config.$prefix}u-link-opacity, 1))
+          if($enable-important-utilities, !important, null);
+        text-decoration-color: RGBA(
+            #{to-rgb($hover-color)},
+            var(--#{config.$prefix}u-link-underline-opacity, 1)
+          )
+          if($enable-important-utilities, !important, null);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+@use 'sass:map';
+
+// Define utilities for object-fit
+$utilities-object-fit: (
+  'object-fit': (
+    responsive: true,
+    property: object-fit,
+    class: u-object-fit,
+    values: (
+      contain: contain,
+      cover: cover,
+      fill: fill,
+      scale: scale-down,
+      none: none,
+    ),
+  ),
+);

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

@@ -0,0 +1,16 @@
+@use 'sass:map';
+
+// Define utilities for opacity
+$utilities-opacity: (
+  'opacity': (
+    property: opacity,
+    class: u-opacity,
+    values: (
+      0: 0,
+      25: 0.25,
+      50: 0.5,
+      75: 0.75,
+      100: 1,
+    ),
+  ),
+);

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

@@ -0,0 +1,20 @@
+@use 'sass:map';
+
+// Define utilities for overflow
+$utilities-overflow: (
+  'overflow': (
+    property: overflow,
+    class: u-overflow,
+    values: auto hidden visible scroll,
+  ),
+  'overflow-x': (
+    property: overflow-x,
+    class: u-overflow-x,
+    values: auto hidden visible scroll,
+  ),
+  'overflow-y': (
+    property: overflow-y,
+    class: u-overflow-y,
+    values: auto hidden visible scroll,
+  ),
+);

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

@@ -0,0 +1,40 @@
+@use 'sass:map';
+@use '../01-settings/settings.position' as *;
+
+// Define utilities for position
+$utilities-position: (
+  'position': (
+    property: position,
+    class: u-position,
+    values: static relative absolute fixed sticky,
+  ),
+  'top': (
+    property: top,
+    class: u-top,
+    values: $position-values,
+  ),
+  'bottom': (
+    property: bottom,
+    class: u-bottom,
+    values: $position-values,
+  ),
+  'start': (
+    property: left,
+    class: u-start,
+    values: $position-values,
+  ),
+  'end': (
+    property: right,
+    class: u-end,
+    values: $position-values,
+  ),
+  'translate-middle': (
+    property: transform,
+    class: u-translate-middle,
+    values: (
+      null: translate(-50%, -50%),
+      x: translateX(-50%),
+      y: translateY(-50%),
+    ),
+  ),
+);

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

@@ -0,0 +1,42 @@
+// Main Utilities Generator
+// This file generates all utility classes
+
+@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.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.visibility' as visibility;
+@use 'utilities.z-index' as z-index;
+
+// Merge all utility maps
+$utilities: ();
+$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, link.$utilities-link);
+$utilities: map.merge($utilities, obj-fit.$utilities-object-fit);
+$utilities: map.merge($utilities, opacity.$utilities-opacity);
+$utilities: map.merge($utilities, overflow.$utilities-overflow);
+$utilities: map.merge($utilities, position.$utilities-position);
+$utilities: map.merge($utilities, shadow.$utilities-shadow);
+$utilities: map.merge($utilities, sizes.$utilities-sizes);
+$utilities: map.merge($utilities, spacing.$utilities-spacing);
+$utilities: map.merge($utilities, text.$utilities-text);
+$utilities: map.merge($utilities, visibility.$utilities-visibility);
+$utilities: map.merge($utilities, z-index.$utilities-z-index);
+
+// Generate all utility classes
+@include util-api.generate-utilities($utilities, breakpoints.$grid-breakpoints);

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

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use '../01-settings/settings.config' as config;
+
+// Define utilities for shadows
+$utilities-shadow: (
+  'shadow': (
+    property: box-shadow,
+    class: u-shadow,
+    values: (
+      null: var(--#{config.$prefix}box-shadow),
+      xs: var(--#{config.$prefix}box-shadow-xs),
+      sm: var(--#{config.$prefix}box-shadow-sm),
+      lg: var(--#{config.$prefix}box-shadow-lg),
+      xl: var(--#{config.$prefix}box-shadow-xl),
+      inset: var(--#{config.$prefix}box-shadow-inset),
+      none: none,
+    ),
+  ),
+);

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

@@ -0,0 +1,81 @@
+@use 'sass:map';
+
+// Define utilities for sizes
+$utilities-sizes: (
+  'width': (
+    responsive: true,
+    property: width,
+    class: u-w,
+    values: (
+      5: 5%,
+      10: 10%,
+      25: 25%,
+      50: 50%,
+      75: 75%,
+      100: 100%,
+      auto: auto,
+    ),
+  ),
+  'max-width': (
+    responsive: true,
+    property: max-width,
+    class: u-mw,
+    values: (
+      100: 100%,
+    ),
+  ),
+  'viewport-width': (
+    responsive: true,
+    property: width,
+    class: u-vw,
+    values: (
+      100: 100vw,
+    ),
+  ),
+  'min-viewport-width': (
+    responsive: true,
+    property: min-width,
+    class: u-min-vw,
+    values: (
+      100: 100vw,
+    ),
+  ),
+  'height': (
+    responsive: true,
+    property: height,
+    class: u-h,
+    values: (
+      5: 5%,
+      10: 10%,
+      25: 25%,
+      50: 50%,
+      75: 75%,
+      100: 100%,
+      auto: auto,
+    ),
+  ),
+  'max-height': (
+    responsive: true,
+    property: max-height,
+    class: u-mh,
+    values: (
+      100: 100%,
+    ),
+  ),
+  'viewport-height': (
+    responsive: true,
+    property: height,
+    class: u-vh,
+    values: (
+      100: 100vh,
+    ),
+  ),
+  'min-viewport-height': (
+    responsive: true,
+    property: min-height,
+    class: u-min-vh,
+    values: (
+      100: 100vh,
+    ),
+  ),
+);

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

@@ -0,0 +1,188 @@
+@use 'sass:map';
+@use '../01-settings/settings.spacing' as *;
+
+// Define utilities for spacing
+$utilities-spacing: (
+  'margin': (
+    responsive: true,
+    property: margin,
+    class: u-m,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-x': (
+    responsive: true,
+    property: margin-right margin-left,
+    class: u-mx,
+    values: map.merge(
+        $spacing-sizes,
+        (
+          auto: auto,
+        )
+      ),
+  ),
+  'margin-y': (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: u-my,
+    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,
+    class: u-me,
+    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,
+    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,
+    property: margin-right margin-left,
+    class: u-mx,
+    values: $negative-spacers,
+  ),
+  'negative-margin-y': (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: u-my,
+    values: $negative-spacers,
+  ),
+  'negative-margin-top': (
+    responsive: true,
+    property: margin-top,
+    class: u-mt,
+    values: $negative-spacers,
+  ),
+  'negative-margin-end': (
+    responsive: true,
+    property: margin-right,
+    class: u-me,
+    values: $negative-spacers,
+  ),
+  'negative-margin-bottom': (
+    responsive: true,
+    property: margin-bottom,
+    class: u-mb,
+    values: $negative-spacers,
+  ),
+  'negative-margin-start': (
+    responsive: true,
+    property: margin-left,
+    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,
+    class: u-px,
+    values: $spacing-sizes,
+  ),
+  'padding-y': (
+    responsive: true,
+    property: padding-top padding-bottom,
+    class: u-py,
+    values: $spacing-sizes,
+  ),
+  'padding-top': (
+    responsive: true,
+    property: padding-top,
+    class: u-pt,
+    values: $spacing-sizes,
+  ),
+  'padding-end': (
+    responsive: true,
+    property: padding-right,
+    class: u-pe,
+    values: $spacing-sizes,
+  ),
+  'padding-bottom': (
+    responsive: true,
+    property: padding-bottom,
+    class: u-pb,
+    values: $spacing-sizes,
+  ),
+  'padding-start': (
+    responsive: true,
+    property: padding-left,
+    class: u-ps,
+    values: $spacing-sizes,
+  ),
+  // Gap utility
+  '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,
+    property: column-gap,
+    class: u-column-gap,
+    values: $spacing-sizes,
+  ),
+);

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

@@ -0,0 +1,87 @@
+@use 'sass:map';
+@use '../01-settings/settings.typography' as *;
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.maps' as color-maps;
+@use '../01-settings/settings.colors' as colors;
+
+// Define utilities for text
+$utilities-text: (
+  'font-size': (
+    rfs: true,
+    property: font-size,
+    class: u-fs,
+    values: $font-sizes,
+  ),
+  'font-style': (
+    property: font-style,
+    class: u-fst,
+    values: (
+      italic: italic,
+      normal: normal,
+    ),
+  ),
+  '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,
+    ),
+  ),
+  'line-height': (
+    property: line-height,
+    class: u-lh,
+    values: (
+      1: 1,
+      sm: $line-height-sm,
+      base: $line-height-base,
+      lg: $line-height-lg,
+    ),
+  ),
+  'text-align': (
+    responsive: true,
+    property: text-align,
+    class: u-text,
+    values: (
+      start: left,
+      end: right,
+      center: center,
+    ),
+  ),
+  'text-decoration': (
+    class: u-td,
+    property: text-decoration,
+    values: none underline line-through,
+  ),
+  'text-transform': (
+    property: text-transform,
+    class: u-text,
+    values: lowercase uppercase capitalize,
+  ),
+  'white-space': (
+    property: white-space,
+    class: u-text,
+    values: (
+      wrap: normal,
+      nowrap: nowrap,
+    ),
+  ),
+  'word-wrap': (
+    property: word-wrap word-break,
+    class: u-text,
+    values: (
+      break: break-word,
+    ),
+    rtl: false,
+  ),
+  'color': (
+    property: color,
+    class: u-text,
+    values: color-maps.$utilities-text-colors,
+  ),
+);

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

@@ -0,0 +1,13 @@
+@use 'sass:map';
+
+// Define utilities for visibility
+$utilities-visibility: (
+  'visibility': (
+    property: visibility,
+    class: null,
+    values: (
+      u-visible: visible,
+      u-invisible: hidden,
+    ),
+  ),
+);

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

@@ -0,0 +1,5 @@
+@use '../02-tools/tools.hidden-visually' as *;
+
+.u-visually-hidden {
+  @include visually-hidden;
+}

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

@@ -0,0 +1,11 @@
+@use 'sass:map';
+@use '../01-settings/settings.z-layers' as *;
+
+// Define utilities for z-index
+$utilities-z-index: (
+  'z-index': (
+    property: z-index,
+    class: u-z,
+    values: $z-layers,
+  ),
+);

package/src/styles/index.scss

@@ -0,0 +1,12 @@
+/*!
+ * Atomix Design System v0.1.0
+ */
+
+// Load Atomix settings and configuration
+@use '01-settings/index' as *;
+@use '02-tools/index' as *;
+@use '03-generic/index' as *;
+@use '04-elements/index' as *;
+@use '05-objects/index' as *;
+@use '06-components/index' as *;
+@use '99-utilities/index' as *;