@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,79 +0,0 @@
-@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: .1,
-      25: .25,
-      50: .5,
-      75: .75,
-      100: 1
-    )
-  ),
-  "link-offset": (
-    property: text-underline-offset,
-    class: u-link-offset,
-    state: hover,
-    values: (
-      1: .125em,
-      2: .25em,
-      3: .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: .1,
-      25: .25,
-      50: .5,
-      75: .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

@@ -1,17 +0,0 @@
-@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

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

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

@@ -1,20 +0,0 @@
-@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

@@ -1,40 +0,0 @@
-@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

@@ -1,42 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-@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

@@ -1,81 +0,0 @@
-@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

@@ -1,153 +0,0 @@
-@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

@@ -1,87 +0,0 @@
-@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

@@ -1,13 +0,0 @@
-@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

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

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

@@ -1,11 +0,0 @@
-@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

@@ -1,12 +0,0 @@
-/*!
- * 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 *;