zenkit-css 1.0.0

package/scss/utilities/_shadows.scss

@@ -0,0 +1,67 @@
+// ========================================
+// ZenKit - Shadow Utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Box Shadow
+// ----------------------------------------
+.shadow-none { box-shadow: none; }
+.shadow-sm { box-shadow: var(--shadow-sm); }
+.shadow { box-shadow: var(--shadow); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+.shadow-xl { box-shadow: var(--shadow-xl); }
+
+// Inner shadow
+.shadow-inner {
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+}
+
+// ----------------------------------------
+// Colored Shadows
+// ----------------------------------------
+.shadow-primary {
+  box-shadow: 0 4px 14px 0 rgba($primary, 0.25);
+}
+
+.shadow-success {
+  box-shadow: 0 4px 14px 0 rgba($success, 0.25);
+}
+
+.shadow-danger {
+  box-shadow: 0 4px 14px 0 rgba($danger, 0.25);
+}
+
+.shadow-warning {
+  box-shadow: 0 4px 14px 0 rgba($warning, 0.25);
+}
+
+// ----------------------------------------
+// Hover Shadows
+// ----------------------------------------
+.hover\:shadow-none:hover { box-shadow: none; }
+.hover\:shadow-sm:hover { box-shadow: var(--shadow-sm); }
+.hover\:shadow:hover { box-shadow: var(--shadow); }
+.hover\:shadow-md:hover { box-shadow: var(--shadow-md); }
+.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }
+.hover\:shadow-xl:hover { box-shadow: var(--shadow-xl); }
+
+// ----------------------------------------
+// Drop Shadow (for images/SVGs)
+// ----------------------------------------
+.drop-shadow-none { filter: drop-shadow(0 0 0 transparent); }
+.drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); }
+.drop-shadow { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)); }
+.drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); }
+.drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)); }
+.drop-shadow-xl { filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08)); }
+
+// ----------------------------------------
+// Transition for Shadows
+// ----------------------------------------
+.transition-shadow {
+  transition: box-shadow var(--transition-base) ease-in-out;
+}

package/scss/utilities/_sizing.scss

@@ -0,0 +1,217 @@
+// ========================================
+// ZenKit - Sizing Utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Width
+// ----------------------------------------
+.w-0 { width: 0; }
+.w-1 { width: 0.25rem; }
+.w-2 { width: 0.5rem; }
+.w-3 { width: 0.75rem; }
+.w-4 { width: 1rem; }
+.w-5 { width: 1.25rem; }
+.w-6 { width: 1.5rem; }
+.w-8 { width: 2rem; }
+.w-10 { width: 2.5rem; }
+.w-12 { width: 3rem; }
+.w-16 { width: 4rem; }
+.w-20 { width: 5rem; }
+.w-24 { width: 6rem; }
+.w-32 { width: 8rem; }
+.w-40 { width: 10rem; }
+.w-48 { width: 12rem; }
+.w-56 { width: 14rem; }
+.w-64 { width: 16rem; }
+.w-72 { width: 18rem; }
+.w-80 { width: 20rem; }
+.w-96 { width: 24rem; }
+
+// Percentage widths
+.w-auto { width: auto; }
+.w-full { width: 100%; }
+.w-screen { width: 100vw; }
+.w-min { width: min-content; }
+.w-max { width: max-content; }
+.w-fit { width: fit-content; }
+
+.w-1\/2 { width: 50%; }
+.w-1\/3 { width: 33.333333%; }
+.w-2\/3 { width: 66.666667%; }
+.w-1\/4 { width: 25%; }
+.w-2\/4 { width: 50%; }
+.w-3\/4 { width: 75%; }
+.w-1\/5 { width: 20%; }
+.w-2\/5 { width: 40%; }
+.w-3\/5 { width: 60%; }
+.w-4\/5 { width: 80%; }
+.w-1\/6 { width: 16.666667%; }
+.w-5\/6 { width: 83.333333%; }
+
+// ----------------------------------------
+// Min Width
+// ----------------------------------------
+.min-w-0 { min-width: 0; }
+.min-w-full { min-width: 100%; }
+.min-w-min { min-width: min-content; }
+.min-w-max { min-width: max-content; }
+.min-w-fit { min-width: fit-content; }
+
+// ----------------------------------------
+// Max Width
+// ----------------------------------------
+.max-w-none { max-width: none; }
+.max-w-xs { max-width: 20rem; }
+.max-w-sm { max-width: 24rem; }
+.max-w-md { max-width: 28rem; }
+.max-w-lg { max-width: 32rem; }
+.max-w-xl { max-width: 36rem; }
+.max-w-2xl { max-width: 42rem; }
+.max-w-3xl { max-width: 48rem; }
+.max-w-4xl { max-width: 56rem; }
+.max-w-5xl { max-width: 64rem; }
+.max-w-6xl { max-width: 72rem; }
+.max-w-7xl { max-width: 80rem; }
+.max-w-full { max-width: 100%; }
+.max-w-min { max-width: min-content; }
+.max-w-max { max-width: max-content; }
+.max-w-fit { max-width: fit-content; }
+.max-w-prose { max-width: 65ch; }
+.max-w-screen-sm { max-width: 640px; }
+.max-w-screen-md { max-width: 768px; }
+.max-w-screen-lg { max-width: 1024px; }
+.max-w-screen-xl { max-width: 1280px; }
+.max-w-screen-2xl { max-width: 1536px; }
+
+// Bootstrap naming aliases
+.mw-100 { max-width: 100%; }
+.mh-100 { max-height: 100%; }
+.min-vw-100 { min-width: 100vw; }
+.min-vh-100 { min-height: 100vh; }
+.vw-100 { width: 100vw; }
+.vh-100 { height: 100vh; }
+
+// ----------------------------------------
+// Height
+// ----------------------------------------
+.h-0 { height: 0; }
+.h-1 { height: 0.25rem; }
+.h-2 { height: 0.5rem; }
+.h-3 { height: 0.75rem; }
+.h-4 { height: 1rem; }
+.h-5 { height: 1.25rem; }
+.h-6 { height: 1.5rem; }
+.h-8 { height: 2rem; }
+.h-10 { height: 2.5rem; }
+.h-12 { height: 3rem; }
+.h-16 { height: 4rem; }
+.h-20 { height: 5rem; }
+.h-24 { height: 6rem; }
+.h-32 { height: 8rem; }
+.h-40 { height: 10rem; }
+.h-48 { height: 12rem; }
+.h-56 { height: 14rem; }
+.h-64 { height: 16rem; }
+.h-72 { height: 18rem; }
+.h-80 { height: 20rem; }
+.h-96 { height: 24rem; }
+
+// Percentage heights
+.h-auto { height: auto; }
+.h-full { height: 100%; }
+.h-screen { height: 100vh; }
+.h-svh { height: 100svh; }
+.h-dvh { height: 100dvh; }
+.h-min { height: min-content; }
+.h-max { height: max-content; }
+.h-fit { height: fit-content; }
+
+.h-1\/2 { height: 50%; }
+.h-1\/3 { height: 33.333333%; }
+.h-2\/3 { height: 66.666667%; }
+.h-1\/4 { height: 25%; }
+.h-3\/4 { height: 75%; }
+.h-1\/5 { height: 20%; }
+.h-4\/5 { height: 80%; }
+
+// ----------------------------------------
+// Min Height
+// ----------------------------------------
+.min-h-0 { min-height: 0; }
+.min-h-full { min-height: 100%; }
+.min-h-screen { min-height: 100vh; }
+.min-h-svh { min-height: 100svh; }
+.min-h-dvh { min-height: 100dvh; }
+.min-h-min { min-height: min-content; }
+.min-h-max { min-height: max-content; }
+.min-h-fit { min-height: fit-content; }
+
+// ----------------------------------------
+// Max Height
+// ----------------------------------------
+.max-h-none { max-height: none; }
+.max-h-full { max-height: 100%; }
+.max-h-screen { max-height: 100vh; }
+.max-h-min { max-height: min-content; }
+.max-h-max { max-height: max-content; }
+.max-h-fit { max-height: fit-content; }
+
+// ----------------------------------------
+// Size (width & height)
+// ----------------------------------------
+.size-0 { width: 0; height: 0; }
+.size-1 { width: 0.25rem; height: 0.25rem; }
+.size-2 { width: 0.5rem; height: 0.5rem; }
+.size-3 { width: 0.75rem; height: 0.75rem; }
+.size-4 { width: 1rem; height: 1rem; }
+.size-5 { width: 1.25rem; height: 1.25rem; }
+.size-6 { width: 1.5rem; height: 1.5rem; }
+.size-8 { width: 2rem; height: 2rem; }
+.size-10 { width: 2.5rem; height: 2.5rem; }
+.size-12 { width: 3rem; height: 3rem; }
+.size-16 { width: 4rem; height: 4rem; }
+.size-20 { width: 5rem; height: 5rem; }
+.size-24 { width: 6rem; height: 6rem; }
+.size-full { width: 100%; height: 100%; }
+
+// ----------------------------------------
+// Responsive Sizing
+// ----------------------------------------
+@include sm {
+  .sm\:w-auto { width: auto; }
+  .sm\:w-full { width: 100%; }
+  .sm\:w-1\/2 { width: 50%; }
+  .sm\:w-1\/3 { width: 33.333333%; }
+  .sm\:w-2\/3 { width: 66.666667%; }
+  .sm\:w-1\/4 { width: 25%; }
+  .sm\:w-3\/4 { width: 75%; }
+}
+
+@include md {
+  .md\:w-auto { width: auto; }
+  .md\:w-full { width: 100%; }
+  .md\:w-1\/2 { width: 50%; }
+  .md\:w-1\/3 { width: 33.333333%; }
+  .md\:w-2\/3 { width: 66.666667%; }
+  .md\:w-1\/4 { width: 25%; }
+  .md\:w-3\/4 { width: 75%; }
+  .md\:max-w-md { max-width: 28rem; }
+  .md\:max-w-lg { max-width: 32rem; }
+  .md\:max-w-xl { max-width: 36rem; }
+}
+
+@include lg {
+  .lg\:w-auto { width: auto; }
+  .lg\:w-full { width: 100%; }
+  .lg\:w-1\/2 { width: 50%; }
+  .lg\:w-1\/3 { width: 33.333333%; }
+  .lg\:w-2\/3 { width: 66.666667%; }
+  .lg\:w-1\/4 { width: 25%; }
+  .lg\:w-3\/4 { width: 75%; }
+  .lg\:max-w-lg { max-width: 32rem; }
+  .lg\:max-w-xl { max-width: 36rem; }
+  .lg\:max-w-2xl { max-width: 42rem; }
+}

package/scss/utilities/_spacing.scss

@@ -0,0 +1,207 @@
+// ========================================
+// ZenKit - Spacing Utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Spacing Map
+// ----------------------------------------
+$spacing-values: (
+  0: 0,
+  1: var(--space-1),
+  2: var(--space-2),
+  3: var(--space-3),
+  4: var(--space-4),
+  5: var(--space-5),
+  6: var(--space-6),
+  8: var(--space-8),
+  10: var(--space-10),
+  12: var(--space-12),
+  16: var(--space-16),
+  20: var(--space-20),
+  24: var(--space-24),
+  auto: auto
+);
+
+// ----------------------------------------
+// Margin Utilities
+// ----------------------------------------
+@each $key, $value in $spacing-values {
+  // All sides
+  .m-#{$key} { margin: $value; }
+
+  // Horizontal (x-axis)
+  .mx-#{$key} {
+    margin-left: $value;
+    margin-right: $value;
+  }
+
+  // Vertical (y-axis)
+  .my-#{$key} {
+    margin-top: $value;
+    margin-bottom: $value;
+  }
+
+  // Individual sides
+  .mt-#{$key} { margin-top: $value; }
+  .mr-#{$key} { margin-right: $value; }
+  .mb-#{$key} { margin-bottom: $value; }
+  .ml-#{$key} { margin-left: $value; }
+
+  // Logical properties
+  .ms-#{$key} { margin-inline-start: $value; }
+  .me-#{$key} { margin-inline-end: $value; }
+}
+
+// Negative margins (except auto and 0)
+@each $key, $value in $spacing-values {
+  @if $key != auto and $key != 0 {
+    .-m-#{$key} { margin: calc($value * -1); }
+    .-mx-#{$key} {
+      margin-left: calc($value * -1);
+      margin-right: calc($value * -1);
+    }
+    .-my-#{$key} {
+      margin-top: calc($value * -1);
+      margin-bottom: calc($value * -1);
+    }
+    .-mt-#{$key} { margin-top: calc($value * -1); }
+    .-mr-#{$key} { margin-right: calc($value * -1); }
+    .-mb-#{$key} { margin-bottom: calc($value * -1); }
+    .-ml-#{$key} { margin-left: calc($value * -1); }
+  }
+}
+
+// ----------------------------------------
+// Padding Utilities
+// ----------------------------------------
+@each $key, $value in $spacing-values {
+  @if $key != auto {
+    // All sides
+    .p-#{$key} { padding: $value; }
+
+    // Horizontal (x-axis)
+    .px-#{$key} {
+      padding-left: $value;
+      padding-right: $value;
+    }
+
+    // Vertical (y-axis)
+    .py-#{$key} {
+      padding-top: $value;
+      padding-bottom: $value;
+    }
+
+    // Individual sides
+    .pt-#{$key} { padding-top: $value; }
+    .pr-#{$key} { padding-right: $value; }
+    .pb-#{$key} { padding-bottom: $value; }
+    .pl-#{$key} { padding-left: $value; }
+
+    // Logical properties
+    .ps-#{$key} { padding-inline-start: $value; }
+    .pe-#{$key} { padding-inline-end: $value; }
+  }
+}
+
+// ----------------------------------------
+// Gap Utilities
+// ----------------------------------------
+@each $key, $value in $spacing-values {
+  @if $key != auto {
+    .gap-#{$key} { gap: $value; }
+    .gap-x-#{$key} { column-gap: $value; }
+    .gap-y-#{$key} { row-gap: $value; }
+  }
+}
+
+// ----------------------------------------
+// Responsive Spacing
+// ----------------------------------------
+@include sm {
+  @each $key, $value in $spacing-values {
+    .sm\:m-#{$key} { margin: $value; }
+    .sm\:mx-#{$key} { margin-left: $value; margin-right: $value; }
+    .sm\:my-#{$key} { margin-top: $value; margin-bottom: $value; }
+    .sm\:mt-#{$key} { margin-top: $value; }
+    .sm\:mb-#{$key} { margin-bottom: $value; }
+    .sm\:ml-#{$key} { margin-left: $value; }
+    .sm\:mr-#{$key} { margin-right: $value; }
+
+    @if $key != auto {
+      .sm\:p-#{$key} { padding: $value; }
+      .sm\:px-#{$key} { padding-left: $value; padding-right: $value; }
+      .sm\:py-#{$key} { padding-top: $value; padding-bottom: $value; }
+      .sm\:pt-#{$key} { padding-top: $value; }
+      .sm\:pb-#{$key} { padding-bottom: $value; }
+      .sm\:pl-#{$key} { padding-left: $value; }
+      .sm\:pr-#{$key} { padding-right: $value; }
+      .sm\:gap-#{$key} { gap: $value; }
+    }
+  }
+}
+
+@include md {
+  @each $key, $value in $spacing-values {
+    .md\:m-#{$key} { margin: $value; }
+    .md\:mx-#{$key} { margin-left: $value; margin-right: $value; }
+    .md\:my-#{$key} { margin-top: $value; margin-bottom: $value; }
+    .md\:mt-#{$key} { margin-top: $value; }
+    .md\:mb-#{$key} { margin-bottom: $value; }
+    .md\:ml-#{$key} { margin-left: $value; }
+    .md\:mr-#{$key} { margin-right: $value; }
+
+    @if $key != auto {
+      .md\:p-#{$key} { padding: $value; }
+      .md\:px-#{$key} { padding-left: $value; padding-right: $value; }
+      .md\:py-#{$key} { padding-top: $value; padding-bottom: $value; }
+      .md\:pt-#{$key} { padding-top: $value; }
+      .md\:pb-#{$key} { padding-bottom: $value; }
+      .md\:pl-#{$key} { padding-left: $value; }
+      .md\:pr-#{$key} { padding-right: $value; }
+      .md\:gap-#{$key} { gap: $value; }
+    }
+  }
+}
+
+@include lg {
+  @each $key, $value in $spacing-values {
+    .lg\:m-#{$key} { margin: $value; }
+    .lg\:mx-#{$key} { margin-left: $value; margin-right: $value; }
+    .lg\:my-#{$key} { margin-top: $value; margin-bottom: $value; }
+    .lg\:mt-#{$key} { margin-top: $value; }
+    .lg\:mb-#{$key} { margin-bottom: $value; }
+    .lg\:ml-#{$key} { margin-left: $value; }
+    .lg\:mr-#{$key} { margin-right: $value; }
+
+    @if $key != auto {
+      .lg\:p-#{$key} { padding: $value; }
+      .lg\:px-#{$key} { padding-left: $value; padding-right: $value; }
+      .lg\:py-#{$key} { padding-top: $value; padding-bottom: $value; }
+      .lg\:pt-#{$key} { padding-top: $value; }
+      .lg\:pb-#{$key} { padding-bottom: $value; }
+      .lg\:pl-#{$key} { padding-left: $value; }
+      .lg\:pr-#{$key} { padding-right: $value; }
+      .lg\:gap-#{$key} { gap: $value; }
+    }
+  }
+}
+
+@include xl {
+  @each $key, $value in $spacing-values {
+    .xl\:m-#{$key} { margin: $value; }
+    .xl\:mx-#{$key} { margin-left: $value; margin-right: $value; }
+    .xl\:my-#{$key} { margin-top: $value; margin-bottom: $value; }
+    .xl\:mt-#{$key} { margin-top: $value; }
+    .xl\:mb-#{$key} { margin-bottom: $value; }
+
+    @if $key != auto {
+      .xl\:p-#{$key} { padding: $value; }
+      .xl\:px-#{$key} { padding-left: $value; padding-right: $value; }
+      .xl\:py-#{$key} { padding-top: $value; padding-bottom: $value; }
+      .xl\:gap-#{$key} { gap: $value; }
+    }
+  }
+}