core-desyre v1.0.0-alpha.4
core-desyre
Collection of CSS core 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
Core elements
The package contains:
- fonts
- icons
- logo
- CSS core elements:
- texts
- colors
- sizes, fonts & spaces
- grid system & responsive helpers
Installation
npm i core-desyre
And then link files from node_modules/core-desyre/dist/
folder. Example in a SCSS file:
Include the entire library:
@import "~core-desyre/dist/css/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
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
- 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 indevelop
and will be deleted. - When
develop
is stable and candidate for a package release in production, bump the version and commit it, then merge tomaster
. 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.
Lint ts & scsss
Scan scripts for common issues and errors, and give back a report with line numbers and what to do to fix things. In addition to actual bugs and errors, it's also check for subjective, stylistic preferences as well.
npm run test:lint:styles
🔥 conventionnal commit
A specification for adding human and machine readable meaning to commit messages
https://www.conventionalcommits.org/
Each commit trigger a hook which check the commit message format:
> <type>[optional scope]: <description>
>
> [optional body]
>
> [optional footer(s)]
For more info see .commitlintrc.js file
🎉 Release with Standard Version
CAUTION: ONLY USED when releasing a new version
A utility for versioning using semver and CHANGELOG generation powered by Conventional Commits.
standard version : https://www.npmjs.com/package/standard-version
npm run release
🎖 Review and Merge
Remove WIP status from merge request and start review process before merge it into INTEGRATION branch.
A good practice is to invite other reviewer to comment and improve changes collaboratively on the merge request until it's approbation.
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 typography 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, margin, 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 | -- |
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago