@finqu/cool 1.3.0 → 2.0.2

package/scss/utilities/_sizing.scss

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

@@ -0,0 +1,168 @@
+@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;
+}