@finqu/cool 1.2.29 → 2.0.2

package/scss/utilities/_sizing.scss

@@ -1,32 +1,288 @@
-// Sizing
-// ---------------------------------------------------------------------------------------------------------------
-
-// Width and height
-@each $prop, $abbrev in (width: w, height: h) {
-	@each $size, $length in $sizes {
-		.#{$abbrev}-#{$size} { #{$prop}: $length !important; }
-	}
-}
-
-.mw-100 {
-	max-width: 100% !important;
-}
-
-.mh-100 {
-	max-height: 100% !important;
-}
-
-// Viewport additional helpers
-.min-vw-100 {
-	min-width: 100vw !important;
-}
-.min-vh-100 {
-	min-height: 100vh !important;
-}
-
-.vw-100 {
-	width: 100vw !important;
-}
-.vh-100 {
-	height: 100vh !important;
-}
+@use "../variables" as *;
+@use "sass:map";
+/* Sizing ========================================================================== */
+
+@mixin cool-sizing {
+    .w-auto {
+        width: auto;
+    }
+    .w-25 {
+        width: 25%;
+    }
+    .w-50 {
+        width: 50%;
+    }
+    .w-75 {
+        width: 75%;
+    }
+    .w-100 {
+        width: 100%;
+    }
+    .w-full {
+        width: 100%;
+    }
+    .w-screen {
+        width: 100vw;
+    }
+    .w-min {
+        width: min-content;
+    }
+    .w-max {
+        width: max-content;
+    }
+    .w-fit {
+        width: fit-content;
+    }
+
+    .h-auto {
+        height: auto;
+    }
+    .h-25 {
+        height: 25%;
+    }
+    .h-50 {
+        height: 50%;
+    }
+    .h-75 {
+        height: 75%;
+    }
+    .h-100 {
+        height: 100%;
+    }
+    .h-full {
+        height: 100%;
+    }
+    .h-screen {
+        height: 100vh;
+    }
+    .h-min {
+        height: min-content;
+    }
+    .h-max {
+        height: max-content;
+    }
+    .h-fit {
+        height: fit-content;
+    }
+
+    .h-dvh {
+        height: 100dvh;
+    }
+    .w-dvw {
+        width: 100dvw;
+    }
+    .min-h-dvh {
+        min-height: 100dvh;
+    }
+    .max-h-dvh {
+        max-height: 100dvh;
+    }
+
+    .mw-100 {
+        max-width: 100%;
+    }
+    .mw-full {
+        max-width: 100%;
+    }
+    .mw-min {
+        max-width: min-content;
+    }
+    .mw-max {
+        max-width: max-content;
+    }
+    .mw-fit {
+        max-width: fit-content;
+    }
+    .mw-prose {
+        max-width: 65ch;
+    }
+    .mw-screen-sm {
+        max-width: 640px;
+    }
+    .mw-screen-md {
+        max-width: 768px;
+    }
+    .mw-screen-lg {
+        max-width: 1024px;
+    }
+    .mw-screen-xl {
+        max-width: 1280px;
+    }
+
+    .mh-100 {
+        max-height: 100%;
+    }
+    .mh-full {
+        max-height: 100%;
+    }
+    .mh-screen {
+        max-height: 100vh;
+    }
+    .mh-min {
+        max-height: min-content;
+    }
+    .mh-max {
+        max-height: max-content;
+    }
+    .mh-fit {
+        max-height: fit-content;
+    }
+
+    .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;
+    }
+
+    .min-h-0 {
+        min-height: 0;
+    }
+    .min-h-full {
+        min-height: 100%;
+    }
+    .min-h-screen {
+        min-height: 100vh;
+    }
+    .min-h-min {
+        min-height: min-content;
+    }
+    .min-h-max {
+        min-height: max-content;
+    }
+    .min-h-fit {
+        min-height: fit-content;
+    }
+
+    .size-0 {
+        width: 0;
+        height: 0;
+    }
+    .size-full {
+        width: 100%;
+        height: 100%;
+    }
+    .size-auto {
+        width: auto;
+        height: auto;
+    }
+    .size-min {
+        width: min-content;
+        height: min-content;
+    }
+    .size-max {
+        width: max-content;
+        height: max-content;
+    }
+    .size-fit {
+        width: fit-content;
+        height: fit-content;
+    }
+
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            .w#{$infix}-auto {
+                width: auto;
+            }
+            .w#{$infix}-25 {
+                width: 25%;
+            }
+            .w#{$infix}-50 {
+                width: 50%;
+            }
+            .w#{$infix}-75 {
+                width: 75%;
+            }
+            .w#{$infix}-100 {
+                width: 100%;
+            }
+            .w#{$infix}-full {
+                width: 100%;
+            }
+            .w#{$infix}-screen {
+                width: 100vw;
+            }
+            .w#{$infix}-min {
+                width: min-content;
+            }
+            .w#{$infix}-max {
+                width: max-content;
+            }
+            .w#{$infix}-fit {
+                width: fit-content;
+            }
+
+            .h#{$infix}-auto {
+                height: auto;
+            }
+            .h#{$infix}-25 {
+                height: 25%;
+            }
+            .h#{$infix}-50 {
+                height: 50%;
+            }
+            .h#{$infix}-75 {
+                height: 75%;
+            }
+            .h#{$infix}-100 {
+                height: 100%;
+            }
+            .h#{$infix}-full {
+                height: 100%;
+            }
+            .h#{$infix}-screen {
+                height: 100vh;
+            }
+            .h#{$infix}-min {
+                height: min-content;
+            }
+            .h#{$infix}-max {
+                height: max-content;
+            }
+            .h#{$infix}-fit {
+                height: fit-content;
+            }
+        }
+    }
+
+    .aspect-auto {
+        aspect-ratio: auto;
+    }
+    .aspect-square {
+        aspect-ratio: 1 / 1;
+    }
+    .aspect-video {
+        aspect-ratio: 16 / 9;
+    }
+    .aspect-4-3 {
+        aspect-ratio: 4 / 3;
+    }
+    .aspect-21-9 {
+        aspect-ratio: 21 / 9;
+    }
+    .aspect-3-2 {
+        aspect-ratio: 3 / 2;
+    }
+    .aspect-portrait {
+        aspect-ratio: 3 / 4;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-sizing;
+    }
+} @else {
+    @include cool-sizing;
+}

package/scss/utilities/_spacing.scss

@@ -1,92 +1,168 @@
-// Spacing
-// ---------------------------------------------------------------------------------------------------------------
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-
-    @include media-breakpoint-up($breakpoint) {
-
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-        @each $prop, $abbrev in (margin: m, padding: p) {
-
-            @each $name, $size in $spacers {
-
-                .#{$abbrev}#{$infix}-#{$name} {
-                    #{$prop}: $size !important;
-                }
-
-                .#{$abbrev}t#{$infix}-#{$name},
-                .#{$abbrev}y#{$infix}-#{$name} {
-                    #{$prop}-top: $size !important;
-                }
-
-                .#{$abbrev}r#{$infix}-#{$name},
-                .#{$abbrev}x#{$infix}-#{$name} {
-                    #{$prop}-right: $size !important;
-                }
-
-                .#{$abbrev}b#{$infix}-#{$name},
-                .#{$abbrev}y#{$infix}-#{$name} {
-                    #{$prop}-bottom: $size !important;
-                }
-
-                .#{$abbrev}l#{$infix}-#{$name},
-                .#{$abbrev}x#{$infix}-#{$name} {
-                    #{$prop}-left: $size !important;
-                }
-            }
-        }
-
-        // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
-        @each $name, $size in $spacers {
-
-            @if $size != 0 {
-                .m#{$infix}-n#{$name} {
-                    margin: -$size !important;
-                }
-
-                .mt#{$infix}-n#{$name},
-                .my#{$infix}-n#{$name} {
-                    margin-top: -$size !important;
-                }
-
-                .mr#{$infix}-n#{$name},
-                .mx#{$infix}-n#{$name} {
-                    margin-right: -$size !important;
-                }
-                .mb#{$infix}-n#{$name},
-                .my#{$infix}-n#{$name} {
-                    margin-bottom: -$size !important;
-                }
-                .ml#{$infix}-n#{$name},
-                .mx#{$infix}-n#{$name} {
-                    margin-left: -$size !important;
-                }
-            }
-        }
-
-        // Some special margin utils
-        .m#{$infix}-auto {
-            margin: auto !important;
-        }
-
-        .mt#{$infix}-auto,
-        .my#{$infix}-auto {
-            margin-top: auto !important;
-        }
-
-        .mr#{$infix}-auto,
-        .mx#{$infix}-auto {
-            margin-right: auto !important;
-        }
-        .mb#{$infix}-auto,
-        .my#{$infix}-auto {
-            margin-bottom: auto !important;
-        }
-
-        .ml#{$infix}-auto,
-        .mx#{$infix}-auto {
-            margin-left: auto !important;
-        }
-    }
-}
+@use "../variables" as *;
+@use "sass:map";
+/* Spacing ========================================================================== */
+
+@mixin cool-spacing {
+    @each $breakpoint in map.keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            @each $prop, $abbrev in (margin: m, padding: p) {
+                @each $name, $size in $spacers {
+                    .#{$abbrev}#{$infix}-#{$name} {
+                        #{$prop}: $size;
+                    }
+                    .#{$abbrev}t#{$infix}-#{$name} {
+                        #{$prop}-top: $size;
+                    }
+                    .#{$abbrev}r#{$infix}-#{$name} {
+                        #{$prop}-right: $size;
+                    }
+                    .#{$abbrev}b#{$infix}-#{$name} {
+                        #{$prop}-bottom: $size;
+                    }
+                    .#{$abbrev}l#{$infix}-#{$name} {
+                        #{$prop}-left: $size;
+                    }
+                    .#{$abbrev}x#{$infix}-#{$name} {
+                        #{$prop}-left: $size;
+                        #{$prop}-right: $size;
+                    }
+                    .#{$abbrev}y#{$infix}-#{$name} {
+                        #{$prop}-top: $size;
+                        #{$prop}-bottom: $size;
+                    }
+
+                    .#{$abbrev}s#{$infix}-#{$name} {
+                        #{$prop}-inline-start: $size;
+                    }
+                    .#{$abbrev}e#{$infix}-#{$name} {
+                        #{$prop}-inline-end: $size;
+                    }
+                    .#{$abbrev}i#{$infix}-#{$name} {
+                        #{$prop}-inline: $size;
+                    }
+                    .#{$abbrev}k#{$infix}-#{$name} {
+                        #{$prop}-block: $size;
+                    }
+
+                    @if $abbrev == m {
+                        .#{$abbrev}#{$infix}-n#{$name} {
+                            margin: -$size;
+                        }
+                        .#{$abbrev}t#{$infix}-n#{$name} {
+                            margin-top: -$size;
+                        }
+                        .#{$abbrev}r#{$infix}-n#{$name} {
+                            margin-right: -$size;
+                        }
+                        .#{$abbrev}b#{$infix}-n#{$name} {
+                            margin-bottom: -$size;
+                        }
+                        .#{$abbrev}l#{$infix}-n#{$name} {
+                            margin-left: -$size;
+                        }
+                        .#{$abbrev}x#{$infix}-n#{$name} {
+                            margin-left: -$size;
+                            margin-right: -$size;
+                        }
+                        .#{$abbrev}y#{$infix}-n#{$name} {
+                            margin-top: -$size;
+                            margin-bottom: -$size;
+                        }
+
+                        .#{$abbrev}s#{$infix}-n#{$name} {
+                            margin-inline-start: -$size;
+                        }
+                        .#{$abbrev}e#{$infix}-n#{$name} {
+                            margin-inline-end: -$size;
+                        }
+                        .#{$abbrev}i#{$infix}-n#{$name} {
+                            margin-inline: -$size;
+                        }
+                        .#{$abbrev}k#{$infix}-n#{$name} {
+                            margin-block: -$size;
+                        }
+                    }
+                }
+            }
+
+            .m#{$infix}-auto {
+                margin: auto;
+            }
+            .mt#{$infix}-auto {
+                margin-top: auto;
+            }
+            .mr#{$infix}-auto {
+                margin-right: auto;
+            }
+            .mb#{$infix}-auto {
+                margin-bottom: auto;
+            }
+            .ml#{$infix}-auto {
+                margin-left: auto;
+            }
+            .mx#{$infix}-auto {
+                margin-right: auto;
+                margin-left: auto;
+            }
+            .my#{$infix}-auto {
+                margin-top: auto;
+                margin-bottom: auto;
+            }
+
+            .ms#{$infix}-auto {
+                margin-inline-start: auto;
+            }
+            .me#{$infix}-auto {
+                margin-inline-end: auto;
+            }
+            .mi#{$infix}-auto {
+                margin-inline: auto;
+            }
+            .mk#{$infix}-auto {
+                margin-block: auto;
+            }
+
+            @each $name, $size in $spacers {
+                .gap#{$infix}-#{$name} {
+                    gap: $size;
+                }
+                .gap-x#{$infix}-#{$name} {
+                    column-gap: $size;
+                }
+                .gap-y#{$infix}-#{$name} {
+                    row-gap: $size;
+                }
+            }
+
+            .gap#{$infix}-g {
+                gap: var(--cool-grid-gutter-x);
+            }
+            .gap-x#{$infix}-g {
+                column-gap: var(--cool-grid-gutter-x);
+            }
+            .gap-y#{$infix}-g {
+                row-gap: var(--cool-grid-gutter-y);
+            }
+        }
+    }
+
+    .space-x > * + * {
+        margin-inline-start: var(--cool-grid-gutter-x);
+    }
+    .space-y > * + * {
+        margin-block-start: var(--cool-grid-gutter-y);
+    }
+    .icon-spacer {
+        margin-right: var(--cool-icon-spacer);
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-spacing;
+    }
+} @else {
+    @include cool-spacing;
+}

package/scss/utilities/_stroke.scss

@@ -0,0 +1,124 @@
+@use "../variables" as *;
+/* Stroke ========================================================================== */
+
+@mixin cool-stroke {
+    .stroke-current {
+        stroke: currentColor;
+    }
+    .stroke-transparent {
+        stroke: transparent;
+    }
+    .stroke-none {
+        stroke: none;
+    }
+
+    @each $color, $value in $theme-colors {
+        .stroke-#{$color} {
+            stroke: var(--cool-theme-color-#{$color});
+        }
+    }
+
+    @each $color, $value in $colors {
+        .stroke-#{$color} {
+            stroke: var(--cool-color-#{$color});
+        }
+    }
+
+    .stroke-0 {
+        stroke-width: 0;
+    }
+    .stroke-1 {
+        stroke-width: 1;
+    }
+    .stroke-2 {
+        stroke-width: 2;
+    }
+    .stroke-3 {
+        stroke-width: 3;
+    }
+    .stroke-4 {
+        stroke-width: 4;
+    }
+
+    .stroke-opacity-0 {
+        stroke-opacity: 0;
+    }
+    .stroke-opacity-25 {
+        stroke-opacity: 0.25;
+    }
+    .stroke-opacity-50 {
+        stroke-opacity: 0.5;
+    }
+    .stroke-opacity-75 {
+        stroke-opacity: 0.75;
+    }
+    .stroke-opacity-100 {
+        stroke-opacity: 1;
+    }
+
+    .stroke-cap-butt {
+        stroke-linecap: butt;
+    }
+    .stroke-cap-round {
+        stroke-linecap: round;
+    }
+    .stroke-cap-square {
+        stroke-linecap: square;
+    }
+
+    .stroke-join-miter {
+        stroke-linejoin: miter;
+    }
+    .stroke-join-round {
+        stroke-linejoin: round;
+    }
+    .stroke-join-bevel {
+        stroke-linejoin: bevel;
+    }
+
+    .stroke-dash-0 {
+        stroke-dasharray: 0;
+    }
+    .stroke-dash-1 {
+        stroke-dasharray: 1;
+    }
+    .stroke-dash-2 {
+        stroke-dasharray: 2;
+    }
+    .stroke-dash-3 {
+        stroke-dasharray: 3;
+    }
+    .stroke-dash-4 {
+        stroke-dasharray: 4;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        @each $color, $value in $theme-colors {
+            .hover\:stroke-#{$color}:hover {
+                stroke: var(--cool-theme-color-#{$color});
+            }
+        }
+
+        .hover\:stroke-current:hover {
+            stroke: currentColor;
+        }
+    }
+
+    @each $color, $value in $theme-colors {
+        .group:hover .group-hover\:stroke-#{$color} {
+            stroke: var(--cool-theme-color-#{$color});
+        }
+    }
+
+    .group:hover .group-hover\:stroke-current {
+        stroke: currentColor;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-stroke;
+    }
+} @else {
+    @include cool-stroke;
+}