Skip to content
Snippets Groups Projects
Commit b0b806eb authored by Alexis POYEN's avatar Alexis POYEN
Browse files

chore: try css library

parent 3976906f
No related branches found
No related tags found
No related merge requests found
Pipeline #107869 failed
demo/node_modules
\ No newline at end of file
demo/node_modules
ds-ml-css/node_modules
ds-ml-css/css
\ No newline at end of file
......@@ -33,3 +33,12 @@ deploy:
- echo $CI_PROJECT_NAME
- echo $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA
- kubectl patch deployment site -p "{\"spec\":{\"template\":{\"metadata\":{\"labels\":{\"redeploy\":\"$(date +%s)\"}}}}}"
build-library:
stage: build
image: node:22-alpine
script:
- cd ds-ml-css
- npm i
- npm run build-ds-ml
- 'curl --fail-with-body --header "JOB-TOKEN: $CI_JOB_TOKEN" --upload-file css/ds-ml.css "${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/ds-ml/0.0.1/ds-ml.css"'
# Présentation
Ce projet correspond à la librairie CSS du **design system** de la Métropole de Lyon
accessible sur l'url : https://design-system.grandlyon.com/
Design system qui essaye de formaliser les bonnes pratiques de
design à mettre en place sur les sites web de la Métropole de
Lyon.
/* ********************************************************************************************* */
/* * ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION * */
/* * ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION * */
/* ********************************************************************************************* */
/* accordion CSS rules */
.accordion-btn {
border: none;
border-top: solid var(--ml-neutral) 2px;
background-color: var(--ml-background);
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
}
.accordion-btn:last-of-type {
border-bottom: solid var(--ml-neutral) 2px;
}
.accordion-btn:hover {
background-color: var(--ml-m200);
border: none;
border-top: transparent solid 2px;
}
.active {
background-color: var(--ml-m400);
border: none;
border-top: transparent solid 2px;
}
.accordion-panel {
margin: 10px 18px;
padding: 0 5px;
background-color: var(--ml-neutral);
display: none;
overflow: hidden;
}
/* ********************************************************************************************* */
/* * INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT * */
/* * INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT * */
/* ********************************************************************************************* */
.input-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
max-width: 300px;
.label {
display: flex;
flex-direction: column;
text-align: left;
gap: 4px;
.description {
font-size: 12px;
color: var(--ml-text-secondary);
}
}
.input-field {
display: flex;
align-items: center;
width: 100%;
border: 1px solid var(--border-field-default);
border-radius: 4px;
&:focus-within {
outline-style: solid;
outline-color: var(--ml-focus-color);
outline-width: 2px;
outline-offset: 2px;
}
input {
color: var(--ml-text-body);
box-sizing: border-box;
border-radius: 4px;
border: transparent;
padding: 4px 8px;
transition: all 0.3s ease-in-out;
width: 100%;
height: 32px;
&:focus {
outline: none;
}
}
input[placeholder] {
color: var(--ml-midnight);
}
.icon {
margin-right: 4px;
color: var(--ml-text-body) !important;
}
}
.input-field:has(input:disabled) {
border-color: var(--ml-disabled);
}
.input-field:has(input:focus) {
border-color: var(--ml-midnight);
}
.status {
display: flex;
align-items: flex-start;
padding-right: 20px;
gap: 4px;
span {
font-size: 12px;
line-height: 20px;
text-align: left;
}
}
}
.input-container:has(input:disabled) label {
color: var(--ml-text-disabled);
}
.input-status-success {
color: var(--ml-g600);
.input-field {
border-color: var(--ml-g600);
}
}
.input-status-error {
color: var(--ml-r600);
.input-field {
border-color: var(--ml-r600);
}
}
:root {
/* ********************************************************************************************* */
/* * COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR * */
/* * COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR * */
/* ********************************************************************************************* */
/* DS color palet: MAIN */
--ml-m100: #f0ecfa;
--ml-m200: #eae2ff;
--ml-m300: #ddd0ff;
--ml-m400: #b79dff;
--ml-m500: #6a4dba;
--ml-m600: #422c7e;
--ml-m800: #2c1d54;
--ml-m900: #2a243c;
--ml-m950: #211c2e;
/* DS color palet: INSTITUTIONNAL */
--ml-i100: #ffedf0;
--ml-i200: #ffcbd4;
--ml-i300: #fe8896;
--ml-i400: #fc4d62;
--ml-i500: #e60028;
--ml-i600: #b50028;
--ml-i800: #820028;
--ml-i900: #600028;
--ml-i950: #360028;
/* DS color palet: INFORMATION */
--ml-b100: #f4f6ff;
--ml-b200: #dde5ff;
--ml-b300: #bccdff;
--ml-b400: #518fff;
--ml-b500: #0078f3;
--ml-b600: #0063cb;
--ml-b800: #273961;
--ml-b900: #222a3f;
--ml-b950: #171d2e;
/* DS color palet: SUCCESS */
--ml-g100: #dffee6;
--ml-g200: #bce7cc;
--ml-g300: #87cca0;
--ml-g400: #4ba36c;
--ml-g500: #1d8844;
--ml-g600: #18753c;
--ml-g800: #204129;
--ml-g900: #1e2e22;
--ml-g950: #142117;
/* DS color palet: WARNING */
--ml-o100: #fff4f3;
--ml-o200: #ffe9e6;
--ml-o300: #ffbeb4;
--ml-o400: #fc5d00;
--ml-o500: #cf4b00;
--ml-o600: #b34000;
--ml-o800: #5d2c20;
--ml-o900: #3e231e;
--ml-o950: #2d1814;
/* DS color palet: ERROR */
--ml-r100: #fef4f4;
--ml-r200: #fddede;
--ml-r300: #fcbfbf;
--ml-r400: #f95c5e;
--ml-r500: #e1000f;
--ml-r600: #c9191e;
--ml-r800: #5e2a2b;
--ml-r900: #3b2424;
--ml-r950: #2b1919;
/* DS color palet: NEUTRAL */
--ml-n000: #ffffff;
--ml-n050: #fafbfc;
--ml-n075: #f4f5f7;
--ml-n100: #ebecf0;
--ml-n150: #dfe1e6;
--ml-n200: #c1c7d0;
--ml-n250: #b3bac5;
--ml-n300: #a5adba;
--ml-n350: #97a0af;
--ml-n400: #8993a4;
--ml-n450: #7a869a;
--ml-n500: #6b778c;
--ml-n550: #5e6c84;
--ml-n600: #576377;
--ml-n700: #4f5561;
--ml-n850: #353a47;
--ml-n950: #1b1c22;
}
*[light] {
--ml-dark-hide: initial;
/* define main colors */
--ml-foreground: var(--ml-n850);
--ml-secondary: var(--ml-n500);
--ml-background: var(--ml-n000);
--ml-main: var(--ml-m600);
--ml-warning: var(--ml-o600);
--ml-success: var(--ml-g600);
--ml-info: var(--ml-b600);
--ml-error: var(--ml-r500);
--ml-disabled: var(--ml-n250);
--ml-neutral: var(--ml-n075);
--ml-neutral-2: var(--ml-n200);
/* define shadow vars */
--ml-shadow-sm-background: var(--ml-background);
--ml-shadow-md-background: var(--ml-background);
--ml-shadow-lg-background: var(--ml-background);
--ml-shadow-sm-shadow: 0 2px 6px #00001828;
--ml-shadow-md-shadow: 0 4px 12px #00001828;
--ml-shadow-lg-shadow: 0 6px 18px #00001828;
--ml-focus-color: var(--ml-b500);
--ml-code-background: var(--ml-n075);
--ml-code-comment: #a0a1a7;
--ml-code-keyword: #a626a4;
--ml-code-name: #ae180b;
--ml-code-literal: #0184bb;
--ml-code-attribute: #10660e;
--ml-code-variable: #7d5a0e;
--ml-code-symbol: #1b4ebd;
--ml-code-class: #c18401;
--ml-button-active-color: var(--ml-b200);
/* primary button */
--ml-primarybutton-background: var(--ml-m500);
--ml-primarybutton-border: solid 1px var(--ml-m500);
--ml-primarybutton-over-background: var(--ml-m600);
--ml-primarybutton-over-border: solid 1px var(--ml-m600);
--ml-primarybutton-disabled-background: var(--ml-n100);
--ml-primarybutton-disabled-border: solid 1px var(--ml-n100);
--ml-primarybutton-disabled-color: var(--ml-n400);
/* secondary button */
--ml-button-color: var(--ml-m500);
--ml-button-background: transparent;
--ml-button-border: solid 1px var(--ml-m500);
--ml-button-over-background: var(--ml-m100);
--ml-button-disabled-background: var(--ml-n000);
--ml-button-disabled-border: solid 1px var(--ml-n200);
--ml-button-disabled-color: var(--ml-n200);
/* tertiary button */
--ml-flatbutton-color: var(--ml-m500);
--ml-flatbutton-background: transparent;
--ml-flatbutton-border: solid 1px transparent;
--ml-flatbutton-over-background: var(--ml-m100);
--ml-flatbutton-disabled-background: var(--ml-n000);
--ml-flatbutton-disabled-border: solid 1px var(--ml-n000);
--ml-flatbutton-disabled-color: var(--ml-n200);
/* checkbox */
--ml-checkbox-border-color: var(--ml-m900);
--ml-checkbox-checked-background: var(--ml-m500);
--ml-checkbox-disabled-background: var(--ml-n100);
--ml-checkbox-check-color: var(--ml-n000);
--ml-checkbox-check-disabled-color: var(--ml-n400);
/* switch */
--ml-switch-color: var(--ml-n950);
--ml-switch-button-color: var(--ml-n000);
--ml-switch-text-color: var(--ml-n500);
/* switchtag */
--ml-switchtag-background: var(--ml-n150);
/* tag */
--ml-tag-background: var(--ml-n950);
--ml-tag-color: var(--ml-n000);
/* tab */
--ml-tab-active: var(--ml-m500);
/* divider */
--ml-divider-color: var(--ml-n100);
/* TEXT */
/* TEXT BODY & TITLE */
--ml-text-body: var(--ml-n950);
--ml-text-secondary: var(--ml-n500);
--ml-text-disabled: var(--ml-n200);
--ml-text-highlight: var(--ml-m500);
/* TEXT BUTTONS */
--text-button-primary: var(--ml-n000);
--text-button-primary-hover: var(--ml-n000);
--text-button-primary-disabled: var(--ml-n400);
--text-button-secondary: var(--ml-m500);
--text-button-secondary-hover: (var(--ml-m600));
--text-button-secondary-disabled: var(--ml-n200);
/* TEXT INFORMATIVE */
--ml-text-information: var(--ml-b600);
--ml-text-success: var(--ml-g600);
--ml-text-warning: var(--ml-o600);
--ml-text-error: var(--ml-r600);
/* BORDERS */
/* BORDER ACCENT */
--accent-primary: var(--ml-n100);
--accent-secondary: var(--ml-n075);
--accent-tertiary: var(--ml-n050);
/* BORDER BUTTONS */
--border-button-primary: var(--ml-m500);
--border-button-primary-hover: (var(--ml-m600));
--border-button-secondary: var(--ml-n950);
--border-button-secondary-hover: var(--ml-n850);
--border-button-disabled: var(--ml-n200);
/* BORDER INFORMATIVE */
--border-information: var(--ml-b500);
--border-success: var(--ml-g500);
--border-warning: var(--ml-o500);
--border-error: var(--ml-r500);
/* BORDER FIELDS */
--border-field-default: var(--ml-n200);
--border-field-active: var(--ml-n950);
/* BORDER CHECKBOX */
--border-checkbox: var(--ml-m900);
}
*[dark] {
--ml-dark-hide: none;
/* define main colors */
--ml-foreground: var(--ml-n150);
--ml-secondary: var(--ml-n450);
--ml-background: var(--ml-n950);
--ml-main: var(--ml-m400);
--ml-warning: var(--ml-o300);
--ml-success: var(--ml-g300);
--ml-info: var(--ml-b300);
--ml-error: var(--ml-r300);
--ml-disabled: var(--ml-n700);
--ml-neutral: var(--ml-n850);
--ml-neutral-2: var(--ml-n450);
--ml-shadow-sm-background: #272b35;
--ml-shadow-md-background: #303441;
--ml-shadow-lg-background: #3b3f4f;
--ml-shadow-sm-shadow: 0 2px 6px #000018;
--ml-shadow-md-shadow: 0 4px 12px #000018;
--ml-shadow-lg-shadow: 0 6px 18px #000018;
--ml-focus-color: var(--ml-b500);
--ml-code-background: var(--ml-n950);
--ml-code-comment: #5c6370;
--ml-code-keyword: #c678dd;
--ml-code-name: #e06c75;
--ml-code-literal: #56b6c2;
--ml-code-attribute: #98c379;
--ml-code-variable: #d19a66;
--ml-code-symbol: #61aeee;
--ml-code-class: #e6c07b;
--ml-button-active-color: var(--ml-b800);
/* primary button */
--ml-primarybutton-border: solid 1px var(--ml-m400);
--ml-primarybutton-background: var(--ml-m400);
--ml-primarybutton-over-border: solid 1px var(--ml-m500);
--ml-primarybutton-over-background: var(--ml-m500);
--ml-primarybutton-disabled-background: var(--ml-n850);
--ml-primarybutton-disabled-border: solid 1px var(--ml-n850);
--ml-primarybutton-disabled-color: var(--ml-n400);
/* secondary button */
--ml-button-color: var(--ml-m300);
--ml-button-background: transparent;
--ml-button-border: solid 1px var(--ml-m300);
--ml-button-over-background: var(--ml-m900);
--ml-button-disabled-background: transparent;
--ml-button-disabled-border: solid 1px var(--ml-n700);
--ml-button-disabled-color: var(--ml-n700);
/* tertiary button */
--ml-flatbutton-color: var(--ml-m300);
--ml-flatbutton-background: transparent;
--ml-flatbutton-border: solid 1px transparent;
--ml-flatbutton-over-background: var(--ml-m900);
--ml-flatbutton-disabled-background: transparent;
--ml-flatbutton-disabled-border: solid 1px transparent;
--ml-flatbutton-disabled-color: var(--ml-n700);
/* checkbox */
--ml-checkbox-border-color: var(--ml-m100);
--ml-checkbox-checked-background: var(--ml-m400);
--ml-checkbox-disabled-background: var(--ml-n850);
--ml-checkbox-check-color: var(--ml-ravel);
--ml-checkbox-check-disabled-color: var(--ml-n400);
/* switch */
--ml-switch-color: var(--ml-n000);
--ml-switch-button-color: var(--ml-n950);
--ml-switch-text-color: var(--ml-n450);
/* switchtag */
--ml-switchtag-background: var(--ml-n700);
/* tag */
--ml-tag-background: var(--ml-n050);
--ml-tag-color: var(--ml-n950);
/* tab */
--ml-tab-active: var(--ml-m400);
/* divider */
--ml-divider-color: (var(--ml-n600));
/* TEXT */
/* TEXT BODY & TITLE */
--ml-text-body: #fff;
--ml-text-secondary: var(--ml-n450);
--ml-text-disabled: var(--ml-n700);
--ml-text-highlight: var(--ml-m400);
/* TEXT BUTTONS */
--text-button-primary: var(--ml-n950);
--text-button-primary-hover: var(--ml-n950);
--text-button-primary-disabled: var(--ml-n400);
--text-button-secondary: var(--ml-m400);
--text-button-secondary-hover: var(--ml-m300);
--text-button-secondary-disabled: var(--ml-n700);
/* TEXT INFORMATIVE */
--ml-text-information: var(--ml-b400);
--ml-text-success: var(--ml-g400);
--ml-text-warning: var(--ml-o400);
--ml-text-error: var(--ml-r400);
/* BORDERS */
/* BORDER ACCENT */
--accent-primary: (var(--ml-n600));
--accent-secondary: var(--ml-n700);
--accent-tertiary: var(--ml-n850);
/* BORDER BUTTONS */
--border-button-primary: var(--ml-m400);
--border-button-primary-hover: var(--ml-m300);
--border-button-secondary: var(--ml-n000);
--border-button-secondary-hover: var(--ml-n150);
--border-button-disabled: var(--ml-n700);
/* BORDER INFORMATIVE */
--border-information: var(--ml-b400);
--border-success: var(--ml-g400);
--border-warning: var(--ml-o400);
--border-error: var(--ml-r400);
/* BORDER FIELDS */
--border-field-default: var(--ml-n550);
--border-field-active: var(--ml-n150);
/* BORDER CHECKBOX */
--border-checkbox: var(--ml-n950);
}
@use 'ds-color-palet.scss';
@use 'ds-ml-var.scss';
// components
@use 'components/accordion.scss';
@use 'components/input.scss';
:root {
/* define fonts */
font-family: 'Roboto', sans-serif;
font-size: 16px;
}
This diff is collapsed.
{
"name": "DS-ML",
"version": "0.0.1",
"homepage": "https://design-system.grandlyon.com/",
"description": "Design System - Metropole de Lyon",
"main": "bulma.scss",
"unpkg": "css/ds-ml.css",
"style": "css/ds-ml.min.css",
"repository": {
"type": "git",
"url": "git+https://forge.grandlyon.com/pocs/design-system"
},
"license": "MIT",
"keywords": [
"css",
"sass",
"scss"
],
"bugs": {
"url": "https://forge.grandlyon.com/pocs/design-system/-/issues"
},
"devDependencies": {
"cssnano": "^7.0.4",
"postcss-cli": "^11.0.0",
"prettier": "^3.3.3",
"rimraf": "^6.0.1",
"sass": "^1.77.8"
},
"scripts": {
"build-ds-ml": "sass --style=expanded --source-map ds-ml.scss css/ds-ml.css",
"minify-ds-ml": "postcss css/ds-ml.css --no-map --use cssnano --output css/ds-ml.min.css",
"build-all": "npm run build-ds-ml && npm run build-versions",
"minify-all": "npm run minify-ds-ml",
"clean": "rimraf css",
"deploy": "npm run clean && npm run build-all && npm run minify-all",
"start": "npm run build-ds-ml -- --watch"
},
"files": [
"css",
"sass",
"versions",
"ds-ml.scss",
"README.md"
]
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment