open-index/open-npm huggingface dataset:
npm package: @fylgja/hashlink
Description: The Fylgja hashlink component
Author: Fylgja
Latest version: 1.1.1
Deprecated: This Package has been deprecated for @fylgja/base, please replace this package with @fylgja/base

# Fylgja - Hashlink

[![NPM version](https://img.shields.io/npm/v/@fylgja/hashlink)](https://www.npmjs.org/fylgja/hashlink)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The Hashlink is a small utility component,
which adds smooth scrolling to the page via CSS

and a scroll offset to any element with a id.

Making it perfect for hashlinks.
But also works with Javascript scrollto actions.

## Installation

```bash
npm install @fylgja/hashlink
```

Then include the component in to your code via;

```scss
@use "@fylgja/hashlink";
// Or via PostCSS import
@import "@fylgja/hashlink";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/hashlink" with ($hashlink-layer: "utilities");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/hashlink" layer("utilities");
```

## How to use

For more information see the [hashlink docs on the Fylgja.dev](https://fylgja.dev/components/hashlink/).
npm package: @fylgja/input-group
Description: The Fylgja input-group component
Author: Fylgja
Latest version: 2.0.0

# Fylgja Input Group

[![NPM version](https://img.shields.io/npm/v/@fylgja/input-group)](https://www.npmjs.com/package/@fylgja/input-group)
[![NPM Downloads](https://img.shields.io/npm/dt/%40fylgja%2Finput-group)](https://www.npmjs.com/package/@fylgja/input-group)
[![License](https://img.shields.io/github/license/fylgja/fylgja?color=%23234)](/LICENSE)

The Fylgja Input Group component allows you to group inputs and buttons together
to create more intuitive form controls.

This component is ideal for building various UI elements such as
search bars, button groups, or rating systems using radio buttons.

## Installation

You can install Fylgja Input Group via npm or other Node-based package managers like pnpm or bun:

```bash
npm install @fylgja/input-group
```

Alternatively, you can use it directly via a CDN:

```html
<link href="https://cdn.jsdelivr.net/npm/@fylgja/input-group/index.min.css" rel="stylesheet">
```

## Usage

Once installed, you can import the full package with:

```css
@import "@fylgja/input-group";
```

Alternatively, if you only need specific parts, you can import them individually:

| Import Path                 | Description                           |
| --------------------------- | ------------------------------------- |
| `@fylgja/input-group/base`  | Contains to core of the Input Group   |
| `@fylgja/input-group/merge` | Contains the `--merge` modifier class |
| `@fylgja/input-group/steps` | Contains the `--steps` modifier class |

## Modifiers

### `--merge`

The `--merge` modifier merges all borders between elements in an input group, making them appear as a unified component.

### `--steps`

The `--steps` modifier adds stepping functionality, mainly used with radio buttons or checkbox groups to create a range-like input.
npm package: @fylgja/list
Description: The Fylgja list component, giving more control on how you can style lists
Author: Fylgja
Latest version: 1.1.1
Deprecated: This Package has been deprecated for @fylgja/base, please replace this package with @fylgja/base

# Fylgja - List

[![NPM version](https://img.shields.io/npm/v/@fylgja/list)](https://www.npmjs.org/package/@fylgja/list)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The list component adds more control on how you can style lists.

By adding a custom marker option with full flexibility to style and animate.

## Installation

```bash
npm install @fylgja/list
```

Then include the component in to your code via;

```scss
@use "@fylgja/list";
// Or via PostCSS import
@import "@fylgja/list";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/list" with ($list-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/list" layer("components");
```

## How to use

For more information see the [list docs on the Fylgja.dev](https://fylgja.dev/components/list/).
npm package: @fylgja/marquee
Description: The marquee component lets you make infinite CSS sliders without any JavaScript
Author: Fylgja
Latest version: 1.0.0

# Fylgja - Marquee

[![NPM version](https://img.shields.io/npm/v/@fylgja/marquee)](https://www.npmjs.org/package/@fylgja/marquee)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The marquee component lets you make infinite CSS sliders without any JavaScript.

This feature provides an efficient and lightweight way to create dynamic and engaging sliders that loop infinitely,
without the need for additional code.

## Installation

```bash
npm install @fylgja/marquee
```

Then include the component in to your code via;

```scss
@use "@fylgja/marquee";
// Or via PostCSS import
@import "@fylgja/marquee";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/marquee" with ($marquee-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/marquee" layer("components");
```

## How to use

For more information see the [marquee docs on the Fylgja.dev](https://fylgja.dev/components/marquee/).
npm package: @fylgja/menu
Description: The menu component makes it easy to build many common navigation patterns
Author: Fylgja
Latest version: 1.3.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Fylgja - Menu

[![NPM version](https://img.shields.io/npm/v/@fylgja/menu)](https://www.npmjs.org/package/@fylgja/menu)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The menu component makes it easy to build common navigation patterns,
like a navbar or menu in a dropdown.

## Installation

```bash
npm install @fylgja/menu
```

Then include the component in to your code via;

```scss
@use "@fylgja/menu";
// Or via PostCSS import
@import "@fylgja/menu";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/menu" with ($menu-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/menu" layer("components");
```

## How to use

For more information see the [menu docs on the Fylgja.dev](https://fylgja.dev/components/menu/).
npm package: @fylgja/mq
Description: The Fylgja MQ offers Design Tokens (CSS props) for consistent use of media queries
Author: Fylgja
Latest version: 1.2.3
Deprecated: This Package has been deprecated for @fylgja/tokens, please replace this package with @fylgja/tokens

# Fylgja - MQ

[![NPM version](https://img.shields.io/npm/v/@fylgja/mq)](https://www.npmjs.org/package/@fylgja/mq)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The Fylgja MQ offers Design Tokens (CSS props) for consistent use of media queries.

## Installation

```bash
npm install @fylgja/mq
```

Then include the component in to your code via;

```scss
@use "@fylgja/mq";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/mq"; // *
```

> \* The PostCSS version is using the newer spec with `@custom-media`,
> and also requires the [PostCSS Custom Media](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media) plugin to work,
> until Custom Media queries are better supported

## How to use

For more information see the [mq docs on the Fylgja.dev](https://fylgja.dev/components/mq/).
npm package: @fylgja/pagination
Description: Pagination component makes it easy to build many pagination patterns
Author: Fylgja
Latest version: 1.1.2

# Fylgja - Pagination

[![NPM version](https://img.shields.io/npm/v/@fylgja/pagination)](https://www.npmjs.org/package/@fylgja/pagination)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The pagination component makes it easy to build many pagination patterns,
like button only next previous nav or dots nav.

## Installation

```bash
npm install @fylgja/pagination
```

Then include the component in to your code via;

```scss
@use "@fylgja/pagination";
// Or via PostCSS import
@import "@fylgja/pagination";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/pagination" with ($pagination-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/pagination" layer("components");
```

## How to use

For more information see the [pagination docs on the Fylgja.dev](https://fylgja.dev/components/pagination/).
npm package: @fylgja/print
Description: Print component will add solid foundation for printing
Author: Fylgja
Latest version: 1.0.3
Deprecated: This Package has been deprecated for @fylgja/base, please replace this package with @fylgja/base

# Fylgja - Print

[![NPM version](https://img.shields.io/npm/v/@fylgja/print)](https://www.npmjs.org/package/@fylgja/print)
![license](https://img.shields.io/github/license/fylgja/fylgja)

Print component will add solid foundation for printing.

## Installation

```bash
npm install @fylgja/print
```

Then include the component in to your code via;

```scss
@use "@fylgja/print";
// Or via PostCSS import
@import "@fylgja/print";
```

## How to use

For more information see the [print docs on the Fylgja.dev](https://fylgja.dev/components/print/).
npm package: @fylgja/progress
Description: The progress component show a progression of a form or somethings else
Author: Fylgja
Latest version: 1.1.2
Deprecated: This Package has been deprecated for @fylgja/form-extend, please replace this package with @fylgja/form-extend

# Fylgja - Progress

[![NPM version](https://img.shields.io/npm/v/@fylgja/progress)](https://www.npmjs.org/package/@fylgja/progress)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The progress component is used to show progress indication in a form or somethings else.

Fylgja supports both the native HTML progress element and the class based option.

## Installation

```bash
npm install @fylgja/progress
```

Then include the component in to your code via;

```scss
@use "@fylgja/progress";
// Or via PostCSS import
@import "@fylgja/progress";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/progress" with ($progress-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/progress" layer("components");
```

## How to use

For more information see the [progress docs on the Fylgja.dev](https://fylgja.dev/components/progress/).
npm package: @fylgja/props-builder
Description: Effortlessly generate Design Tokens (CSS custom properties) from JavaScript objects.
Author: Fylgja
Latest version: 2.1.0

# Fylgja - Props Builder

[![NPM version](https://img.shields.io/npm/v/@fylgja/props-builder)](https://www.npmjs.com/package/@fylgja/props-builder)
[![NPM Downloads](https://img.shields.io/npm/dt/%40fylgja%2Fprops-builder)](https://www.npmjs.com/package/@fylgja/props-builder)
[![License](https://img.shields.io/github/license/fylgja/fylgja?color=%23234)](https://github.com/fylgja/fylgja/blob/main/LICENSE)

The Fylgja Props Builder simplifies the creation of Design Tokens (CSS custom properties)
by converting JavaScript objects into CSS variables or JSON-based token systems.

This tool empowers you to construct comprehensive Design Token sets with ease.

> [!Note]
> Originally developed for the [Fylgja Tokens](https://fylgja.dev/library/tokens) package,
> this utility is also adaptable for use with other design systems.

## Installation

You can install Fylgja Props Builder via npm or other Node-based package managers like pnpm or bun:

```bash
npm install @fylgja/props-builder
```

## Usage

Import the propsBuilder function into your Node.js scripts:

```js
import { propsBuilder } from "../index.js";
```

Then, use it to generate output files based on your configuration:

```js
import { propsBuilder } from "../index.js";

propsBuilder(
  props, // Required: JavaScript object containing your design tokens.
  filename, // Required: Name of the output file.
  {
    parseAs: "auto", // Optional: Specifies the output format ("auto", "css", "json"). Defaults to "auto" (determined by file extension).
    writeToFile: true, // Optional: If false, outputs the generated content to the console. Defaults to true.
    selector: ":where(:root)", // Optional: CSS selector for custom property declarations (CSS output only).
    wrapper: "", // Optional: Wrapper for design system-specific formatting (e.g., Figma).
  }
)
```

For basic usage, only the `props` and `filename` arguments are necessary.

The optional parameters provide flexibility for advanced scenarios.

```js
import { propsBuilder } from "../index.js";

propsBuilder(
  {
    color: {
      red: "#f00",
      green: "#0f0",
      blue: "#00f",
    }
  },
  "output.css"
);
```

This will generate output.css with the following content:

```css
:where(:root) {
  --color-red: #f00;
  --color-green: #0f0;
  --color-blue: #00f;
}
```

This example demonstrates a simple use case,
but the Props Builder can handle complex and nested design token structures,
facilitating the creation of robust and scalable design systems.
npm package: @fylgja/range
Description: Range component will add solid foundation for range
Author: Fylgja
Latest version: 1.1.1
Deprecated: This Package has been deprecated for @fylgja/form-extend, please replace this package with @fylgja/form-extend

# Fylgja - Range

[![NPM version](https://img.shields.io/npm/v/@fylgja/range)](https://www.npmjs.org/package/@fylgja/range)
![license](https://img.shields.io/github/license/fylgja/fylgja)

Range component will add solid foundation for a input range slider.

## Installation

```bash
npm install @fylgja/range
```

Then include the component in to your code via;

```scss
@use "@fylgja/range";
// Or via PostCSS import
@import "@fylgja/range";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/range" with ($range-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/range" layer("components");
```

## How to use

For more information see the [range docs on the Fylgja.dev](https://fylgja.dev/components/range/).
npm package: @fylgja/sass
Description: Add more super powers to your Sass project
Author: Fylgja
Latest version: 2.0.1

# Fylgja - Sass Extend

[![NPM version](https://img.shields.io/npm/v/@fylgja/sass.svg?style=flat-square)](https://www.npmjs.org/package/@fylgja/sass)
[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/fylgja/fylgja-sass/test.yml?branch=main&color=%2343a047&style=flat-square)](https://github.com/fylgja/fylgja-sass/actions/workflows/test.yml)
[![License](https://img.shields.io/github/license/fylgja/sass?color=%23234&style=flat-square)](/LICENSE)

Add more super powers to your Sass project.

This repo will add more functions and adds options not found in the core sass project.

## Installation

```bash
npm install @fylgja/sass
```

## How to use

Since this is a Sass function library it require only usages where it is needed.

So if you need to string replace something.

Then include the specific sass typed function via;

```scss
@use "@fylgja/sass/string" as str;

.str-replace {
    content: str.replace("Hello World", "World", "🌍");
}
```

We advice to use the library with a prefixed `@use`.
Similar to an `@use "sass:string"`.

This package offers the following functions.

| Function Name  | Type   | Description                                       |
| -------------- | ------ | ------------------------------------------------- |
| luminance      | color  | Calculate the luminance for a color               |
| contrast-ratio | color  | Calculate the contrast ratio between two colors   |
| contrast       | color  | Sets an dark or light color based on the contrast |
| gray           | color  | Get a specific gray based an a given precentage   |
| nth-side       | list   | Extract value based on shorthand sizing property  |
| negative       | map    | Converters a map with units to a negative units   |
| strip-unit     | math   | Removes the unit (e.g. px, em, rem) from a value  |
| replace        | string | Replace part of a string with new value           |
| url-encode     | string | Encode Unsafe urls to safe urls                   |
| svg-url        | string | Use SVG anywhere as dataUri (inline background)   |
npm package: @fylgja/scroll-slider
Description: The Fylgja scroll-slider component
Author: Fylgja
Latest version: 1.1.1
Deprecated: This Package has been deprecated for @fylgja/utilities, please replace this package with @fylgja/utilities

# Fylgja - Scroll-slider

[![NPM version](https://img.shields.io/npm/v/@fylgja/scroll-slider)](https://www.npmjs.org/package/@fylgja/scroll-slider)
![license](https://img.shields.io/github/license/fylgja/fylgja)

This CSS slider component allows you to make sliders with ease,
and has no requirements to any Javascript.

The only reason to add some additional Javascript,
would be to add extra supporting functions.

Like a navigation and a active state.

## Installation

```bash
npm install @fylgja/scroll-slider
```

Then include the component in to your code via;

```scss
@use "@fylgja/scroll-slider";
// Or via PostCSS import
@import "@fylgja/scroll-slider";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/scroll-slider" with ($scroll-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/scroll-slider" layer("components");
```

## How to use

For more information see the [scroll-slider docs on the Fylgja.dev](https://fylgja.dev/components/scroll-slider/).
npm package: @fylgja/scrollbar
Description: Customize or hide the scrollbar with ease
Author: Fylgja
Latest version: 1.1.1
Deprecated: This Package has been deprecated for @fylgja/utilities, please replace this package with @fylgja/utilities

# Fylgja - Scrollbar

[![NPM version](https://img.shields.io/npm/v/@fylgja/scrollbar)](https://www.npmjs.org/package/@fylgja/scrollbar)
![license](https://img.shields.io/github/license/fylgja/fylgja)

Customize or hide the scrollbar with ease.

## Installation

```bash
npm install @fylgja/scrollbar
```

Then include the component in to your code via;

```scss
@use "@fylgja/scrollbar";
// Or via PostCSS import
@import "@fylgja/scrollbar";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/scrollbar" with ($scrollbar-layer: "utilities");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/scrollbar" layer("utilities");
```

## How to use

By default `@fylgja/scrollbar` offers 2 scrollbar styles.

- `.hide-scrollbar`
- `.thin-scrollbar`

Both are based on the browser default styles thats is supported by Firefox.

Giving a close cross browser support to the scrollbar style.

Apply the scrollbar style to any element that has overflow and so has a scrollbar.

```html
<div class="thin-scrollbar">
    ...overflowing content here
</div>
```

### Cross browser support

Currently the scrollbar styles are split in the newer specification that is only supported by Firefox.

And the webkit version that is supported by all moderne browsers except Firefox.

This CSS component mimics the newer spec with the webkit version.

And so limits the possibilities found in the webkit version.

Making this CSS component as safe solution for a near cross browser style, with minor OS differences.

### Mixin (SCSS only)

This CSS component also ships with a handy SCSS mixin that you can use via;

```scss
@use "@fylgja/scrollbar/helper" as *;

@include scrollbar(
    $thumb, // thumb color
    $track, // track color
    $width: null, // width of the scrollbar
    $radius: 0.5rem // border radius of the scrollbar, webkit only
    $width-size: if($width, ..) // $width setters for the older spec
    $width-name: if($width, ..) // $width setters for the newer spec
);
```

This mixin will create a near cross browser scrollbar.

> `0.5rem` is the radius found in most OS scrollbars

## Config

Want more control on the base styles, than the CSS variables,
Here are the following SCSS variables you can modify.

```scss
$enable-scrollbar-layer: false !default;

$scrollbar-layer-name: utilities !default;

$scrollbar-thumb-color: rgba($root-fg, 25%) !default;
$scrollbar-track-color: rgba($root-fg, 0%) !default;
```
npm package: @fylgja/section
Description: The Section component is a wrapper component to show content in a sectioned area
Author: Fylgja
Latest version: 1.1.1
Deprecated: This Package has been deprecated for @fylgja/utilities, please replace this package with @fylgja/utilities

# Fylgja - Section

[![NPM version](https://img.shields.io/npm/v/@fylgja/section)](https://www.npmjs.org/package/@fylgja/section)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The Section component is a wrapper component to show content in a sectioned area.

Like a Hero, Banner or just simple section with a different color in the page.

## Installation

```bash
npm install @fylgja/section
```

Then include the component in to your code via;

```scss
@use "@fylgja/section";
// Or via PostCSS import
@import "@fylgja/section";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/section" with ($section-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/section" layer("components");
```

## How to use

For more information see the [section docs on the Fylgja.dev](https://fylgja.dev/components/section/).
npm package: @fylgja/shadow
Description: The Fylgja shadow offers Design Tokens (CSS props) for consistent and semantic shadows
Author: Fylgja
Latest version: 1.1.2
Deprecated: This Package has been deprecated for @fylgja/tokens, please replace this package with @fylgja/tokens

# Fylgja - Shadow

[![NPM version](https://img.shields.io/npm/v/@fylgja/shadow)](https://www.npmjs.org/package/@fylgja/shadow)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The Fylgja Shadow offers Design Tokens (CSS props) for consistent and semantic shadows.

## Installation

```bash
npm install @fylgja/shadow
```

Then include the component in to your code via;

```scss
@use "@fylgja/shadow/base"; // *Note
@use "@fylgja/shadow";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/shadow"; // *
```

> **Note** The sass version has the color and weight as CSS variables,
> but it is by default not set as CSS variable any where,
> for this you need to include the base package as well, or build it your self
>
> Or use `@use "@fylgja/shadow/props` as plain CSS, works the same as the CSS version

## How to use

For more information see the [shadow docs on the Fylgja.dev](https://fylgja.dev/components/shadow/).
npm package: @fylgja/sizes
Description: The Fylgja Sizes offers Design Tokens (CSS props) for consistent and semantic sizes, in typography, spacing and general sizes
Author: Fylgja
Latest version: 1.1.1
Deprecated: This Package has been deprecated for @fylgja/tokens, please replace this package with @fylgja/tokens

# Fylgja - Sizes

[![NPM version](https://img.shields.io/npm/v/@fylgja/sizes)](https://www.npmjs.org/package/@fylgja/sizes)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The Fylgja Sizes offers Design Tokens (CSS props) for consistent and semantic sizes,
in typography, spacing and general sizes.

## Installation

```bash
npm install @fylgja/sizes
```

Then include the component in to your code via;

```scss
@use "@fylgja/sizes";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/sizes"; // *
```

## How to use

For more information see the [sizes docs on the Fylgja.dev](https://fylgja.dev/components/sizes/).
npm package: @fylgja/stretched-link
Description: The Fylgja stretched-link component, make any component fully clickable via a nested link
Author: Fylgja
Latest version: 1.2.0
Deprecated: This Package has been deprecated for @fylgja/utilities, please replace this package with @fylgja/utilities

# Fylgja - Stretched-link

[![NPM version](https://img.shields.io/npm/v/@fylgja/stretched-link)](https://www.npmjs.org/package/@fylgja/stretched-link)
![license](https://img.shields.io/github/license/fylgja/fylgja)

Make any component fully clickable via a nested link.

## Installation

```bash
npm install @fylgja/stretched-link
```

Then include the component in to your code via;

```scss
@use "@fylgja/stretched-link";
// Or via PostCSS import
@import "@fylgja/stretched-link";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/stretched-link" with ($stretched-link-layer: "utilities");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/stretched-link" layer("utilities");
```

## How to use

For more information see the [stretched-link docs on the Fylgja.dev](https://fylgja.dev/components/stretched-link/).
npm package: @fylgja/stylelint-config
Description: Sharable stylelint config used by Fylgja packages
Author: Fylgja
Latest version: 8.0.1

# Fylgja stylelint-config

[![NPM version](https://img.shields.io/npm/v/@fylgja/stylelint-config.svg?style=flat-square)](https://www.npmjs.org/package/@fylgja/stylelint-config)
[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/fylgja/stylelint-config/test.yml?branch=main&color=%2343a047&style=flat-square)](https://github.com/fylgja/stylelint-config/actions/workflows/test.yml)
[![License](https://img.shields.io/github/license/fylgja/stylelint-config?color=%23234&style=flat-square)](/LICENSE)

Fylgja uses an opinionated Stylelint config to enforce its CSS rules across all of its projects.

This config promotes consistency and readability in Fylgja's CSS code,
and helps to prevent errors and make the code easier to maintain.

## Installation

```bash
npm install @fylgja/stylelint-config --save-dev
```

## Usage

Set your Stylelint config to:

```json
{
  "extends": "@fylgja/stylelint-config"
}
```

## Extending the config

For advanced customization, you can extend the configuration by including a "rules" key in your settings.

This empowers you to either modify existing rules or introduce new ones.

For instance, if you wish to disable the selector-class-pattern rule,
incorporate the following code into your configuration:

```json
{
  "extends": "@fylgja/stylelint-config",
  "rules": {
    "selector-class-pattern": null
  }
}
```

## Syntax Support

Our configuration is intelligently tailored based on the file type,
ensuring the appropriate rules are applied automatically.

If your file is written in SCSS,
the SCSS rules will be seamlessly integrated alongside our default rules.

### SCSS

The Fylgja stylelint-config extends support for SCSS by incorporating [stylelint scss](https://github.com/stylelint-scss/stylelint-scss) and its standard rules.

While some rules are customized to align with our style guide,
the majority remains the same.

### TailwindCSS

Adds full compatibility with [TailwindCSS](https://tailwindcss.com/),
enabling you to freely utilize `theme()` and at-rules directly from TailwindCSS.

### Svelte

Adds full compatibility with [inline styles in Svelte](https://svelte.dev/docs/svelte-components#style),
ensuring seamless integration.

### Vue

Adds full compatibility with [inline styles in Vue](https://vuejs.org/api/sfc-css-features.html),
ensuring seamless integration.

### HTML, PHP, Astro, and More

The configuration effortlessly handles inline styles within HTML-based languages.

No additional rules are necessary,
and we've even incorporated support for camelCase custom properties without the need for extra directives when working with [Astro](https://docs.astro.build/en/guides/styling/#css-variables).

## Rules

To gain deeper insights into the behavior of each rule and its associated settings, refer to the following resources:

- [stylelint.io Rule Documentation](https://stylelint.io/user-guide/rules)
- [stylelint-scss Rule Documentation](https://github.com/stylelint-scss/stylelint-scss#list-of-rules)
npm package: @fylgja/table
Description: The table component is super easy to use. Since it is a zero config module that styles the table directly. Allowing you to focus on the table it self
Author: Fylgja
Latest version: 1.1.2
Deprecated: This Package has been deprecated for @fylgja/base, please replace this package with @fylgja/base

# Fylgja - Table

[![NPM version](https://img.shields.io/npm/v/@fylgja/table)](https://www.npmjs.org/package/@fylgja/table)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The table component is super easy to use,
since it is a zero config module that styles the table directly.

Allowing you to focus on the table it self.

## Installation

```bash
npm install @fylgja/table
```

Then include the component in to your code via;

```scss
@use "@fylgja/table";
// Or via PostCSS import
@import "@fylgja/table";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/table" with ($table-layer: "base");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/table" layer("base");
```

## How to use

For more information see the [table docs on the Fylgja.dev](https://fylgja.dev/components/table/).
npm package: @fylgja/theme
Description: Helper component for adding theme specific variables to multiple components
Author: Fylgja
Latest version: 1.2.0
Deprecated: This Package has been deprecated for @fylgja/base, please replace this package with @fylgja/base

# Fylgja - Theme

[![NPM version](https://img.shields.io/npm/v/@fylgja/theme)](https://www.npmjs.org/package/@fylgja/theme)
![license](https://img.shields.io/github/license/fylgja/fylgja)

Helper component for adding theme specific variables to multiple Fylgja Components.

## Installation

```bash
npm install @fylgja/theme
```

Then include the component in to your code via;

```scss
@use "@fylgja/theme";
```

## How to use

For more information see the [theme docs on the Fylgja.dev](https://fylgja.dev/components/theme/).
npm package: @fylgja/toast
Description: The Fylgja toast component
Author: Fylgja
Latest version: 1.0.0

# Fylgja Toast

[![NPM version](https://img.shields.io/npm/v/@fylgja/toast)](https://www.npmjs.com/package/@fylgja/toast)
[![NPM Downloads](https://img.shields.io/npm/dt/%40fylgja%2Ftoast)](https://www.npmjs.com/package/@fylgja/toast)
[![License](https://img.shields.io/github/license/fylgja/fylgja?color=%23234)](https://github.com/fylgja/fylgja/blob/main/LICENSE)

The Fylgja Toast component allows you to display brief, transient messages and notifications across your UI.

This component is ideal for building UI elements such as toasts, banners, alerts, or short inline messages that provide quick feedback (confirmations, warnings, or errors).

## Installation

You can install Fylgja Toast via npm or other Node-based package managers like pnpm or bun:

```bash
npm install @fylgja/toast
```

Alternatively, you can use it directly via a CDN:

```html
<link href="https://cdn.jsdelivr.net/npm/@fylgja/toast/index.min.css" rel="stylesheet">
```

## Usage

Once installed, you can import the full package with:

```css
@import "@fylgja/toast";
```

Alternatively, if you only need specific parts, you can import them individually:

| Import Path            | Description                                                          |
| ---------------------- | -------------------------------------------------------------------- |
| `@fylgja/toast/base`   | Contains to core of the Toast                                        |
| `@fylgja/toast/styles` | Contains styles for each toast status, for example warning and error |

## Styles

By default, a toast appears as a lightweight floating panel. Use icons, a close action, or inline controls to provide richer interactions when needed.

The `styles` package makes visual customization straightforward. A single CSS variable — `--toast-style` — controls background, border, and text colors. Built on CSS Relative Colors, the system derives accessible color variations automatically, so you get consistent, readable results with minimal effort.

Three preset style tokens are provided: `info` (which uses the brand color), `warning`, and `error`. You can extend or override these tokens to match your design system.
npm package: @fylgja/transform
Description: Add transforms with ease, with the power of CSS variables.
Author: Fylgja
Latest version: 1.2.2
Deprecated: This Package has been deprecated for @fylgja/utilities, please replace this package with @fylgja/utilities

# Fylgja - Transform

[![NPM version](https://img.shields.io/npm/v/@fylgja/transform)](https://www.npmjs.org/package/@fylgja/transform)
![license](https://img.shields.io/github/license/fylgja/fylgja)

Add transforms with ease, with the power of CSS variables.

## Installation

```bash
npm install @fylgja/transform
```

Then include the component in to your code via;

```scss
@use "@fylgja/transform";
// Or via PostCSS import
@import "@fylgja/transform";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/transform" with ($transform-layer: "utilities");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/transform" layer("utilities");
```

## How to use

For more information see the [transform docs on the Fylgja.dev](https://fylgja.dev/components/transform/).
npm package: @fylgja/transition
Description: Add transitions with ease, with the power of CSS variables.
Author: Fylgja
Latest version: 1.1.1
Deprecated: This Package has been deprecated for @fylgja/tokens, please replace this package with @fylgja/tokens

# Fylgja - Transition

[![NPM version](https://img.shields.io/npm/v/@fylgja/transition)](https://www.npmjs.org/package/@fylgja/transition)
![license](https://img.shields.io/github/license/fylgja/fylgja)

Add transitions with ease, with the power of CSS variables.

## Installation

```bash
npm install @fylgja/transition
```

Then include the component in to your code via;

```scss
@use "@fylgja/transition";
// Or via PostCSS import
@import "@fylgja/transition";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/transition" with ($transition-layer: "utilities");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/transition" layer("utilities");
```

## How to use

For more information see the [transition docs on the Fylgja.dev](https://fylgja.dev/components/transition/).
npm package: @fylgja/utilities
Description: Fylgja Utilities offers a focused collection of production-ready CSS utilities
Author: Fylgja
Latest version: 2.1.2

# Fylgja Utilities

[![NPM version](https://img.shields.io/npm/v/@fylgja/utilities)](https://www.npmjs.com/package/@fylgja/utilities)
[![NPM Downloads](https://img.shields.io/npm/dt/%40fylgja%2Futilities)](https://www.npmjs.com/package/@fylgja/utilities)
[![License](https://img.shields.io/github/license/fylgja/fylgja?color=%23234)](https://github.com/fylgja/fylgja/blob/main/LICENSE)

Fylgja Utilities offers a focused collection of production-ready CSS utilities.

Designed for direct use without a build step,
each utility is carefully selected for practical application.

Fylgja Utilities integrates seamlessly as a standalone solution
or alongside other utility frameworks like Tailwind CSS and UnoCSS.

## Installation

You can install Fylgja Utilities via npm or other Node-based package managers like pnpm or bun:

```bash
npm install @fylgja/utilities
```

Alternatively, you can use it directly via a CDN:

```html
<link href="https://cdn.jsdelivr.net/npm/@fylgja/utilities/index.min.css" rel="stylesheet">
```

## Usage

Once installed, you can import the full package with:

```css
@import "@fylgja/utilities";
```

Alternatively, if you only need specific parts of the utilities.

You can import any utility mentioned below, using:

```css
@import "@fylgja/utilities/{UTILITY_NAME}";
```

_align • auto-grid • clip • container • content-lazy • display • divide • flex • flow • gap • gradient • grid-cols • line-clamp • list • overlay • position • rounded • scroll • scroll-mask • scrollbar • size • snap • spacing • sr-only • stack • stretched-link • toggle • transition • truncate • typography_
npm package: @fylgja/utilkit
Description: The UtilKit is a small helper package. that can make complex tasks easier.
Author: Fylgja
Latest version: 2.5.1
Deprecated: @fylgja/utilkit has been replace and split in to 2 new packages, for the sass functions see @fylgja/sass and for CSS utility classes see @fylgja/utilpack

# Fylgja UtilKit

[![NPM version](https://img.shields.io/npm/v/@fylgja/utilkit.svg)](https://www.npmjs.org/package/@fylgja/utilkit)

The UtilKit is a small helper package. that can make complex tasks easier.

By offering easy tools to speed up you development.
It offers you SCSS functions and mixins.
And utility-class builder that is super small compared to other utility class frameworks.

<details><summary>Table of Contents</summary>

- [Installation](#installation)
- [How to use](#how-to-use)
  - [Functions](#functions)
  - [Util classes](#util-classes)

</details>

## Installation

```bash
npm install @fylgja/utilkit
```

## How to use

Include the utilkit package in to your code via;

```scss 
@import "@fylgja/utilkit"; // (DartSass, LibSass 3.6)
@import "@fylgja/utilkit/index"; // old way
```

Or just the utilkit classes, via;

```css
@import "@fylgja/utilkit/utilkit.css";
```

There is allot to cover.
So each section is split in it is own file.

### Functions

This contains SCSS functions that extend on base SCSS function like an `str-replace` or an `encode-svg`.
And has some helper mixins to easily build `@media` based styles.

[For more on what each function/mixin does, Check it out here →](https://github.com/fylgja/fylgja-utilkit/wiki/Functions)

### Util classes

The utilkit comes with super strong util class builder and some good defaults.

To use these classes first include the `build-util` mixin.

It is best to load this last after all other css.
This will allows it to override most styles without using an important.

By just calling the `build-util` mixin will also load the default config.
[More on what you are loading and how to configure it here →](https://github.com/fylgja/fylgja-utilkit/wiki/Default-Classes)

If you want more control on what you are loading.

First set the `$utilkit-import` to none.

Second (if not allready done) call the build-util mixin.

And third add your settings to it as found on the [class builder readmore →](https://github.com/fylgja/fylgja-utilkit/wiki/Class-Builder)
npm package: @fylgja/z-layer
Description: The Fylgja z-layer offers Design Tokens (CSS props) for consistent and semantic z-indexing
Author: Fylgja
Latest version: 1.1.1
Deprecated: This Package has been deprecated for @fylgja/tokens, please replace this package with @fylgja/tokens

# Fylgja - Z Layer

[![NPM version](https://img.shields.io/npm/v/@fylgja/z-layer)](https://www.npmjs.org/package/@fylgja/z-layer)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The Fylgja z-layer offers Design Tokens (CSS props) for consistent and semantic z-indexing.

## Installation

```bash
npm install @fylgja/z-layer
```

Then include the component in to your code via;

```scss
@use "@fylgja/z-layer";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/z-layer"; // *
```

## How to use

For more information see the [z-layer docs on the Fylgja.dev](https://fylgja.dev/components/z-layer/).