Nutritious Pumpkin Meal

    This package has been deprecated

    Author message:

    https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

    @springernature/global-context

    15.4.0 • Public • Published

    Global Context

    Set the context (baseline) for branded products. This package is used as a template and your product should use the context for a specific brand that inherits from this.

    As well as the SCSS helpers documented here, we also have a collection of JavaScript helpers.

    Breakpoints

    The media-query @mixin is provided for handling breakpoints. Breakpoint values are provided at the 10-settings level using the $breakpoints map.

    Usage

    range

    @include media-query('min-breakpoint-name' 'max-breakpoint-name', 'range') {}
    @include media-query('min-breakpoint-name' 'max-breakpoint-name', 'range', $custom-map) {}

    max-width

    @include media-query('breakpoint-name', 'max') {}
    @include media-query('breakpoint-name', 'max', $custom-map) {}

    min-width

    @include media-query('breakpoint-name') {}
    @include media-query('breakpoint-name', 'min', $custom-map) {}

    Colors

    Functions are provided for accessing colors from your context.

    Greyscale

    • Grey colors work by having a base grey color, then allowing various degrees of lightness on a scale
    • The lightness is measured in percentages

    The following variables are set:

    $greyscale-base      // the dark base color off which all greys are based
    $greyscale-min       // the minimum lightness percentage
    $greyscale-max       // the maximum lightness percentage
    $greyscale-stops     // the allowed interval for percentages
    • A helper function - greyscale() - is provided for adding grey colors to your scss files
    • The following lightness values are available 0, 5, 10, 15, 20 ... 80

    Examples

    color: greyscale();        // returns result of greyscale($greyscale-min) - greyscale(0)
    color: greyscale(8);       // rounds up to nearest stop, so returns result of greyscale(10)
    color: greyscale(20);      // returns grey with 20% transparency
    color: greyscale(25);      // returns grey with 25% transparency
    
    // ...
    
    color: greyscale(80);      // returns grey with 80% transparency
    color: greyscale(120);     // rounds down, so returns result of greyscale(80)

    You can also add transparency to any grey color by adding a second transparency value between 0 and 1, rounded to one decimal place.

    color: greyscale(30, 0.5);     // 30% greyscale with 50% transparency
    color: greyscale(30, 0.62);    // 30% greyscale with 60% transparency, rounded down
    color: greyscale(30, 0.68);    // 30% greyscale with 70% transparency, rounded up

    other usage examples:

    background-color: greyscale();
    border-bottom: 1px solid greyscale(80);

    Matching mosaic greyscale

    The following are the closest matches to grey colors as defined in the mosaic styleguide:

    • off-black: greyscale(0)
    • dark-grey: greyscale(25)
    • grey: greyscale(45)
    • medial-grey: greyscale(70)
    • light-grey: greyscale(80)

    Color

    There are three maps that store color palettes:

    • $colors : for default colors
    • $brand-colors : for brand specific colors, only to be used for the relevant brands
    • $subject-areas-colors : for subject areas

    A helper function - color() - is provided for adding colors to your scss files.

    Examples

    color: color('blue')                                               // returns color from $colors map
    color: color('strawberry', $colors)                                // returns color from $colors map
    color: color('npj-primary', $brand-colors)                         // returns color from $brand-colors map
    color: color('health-sciences-primary', $subject-areas-colors)     // returns color from $subject-areas-colors map

    You can also add transparency to any color by adding a transparency value between 0 and 1, rounded to one decimal place. The transparency value can be the second or third argument depending on if a custom map is also passed.

    color: color('blue', 0.5)                            // returns the color from $colors with 50% transparency
    color: color('npj-primary', $brand-colors, 0.62)     // returns the color from $brand-colors with 60% transparency

    other usage examples:

    background-color: color('grape');
    border: 1px solid color('lemon');

    Foreground color

    • Given a (background) color, this function will return either a predefined light ($foreground-light) or dark ($foreground-dark) color to be used in the foreground
    • The foreground-color() function will choose the correct color to allow for a high enough contrast ratio between background and foreground
    color: foreground-color();                                 // returns the foreground color for $greyscale-base
    color: foreground-color(30);                               // returns the foreground color for 30% $greyscale-base
    color: foreground-color('blue');                           // returns the foreground color for the color from $colors
    color: foreground-color('npj-primary', $brand-colors);     // returns the foreground color for the color from $brand-colors
    color: foreground-color($var);                             // returns the foreground color for color stored as variable

    Layers

    Function provided for accessing z-index from your context.

    Z

    The following variable is set:

    $z-layers //default layers values

    A helper function - z() - is provided for adding z-index to your scss files

    Examples

    z-index: z("layer-name"); //return "default" z-index
    z-index: z("layer-name", "layer-variant"); //return z-index for a particular name and variant
    z-index: z("layer-name", $my-map); //return z-index from $my-map map
    z-index: z("layer-name", "layer-variant", $my-map); //return z-index a name and variant from $my-map map

    Icons

    A set of icons is provided for use across all brands. Implementation is currently done at the product level due to the varying ways SVG Icons can be implemented. There is no agreed approach to this currently in Springer Nature.

    There is a recommendation that SVG sprites are used, but this is a choice. The sprite can be made manually or if you use Gulp then they can be made automatically with SVG Store.

    For further information on the various implementation methods, please read this article https://css-tricks.com/pretty-good-svg-icon-system/

    The Icons have been optimised, you should not need to optimise them further.

    Spacing

    A helper function - spacing() - is provided for adding values to margin and padding in your scss files.

    The function takes up to 4 values as it's arguments, and will check that the value(s) passed are present in the $context--spacing map.

    margin: spacing(12); // Outputs margin: 12px;
    margin: spacing(12, 16); // Outputs margin: 12px 16px;
    padding: spacing(12); // Outputs padding: 12px;
    padding: spacing(12, 24, 16); // Outputs padding: 12px 24px 16px;

    A spacing utility file is also provided, which generates utility classes from the spacing settings in the following format:

    Margin

    u-ma-*, u-ml-*, u-mt-*, u-mr-*, u-mb-*

    Padding

    u-pa-*, u-pl-*, u-pt-*, u-pr-*, u-pb-*

    <div class="u-ma-12"></div>
    <div class="u-pa-12"></div>

    License

    MIT License © 2020, Springer Nature

    Keywords

    none

    Install

    npm i @springernature/global-context

    DownloadsWeekly Downloads

    27

    Version

    15.4.0

    License

    MIT

    Unpacked Size

    95.1 kB

    Total Files

    109

    Last publish

    Collaborators

    • roshandeorukhkar-sn
    • benjclark
    • sonniesedge
    • rlau
    • dotcode
    • joseluisbolos
    • hollsk
    • moddular
    • jpw
    • nickcall
    • howlingmad
    • sndigital
    • davidpauljunior
    • morgaan