css-desyre

    0.1.3 • Public • Published

    css-desyre

    Collection of CSS assets for the Renault Design System

    How to use

    Configure Renault artifactory:

    • Connect to Renault artifactory to ensure your account is already created
    • Go to your profile and get your API key (or generate it and copy it)
    • Then configure artifactory in your npm settings:
    npm config set registry https://artifactory.dt.renault.com/artifactory/api/npm/npm/
    npm login
    # and enter: your ipn as username, copied API key as password, and your email

    The library consists of core elements of DeSyRe, the Renault Design System

    Installation

    npm i css-desyre

    And then link files from node_modules/css-desyre/dist/ folder. Example in a SCSS file:

    Include the entire library:

    @import '~css-desyre/dist/css/desyre.min.css';

    Include only the used components:

    @import '~css-desyre/dist/css/global/desyre-text.min.css';
    @import '~css-desyre/dist/css/global/desyre-fonts.min.css';
    @import '~css-desyre/dist/css/compoenents/desyre.min.css';

    See complete documentation about variables and available components here: https://design-system.gitlab-pages.dt.renault.com/desyre/landing-page

    How to contribute

    Build

    npm i                    # install NPM packages dependencies
    npm run build:all        # build the library
    npm run build:showcase   # build the html app showcase

    Files are generated in dist/ folder in packages folders.

    See main package.json file for detailed commands.

    Publish a new version

    npm publish

    This step is done by Gitlab CI. You need to bump the version, then merge develop branch into master branch to trigger the package publication to npm repository.

    Workflow

    Git workflow

    • Main development branch is develop.
    • A feature branch starts from develop, and is attached to a merge request. Once accepted, the feature branch can be merged in develop and will be deleted.
    • When develop is stable and candidate for a package release in production, bump the version and commit it, then merge to master. It will be automatically published to npm repository.

    For each development (feature, fix, rework, ...), the CHANGELOG.md file should be updated with the description of the new changes. It will enable to have the complete list of all changes linked to a release. For further information, please read the CHANGELOG.md file.

    Conventions

    CSS objects naming

    Variables

    CSS variables must be named according to the following pattern:

    dsr-elementtype-elementname--modifier

    --modifier is optional

    Examples:

    dsr-color-yellow
    dsr-color-red--light

    Classes

    CSS classes must be named according to the following pattern:

    dsr-block__element--modifier

    block is a standalone entity that is meaningful on its own: header, container, menu, checkbox, input ...

    element is a part of a block that has no standalone meaning and is semantically tied to its block: menu item, list item, checkbox caption, header title ...

    modifier is a flag on a block or element. Use them to change appearance, behavior or state: disabled, highlighted, checked, fixed, size big, color yellow

    --modifier is optional

    Find more examples there: http://getbem.com/naming/

    Examples:

    dsr-btn__icon
    dsr-btn__icon--hover
    dsr-card__title
    dsr-card__title--danger

    DESIGN TOKENS

    We use design token with css custom properties in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

    FONTS Tokens

    Use these tokens for fonts text colors only.

    Label Value Description
    --dsr-font-main 'Read', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif --
    --dsr-font-title 'Renault Life', 'Read','Arial', sans-serif --
    --dsr-font-weight normal --
    --dsr-font-line-height 1.1 --
    --dsr-font-weight-bold 700 --
    --dsr-font-weight-semibold 600 --
    --dsr-font-weight-medium 500 --
    --dsr-font-weight-normal 400 --
    --dsr-font-weight-light 300 --
    --dsr-font-weight-extralight 200 --

    FONTS SIZE Tokens

    Use these tokens for text size only. Do not use spacing for text.

    Label Value Description
    --dsr-size-hero-headline 4.8rem --
    --dsr-size-h1-headline 3.8rem --
    --dsr-size-h2-headline 3.2rem --
    --dsr-size-h3-headline 2.8rem --
    --dsr-size-h4-headline 2.4rem --
    --dsr-size-h5-headline 2rem --
    --dsr-size-h6-headline 1.8rem --
    --dsr-size-subtitle-big 1.6rem --
    --dsr-size-body-big 1.6rem --
    --dsr-size-quote 1.6rem --
    --dsr-size-subtitle 1.4rem --
    --dsr-size-body 1.4rem --
    --dsr-size-button 1.4rem --
    --dsr-size-caption 1.2rem --
    --dsr-size-legal-mention 1.2rem --

    SPACING Tokens

    Spacing tokens are used for padding, margins, border. Use size tokens to control the size of common objects.

    Label Value Description
    --dsr-spacing-line 0.1rem --
    --dsr-spacing 1rem --
    --dsr-spacing-xs 0.8rem --
    --dsr-spacing-m 2.4rem --
    --dsr-spacing-s 1.6rem --
    --dsr-spacing-l 3.2rem --
    --dsr-spacing-xl 4rem --
    --dsr-spacing-xxl 7.2rem --
    --dsr-spacing-xxxl 10.4rem --
    --dsr-spacing-app-min-width 30rem --

    COLORS Tokens

    Generic colors to use within a Desyre application. Tokens have the prefix of "--dsr-color".

    Label Value Description
    --dsr-color-primary #FFCC33 --
    --dsr-color-secondary #FFDB75 --
    TEXT
    --dsr-color-text #000000 --
    --dsr-color-text-secondary #999999 --
    --dsr-color-text-link #0091DA --
    --dsr-color-hover #BBBCBC --
    --dsr-color-light-2 #F1F1F2 --
    BACKGROUND
    --dsr-color-background #EEEEEE --
    XXX
    --dsr-color-light-1 #FAF9F8 --
    --dsr-color-dark-1 #888B8D --
    --dsr-color-dark-2 #53565A --
    --dsr-color-dark-3 #333333 --
    XXX
    --dsr-color-info #FFCC33 --
    --dsr-color-success #73C366 --
    --dsr-color-warning #FF8200 --
    --dsr-color-error #CB333B --
    ZE
    --dsr-color-ze #0091DA --
    --dsr-color-ze-hover #4CB2E5 --
    --dsr-color-ze-light #B2DEF3 --
    BASE
    --dsr-color-white #FFFFFF --
    --dsr-color-black #000000 --
    ORANGE
    --dsr-color-orange #FF8200 --
    --dsr-color-orange-dark #EB6500 --
    --dsr-color-orange-light #FFC14C --
    --dsr-color-orange-hover #FFA51C --
    GREEN
    --dsr-color-green #73C366 --
    --dsr-color-darkgreen #009B77 --
    --dsr-color-green-dark #4EA147 --
    --dsr-color-green-light #A7FB9A --
    --dsr-color-green-hover #8BDE7F --
    --dsr-color-darkgreen-dark #006747 --
    --dsr-color-darkgreen-hover #55D2AC --
    --dsr-color-darkgreen-light #7CF7CF --
    RED
    --dsr-color-red #CB333B --
    --dsr-color-red-dark #8C0012 --
    --dsr-color-red-hover #E85252 --
    --dsr-color-red-light #FF6E6A --
    YELLOW
    --dsr-color-yellow #FFCC33 --
    --dsr-color-yellow-light #FFF8E6 --
    --dsr-color-yellow-hover #FFDB75 --
    PURPLE
    --dsr-color-purple #9E007E --
    --dsr-color-darkpurple #5C068C --
    --dsr-color-purple-dark #810065 --
    --dsr-color-purple-hover #BA3198 --
    --dsr-color-purple-light #D750B3 --
    --dsr-color-darkpurple-hover #9143C2 --
    --dsr-color-darkpurple-dark #430068 --
    --dsr-color-darkpurple-light #AD5DDE --
    BLUE
    --dsr-color-blue #0077C8 --
    --dsr-color-blueduck #009CA6 --
    --dsr-color-darkblue #0033A0 --
    --dsr-color-blue-dark #0048A0 --
    --dsr-color-blue-light #7AC5FF --
    --dsr-color-blue-hover #5BAAFF --
    --dsr-color-darkblue-dark #002280 --
    --dsr-color-blueduck-dark #006772 --
    --dsr-color-blueduck-hover #58D1DC --
    --dsr-color-darkblue-light #006ED6 --
    --dsr-color-darkblue-hover #1749C4 --
    --dsr-color-blueduck-light #77EEF8 --

    Keywords

    none

    Install

    npm i css-desyre

    DownloadsWeekly Downloads

    103

    Version

    0.1.3

    License

    ISC

    Unpacked Size

    617 kB

    Total Files

    14

    Last publish

    Collaborators

    • sophietk