@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/styles/02-tools/_tools.button.scss

@@ -1,91 +0,0 @@
-@use "sass:color";
-@use "../01-settings/settings.config" as config;
-@use "../01-settings/settings.button" as button;
-@use "../01-settings/settings.colors" as colors;
-@use "../01-settings/settings.border-radius" as *;
-@use "tools.to-rgb" as *;
-@use "tools.border-radius" as *;
-
-// Button variant mixin
-@mixin btn-variant(
-  $color,
-  $background,
-  $border: $background,
-  $hover-background: null,
-  $hover-border: null,
-  $active-background: null,
-  $active-border: null
-) {
-  --#{config.$prefix}btn-color: #{colors.$white};
-  --#{config.$prefix}btn-bg: #{$background};
-  --#{config.$prefix}btn-border-color: #{$border};
-  --#{config.$prefix}btn-hover-color: #{colors.$white};
-  --#{config.$prefix}btn-hover-bg: #{if($hover-background, $hover-background, color.scale($background, $lightness: -15%))};
-  --#{config.$prefix}btn-hover-border-color: #{if($hover-border, $hover-border, color.scale($border, $lightness: -10%))};
-  --#{config.$prefix}btn-active-color: #{colors.$white};
-  --#{config.$prefix}btn-active-bg: #{if($active-background, $active-background, color.scale($background, $lightness: -20%))};
-  --#{config.$prefix}btn-active-border-color: #{if($active-border, $active-border, color.scale($border, $lightness: -25%))};
-  --#{config.$prefix}btn-disabled-color: #{colors.$white};
-  --#{config.$prefix}btn-disabled-bg: #{$background};
-  --#{config.$prefix}btn-disabled-border-color: #{$background};
-}
-
-// Button outline variant mixin
-@mixin btn-outline-variant(
-  $color,
-  $color-hover: colors.$white,
-  $hover-background: $color,
-  $hover-border: $color,
-  $active-background: $color,
-  $active-border: $color
-) {
-  @if ($hover-background == "primary") {
-    $hover-background: 'secondary';
-  }
-
-  @if ($hover-background == "light") {
-    $hover-background: 'secondary';
-  }
-
-  @if ($hover-background == "dark") {
-    $hover-background: 'secondary';
-  }
-
-  $btn-color: $color;
-
-  @if($color == "secondary") {
-    $btn-color: "invert";
-    $color-hover: 'invert';
-  }
-
-  @if($color == "dark") {
-    $btn-color: "invert";
-    $color-hover: 'invert';
-  }
-
-  @if($color == "light") {
-    $btn-color: "invert";
-    $color-hover: 'invert';
-  }
-  
-  --#{config.$prefix}btn-color: var(--#{config.$prefix}#{$btn-color});
-  --#{config.$prefix}btn-bg: transparent;
-  --#{config.$prefix}btn-border-color: var(--#{config.$prefix}#{$color});
-  --#{config.$prefix}btn-hover-color: var(--#{config.$prefix}#{$color-hover});
-  --#{config.$prefix}btn-hover-bg: var(--#{config.$prefix}#{$hover-background});
-  --#{config.$prefix}btn-hover-border-color: var(--#{config.$prefix}#{$hover-border});
-  --#{config.$prefix}btn-active-color: var(--#{config.$prefix}#{$color-hover});
-  --#{config.$prefix}btn-active-bg: var(--#{config.$prefix}#{$active-background});
-  --#{config.$prefix}btn-active-border-color: var(--#{config.$prefix}#{$active-border});
-  --#{config.$prefix}btn-disabled-color: var(--#{config.$prefix}#{$color});
-  --#{config.$prefix}btn-disabled-bg: transparent;
-  --#{config.$prefix}btn-disabled-border-color: var(--#{config.$prefix}#{$color});
-}
-
-// Button size mixin
-@mixin btn-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --#{config.$prefix}btn-padding-y: #{$padding-y};
-  --#{config.$prefix}btn-padding-x: #{$padding-x};
-  --#{config.$prefix}btn-font-size: #{$font-size};
-  --#{config.$prefix}btn-border-radius: #{$border-radius};
-}

package/src/styles/02-tools/_tools.clearfix.scss

@@ -1,10 +0,0 @@
-// .usage {
-//   @include clearfix();
-// }
-@mixin clearfix() {
-  &:after {
-    content: '' !important;
-    display: block !important;
-    clear: both !important;
-  }
-}

package/src/styles/02-tools/_tools.color-functions.scss

@@ -1,28 +0,0 @@
-@use 'sass:color';
-@use 'sass:math';
-@use '../01-settings/settings.config' as config;
-
-// Return SASS color from RGB
-@function rgb-to-color($r, $g, $b) {
-  @return rgb($r, $g, $b);
-}
-
-// Tint a color: mix a color with white
-@function tint-color($color, $weight) {
-  @return color.mix(white, $color, $weight);
-}
-
-// Shade a color: mix a color with black
-@function shade-color($color, $weight) {
-  @return color.mix(black, $color, $weight);
-}
-
-// Shade the color if the weight is positive, else tint it
-@function shift-color($color, $weight) {
-  @return if($weight > 0, tint-color($color, $weight), shade-color($color, -$weight));
-}
-
-// Return valid calc expression if includes CSS variables
-@function add-var($value1, $value2) {
-  @return $value1 + $value2;
-}

package/src/styles/02-tools/_tools.color-mode.scss

@@ -1,22 +0,0 @@
-@use '../01-settings/settings.color-mode' as color-mode;
-@use '../01-settings/settings.config' as config;
-
-@mixin color-mode($mode: light, $root: false) {
-    @if color-mode.$color-mode-type == "media-query" {
-      @if $root == true {
-        @media (prefers-color-scheme: $mode) {
-          :root {
-            @content;
-          }
-        }
-      } @else {
-        @media (prefers-color-scheme: $mode) {
-          @content;
-        }
-      }
-    } @else {
-      [data-#{config.$prefix}theme="#{$mode}"] {
-        @content;
-      }
-    }
-  }

package/src/styles/02-tools/_tools.event.scss

@@ -1,22 +0,0 @@
-/// Event wrapper
-/// @author Harry Roberts
-/// @param {Bool} $self [false] - Whether or not to include current selector
-/// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
-@mixin on-event($self: false) {
-  @if $self {
-    &,
-    &:hover,
-    &:active,
-    &:focus,
-    &:focus-visible {
-      @content;
-    }
-  } @else {
-    &:hover,
-    &:active,
-    &:focus,
-    &:focus-visible {
-      @content;
-    }
-  }
-} 

package/src/styles/02-tools/_tools.grid.scss

@@ -1,76 +0,0 @@
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.grid' as grid;
-@use '../01-settings/settings.breakpoints' as breakpoints;
-@use './tools.breakpoints' as *;
-@use 'sass:math';
-@use 'sass:map';
-@use 'sass:list';
-
-// Container mixin
-@mixin make-container($gutter: grid.$grid-gutter-width) {
-  width: 100%;
-  padding-right: $gutter * 0.5;
-  padding-left: $gutter * 0.5;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-// Row mixin
-@mixin make-row($gutter: grid.$grid-gutter-width) {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -$gutter * 0.5;
-  margin-left: -$gutter * 0.5;
-}
-
-// Column ready mixin
-@mixin make-col-ready($gutter: grid.$grid-gutter-width) {
-  position: relative;
-  width: 100%;
-  padding-right: $gutter * 0.5;
-  padding-left: $gutter * 0.5;
-}
-
-// Column size mixin
-@mixin make-col($size, $columns: grid.$grid-columns) {
-  flex: 0 0 auto;
-  width: math.percentage(math.div($size, $columns));
-}
-
-// Column offset mixin
-@mixin make-col-offset($size, $columns: grid.$grid-columns) {
-  margin-left: if($size > 0, math.percentage(math.div($size, $columns)), 0);
-}
-
-// Grid columns generator
-@mixin grid-columns(
-  $columns: grid.$grid-columns,
-  $gutter: grid.$grid-gutter-width,
-  $breakpoints: breakpoints.$grid-breakpoints
-) {
-  @each $breakpoint in map.keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      .o-grid__col-#{$infix}-auto {
-        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      }
-
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .o-grid__col-#{$infix}-#{$i} {
-            @include make-col($i, $columns);
-          }
-        }
-
-        @for $i from 0 through ($columns - 1) {
-          @if not($infix == '' and $i == 0) {
-            .o-grid__offset-#{$infix}-#{$i} {
-              @include make-col-offset($i, $columns);
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/styles/02-tools/_tools.hidden-visually.scss

@@ -1,32 +0,0 @@
-/// Hide content visually while keeping it accessible to screen readers
-/// @author Harry Roberts
-/// @link https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
-@mixin visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
-}
-
-/// Unhide visually hidden content
-@mixin visually-unhide {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  width: auto;
-  white-space: normal;
-}
-
-/// Visually hide but reveal on focus
-@mixin visually-hidden-focusable {
-  &:not(:focus):not(:focus-within) {
-    @include visually-hidden;
-  }
-}

package/src/styles/02-tools/_tools.hidden.scss

@@ -1,2 +0,0 @@
-// Forward the visually-hidden mixins
-@forward "tools.hidden-visually"; 

package/src/styles/02-tools/_tools.map-loop.scss

@@ -1,31 +0,0 @@
-@use "sass:map";
-@use "sass:meta";
-@use "sass:color";
-@use "../02-tools/tools.to-rgb" as to-rgb;
-
-/// Calls `$function` for each pair in `$map`, passing the value of `$key` and `$value` as arguments.
-/// Returns a new map with the same keys and the result of `$function` as values.
-@function map-loop($map, $function-name, $key: "$key", $value: "$value") {
-  $result: ();
-  @each $k, $v in $map {
-    $function-result: null;
-    
-    // Handle the to-rgb function specifically since it's commonly used
-    @if $function-name == "to-rgb" {
-      $function-result: to-rgb.to-rgb($v);
-    } @else {
-      // For unsupported functions, return the original value
-      // or you could use @warn instead of @error to continue execution
-      @warn "Function #{$function-name} not supported by map-loop, returning original value";
-      $function-result: $v;
-    }
-    
-    $result: map.merge(
-      $result,
-      (
-         $k: $function-result
-      )
-    );
-  }
-  @return $result;
-}

package/src/styles/02-tools/_tools.media-queries.scss

@@ -1,67 +0,0 @@
-@use '../01-settings/settings.breakpoints' as breakpoints;
-@use 'sass:map';
-
-// Media Up - Min-width
-@mixin media-up($breakpoint) {
-  @if map.has-key(breakpoints.$grid-breakpoints, $breakpoint) {
-    $value: map.get(breakpoints.$grid-breakpoints, $breakpoint);
-    @media (min-width: $value) {
-      @content;
-    }
-  } @else {
-    @warn "Unknown breakpoint `#{$breakpoint}` in $breakpoints";
-  }
-}
-
-// Media Down - Max-width
-@mixin media-down($breakpoint) {
-  @if map.has-key(breakpoints.$grid-breakpoints, $breakpoint) {
-    $value: map.get(breakpoints.$grid-breakpoints, $breakpoint);
-    @media (max-width: ($value - 0.02px)) {
-      @content;
-    }
-  } @else {
-    @warn "Unknown breakpoint `#{$breakpoint}` in $breakpoints";
-  }
-}
-
-// Media Between - Min-width and Max-width
-@mixin media-between($lower, $upper) {
-  @if map.has-key(breakpoints.$grid-breakpoints, $lower) and map.has-key(breakpoints.$grid-breakpoints, $upper) {
-    $min: map.get(breakpoints.$grid-breakpoints, $lower);
-    $max: map.get(breakpoints.$grid-breakpoints, $upper);
-    @media (min-width: $min) and (max-width: ($max - 0.02px)) {
-      @content;
-    }
-  } @else {
-    @warn "Unknown breakpoint `#{$lower}` or `#{$upper}` in $breakpoints";
-  }
-}
-
-// Media Only - Specific breakpoint
-@mixin media-only($breakpoint) {
-  @if map.has-key(breakpoints.$grid-breakpoints, $breakpoint) {
-    $lower: $breakpoint;
-    $upper: 'xl';
-    
-    @if $breakpoint == 'xs' {
-      $upper: 'sm';
-    } @else if $breakpoint == 'sm' {
-      $upper: 'md';
-    } @else if $breakpoint == 'md' {
-      $upper: 'lg';
-    } @else if $breakpoint == 'lg' {
-      $upper: 'xl';
-    } @else if $breakpoint == 'xl' {
-      @include media-up($breakpoint) {
-        @content;
-      }
-    } @else {
-      @include media-between($lower, $upper) {
-        @content;
-      }
-    }
-  } @else {
-    @warn "Unknown breakpoint `#{$breakpoint}` in $breakpoints";
-  }
-} 

package/src/styles/02-tools/_tools.object-fit.scss

@@ -1,4 +0,0 @@
-@mixin object-fit($f: contain, $p: center) {
-    object-fit: $f;
-    object-position: $p;
-}

package/src/styles/02-tools/_tools.placeholder.scss

@@ -1,18 +0,0 @@
-
-@mixin placeholder-color($color: #000) {
-  ::-webkit-input-placeholder {
-    color: $color;
-  }
-  :-moz-placeholder {
-    color: $color;
-  }
-  ::-moz-placeholder {
-    color: $color;
-  }
-  :-ms-input-placeholder {
-    color: $color;
-  }
-  ::-ms-input-placeholder {
-    color: $color;
-  }
-}

package/src/styles/02-tools/_tools.rem.scss

@@ -1,5 +0,0 @@
-@use "sass:math";
-
-@function rem($pixels) {
-  @return math.div($pixels, 16px) * 1rem;
-}

package/src/styles/02-tools/_tools.size.scss

@@ -1,8 +0,0 @@
-@mixin size($width, $height) {
-  width: $width;
-  height: $height;
-}
-
-@mixin square($size) {
-  @include size($size, $size);
-}

package/src/styles/02-tools/_tools.spacing.scss

@@ -1,166 +0,0 @@
-@use 'sass:map';
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.spacing' as *;
-
-$spacing-important: false !default;
-
-@mixin m($t: 1, $r: null, $b: null, $l: null) {
-  @if ($t and $r and $b and $l) {
-    @include mt($t);
-    @include mr($r);
-    @include mb($b);
-    @include ml($l);
-  } @else if ($t and $r and $b and not $l) {
-    @include mt($t);
-    @include mx($r);
-    @include mb($b);
-  } @else if ($t and $r and not $b and not $l) {
-    @include my($t);
-    @include mx($r);
-  } @else if ($t and not $r and not $b and not $l) {
-    @if ($t == 'auto') {
-      @include my(0); //be explicit about what the browser does
-      @include mx(auto);
-    } @else {
-      @include my($t);
-      @include mx($t);
-    }
-  } @else {
-    @error "m(#{$t}, #{$r}, #{$b}, #{$l}): Invalid parameters. Expects m($size), m($y, $x), m($t, $x, $b) or m($t, $r, $b, $l)";
-  }
-}
-
-@mixin mx($r: 1, $l: null) {
-  @if ($r and $l) {
-    @include mr($r);
-    @include ml($l);
-  } @else if ($r and not $l) {
-    @include mr($r);
-    @include ml($r);
-  } @else {
-    @error "mx(#{$r}, #{$l}): Invalid parameters. Expects mx($size) or mx($r, $l)";
-  }
-}
-
-@mixin my($t: 1, $b: null) {
-  @if ($t and $b) {
-    @include mt($t);
-    @include mb($b);
-  } @else if ($t and not $b) {
-    @include mt($t);
-    @include mb($t);
-  } @else {
-    @error "my(#{$t}, #{$b}): Invalid parameters. Expects my($size) or my($t, $b)";
-  }
-}
-
-@mixin ml($size: 1) {
-  @if ($size == 'auto') {
-    margin-left: auto #{if($spacing-important, '!important', '')};
-  } @else {
-    margin-left: map.get($spacing-sizes, $size)
-      #{if($spacing-important, '!important', '')};
-  }
-}
-
-@mixin mt($size: 1) {
-  margin-top: map.get($spacing-sizes, $size) #{if(
-      $spacing-important,
-      '!important',
-      ''
-    )};
-}
-
-@mixin mr($size: 1) {
-  @if ($size == 'auto') {
-    margin-right: auto #{if($spacing-important, '!important', '')};
-  } @else {
-    margin-right: map.get($spacing-sizes, $size)
-      #{if($spacing-important, '!important', '')};
-  }
-}
-
-@mixin mb($size: 1) {
-  margin-bottom: map.get($spacing-sizes, $size) #{if(
-      $spacing-important,
-      '!important',
-      ''
-    )};
-}
-
-@mixin p($t: 1, $r: null, $b: null, $l: null) {
-  @if ($t and $r and $b and $l) {
-    @include pt($t);
-    @include pr($r);
-    @include pb($b);
-    @include pl($l);
-  } @else if ($t and $r and $b and not $l) {
-    @include pt($t);
-    @include px($r);
-    @include pb($b);
-  } @else if ($t and $r and not $b and not $l) {
-    @include py($t);
-    @include px($r);
-  } @else if ($t and not $r and not $b and not $l) {
-    @include py($t);
-    @include px($t);
-  } @else {
-    @error "p(#{$t}, #{$r}, #{$b}, #{$l}): Invalid parameters. Expects p($size), p($y, $x), p($t, $x, $b) or p($t, $r, $b, $l)";
-  }
-}
-
-@mixin px($r: 1, $l: null) {
-  @if ($r and $l) {
-    @include pr($r);
-    @include pl($l);
-  } @else if ($r and not $l) {
-    @include pr($r);
-    @include pl($r);
-  } @else {
-    @error "px(#{$r}, #{$l}): Invalid parameters. Expects px($size) or px($r, $l)";
-  }
-}
-
-@mixin py($t: 1, $b: null) {
-  @if ($t and $b) {
-    @include pt($t);
-    @include pb($b);
-  } @else if ($t and not $b) {
-    @include pt($t);
-    @include pb($t);
-  } @else {
-    @error "py(#{$t}, #{$b}): Invalid parameters. Expects py($size) or py($t, $b)";
-  }
-}
-
-@mixin pl($size: 1) {
-  padding-left: map.get($spacing-sizes, $size) #{if(
-      $spacing-important,
-      '!important',
-      ''
-    )};
-}
-
-@mixin pt($size: 1) {
-  padding-top: map.get($spacing-sizes, $size) #{if(
-      $spacing-important,
-      '!important',
-      ''
-    )};
-}
-
-@mixin pr($size: 1) {
-  padding-right: map.get($spacing-sizes, $size) #{if(
-      $spacing-important,
-      '!important',
-      ''
-    )};
-}
-
-@mixin pb($size: 1) {
-  padding-bottom: map.get($spacing-sizes, $size) #{if(
-      $spacing-important,
-      '!important',
-      ''
-    )};
-}

package/src/styles/02-tools/_tools.to-rgb.scss

@@ -1,9 +0,0 @@
-@use "sass:color";
-@use "sass:meta";
-
-@function to-rgb($color) {
-  @if meta.type-of($color) == "color" {
-    @return "#{color.channel($color, 'red', $space: rgb)}, #{color.channel($color, 'green', $space: rgb)}, #{color.channel($color, 'blue', $space: rgb)}";
-  }
-  @return $color; // Pass through CSS variable or string
-}

package/src/styles/02-tools/_tools.transition.scss

@@ -1,50 +0,0 @@
-@use '../01-settings/settings.animations' as animations;
-@use 'sass:list';
-
-// Transition base mixin
-@mixin transition-base($property: all, $duration: 0.2s, $timing: ease-in-out, $delay: 0s) {
-  transition-property: $property;
-  transition-duration: $duration;
-  transition-timing-function: $timing;
-  transition-delay: $delay;
-}
-
-// Basic transition mixin (used by components)
-@mixin basic-transition($property: all, $duration: 0.2s, $timing: ease-in-out, $delay: 0s) {
-  @include transition-base($property, $duration, $timing, $delay);
-}
-
-// Multiple properties transition
-@mixin transition($transitions...) {
-  $props: ();
-  $durations: ();
-  $timings: ();
-  $delays: ();
-
-  @each $transition in $transitions {
-    $property: nth($transition, 1);
-    $duration: 0.2s;
-    $timing-function: ease-in-out;
-    $delay: 0s;
-
-    @if length($transition) > 1 {
-      $duration: nth($transition, 2);
-    }
-    @if length($transition) > 2 {
-      $timing-function: nth($transition, 3);
-    }
-    @if length($transition) > 3 {
-      $delay: nth($transition, 4);
-    }
-
-    $props: append($props, $property, comma);
-    $durations: append($durations, $duration, comma);
-    $timings: append($timings, $timing-function, comma);
-    $delays: append($delays, $delay, comma);
-  }
-
-  transition-property: $props;
-  transition-duration: $durations;
-  transition-timing-function: $timings;
-  transition-delay: $delays;
-} 

package/src/styles/02-tools/_tools.utilities.scss

@@ -1,14 +0,0 @@
-// Utility Generator
-// This file imports the utility API and generates utility classes
-
-@use 'sass:map';
-@use 'tools.utility-api' as *;
-@use '../01-settings/settings.breakpoints' as *;
-
-// Define base utilities map
-$utilities: () !default;
-
-// Generate all utility classes
-@mixin generate-all-utilities() {
-  @include generate-utilities($utilities, $grid-breakpoints);
-}