• Transform
• Transition (drop is no partly part of easing)
• Gradient

With this all components will ship with the :where selector, this will solve some issues with the menu and other nested class components.

We held back from adding this earlier, do our rule to support 3 browser's versions, with Safari 16 this options is possible

Note our current specificity is already very low do our other rule to keep everything one single class

• add :where selector
• add :host selector, for shadow dom support
• add fallback option for any edge case

The .backdrop class doesn't show on firefox. In my projects at least. I am not using the Alpine variant but the css variant.

Bug reports, please include:

• Operating system and version (Linux, Ubuntu 22.04.4 LTS)
• Browser and version (Firefox, 124.0.2 (64-bits))
• A width: 100%; fixed it for my encounters

With v1.2 we added the option to enable this behaviour, with v2 this will be the default and can be disabled of needed

The @import for the layer option (soon to release officially) breaks if used without extension

@import "@fylgja/button/layer";

It will import the scss version even if used with postcss-import;

The way the file is built needs to change so that there is no scss version of the same name.

The current syntax matches most frameworks out there, e.g. md-class-name or class-md-name;

But the md:class-name is becoming more and more used, not just in TailwindCSS.

Research and consider setting the mq prefix values to \\: to use the same syntax

This will drop the legacy solution for the aspect-ratio.

Instead this Fylgja Component will become to a CSS token package.

There is no use for the older solution with the native CSS option

Right now there's no way to change the border style for a disabled radio input with @fylgja/controls.

An example would be the material-style radio button in combination with a dashed border-style, which looks a bit funky.

Cool, thanks, peace out.

Currently when using the menu component, as a PostCSS import, with Tailwind in a Hyva project.
The actions-toolbar will also combine with the menu item auto selector since the not selector is just the class .btn.
Using the [class*=btn] will fix this behaviour.

This will make the utilpack easier to use for the defaults created with the SCSS mixin.

The SCSS mixin builder will stay the same at it's core and function,
only now each default will have its own @use option,
and is build separately,
making it easier to use without any other tools (altrough still recommended).

Also each value will now be powered by the CSS tokens components from Fylgja.

This is caused by the export rules, for example with @fylgja/sizes package.json there is an explicit export rule for specific files:

{
  "name": "@fylgja/sizes",
  ...
  "type": "module",
  "main": "index.cjs",
  "unpkg": "sizes.css",
  "style": "sizes.css",
  "module": "index.js",
  "exports": {
    ".": {
      "import": "./index.js",
      "require": "./index.cjs",
      "default": "./index.cjs"
    }
  },
  ...
}

Sadly the style export rule is not used when combined with the exports export rule.

To resolve this, the css export needs used as the default export option in exports export rule until postcss adds support for this, see: postcss/postcss-import#492
or Fylgja needs a second export option for CSS

Consider adding the block default behavior for images (jensimmons/cssremedy#14)

In v1 the outline is replaced with a custom focus state or is part of the hover state.

In v2 this should be dropped for native outline support and the hover should not target focus events anymore.

Actions:

• Remove any focus unsets
• Rename any variable from focus to hover, for consistency
• Add focus outline transitions with variable to tweak or disable this.

Currently for older browser support we use, for example, padding-inline-start and padding-inline-end together in 1 class.
This can be replaced for just padding-inline in the next major version.

• aspect-ratio
• colors
• easing
• shadow
• sizes
• z-layer

Note this feature is al ready present but named wrong
This release will make it the same as the layer ticket and the styles as in issue #121 and #128

• aria-only
• aspect-ratio
• auto-grid
• avatar
• badge
• base
• breadcrumbs
• button
• card
• code
• container
• control
• details
• dialog
• form
• gradient
• hashlink
• input-group
• list
• menu
• pagination
• progress
• range
• scroll-slider
• scrollbar
• section
• stretched-link
• table
• transform
• transition

Currently it is not possible to load both the utilpack or any of the default utilities found in the utilpack,
without getting an error from Sass,
that any of those default are already loaded.

Example using the defaults with map marge to overrule specific parts.

@use "@fylgja/utilpack/defaults/spacers" as *;

$new-spacers: ();
$new-spacers-map: map.merge($utilpack-defaults-spacers, $new-spacers);

@use "@fylgja/utilpack" with (
  $utilpack-defaults-spacers: $new-spacers-map,
);

This will not work.

Improve the docs and use for the CSS version the native syntax.

@import "@fylgja/avatar" layer(components);

Update the SCSS syntax to use the name as the on or off switch.
So that there is only 1 var that can set this behaviour, and is more in line with the CSS syntax;

• aria-only
• aspect-ratio
• auto-grid
• avatar
• badge
• breadcrumbs
• button
• card
• container
• control
• dialog
• form
• gradient
• hashlink
• input-group
• list
• menu
• pagination
• progress
• range
• scroll-slider
• scrollbar
• section
• stretched-link
• table
• transform
• transition

Drop the older imports in v2 as per issue ->

Currently the colors are limited to just bright versions and are based on the Open Color, same as what Open Props is doing.

For V2 we want to drop the colors from Open Color and move to our own version build using the power of oklch.

Our goal is to stick to the 10 colors pallet but if this require a bit more this should not be an issue.
The pallet should not grow beyond to many options so the choice becomes to much.

When using visibility on a positioned element the element stays visable after closing dialog.

Hi,

I'm trying to use fylgja inside a new Symfony project, on my local machine running a Debian-based Linux distribution.
I've installed the Symfony bundle Encore that provides a Webpack configuration.

Here is my webpack.config.js :

const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or subdirectory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/app.js')

    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
    .enableStimulusBridge('./assets/controllers.json')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // configure Babel
    // .configureBabel((config) => {
    //     config.plugins.push('@babel/a-babel-plugin');
    // })

    // enables and configure @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = '3.23';
    })

    // enables Sass/SCSS support
    .enableSassLoader()

    .enablePostCssLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment if you use React
    //.enableReactPreset()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

Here is my package.json:

{
    "devDependencies": {
        "@babel/core": "^7.17.0",
        "@babel/preset-env": "^7.16.0",
        "@hotwired/stimulus": "^3.0.0",
        "@symfony/stimulus-bridge": "^3.2.0",
        "@symfony/webpack-encore": "^4.0.0",
        "core-js": "^3.23.0",
        "postcss-loader": "^7.0.0",
        "regenerator-runtime": "^0.13.9",
        "sass": "^1.60.0",
        "sass-loader": "^13.0.0",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-notifier": "^1.15.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "@fylgja/mq": "^1.2.2",
        "@fylgja/utilpack": "^1.2.1",
        "fylgja": "^1.3.0"
    }
}

And here is my app.scss :

@use "@fylgja/theme" with ($color-theme: rebeccapurple,
    $color-on-theme: white);

@use "@fylgja/base";
@use "@fylgja/details";
@use "@fylgja/table";
@use "@fylgja/list";

@use "@fylgja/breadcrumbs";
@use "@fylgja/pagination";
@use "@fylgja/avatar";
@use "@fylgja/button";

@use "@fylgja/container";
@use "@fylgja/section";
@use "@fylgja/card";

@use "@fylgja/hashlink";
@use "@fylgja/utilpack";

When I launch the encore dev-server command, here is the output :

❯ yarn encore dev-server
yarn run v1.22.19
$ /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/.bin/encore dev-server
Running webpack-dev-server ...

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/, http://[::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/bricebou/DEV/apprentissage/historiquetravaux/app/public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
 ERROR  Failed to compile with 2 errors                                                                                                      18:07:27

 error  in ./assets/styles/app.scss                                                                                                          18:07:27

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
6 │ @use "@fylgja/mq/helper" as mq;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@fylgja/utilpack/_helper.scss 6:1   @forward
  node_modules/@fylgja/utilpack/_index.scss 4:1    @use
  node_modules/@fylgja/utilpack/utilpack.scss 4:1  @use
  assets/styles/app.scss 19:1                      root stylesheet

 error  in ./assets/styles/app.scss                                                                                                          18:07:27

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
6 │ @use "@fylgja/mq/helper" as mq;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@fylgja/utilpack/_helper.scss 6:1   @forward
  node_modules/@fylgja/utilpack/_index.scss 4:1    @use
  node_modules/@fylgja/utilpack/utilpack.scss 4:1  @use
  assets/styles/app.scss 19:1                      root stylesheet
    at tryRunOrWebpackError (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5058:12)
    at __webpack_require__ (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5015:18)
    at /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5086:20
    at symbolIterator (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/neo-async/async.js:3485:9)
    at done (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:4993:43
    at symbolIterator (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/neo-async/async.js:3482:9)
    at timesSync (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/neo-async/async.js:2297:7)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
6 │ @use "@fylgja/mq/helper" as mq;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@fylgja/utilpack/_helper.scss 6:1   @forward
  node_modules/@fylgja/utilpack/_index.scss 4:1    @use
  node_modules/@fylgja/utilpack/utilpack.scss 4:1  @use
  assets/styles/app.scss 19:1                      root stylesheet
    at Object.<anonymous> (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[2]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[3]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[4]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/assets/styles/app.scss:1:7)
    at /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval [as call] (eval at create (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5060:39
    at tryRunOrWebpackError (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5058:12)
    at __webpack_require__ (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5015:18)
    at /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/webpack/lib/Compilation.js:5086:20
    at symbolIterator (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/neo-async/async.js:3485:9)
    at done (/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/neo-async/async.js:3527:9)

Generated code for /home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[2]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[3]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[4]!/home/bricebou/DEV/apprentissage/historiquetravaux/app/assets/styles/app.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n6 │ @use \"@fylgja/mq/helper\" as mq;\n  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  ╵\n  node_modules/@fylgja/utilpack/_helper.scss 6:1   @forward\n  node_modules/@fylgja/utilpack/_index.scss 4:1    @use\n  node_modules/@fylgja/utilpack/utilpack.scss 4:1  @use\n  assets/styles/app.scss 19:1                      root stylesheet");

Entrypoint app [big] 1.24 MiB = runtime.js 107 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_da-514134.js 1.11 MiB app.js 28 KiB
webpack compiled with 2 errors

The issue is coming from the last use statement within the SCSS:

@use "@fylgja/utilpack";

The compilation works perfectly fine when removing this last line.

Any idea ?

Thanks a lot !

Currently it is not possible to set the label-margin trough scss syntax,
and can only be set with CSS variables.

This upgrade will make it easier to create multi rowed sliders,
and drop the need to wait for flex gap.

Although Fylgja v2 will drop Safari 13 version need,
making this reason obsolete.

This update will need to check how it handles slide item auto sizing if no value is given.

Current solution can be the unit min-content.

Extra note: Drop the -webkit-overflow-scrolling from the styles, not needed since Safari 13

Discussed in #85

Most margins and other direction aware properties are static, this should be made dynamic.

The current base package is made ready for v2.
Only the code needs to be activated after v1.2 is released

When a selectbox has more content/text than the container width it will causes an overflow on the body

Sometimes when pressing the close button of a dialog the dialog stays visible in firefox.

This might be caused by the animation repeatedly being triggered

Currently the design tokens are doing great.

The sizes version was to optimistic, and requires an split.
This will create more CSS vars, but is needed for other systems to work wel.

Split to;

• border-radius
• font-size

Also add more options for;

• font families
• gradients (will replace the util version, later)
• font styles (letter spacing, line-height, etc...)

Currently we have supported both SCSS with @import and @use with this the SCSS variable prefix was required, as of Version 2 of Fylgja we are full dropping older SCSS versions, and so we can drop the prefix form each SCSS variable.

So $form-bg will be just $bg and scoped by the SCSS file.

Many of the Fylgja components have slowly added and dropped specify features,
to keep backward compatibility, these options are kept.

For v2 we will drop these options.

When compiling sources I'm bumping into multiple deprecation warnings with text Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0 because of lines like the following:

margin-left: ($x / -2);

Reference: https://sass-lang.com/documentation/breaking-changes/slash-div