@fylgja/badge - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

CHANGELOG.md

@@ -9,2 +9,8 @@ # Changelog
 
+## [1.1.1] - 2023-02-19
+### Changed
+- Simplified `@layer` support,
+  CSS can use native, for SCSS use the new variable `$badge-layer`,
+  the options from v1.1 are deprecated
+
 ## [1.1.0] - 2023-01-30
@@ -11,0 +17,0 @@ ### Added

package.json

 {
   "name": "@fylgja/badge",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Badges component serves as a small blocks to indicate notifications. Or to highlight an item",
@@ -8,5 +8,5 @@ "homepage": "https://fylgja.dev/",
   "license": "MIT",
-  "main": "_index.scss",
+  "style": "badge.css",
+  "sass": "_index.scss",
   "unpkg": "badge.css",
-  "style": "badge.css",
   "repository": {
@@ -27,4 +27,4 @@ "type": "git",
   "dependencies": {
-    "@fylgja/theme": "^1.1.0"
+    "@fylgja/theme": "^1.2.0"
   }
 }

README.md

@@ -28,5 +28,5 @@ # Fylgja - Badge
 ```scss
-@use "@fylgja/badge" with ($enable-badge-layer: true);
-// Or via PostCSS import
-@import "@fylgja/badge/layer";
+@use "@fylgja/badge" with ($badge-layer: "components");
+// Or via native CSS import, also supported by PostCSS import
+@import "@fylgja/badge" layer("components");
 ```
@@ -36,54 +36,2 @@
 
-To use the badge, create element with the class `.badge`.
-
-```html
-<span class="badge">..</span>
-```
-
-But if you need a badge with a little more complexity,
-like a badge with 2 sides of data or with a close button.
-
-You can use the `.badge-addon` as wrapper that binds the 2 badges to one badge.
-
-```html
-<div class="badge-addon">
-    <span class="badge">New</span>
-    <button class="badge -theme">Close</button>
-</div>
-```
-
-### Badge group (Tag cloud)
-
-To create Badge group (Tag cloud), you need to use custom CSS or the `@fylgja/utilpack`.
-
-To create a flex-grid with gap via margin or via the gap property (when it is better supported).
-
-```html
-<div class="flex flex-wrap">
-    <span class="badge m-1">Wolfs</span>
-    <span class="badge m-1">Cats</span>
-    <span class="badge m-1">Bears</span>
-    ...
-</div>
-```
-
-## Config
-
-As with almost all of our components, CSS variables can be configured to add your own look/style.
-
-Want direct control on the base styles, here are the following SCSS variables can you modify.
-
-```scss
-$enable-badge-addon: true !default;
-$enable-badge-theme: true !default;
-$enable-badge-layer: false !default;
-
-$badge-layer-name: components !default;
-
-$badge-padding: 0.125em 0.75em !default;
-$badge-radius: 0.375em !default;
-$badge-bg: if($root-fg == #000, #eee, #222) !default;
-$badge-color: $color-text !default;
-$badge-font-size: 0.75em !default;
-$badge-font-weight: 500 !default;
-```
+For more information see the [badge docs on the Fylgja.dev](https://fylgja.dev/components/badge/).

No alert changes

Worsened metrics

Total package byte prevSize

6312

decreased by-14.26%

Number of lines in readme file

36

decreased by-59.09%

Dependency changes

• Updated@fylgja/theme@^1.2.0