@finqu/cool 1.2.29 → 2.0.2

package/package.json

@@ -1,71 +1,136 @@
 {
   "name": "@finqu/cool",
-  "version": "1.2.29",
-  "description": "Finqu UI package",
-  "main": "index.js",
+  "version": "2.0.2",
+  "description": "Build beautiful, responsive web interfaces. Fast, flexible, and effortlessly customizable.",
+  "keywords": [
+    "ui",
+    "framework",
+    "toolkit",
+    "finqu"
+  ],
+  "license": "ISC",
+  "author": "Finqu Oy",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/finqu/cool.git"
+  },
+  "bugs": {
+    "url": "https://github.com/finqu/cool/issues"
+  },
+  "homepage": "https://github.com/finqu/cool#readme",
+  "main": "dist/js/cool.bundle.js",
+  "module": "dist/js/cool.esm.js",
+  "style": "dist/css/cool.css",
+  "exports": {
+    ".": {
+      "import": "./dist/js/cool.esm.js",
+      "require": "./dist/js/cool.bundle.js",
+      "default": "./dist/js/cool.bundle.js"
+    },
+    "./scss/*": "./scss/*",
+    "./dist/*": "./dist/*"
+  },
+  "sideEffects": [
+    "dist/css/*.css",
+    "dist/js/*.js",
+    "js/src/*.js"
+  ],
+  "files": [
+    "dist/",
+    "scss/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=16"
+  },
   "scripts": {
-    "bundlesize": "bundlesize",
+    "size": "size-limit",
+    "clean-js": "rimraf js/dist/*",
     "css": "npm-run-all css-compile css-prefix css-minify",
-    "css-main": "npm-run-all css-compile css-prefix css-minify-main",
-    "css-compile": "npm-run-all --parallel css-compile-*",
-    "css-compile-main": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/cool.scss dist/css/cool.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/cool-grid.scss dist/css/cool-grid.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/cool-reboot.scss dist/css/cool-reboot.css",
-    "css-minify": "npm-run-all --parallel css-minify-*",
-    "css-minify-main": "cleancss --level 1 --format breaksWith=lf --source-map --source-map-inline-sources --output dist/css/cool.min.css dist/css/cool.css && cleancss --level 1 --format breaksWith=lf --source-map --source-map-inline-sources --output dist/css/cool-grid.min.css dist/css/cool-grid.css && cleancss --level 1 --format breaksWith=lf --source-map --source-map-inline-sources --output dist/css/cool-reboot.min.css dist/css/cool-reboot.css",
-    "css-prefix": "npm-run-all --parallel css-prefix-*",
-    "css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
-    "js": "npm-run-all js-compile js-minify",
+    "css-main": "npm-run-all css-compile-main css-prefix-main css-minify-main",
+    "css-compile": "sass --style=expanded --embed-sources scss/:dist/css/",
+    "css-compile-main": "sass --style=expanded --embed-sources scss/cool.scss:dist/css/cool.css scss/cool-grid.scss:dist/css/cool-grid.css scss/cool-reboot.scss:dist/css/cool-reboot.css",
+    "css-minify": "node build/css-minify.js",
+    "css-minify-main": "node build/css-minify.js",
+    "css-prefix": "node build/css-prefix.js",
+    "css-prefix-main": "node build/css-prefix.js",
+    "js": "npm-run-all clean-js js-compile js-minify",
     "js-main": "npm-run-all js-lint js-compile js-minify-main",
-    "js-compile": "npm-run-all --parallel js-compile-* --sequential",
-    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
-    "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.js --sourcemap",
-    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
+    "js-compile": "npm-run-all --parallel js-compile-standalone js-compile-standalone-esm js-compile-bundle js-compile-plugins",
+    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.mjs --sourcemap",
+    "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap",
+    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.mjs --sourcemap",
     "js-compile-plugins": "node build/build-plugins.js",
     "js-compile-plugins-coverage": "cross-env NODE_ENV=test node build/build-plugins.js",
-    "js-lint": "npm-run-all --continue-on-error --parallel js-lint-*",
-    "js-lint-main": "eslint --cache --cache-location .cache/.eslintcache js/src js/tests build/",
-    "js-minify": "npm-run-all --parallel js-minify-main",
-    "js-minify-main": "npm-run-all js-minify-standalone* js-minify-bundle",
-    "js-minify-standalone": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/cool.js.map,includeSources,url=cool.min.js.map\" --output dist/js/cool.min.js dist/js/cool.js",
-    "js-minify-standalone-esm": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/cool.esm.js.map,includeSources,url=cool.esm.min.js.map\" --output dist/js/cool.esm.min.js dist/js/cool.esm.js",
-    "js-minify-bundle": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/cool.bundle.js.map,includeSources,url=cool.bundle.min.js.map\" --output dist/js/cool.bundle.min.js dist/js/cool.bundle.js",
+    "js-lint": "eslint --cache --cache-location .cache/.eslintcache js/src build/",
+    "js-fix": "eslint --fix js/src",
+    "js-minify": "npm-run-all --parallel js-minify-*",
+    "js-minify-main": "npm-run-all js-minify-standalone js-minify-standalone-esm js-minify-bundle",
+    "js-minify-standalone": "terser --compress typeofs=false --mangle --comments '/^!/' --source-map \"content=dist/js/cool.js.map,includeSources,url=cool.min.js.map\" --output dist/js/cool.min.js dist/js/cool.js",
+    "js-minify-standalone-esm": "terser --compress --mangle --comments '/^!/' --source-map \"content=dist/js/cool.esm.js.map,includeSources,url=cool.esm.min.js.map\" --output dist/js/cool.esm.min.js dist/js/cool.esm.js",
+    "js-minify-bundle": "terser --compress typeofs=false --mangle --comments '/^!/' --source-map \"content=dist/js/cool.bundle.js.map,includeSources,url=cool.bundle.min.js.map\" --output dist/js/cool.bundle.min.js dist/js/cool.bundle.js",
+    "js-minify-plugins": "for file in js/dist/*.js; do terser --compress typeofs=false --mangle --comments '/^!/' --source-map \"content=$file.map,includeSources,url=$(basename $file .js).min.js.map\" --output ${file%.js}.min.js $file; done",
+    "dist": "npm-run-all --parallel css js",
+    "test": "npm-run-all dist size",
+    "prepublishOnly": "npm run dist",
+    "docs": "bash docs/serve.sh",
+    "docs:build": "node docs/_build.js",
+    "docs:fast": "bash docs/serve.sh --no-build",
+    "docs:watch": "bash docs/serve.sh --watch",
     "watch": "npm-run-all --parallel watch-*",
-    "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"",
-    "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm run js-compile\""
+    "watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css\"",
+    "watch-js": "nodemon --watch js/src/ --ext js --exec \"npm run js\"",
+    "format": "prettier --write \"scss/**/*.scss\"",
+    "format-check": "prettier --check \"scss/**/*.scss\"",
+    "release": "node scripts/release.js"
   },
-  "repository": {
-    "type": "git",
-    "url": "git@git.zenqu.fi:finqu-lib/finqu-ui.git"
-  },
-  "author": "Finqu Oy",
-  "homepage": "https://finqu.fi",
-  "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.7.0",
-    "@babel/core": "^7.7.2",
-    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
-    "@babel/preset-env": "^7.7.1",
-    "autoprefixer": "^9.7.1",
-    "babel-eslint": "^10.0.3",
-    "babel-plugin-istanbul": "^5.2.0",
-    "broken-link-checker": "^0.7.8",
-    "bundlesize": "^0.17.2",
-    "clean-css-cli": "^4.3.0",
-    "cross-env": "^5.2.1",
-    "eslint": "^5.13.0",
-    "find-unused-sass-variables": "^0.3.2",
-    "glob": "^7.1.6",
-    "jquery": "^3.4.1",
-    "node-sass": "^4.13.0",
-    "nodemon": "^1.19.4",
-    "npm-run-all": "^4.1.5",
-    "postcss-cli": "^6.1.3",
-    "rollup": "^1.26.3",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^9.3.4",
-    "rollup-plugin-node-resolve": "^4.2.4",
-    "shelljs": "^0.8.3",
-    "shx": "^0.3.2",
-    "terser": "^3.17.0",
-    "uglify-js": "^3.6.8"
-  }
+    "@babel/cli": "^7.24.0",
+    "@babel/core": "^7.24.0",
+    "@babel/eslint-parser": "^7.24.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.0",
+    "@babel/preset-env": "^7.24.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.2.0",
+    "@size-limit/preset-small-lib": "^11.0.0",
+    "babel-plugin-istanbul": "^7.0.0",
+    "cross-env": "^7.0.0",
+    "eslint": "^8.57.0",
+    "jquery": "^3.7.1",
+    "lightningcss": "^1.31.1",
+    "nodemon": "^3.1.0",
+    "npm-run-all": "^4.1.0",
+    "perfect-scrollbar": "^1.5.6",
+    "prettier": "^3.7.4",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.0.0",
+    "sass": "^1.77.0",
+    "size-limit": "^11.0.0",
+    "terser": "^5.31.1"
+  },
+  "peerDependencies": {
+    "jquery": "^3.7.1",
+    "perfect-scrollbar": "^1.5.6"
+  },
+  "peerDependenciesMeta": {
+    "jquery": {
+      "optional": true
+    },
+    "perfect-scrollbar": {
+      "optional": true
+    }
+  },
+  "size-limit": [
+    {
+      "path": "dist/js/cool.bundle.js",
+      "limit": "100 KB"
+    },
+    {
+      "path": "dist/css/cool.css",
+      "limit": "75 KB"
+    }
+  ]
 }

package/scss/LISENCE

@@ -1,6 +1,6 @@
 ISC License
 
-Copyright (c) 2020, Finqu Oy
+Copyright (c) 2026, Finqu Oy
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

package/scss/_badge.scss

@@ -1,102 +1,134 @@
-// Badge
-// ---------------------------------------------------------------------------------------------------------------
-
-.badge {
-    display: inline-flex;
-    font-size: $badge-font-size;
-    font-weight: $badge-font-weight;
-    padding: $badge-padding-y $badge-padding-x;
-    line-height: $badge-line-height;
-    border-radius: $badge-border-radius;
-    border: $border-width solid theme-color('primary');
-    background-color: theme-color('primary');
-    color: white;
-    box-sizing: border-box;
-    align-items: center;
-    margin: 2px;
-    text-align: center;
-    text-decoration: none;
-    touch-action: manipulation;
-    user-select: none;
-    vertical-align: middle;
-    white-space: nowrap;
-    flex-direction: row;
-    position: relative;
-    font-family: $font-family-title;
-
-    &.badge-xs {
-        border-radius: $border-radius-xs;
-        font-size: $badge-xs-font-size;
-        font-weight: $badge-xs-font-weight;
-        padding: $badge-xs-padding-y $badge-xs-padding-x;
-        line-height: $badge-xs-line-height;
-    }
-
-    &.badge-sm {
-        border-radius: $border-radius-sm;
-        font-size: $badge-sm-font-size;
-        font-weight: $badge-sm-font-weight;
-        padding: $badge-sm-padding-y $badge-sm-padding-x;
-        line-height: $badge-sm-line-height;
-    }
-
-    &.badge-btn {
-        padding: $btn-padding-y $btn-padding-x;
-        font-size: $btn-font-size;
-        line-height: $btn-line-height;
-        border-radius: $btn-border-radius;
-
-        &.badge-btn-xs {
-            padding: $btn-padding-y-xs  $btn-padding-x-xs;
-            font-size: $btn-font-size-xs;
-            line-height: $btn-line-height-xs;
-            border-radius: $btn-border-radius-xs;
-        }
-
-        &.badge-btn-sm {
-            padding: $btn-padding-y-sm $btn-padding-x-sm;
-            font-size: $btn-font-size-sm;
-            line-height: $btn-line-height-sm;
-            border-radius: $btn-border-radius-sm;
-        }
-
-        &.badge-btn-lg {
-            padding: $btn-padding-y-lg $btn-padding-x-lg;
-            font-size: $btn-font-size-lg;
-            line-height: $btn-line-height-lg;
-            border-radius: $btn-border-radius-lg;
-        }
-    }
-
-    .alert-icon {
-        margin-right: 0.4em;
-
-        .icon {
-            color: theme-color('primary');
-        }
-    }
-}
-
-// @each $color, $value in $colors {
-//     .badge-#{$color} {
-//         @include badge-variant($value);
-//     }
-// }
-
-@each $color, $value in $theme-colors {
-    .badge-#{$color} {
-        @include badge-variant($value);
-    }
-}
-
-// @each $color, $value in $colors {
-//     .badge-outline-#{$color} {
-//         @include badge-outline-variant($value);
-//     }
-// }
-
-@each $color, $value in $theme-colors {
-    .badge-outline-#{$color} {
-        @include badge-outline-variant($value);
-    }
-}
+@use "variables" as *;
+/* Badge ========================================================================== */
+
+@mixin cool-badge {
+    .badge {
+        font-family: var(--cool-badge-font-family);
+        font-size: var(--cool-badge-font-size);
+        font-weight: var(--cool-badge-font-weight);
+        padding: var(--cool-badge-padding-y) var(--cool-badge-padding-x);
+        line-height: var(--cool-badge-line-height);
+        border-radius: var(--cool-badge-border-radius);
+        border: var(--cool-badge-border, var(--cool-badge-border-width) solid var(--cool-theme-color-primary));
+        background-color: var(--cool-badge-bg, var(--cool-theme-color-primary));
+        color: var(--cool-badge-color, var(--cool-theme-text-color-primary));
+        box-shadow: var(--cool-badge-box-shadow, none);
+        box-sizing: border-box;
+        align-items: center;
+        display: inline-flex;
+        text-align: center;
+        text-decoration: none;
+        touch-action: manipulation;
+        user-select: none;
+        vertical-align: middle;
+        white-space: nowrap;
+        flex-direction: row;
+        position: relative;
+        text-transform: uppercase;
+        width: fit-content;
+        letter-spacing: 0.1px;
+
+        .alert-icon {
+            margin-right: 0.4em;
+
+            .icon {
+                color: var(--cool-badge-icon-color, var(--cool-theme-text-color-primary));
+            }
+        }
+    }
+
+    @each $color, $value in $theme-bg-colors {
+        .badge-#{$color} {
+            --cool-badge-bg: var(--cool-theme-bg-color-#{$color});
+            --cool-badge-border: var(--cool-badge-border-width) solid var(--cool-theme-bg-color-#{$color});
+            --cool-badge-color: var(--cool-theme-foreground-color-#{$color});
+            --cool-badge-box-shadow: 0
+                0
+                0
+                var(--cool-badge-box-shadow-blur)
+                color-mix(in srgb, var(--cool-color-#{$color}) var(--cool-badge-box-shadow-opacity), transparent);
+            --badge-icon-color: var(--cool-theme-foreground-color-#{$color});
+        }
+    }
+
+    @each $color in ("success", "info", "warning", "danger") {
+        .badge-#{$color} {
+            --cool-badge-bg: color-mix(in oklab, var(--cool-theme-color-#{$color}) 25%, var(--cool-body-surface-bg));
+            --cool-badge-border: var(--cool-badge-border-width)
+                solid
+                color-mix(in oklab, var(--cool-theme-color-#{$color}) 25%, var(--cool-body-surface-bg));
+        }
+    }
+
+    @each $color, $value in $theme-colors {
+        .badge-outline-#{$color} {
+            --cool-badge-bg: transparent;
+            --cool-badge-border: var(--cool-badge-border-width) solid var(--cool-theme-bg-color-#{$color});
+            --cool-badge-color: var(--cool-theme-color-#{$color});
+            --cool-badge-box-shadow: 0
+                0
+                0
+                var(--cool-badge-box-shadow-blur)
+                color-mix(in srgb, var(--cool-theme-color-#{$color}) var(--cool-badge-box-shadow-opacity), transparent);
+            --badge-icon-color: var(--cool-theme-color-#{$color});
+        }
+    }
+
+    .badge-xs {
+        --cool-badge-font-size: var(--cool-badge-font-size-xs);
+        --cool-badge-font-weight: var(--cool-badge-font-weight-xs);
+        --cool-badge-padding-y: var(--cool-badge-padding-y-xs);
+        --cool-badge-padding-x: var(--cool-badge-padding-x-xs);
+        --cool-badge-line-height: var(--cool-badge-line-height-xs);
+        --cool-badge-border-radius: var(--cool-badge-border-radius-xs);
+    }
+
+    .badge-sm {
+        --cool-badge-font-size: var(--cool-badge-font-size-sm);
+        --cool-badge-font-weight: var(--cool-badge-font-weight-sm);
+        --cool-badge-padding-y: var(--cool-badge-padding-y-sm);
+        --cool-badge-padding-x: var(--cool-badge-padding-x-sm);
+        --cool-badge-line-height: var(--cool-badge-line-height-sm);
+        --cool-badge-border-radius: var(--cool-badge-border-radius-sm);
+    }
+
+    .badge-btn {
+        --cool-badge-padding-y: calc(var(--cool-btn-padding-y) - 1px);
+        --cool-badge-padding-x: var(--cool-btn-padding-x);
+        --cool-badge-font-size: var(--cool-btn-font-size);
+        --cool-badge-line-height: var(--cool-btn-line-height);
+        --cool-badge-border-radius: var(--cool-btn-border-radius);
+    }
+
+    .badge-btn-xs {
+        --cool-badge-padding-y: calc(var(--cool-btn-padding-y-xs) - 1px);
+        --cool-badge-padding-x: var(--cool-btn-padding-x-xs);
+        --cool-badge-font-size: var(--cool-btn-font-size-xs);
+        --cool-badge-line-height: var(--cool-btn-line-height-xs);
+        --cool-badge-border-radius: var(--cool-btn-border-radius-xs);
+    }
+
+    .badge-btn-sm {
+        --cool-badge-padding-y: calc(var(--cool-btn-padding-y-sm) - 1px);
+        --cool-badge-padding-x: var(--cool-btn-padding-x-sm);
+        --cool-badge-font-size: var(--cool-btn-font-size-sm);
+        --cool-badge-line-height: var(--cool-btn-line-height-sm);
+        --cool-badge-border-radius: var(--cool-btn-border-radius-sm);
+    }
+
+    .badge-btn-lg {
+        --cool-badge-padding-y: calc(var(--cool-btn-padding-y-lg) - 1px);
+        --cool-badge-padding-x: var(--cool-btn-padding-x-lg);
+        --cool-badge-font-size: var(--cool-btn-font-size-lg);
+        --cool-badge-line-height: var(--cool-btn-line-height-lg);
+        --cool-badge-border-radius: var(--cool-btn-border-radius-lg);
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-badge;
+    }
+} @else {
+    @include cool-badge;
+}