@finqu/cool 1.2.29 → 2.0.2

package/scss/cool.scss

@@ -1,37 +1,69 @@
 /*!
- * Cool UI (https://finqu.fi)
- * Copyright 2020 Finqu Oy.
+ * Cool UI (https://finqu.com)
+ * Copyright 2026 Finqu Oy.
  * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
  * Forked from Bootstrap, licensed MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
-@import "functions";
-@import "variables";
-@import "mixins";
-@import "root";
-@import "reboot";
-@import "frame";
-@import "navbar";
-@import "type";
-@import "images";
-@import "grid";
-@import "button-group";
-@import "input-group";
-@import "tables";
-@import "forms";
-@import "buttons";
-@import "dropdown";
-@import "custom-forms";
-@import "tabs";
-@import "pagination";
-@import "badge";
-@import "alert";
-@import "tooltip";
-@import "popover";
-@import "dialog";
-@import "section";
-@import "utilities";
-@import "select";
-@import "toast";
-@import "list-group";
-@import "notification";
+// Base: CSS custom properties and typography
+@use "root";
+@use "dark";
+@use "typography";
+
+// Reset: Browser normalization
+@use "reboot";
+
+// Layout: Page structure
+@use "frame";
+@use "grid";
+@use "media";
+
+// Components: UI elements
+@use "tables";
+@use "forms";
+@use "buttons";
+@use "dropdown";
+@use "button-group";
+@use "input-group";
+@use "navbar";
+@use "badge";
+@use "list-group";
+@use "tabs";
+@use "pagination";
+@use "dialog";
+@use "toast";
+@use "tooltip";
+@use "popover";
+@use "notification";
+@use "section";
+@use "select";
+
+// Utilities: Helper classes
+@use "utilities/align";
+@use "utilities/animation";
+@use "utilities/background";
+@use "utilities/borders";
+@use "utilities/collapse";
+@use "utilities/cursor";
+@use "utilities/display";
+@use "utilities/embed";
+@use "utilities/fill";
+@use "utilities/filters";
+@use "utilities/flex";
+@use "utilities/grid" as util-grid;
+@use "utilities/opacity";
+@use "utilities/overflow";
+@use "utilities/perfect-scrollbar";
+@use "utilities/pointer-events";
+@use "utilities/position";
+@use "utilities/screen-readers";
+@use "utilities/shadows";
+@use "utilities/sizing";
+@use "utilities/spacing";
+@use "utilities/stroke";
+@use "utilities/text";
+@use "utilities/transform";
+@use "utilities/transitions";
+@use "utilities/user-select";
+@use "utilities/visibility";
+@use "utilities/z-index";

package/scss/utilities/_align.scss

@@ -1,41 +1,51 @@
-// Align
-// ---------------------------------------------------------------------------------------------------------------
-
-.align-left {
-    display: block;
-    margin: 0 auto 0 0;
-}
-
-.align-center {
-    display: block;
-    margin: 0 auto;
-}
-
-.align-right {
-    display: block;
-    margin: 0 0 0 auto;
-}
-
-.align-top {
-    vertical-align: top;
-}
-
-.align-middle {
-    vertical-align: middle;
-}
-
-.align-bottom {
-    vertical-align: bottom;
-}
-
-.align-baseline  {
-	vertical-align: baseline;
-}
-
-.align-text-top  {
-	vertical-align: text-bottom;
-}
-
-.align-text-bottom  {
-	vertical-align: text-top;
-}
+@use "../variables" as *;
+/* Align ========================================================================== */
+
+@mixin cool-align {
+    .align-top {
+        vertical-align: top;
+    }
+
+    .align-middle {
+        vertical-align: middle;
+    }
+
+    .align-bottom {
+        vertical-align: bottom;
+    }
+
+    .align-baseline {
+        vertical-align: baseline;
+    }
+
+    .align-text-top {
+        vertical-align: text-bottom;
+    }
+
+    .align-text-bottom {
+        vertical-align: text-top;
+    }
+
+    .align-left {
+        display: block;
+        margin: 0 auto 0 0;
+    }
+
+    .align-center {
+        display: block;
+        margin: 0 auto;
+    }
+
+    .align-right {
+        display: block;
+        margin: 0 0 0 auto;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-align;
+    }
+} @else {
+    @include cool-align;
+}

package/scss/utilities/_animation.scss

@@ -0,0 +1,165 @@
+@use "../variables" as *;
+/* Animation ========================================================================== */
+
+@mixin cool-animation {
+    .animation {
+        animation-duration: var(--cool-animation-duration);
+        animation-timing-function: var(--cool-animation-timing);
+        animation-fill-mode: var(--cool-animation-fill, both);
+        animation-iteration-count: var(--cool-animation-iteration, 1);
+    }
+
+    .animation.slow {
+        --cool-animation-duration: 2s;
+    }
+
+    .animation.slower {
+        --cool-animation-duration: 3s;
+    }
+
+    .animation.fast {
+        --cool-animation-duration: 800ms;
+    }
+
+    .animation.faster {
+        --cool-animation-duration: 500ms;
+    }
+
+    .animation.fastest {
+        --cool-animation-duration: 250ms;
+    }
+
+    @keyframes zoomIn {
+        from {
+            opacity: 0;
+            transform: scale3d(0.3, 0.3, 0.3);
+        }
+
+        50% {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    .animation.zoomIn {
+        animation-name: zoomIn;
+    }
+
+    @keyframes zoomOut {
+        from {
+            opacity: 1;
+        }
+
+        50% {
+            opacity: 0;
+            transform: scale3d(0.3, 0.3, 0.3);
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
+    .animation.zoomOut {
+        animation-name: zoomOut;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    .animation.fadeIn {
+        animation-name: fadeIn;
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
+    .animation.fadeOut {
+        animation-name: fadeOut;
+    }
+
+    @keyframes slideInUp {
+        from {
+            transform: translate3d(0, 100%, 0);
+            visibility: visible;
+        }
+
+        to {
+            transform: translate3d(0, 0, 0);
+        }
+    }
+
+    .animation.slideInUp {
+        animation-name: slideInUp;
+    }
+
+    @keyframes slideInDown {
+        from {
+            transform: translate3d(0, -100%, 0);
+            visibility: visible;
+        }
+
+        to {
+            transform: translate3d(0, 0, 0);
+        }
+    }
+
+    .animation.slideInDown {
+        animation-name: slideInDown;
+    }
+
+    @keyframes slideOutDown {
+        from {
+            transform: translate3d(0, 0, 0);
+        }
+
+        to {
+            visibility: hidden;
+            transform: translate3d(0, 100%, 0);
+        }
+    }
+
+    .animation.slideOutDown {
+        animation-name: slideOutDown;
+    }
+
+    @keyframes slideOutUp {
+        from {
+            transform: translate3d(0, 0, 0);
+        }
+
+        to {
+            visibility: hidden;
+            transform: translate3d(0, -100%, 0);
+        }
+    }
+
+    .animation.slideOutUp {
+        animation-name: slideOutUp;
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-animation;
+    }
+} @else {
+    @include cool-animation;
+}

package/scss/utilities/_background.scss

@@ -1,14 +1,72 @@
-// Background
-// ---------------------------------------------------------------------------------------------------------------
-
-// @each $color, $value in $colors {
-//     @include bg-variant(".bg-#{$color}", $value);
-// }
-
-@each $color, $value in $theme-colors {
-    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
-}
-
-.bg-transparent {
-    background-color: transparent !important;
-}
+@use "../variables" as *;
+/* Background ========================================================================== */
+
+@mixin cool-background {
+    @each $color, $value in $colors {
+        .bg-#{$color} {
+            background-color: var(--cool-color-#{$color});
+        }
+
+        a.bg-#{$color},
+        button.bg-#{$color} {
+            &:hover,
+            &:focus {
+                background-color: color-mix(in srgb, var(--cool-color-#{$color}) 98%, black);
+            }
+        }
+    }
+
+    @each $color, $value in $theme-bg-colors {
+        .bg-#{$color} {
+            background-color: var(--cool-theme-bg-color-#{$color});
+        }
+
+        a.bg-#{$color},
+        button.bg-#{$color} {
+            &:hover,
+            &:focus {
+                background-color: color-mix(in srgb, var(--cool-theme-bg-color-#{$color}) 98%, black);
+            }
+        }
+    }
+
+    .bg-transparent {
+        background-color: transparent;
+    }
+
+    .bg-white {
+        background-color: #ffffff;
+    }
+
+    .bg-surface {
+        background-color: var(--cool-body-surface-bg);
+    }
+
+    a.bg-white,
+    button.bg-white {
+        &:hover,
+        &:focus {
+            background-color: color-mix(in srgb, #ffffff 98%, black);
+        }
+    }
+
+    .bg-black {
+        background-color: #000000;
+    }
+
+    a.bg-black,
+    button.bg-black {
+        &:hover,
+        &:focus {
+            background-color: color-mix(in oklab, #000000 80%, transparent);
+        }
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-background;
+    }
+} @else {
+    @include cool-background;
+}