@finqu/cool 1.3.0 → 2.0.2

package/scss/cool.scss

@@ -0,0 +1,69 @@
+/*!
+ * 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)
+ */
+
+// 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

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

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

package/scss/utilities/_borders.scss

@@ -0,0 +1,205 @@
+@use "../variables" as *;
+/* Borders ========================================================================== */
+
+@mixin cool-borders {
+    .border {
+        border: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-0 {
+        border: 0;
+    }
+
+    .border-top {
+        border-top: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-right {
+        border-right: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-bottom {
+        border-bottom: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-left {
+        border-left: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-block {
+        border-block: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-block-start {
+        border-block-start: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-block-end {
+        border-block-end: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-inline {
+        border-inline: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-inline-start {
+        border-inline-start: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-inline-end {
+        border-inline-end: var(--cool-border-width) var(--cool-border-style, solid) var(--cool-border-color);
+    }
+
+    .border-top-0 {
+        border-top: 0;
+    }
+
+    .border-right-0 {
+        border-right: 0;
+    }
+
+    .border-bottom-0 {
+        border-bottom: 0;
+    }
+
+    .border-left-0 {
+        border-left: 0;
+    }
+
+    @each $color, $value in $theme-colors {
+        .border-#{$color} {
+            border-color: var(--cool-theme-color-#{$color}, #{$value});
+        }
+    }
+
+    @for $i from 1 through 5 {
+        .border-#{$i} {
+            border-width: #{$i}px;
+        }
+    }
+
+    .border-solid {
+        border-style: solid;
+    }
+
+    .border-dashed {
+        border-style: dashed;
+    }
+
+    .border-dotted {
+        border-style: dotted;
+    }
+
+    .border-none {
+        border-style: none;
+    }
+
+    .rounded-0 {
+        border-radius: 0;
+    }
+
+    .rounded-xs {
+        border-radius: var(--cool-border-radius-xs, 0.1rem);
+    }
+
+    .rounded-sm {
+        border-radius: var(--cool-border-radius-sm, 0.2rem);
+    }
+
+    .rounded {
+        border-radius: var(--cool-border-radius, 0.25rem);
+    }
+
+    .rounded-lg {
+        border-radius: var(--cool-border-radius-lg, 0.3rem);
+    }
+
+    .rounded-full {
+        border-radius: 9999px;
+    }
+
+    .rounded-top {
+        border-top-left-radius: var(--cool-border-radius);
+        border-top-right-radius: var(--cool-border-radius);
+    }
+
+    .rounded-right {
+        border-top-right-radius: var(--cool-border-radius);
+        border-bottom-right-radius: var(--cool-border-radius);
+    }
+
+    .rounded-bottom {
+        border-bottom-right-radius: var(--cool-border-radius);
+        border-bottom-left-radius: var(--cool-border-radius);
+    }
+
+    .rounded-left {
+        border-top-left-radius: var(--cool-border-radius);
+        border-bottom-left-radius: var(--cool-border-radius);
+    }
+
+    .rounded-start {
+        border-start-start-radius: var(--cool-border-radius);
+        border-end-start-radius: var(--cool-border-radius);
+    }
+
+    .rounded-end {
+        border-start-end-radius: var(--cool-border-radius);
+        border-end-end-radius: var(--cool-border-radius);
+    }
+
+    .rounded-tl {
+        border-top-left-radius: var(--cool-border-radius);
+    }
+
+    .rounded-tr {
+        border-top-right-radius: var(--cool-border-radius);
+    }
+
+    .rounded-br {
+        border-bottom-right-radius: var(--cool-border-radius);
+    }
+
+    .rounded-bl {
+        border-bottom-left-radius: var(--cool-border-radius);
+    }
+
+    .rounded-ss {
+        border-start-start-radius: var(--cool-border-radius);
+    }
+
+    .rounded-se {
+        border-start-end-radius: var(--cool-border-radius);
+    }
+
+    .rounded-ee {
+        border-end-end-radius: var(--cool-border-radius);
+    }
+
+    .rounded-es {
+        border-end-start-radius: var(--cool-border-radius);
+    }
+
+    .outline-none {
+        outline: none;
+    }
+
+    .outline {
+        outline-style: solid;
+        outline-width: 2px;
+    }
+
+    @each $color, $value in $theme-colors {
+        .outline-#{$color} {
+            outline-color: var(--cool-theme-color-#{$color}, #{$value});
+        }
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-borders;
+    }
+} @else {
+    @include cool-borders;
+}

package/scss/utilities/_collapse.scss

@@ -0,0 +1,28 @@
+@use "../variables" as *;
+/* Collapse ========================================================================== */
+
+@mixin cool-collapse {
+    .collapse:not(.show) {
+        display: none;
+    }
+
+    .collapse.show {
+        display: block;
+    }
+
+    [data-collapse-indicator] {
+        display: inline-block;
+    }
+
+    [data-collapse-indicator].show > .icon {
+        transform: rotate(180deg);
+    }
+}
+
+@if $cool-use-utilities-layer {
+    @layer utilities {
+        @include cool-collapse;
+    }
+} @else {
+    @include cool-collapse;
+}