@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,48 @@
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.grid' as grid;
+@use '../01-settings/settings.breakpoints' as breakpoints;
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+
+// Breakpoint viewport sizes and media queries.
+@mixin media-breakpoint-up($name, $breakpoints: breakpoints.$grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width
+@mixin media-breakpoint-down($name, $breakpoints: breakpoints.$grid-breakpoints) {
+  // Get the next breakpoint
+  $breakpoint-names: map.keys($breakpoints);
+  $breakpoint-index: list.index($breakpoint-names, $name);
+
+  // If not the largest breakpoint
+  @if $breakpoint-index < list.length($breakpoint-names) {
+    $next-breakpoint: list.nth($breakpoint-names, $breakpoint-index + 1);
+    $next-value: map.get($breakpoints, $next-breakpoint);
+
+    @media (max-width: ($next-value - 0.02)) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+@function breakpoint-infix($name, $breakpoints: breakpoints.$grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
+}
+
+// Returns the minimum breakpoint width.
+@function breakpoint-min($name, $breakpoints: breakpoints.$grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}

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

@@ -0,0 +1,115 @@
+@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
+) {
+  $btn-text-color: colors.$white;
+  $btn-text-hover-color: colors.$white;
+
+  @if ($color == 'light') {
+    $btn-text-color: var(--#{config.$prefix}dark-text-emphasis);
+    $btn-text-hover-color: var(--#{config.$prefix}dark-text-emphasis);
+  }
+
+  --#{config.$prefix}btn-color: #{$btn-text-color};
+  --#{config.$prefix}btn-bg: #{$background};
+  --#{config.$prefix}btn-border-color: #{$border};
+  --#{config.$prefix}btn-hover-color: #{$btn-text-hover-color};
+  --#{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: 'light',
+  $hover-background: $color,
+  $hover-border: $color,
+  $active-background: $color,
+  $active-border: $color
+) {
+  @if ($hover-background == 'primary') {
+    $hover-background: 'primary';
+  }
+
+  @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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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