@fylgja/form

    1.0.2 • Public • Published

    Fylgja - Form

    NPM version license

    The form component is super easy to use, it's a zero config module that styles all form elements directly.

    Allowing you to focus on the form itself.

    Installation

    npm install @fylgja/form

    Then include the component in to your code via;

    @use "@fylgja/form";
    // Or via PostCSS and other options as plain CSS
    @import "@fylgja/form/form.css";

    Styles

    By default all form styles are set to the fylgja default style.

    If you want to use the field or box style, change the variable $form-style to one of the other options.

    Or if you are importing this as plain CSS or in PostCSS use;

    @import "@fylgja/form/form-style-field.css";
    @import "@fylgja/form/form-style-box.css";

    How to use

    Out of the box all the styling is done directly, so no extra steps are needed.

    Config

    As with almost all of our components, CSS variables can be configured to add your own look/style.

    For direct control of the base styles, here are the following SCSS variables can you modify.

    $enable-webkit-autofill-dark-mode: true !default;
    
    $form-focus-color: var(
        --form-focus-color,
        var(--color-theme, #{$color-theme})
    ) !default;
    $form-placeholder-opacity: 0.5 !default;
    $form-disabled-opacity: 0.7 !default;
    $form-not-editable-border-style: dotted !default;
    
    $form-transition-property: border-color, box-shadow !default;
    $form-transition-speed: 150ms !default;
    $form-transition-effect: linear !default;
    
    $fieldset-margin: 1rem 0 !default;
    $fieldset-padding: 0 !default;
    $fieldset-border: 0 !default;
    
    $legend-font-size: 1.25em !default;
    $legend-margin: 1rem 0 !default;
    $legend-padding: 0 !default;
    $legend-border: 0 !default;
    
    $form-style: default !default;
    $form-styles: (
        field: (
            padding: 0.375em 1px,
            border-width: 0 0 1px,
            border-style: solid,
            border-color: currentColor,
            radius: 0,
            shadow: inset 0 -1px 0 $form-focus-color,
            bg: transparent,
            color: inherit,
            file-btn-padding: 0.375em 0.625em,
            file-btn-radius: 3px 3px 0 0
        ),
        box: (
            padding: 0.375em 0.625em,
            border-width: 0 0 1px,
            border-style: solid,
            border-color: currentColor,
            radius: 4px 4px 0 0,
            shadow: inset 0 -1px 0 $form-focus-color,
            bg: if($root-fg == #000, #eee, #222),
            color: inherit,
            file-btn-padding: 0.375em 0.625em,
            file-btn-radius: 4px 4px 0 0
        )
    ) !default;
    
    // Set styles var's
    $form-padding: form-style-get(padding) !default;
    $form-padding-y: if(
        list.length($form-padding) == 2,
        list.nth($form-padding, 1),
        $form-padding
    );
    $form-padding-x: if(
        list.length($form-padding) == 2,
        list.nth($form-padding, 2),
        $form-padding
    );
    $form-border-width: form-style-get(border-width) !default;
    $form-border-style: form-style-get(border-style) !default;
    $form-border-color: form-style-get(border-color) !default;
    $form-radius: form-style-get(radius) !default;
    $form-focus-style: form-style-get(shadow) !default;
    $form-bg: form-style-get(bg) !default;
    $form-color: form-style-get(color) !default;
    
    // Form fields to load the styling on
    $form-fields: (
        text,
        number,
        email,
        tel,
        password,
        search,
        url,
        date,
        textarea,
        select,
        color,
        file
    ) !default;
    
    // Form select
    $form-icon-size: 1.25em !default;
    $form-icon-color: $color-text !default;
    $form-select-icon: url("data:image/svg+xml,<svg .. /></svg>") !default;
    
    // Form color
    $form-color-radius: null !default;
    $form-color-size: 2.375rem !default;
    $form-color-padding: ($form-padding-y / 2) !default;
    
    // Form file
    $form-file-gap-y: $form-padding-y !default;
    $form-file-gap-x: $form-padding-x !default;
    $form-file-btn-gap: 1ch !default;
    $form-file-btn-padding: form-style-get(file-btn-padding) !default;
    $form-file-btn-radius: form-style-get(file-btn-radius) !default;
    $form-file-btn-bg: var(--color-theme, #{$color-theme}) !default;
    $form-file-btn-color: var(--color-on-theme, #{$color-on-theme}) !default;

    form-style-get() is the map-get() function.

    It gets the values from the $form-styles variable that contains the predefined form styles.

    Inspect the helper.scss file tot see what is in the default styles.

    Install

    npm i @fylgja/form

    Homepage

    fylgja.dev/

    DownloadsWeekly Downloads

    38

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    31 kB

    Total Files

    11

    Last publish

    Collaborators

    • grimlink