@shohojdhara/atomix 0.1.17 → 0.1.18

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

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

@@ -0,0 +1,14 @@
+// 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);
+}

package/src/styles/02-tools/_tools.utility-api.scss

@@ -0,0 +1,144 @@
+// Utility API
+// Bootstrap 5-inspired utility generator for Atomix Design System
+//
+// This API is used to generate utility classes from utility maps defined in the 99-utilities folder.
+// It provides a consistent way to generate utility classes with responsive variants, states, and more.
+
+@use 'sass:map';
+@use 'sass:string';
+@use 'sass:list';
+@use 'sass:meta';
+@use '../01-settings/settings.config' as *;
+@use '../01-settings/settings.breakpoints' as *;
+
+// Default config for utilities
+$utility-defaults: (
+  responsive: true,
+  rfs: false,
+  print: false,
+  dark: false,
+  class: null,
+  state: null,
+  local-vars: (),
+  rtl: true,
+) !default;
+
+// Core function to generate utility classes
+@mixin generate-utility($utility, $infix: '', $is-rfs: false) {
+  $values: map.get($utility, values);
+
+  // If the values are a list or string, convert it to a map
+  @if meta.type-of($values) == 'string' or meta.type-of($values) == 'list' {
+    $values: zip($values, $values);
+  }
+
+  @each $key, $value in $values {
+    $properties: map.get($utility, property);
+    $property-class: map.get($utility, class);
+    $property-class: if($property-class, $property-class, list.nth($properties, 1));
+
+    // Multiple properties are possible, like with borders or shadows
+    $property-class: if(
+      meta.type-of($property-class) == 'list',
+      list.nth($property-class, 1),
+      $property-class
+    );
+
+    // State variants (hover, focus, active, etc.)
+    $state: map.get($utility, state);
+    $infix: if($state, if(meta.type-of($state) == 'string', '#{$state}#{$infix}', $infix), $infix);
+
+    // Don't prefix if value key is null (e.g. with shadow-none utility)
+    $class-name: if($key, '#{$property-class}-#{$key}#{$infix}', '#{$property-class}#{$infix}');
+
+    @if map.get($utility, class) == null {
+      .#{$class-name} {
+        @each $property in $properties {
+          #{$property}: $value if(map.get($utility, rtl), null, !important);
+        }
+      }
+    } @else {
+      .#{map.get($utility, class)}#{$infix}#{if($key, '-#{$key}', '')} {
+        @each $property in $properties {
+          #{$property}: $value if(map.get($utility, rtl), null, !important);
+        }
+      }
+    }
+  }
+}
+
+// Core function to generate responsive utilities
+@mixin generate-responsive-utilities($utility, $breakpoints, $breakpoint-infix-generator) {
+  $responsive: map.get($utility, responsive);
+
+  @if $responsive {
+    @each $breakpoint in map.keys($breakpoints) {
+      $infix: call($breakpoint-infix-generator, $breakpoint);
+
+      @include media-breakpoint-up($breakpoint) {
+        @include generate-utility($utility, $infix);
+      }
+    }
+  } @else {
+    @include generate-utility($utility);
+  }
+}
+
+// Main mixin to generate all utilities
+@mixin generate-utilities(
+  $utilities,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-infix-generator: null
+) {
+  // Set default breakpoint infix generator if not provided
+  $breakpoint-infix-generator: if(
+    $breakpoint-infix-generator,
+    $breakpoint-infix-generator,
+    get-breakpoint-infix
+  );
+
+  @each $utility, $config in $utilities {
+    // Merge default config
+    $config: map.merge($utility-defaults, $config);
+
+    // Only process if the utility is not explicitly set to false
+    @if map.get($config, generated) != false {
+      $utility-map: (
+        property: map.get($config, property),
+        values: map.get($config, values),
+        class: map.get($config, class),
+        state: map.get($config, state),
+        rtl: map.get($config, rtl),
+      );
+
+      @include generate-responsive-utilities(
+        $utility-map,
+        $breakpoints,
+        $breakpoint-infix-generator
+      );
+    }
+  }
+}
+
+// Helper function to get breakpoint infix
+@function get-breakpoint-infix($breakpoint) {
+  @return if($breakpoint == null, '', '-#{$breakpoint}');
+}
+
+// Helper function to create value lists
+@function zip($keys, $values) {
+  $result: ();
+  $index: 1;
+
+  @each $key in $keys {
+    $result: map.merge(
+      $result,
+      (
+        $key: if($index <= list.length($values), list.nth($values, $index), null),
+      )
+    );
+    $index: $index + 1;
+  }
+
+  @return $result;
+}

package/src/styles/03-generic/_generic.fonts.scss

@@ -0,0 +1,24 @@
+@use '../01-settings/settings.fonts' as fonts;
+@use '../01-settings/settings.typography' as *;
+
+// // Import Helvetica Neue font family using the font-face mixin
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue', $font-weight-normal, normal);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Light', $font-weight-light, normal);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Medium', $font-weight-medium, normal);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Bold', $font-weight-bold, normal);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Thin', $font-weight-light - 100, normal);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-UltraLight', $font-weight-light - 200, normal);
+
+// // Italic versions
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-Italic', $font-weight-normal, italic);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-LightItalic', $font-weight-light, italic);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-MediumItalic', $font-weight-medium, italic);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-BoldItalic', $font-weight-bold, italic);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-ThinItalic', $font-weight-light - 100, italic);
+// @include fonts.font-face('Helvetica Neue', 'HelveticaNeue', 'HelveticaNeue-UltraLightItalic', $font-weight-light - 200, italic);
+
+// // Condensed versions
+// @include fonts.font-face('Helvetica Neue Condensed', 'HelveticaNeue', 'HelveticaNeue-CondensedBold', $font-weight-bold, normal);
+// @include fonts.font-face('Helvetica Neue Condensed', 'HelveticaNeue', 'HelveticaNeue-CondensedBlack', $font-weight-black, normal);
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

package/src/styles/03-generic/_generic.reset.scss

@@ -0,0 +1,402 @@
+// _generic.reset.scss
+// Bootstrap 5 style reboot
+// Based on Bootstrap 5's _reboot.scss (MIT License)
+
+@use '../01-settings/settings.config' as config;
+
+// Box sizing rules
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// Root and body setup
+:root {
+  // Reduce the risk of overflow issues
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+}
+
+// Body
+body {
+  margin: 0;
+  font-family: var(--#{config.$prefix}font-family-base);
+  font-size: var(--#{config.$prefix}font-size-base);
+  font-weight: var(--#{config.$prefix}font-weight-base);
+  line-height: var(--#{config.$prefix}line-height-base);
+  color: var(--#{config.$prefix}body-color);
+  text-align: var(--#{config.$prefix}body-text-align);
+  background-color: var(--#{config.$prefix}body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+// Typography
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: var(--#{config.$prefix}headings-margin-bottom);
+  font-family: var(--#{config.$prefix}headings-font-family);
+  font-weight: var(--#{config.$prefix}headings-font-weight);
+  line-height: var(--#{config.$prefix}headings-line-height);
+  color: var(--#{config.$prefix}headings-color);
+}
+
+h1 {
+  font-size: var(--#{config.$prefix}h1-font-size);
+}
+
+h2 {
+  font-size: var(--#{config.$prefix}h2-font-size);
+}
+
+h3 {
+  font-size: var(--#{config.$prefix}h3-font-size);
+}
+
+h4 {
+  font-size: var(--#{config.$prefix}h4-font-size);
+}
+
+h5 {
+  font-size: var(--#{config.$prefix}h5-font-size);
+}
+
+h6 {
+  font-size: var(--#{config.$prefix}h6-font-size);
+}
+
+// Reset margins on paragraphs
+p {
+  margin-top: 0;
+  margin-bottom: var(--#{config.$prefix}paragraph-margin-bottom);
+}
+
+// Abbreviations
+abbr[title],
+abbr[data-bs-original-title] {
+  text-decoration: underline dotted;
+  cursor: help;
+  text-decoration-skip-ink: none;
+}
+
+// Address
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+// Lists
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding-left: 2rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: var(--#{config.$prefix}dt-font-weight);
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+// Blockquote
+blockquote {
+  margin: 0 0 1rem;
+}
+
+// Strong
+b,
+strong {
+  font-weight: var(--#{config.$prefix}font-weight-bolder);
+}
+
+// Small
+small {
+  font-size: var(--#{config.$prefix}small-font-size);
+}
+
+// Mark
+mark {
+  padding: var(--#{config.$prefix}mark-padding);
+  background-color: var(--#{config.$prefix}mark-bg);
+}
+
+// Sub and sup
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+// Links
+a {
+  color: var(--#{config.$prefix}link-color);
+  text-decoration: var(--#{config.$prefix}link-decoration);
+
+  &:hover {
+    color: var(--#{config.$prefix}link-hover-color);
+    text-decoration: var(--#{config.$prefix}link-hover-decoration);
+  }
+}
+
+// And undo these styles for placeholder links/named anchors (without href)
+a:not([href]):not([class]),
+a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+// Code
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--#{config.$prefix}font-family-monospace);
+  font-size: 1em; // Correct the odd `em` font sizing
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: var(--#{config.$prefix}code-font-size);
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    font-size: inherit;
+    color: inherit;
+    word-break: normal;
+  }
+}
+
+code {
+  font-size: var(--#{config.$prefix}code-font-size);
+  color: var(--#{config.$prefix}code-color);
+  word-wrap: break-word;
+
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    color: inherit;
+  }
+}
+
+kbd {
+  padding: var(--#{config.$prefix}kbd-padding-y) var(--#{config.$prefix}kbd-padding-x);
+  font-size: var(--#{config.$prefix}kbd-font-size);
+  color: var(--#{config.$prefix}kbd-color);
+  background-color: var(--#{config.$prefix}kbd-bg);
+  border-radius: var(--#{config.$prefix}border-radius-sm);
+
+  kbd {
+    padding: 0;
+    font-size: 1em;
+    font-weight: var(--#{config.$prefix}font-weight-bolder);
+  }
+}
+
+// Figures
+figure {
+  margin: 0 0 1rem;
+}
+
+// Images and content
+img,
+svg {
+  vertical-align: middle;
+}
+
+// Tables
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: var(--#{config.$prefix}table-cell-padding-y);
+  padding-bottom: var(--#{config.$prefix}table-cell-padding-y);
+  color: var(--#{config.$prefix}secondary-color);
+  text-align: left;
+}
+
+// Forms
+label {
+  display: inline-block;
+}
+
+// Remove the default `border-radius` that macOS Chrome adds
+button {
+  border-radius: 0;
+}
+
+// Work around a Firefox/IE bug where the transparent `button` background
+// results in a loss of the default `button` focus styles
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+// Explicitly remove focus outline in Chromium when it shouldn't be visible
+:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+// Remove the inheritance of text transform in Firefox
+button,
+select {
+  text-transform: none;
+}
+
+// Set the cursor for non-`<button>` buttons
+[role='button'] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+
+// Remove the inner border and padding in Firefox
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+// Add the correct vertical alignment in Chrome and Firefox
+progress {
+  vertical-align: baseline;
+}
+
+// Correct styling of number inputs in Safari
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type='search'] {
+  outline-offset: -2px; // Safari
+}
+
+// 1. Correct the inability to style clickable types in iOS and Safari
+// 2. Change font properties to `inherit` in Safari
+::-webkit-file-upload-button {
+  font: inherit; // 2
+  -webkit-appearance: button; // 1
+}
+
+// Correct element displays
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+// Summary
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+// Hidden attribute
+[hidden] {
+  display: none !important;
+}
+
+// Print styles
+@media print {
+  *,
+  *::before,
+  *::after {
+    text-shadow: none !important;
+    box-shadow: none !important;
+  }
+
+  a:not(.btn) {
+    text-decoration: underline;
+  }
+
+  abbr[title]::after {
+    content: ' (' attr(title) ')';
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #adb5bd;
+    page-break-inside: avoid;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+
+  @page {
+    size: a3;
+  }
+
+  body {
+    min-width: 992px !important;
+  }
+
+  .container {
+    min-width: 992px !important;
+  }
+}