Nail Polishing Minions

    @fylgja/theme

    1.1.0 • Public • Published

    Fylgja - Theme

    NPM version license

    Helper component for adding theme specific variables to multiple components.

    Installation

    npm install @fylgja/theme

    Then include the component in to your code via;

    @use "@fylgja/theme";

    How to use

    This component does not create any CSS.

    And only contains some SCSS variable for Fylgja components, that have theme specific styles.

    You can use this component to quickly override the specific styles, set to a button, links and more, via;

    @use "@fylgja/theme" with (
        $color-theme: #00897b,
        $color-on-theme: #fff
    );

    Instead of the default the theme is now a teal color.

    And you can also reuse this in your own components,

    by importing the @fylgja/theme or use it directly in your styles via;

    @use "@fylgja/theme" as ft with (
        $color-theme: #00897b,
        $color-on-theme: #fff
    );
    
    .label {
        background-color: ft.$color-theme;
        color: ft.$color-on-theme;
    }

    You can also use it without the prefix if you want via * selector

    atLayer

    This mixin is specific for Fylgja's build progress, and is used to create the layer variant for each component

    You can use this if you need something with the same logic, or for a Fylgja Add-On component.

    @use "@fylgja/theme/layer";
    
    @include atLayer(
      $use, // if to use `@layer`
      $name // The `@layer` name, e.g. base, components, utilities
    ) {
      // Your CSS here
    }

    Config

    The following variables are available.

    $color-scheme: light !default;
    $root-font-size: null !default;
    $root-bg: if($color-scheme == dark, #000, #fff) !default;
    $root-fg: if($color-scheme == dark, #fff, #000) !default;
    
    $color-text: color.change($root-fg, $alpha: 0.87) !default;
    $color-text-alt: color.change($root-fg, $alpha: 0.68) !default;
    $color-text-muted: color.change($root-fg, $alpha: 0.56) !default;
    
    // Color pallet
    $color-theme: #1565c1 !default;
    $color-theme-fade: color.change($color-theme, $alpha: 0.2) !default;
    $color-on-theme: #fff !default;
    
    $color-error: #b00020 !default;
    $color-warning: #ffab40 !default;
    $color-success: #00e676 !default;
    
    $base-spacing: 1em !default; // For v2
    $item-spacer: 0 0 $base-spacing !default;
    
    // For any thing like forms and buttons, for v2
    $action-padding-block: 0.375em !default;
    $action-padding-inline: 0.625em !default;
    $action-padding: $action-padding-block $action-padding-inline;
    $action-border-width: 1px !default;

    Install

    npm i @fylgja/theme

    Homepage

    fylgja.dev/

    DownloadsWeekly Downloads

    35

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    5.32 kB

    Total Files

    5

    Last publish

    Collaborators

    • grimlink