@shohojdhara/atomix 0.1.16 → 0.1.17

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

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

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

@@ -1,397 +0,0 @@
-// _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: .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;
-  }
-}