zenkit-css 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenkit-css",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A minimal, modern CSS framework for peaceful development",
   "main": "dist/zenkit.css",
   "scripts": {

package/scss/abstracts/_mixins.scss

@@ -2,13 +2,15 @@
 // ZenKit - Mixins
 // ========================================
 
+@use 'sass:map';
+@use 'sass:math';
 @use 'variables' as *;
 
 // ----------------------------------------
 // Breakpoint Mixins (Mobile First)
 // ----------------------------------------
 @mixin breakpoint-up($name) {
-  $min: map-get($breakpoints, $name);
+  $min: map.get($breakpoints, $name);
   @if $min and $min > 0 {
     @media (min-width: $min) {
       @content;
@@ -19,7 +21,7 @@
 }
 
 @mixin breakpoint-down($name) {
-  $max: map-get($breakpoints, $name);
+  $max: map.get($breakpoints, $name);
   @if $max and $max > 0 {
     @media (max-width: ($max - 0.02px)) {
       @content;
@@ -75,8 +77,8 @@
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage(calc($size / $columns));
-  max-width: percentage(calc($size / $columns));
+  flex: 0 0 math.percentage(math.div($size, $columns));
+  max-width: math.percentage(math.div($size, $columns));
   padding-right: calc($grid-gutter / 2);
   padding-left: calc($grid-gutter / 2);
 }
@@ -258,7 +260,7 @@
 
   &::before {
     display: block;
-    padding-top: percentage(calc($height / $width));
+    padding-top: math.percentage(math.div($height, $width));
     content: "";
   }
 

package/scss/components/_dropdown.scss

@@ -2,6 +2,7 @@
 // ZenKit - Dropdown
 // ========================================
 
+@use 'sass:map';
 @use '../abstracts/variables' as *;
 
 // ----------------------------------------
@@ -280,7 +281,7 @@
 
 // Responsive alignment
 @each $breakpoint in (sm, md, lg, xl, 2xl) {
-  @media (min-width: map-get($breakpoints, $breakpoint)) {
+  @media (min-width: map.get($breakpoints, $breakpoint)) {
     .dropdown-menu-#{$breakpoint}-start {
       --position: start;
       right: auto;

package/scss/components/_popover.scss

@@ -2,6 +2,7 @@
 // ZenKit - Popover
 // ========================================
 
+@use 'sass:color';
 @use '../abstracts/variables' as *;
 
 // ----------------------------------------
@@ -224,7 +225,7 @@
 .popover-primary {
   --popover-bg: var(--primary);
   --popover-border-color: var(--primary);
-  --popover-header-bg: #{darken($primary, 5%)};
+  --popover-header-bg: #{color.adjust($primary, $lightness: -5%)};
   --popover-header-color: var(--white);
   --popover-body-color: var(--white);
 }
@@ -240,7 +241,7 @@
 .popover-success {
   --popover-bg: var(--success);
   --popover-border-color: var(--success);
-  --popover-header-bg: #{darken($success, 5%)};
+  --popover-header-bg: #{color.adjust($success, $lightness: -5%)};
   --popover-header-color: var(--white);
   --popover-body-color: var(--white);
 }
@@ -248,7 +249,7 @@
 .popover-danger {
   --popover-bg: var(--danger);
   --popover-border-color: var(--danger);
-  --popover-header-bg: #{darken($danger, 5%)};
+  --popover-header-bg: #{color.adjust($danger, $lightness: -5%)};
   --popover-header-color: var(--white);
   --popover-body-color: var(--white);
 }
@@ -256,7 +257,7 @@
 .popover-warning {
   --popover-bg: var(--warning);
   --popover-border-color: var(--warning);
-  --popover-header-bg: #{darken($warning, 5%)};
+  --popover-header-bg: #{color.adjust($warning, $lightness: -5%)};
   --popover-header-color: var(--gray-900);
   --popover-body-color: var(--gray-900);
 }
@@ -264,7 +265,7 @@
 .popover-info {
   --popover-bg: var(--info);
   --popover-border-color: var(--info);
-  --popover-header-bg: #{darken($info, 5%)};
+  --popover-header-bg: #{color.adjust($info, $lightness: -5%)};
   --popover-header-color: var(--white);
   --popover-body-color: var(--white);
 }

package/scss/content/_tables.scss

@@ -2,6 +2,7 @@
 // ZenKit - Tables
 // ========================================
 
+@use 'sass:map';
 @use '../abstracts/variables' as *;
 @use '../abstracts/mixins' as *;
 
@@ -188,8 +189,11 @@
   -webkit-overflow-scrolling: touch;
 }
 
-@each $breakpoint in map-keys($breakpoints) {
-  $infix: if($breakpoint == xs, "", "-#{$breakpoint}");
+@each $breakpoint in map.keys($breakpoints) {
+  $infix: "";
+  @if $breakpoint != xs {
+    $infix: "-#{$breakpoint}";
+  }
 
   @include breakpoint-down($breakpoint) {
     .table-responsive#{$infix} {

package/scss/layout/_grid.scss

@@ -165,14 +165,22 @@
 // ----------------------------------------
 @for $i from 0 through ($grid-columns - 1) {
   .offset-#{$i} {
-    margin-left: if($i == 0, 0, percentage(math.div($i, $grid-columns)));
+    @if $i == 0 {
+      margin-left: 0;
+    } @else {
+      margin-left: math.percentage(math.div($i, $grid-columns));
+    }
   }
 }
 
 @include sm {
   @for $i from 0 through ($grid-columns - 1) {
     .offset-sm-#{$i} {
-      margin-left: if($i == 0, 0, percentage(math.div($i, $grid-columns)));
+      @if $i == 0 {
+        margin-left: 0;
+      } @else {
+        margin-left: math.percentage(math.div($i, $grid-columns));
+      }
     }
   }
 }
@@ -180,7 +188,11 @@
 @include md {
   @for $i from 0 through ($grid-columns - 1) {
     .offset-md-#{$i} {
-      margin-left: if($i == 0, 0, percentage(math.div($i, $grid-columns)));
+      @if $i == 0 {
+        margin-left: 0;
+      } @else {
+        margin-left: math.percentage(math.div($i, $grid-columns));
+      }
     }
   }
 }
@@ -188,7 +200,11 @@
 @include lg {
   @for $i from 0 through ($grid-columns - 1) {
     .offset-lg-#{$i} {
-      margin-left: if($i == 0, 0, percentage(math.div($i, $grid-columns)));
+      @if $i == 0 {
+        margin-left: 0;
+      } @else {
+        margin-left: math.percentage(math.div($i, $grid-columns));
+      }
     }
   }
 }
@@ -196,7 +212,11 @@
 @include xl {
   @for $i from 0 through ($grid-columns - 1) {
     .offset-xl-#{$i} {
-      margin-left: if($i == 0, 0, percentage(math.div($i, $grid-columns)));
+      @if $i == 0 {
+        margin-left: 0;
+      } @else {
+        margin-left: math.percentage(math.div($i, $grid-columns));
+      }
     }
   }
 }

package/scss/utilities/_colors.scss

@@ -2,6 +2,7 @@
 // ZenKit - Color Utilities
 // ========================================
 
+@use 'sass:color';
 @use '../abstracts/variables' as *;
 @use '../abstracts/mixins' as *;
 
@@ -129,19 +130,19 @@
 }
 
 .bg-gradient-success {
-  background: linear-gradient(135deg, $success, darken($success, 15%));
+  background: linear-gradient(135deg, $success, color.adjust($success, $lightness: -15%));
 }
 
 .bg-gradient-danger {
-  background: linear-gradient(135deg, $danger, darken($danger, 15%));
+  background: linear-gradient(135deg, $danger, color.adjust($danger, $lightness: -15%));
 }
 
 .bg-gradient-warning {
-  background: linear-gradient(135deg, $warning, darken($warning, 15%));
+  background: linear-gradient(135deg, $warning, color.adjust($warning, $lightness: -15%));
 }
 
 .bg-gradient-info {
-  background: linear-gradient(135deg, $info, darken($info, 15%));
+  background: linear-gradient(135deg, $info, color.adjust($info, $lightness: -15%));
 }
 
 // Gradient directions