@ouestfrance/sipa-bms-ui 7.14.1

package/src/assets/scss/_formkit.scss

@@ -0,0 +1,353 @@
+@mixin formkit {
+  :root body {
+    /* theme name */
+    --formkit-theme: genesis;
+
+    /* typography */
+    --fk-font-family: var(--bms-font-family);
+    --fk-font-family-input: var(--fk-font-family);
+    --fk-font-family-label: var(--fk-font-family);
+    --fk-font-family-legend: var(--fk-font-family-label);
+    --fk-font-family-option: var(--fk-font-family-input);
+    --fk-font-family-help: var(--fk-font-family);
+    --fk-font-family-message: var(--fk-font-family);
+
+    --fk-font-weight: 400;
+    --fk-font-weight-input: var(--fk-font-weight);
+    --fk-font-weight-label: 700;
+    --fk-font-weight-legend: var(--fk-font-weight-label, bold);
+    --fk-font-weight-help: var(--fk-font-weight);
+    --fk-font-weight-option: var(--fk-font-weight);
+    --fk-font-weight-message: var(--fk-font-weight);
+
+    --fk-line-height: 1.1;
+    --fk-line-height-label: var(--fk-line-height);
+    --fk-line-height-help: var(--fk-line-height);
+    --fk-line-height-option: var(--fk-line-height);
+    --fk-line-height-message: var(--fk-line-height);
+    --fk-line-height-textarea: var(--fk-line-height);
+    --fk-line-height-input: 1.125em; /* Important to ensure equal height inputs. */
+    --fk-line-height-button: 1.3;
+
+    /* Structure */
+    --fk-max-width-input: 48em;
+    --fk-box-size: 0.875em;
+
+    /* Colors */
+    --fk-color-primary: var(--bms-main-100);
+    --fk-color-checked: var(--fk-color-primary);
+    --fk-color-input: var(--bms-font-color);
+    --fk-color-border: var(--bms-grey-50);
+    --fk-color-border-focus: var(--fk-color-primary);
+    --fk-color-border-shadow: var(--bms-main-10);
+    --fk-color-danger: var(--bms-red-100);
+    --fk-color-error: var(--fk-color-danger);
+    --fk-color-placeholder: var(--bms-grey-100);
+    --fk-color-disabled: var(--bms-disabled-color);
+    --fk-color-help: var(--bms-grey-100);
+    /* --fk-color-message: inherit; */
+    --fk-color-icon: var(--bms-grey-100);
+    --fk-color-icon-minor: var(--bms-grey-100);
+    --fk-color-button: #fff;
+    --fk-color-button-hover: #fff;
+    --fk-color-submit: var(--fk-color-button);
+    --fk-color-submit-hover: var(--fk-color-button-hover);
+    --fk-color-range-track: var(--fk-color-border);
+    --fk-color-range-thumb: var(--fk-color-primary);
+
+    --fk-bg-input: transparent;
+    --fk-bg-disabled: var(--bms-disabled-color);
+    --fk-bg-decorator: transparent;
+
+    --fk-bg-button: var(--fk-color-primary);
+    --fk-bg-button-hover: var(--fk-bg-button);
+    --fk-bg-submit: var(--fk-bg-button);
+    --fk-bg-submit-hover: var(--fk-bg-submit);
+
+    /* Borders */
+    --fk-border-width: 1px;
+    --fk-border-width-decorator: var(--fk-border-width);
+    --fk-border-width-focus: 1px;
+    --fk-border-width-checked: 1px;
+    --fk-border-width-decorator-checked: 1px;
+    --fk-border-width-decorator-focus: var(--fk-border-width-decorator-checked);
+    --fk-border-width-decorator-focus-visible: var(--fk-border-width-focus);
+    --fk-border-style: solid;
+    --fk-border: var(--fk-border-width) var(--fk-border-style)
+      var(--fk-color-border);
+    --fk-border-focus: var(--fk-border-width-focus) var(--fk-border-style)
+      var(--fk-color-border-focus);
+    --fk-border-decorator: var(--fk-border-width-decorator)
+      var(--fk-border-style) var(--fk-color-border);
+    --fk-border-decorator-focus: var(--fk-border-width-focus)
+      var(--fk-border-style) var(--fk-color-border-focus);
+    --fk-border-decorator-focus-visible: var(
+        --fk-border-width-decorator-focus-visible
+      )
+      var(--fk-border-style) var(--fk-color-border-focus);
+    --fk-border-decorator-checked: var(--fk-border-width-checked)
+      var(--fk-border-style) var(--fk-color-border-focus);
+    --fk-border-box-shadow: 0 0 0 var(--fk-border-width) var(--fk-color-border);
+    --fk-border-box-shadow-focus: 0 0 0 var(--fk-border-width-focus)
+        var(--fk-color-border-focus),
+      0 0 2px 2px var(--fk-color-border-shadow);
+    --fk-border-box-shadow-decorator: 0 0 0 var(--fk-border-width-decorator);
+    --fk-border-box-shadow-decorator-focus: 0 0 0
+      var(--fk-border-width-decorator-focus) var(--fk-color-border-focus);
+    --fk-border-box-shadow-decorator-focus-visible: 0 0 0
+      var(--fk-border-width-decorator-focus-visible)
+      var(--fk-color-border-focus);
+    --fk-border-box-shadow-decorator-checked: 0 0 0
+      var(--fk-border-width-decorator-checked) var(--fk-color-border-focus);
+    --fk-border-radius-tl: 4px;
+    --fk-border-radius-tr: 4px;
+    --fk-border-radius-bl: 4px;
+    --fk-border-radius-br: 4px;
+    --fk-border-radius: var(--fk-border-radius-tl, 4px)
+      var(--fk-border-radius-tr, 4px) var(--fk-border-radius-br, 4px)
+      var(--fk-border-radius-bl, 4px);
+    --fk-border-radius-full: 999em;
+
+    /* Padding */
+    --fk-padding-base: calc(0.25em - 1px / 3);
+
+    --fk-padding-input-x: calc(var(--fk-padding-base) * 3);
+    --fk-padding-input-y: calc(var(--fk-padding-base) * 3);
+    --fk-padding-input-t: var(--fk-padding-input-y, 0);
+    --fk-padding-input-r: var(--fk-padding-input-x, 0);
+    --fk-padding-input-b: var(--fk-padding-input-y, 0);
+    --fk-padding-input-l: var(--fk-padding-input-x, 0);
+    --fk-padding-input: var(--fk-padding-input-t) var(--fk-padding-input-r)
+      var(--fk-padding-input-b) var(--fk-padding-input-l);
+
+    --fk-padding-label-x: inherit;
+    --fk-padding-label-y: inherit;
+    --fk-padding-label-t: var(--fk-padding-label-y, 0);
+    --fk-padding-label-r: var(--fk-padding-label-x, 0);
+    --fk-padding-label-b: var(--fk-padding-label-y, 0.5em);
+    --fk-padding-label-l: var(--fk-padding-label-x, 0);
+    --fk-padding-label: var(--fk-padding-label-t) var(--fk-padding-label-r)
+      var(--fk-padding-label-b) var(--fk-padding-label-l);
+
+    --fk-padding-help-x: inherit;
+    --fk-padding-help-y: var(--fk-padding-base);
+    --fk-padding-help-t: var(--fk-padding-help-y, 0);
+    --fk-padding-help-r: var(--fk-padding-help-x, 0);
+    --fk-padding-help-b: var(--fk-padding-help-y, 0);
+    --fk-padding-help-l: var(--fk-padding-help-x, 0);
+    --fk-padding-help: var(--fk-padding-help-t) var(--fk-padding-help-r)
+      var(--fk-padding-help-b) var(--fk-padding-help-l);
+
+    --fk-padding-option-x: inherit;
+    --fk-padding-option-y: inherit;
+    --fk-padding-option-t: var(--fk-padding-option-y, 0);
+    --fk-padding-option-r: var(--fk-padding-option-x, 0);
+    --fk-padding-option-b: var(--fk-padding-option-y, 0);
+    --fk-padding-option-l: var(--fk-padding-option-x, 0);
+    --fk-padding-option: var(--fk-padding-option-t) var(--fk-padding-option-r)
+      var(--fk-padding-option-b) var(--fk-padding-option-l);
+
+    --fk-padding-messages-x: inherit;
+    --fk-padding-messages-y: inherit;
+    --fk-padding-messages-t: var(
+      --fk-padding-messages-y,
+      var(--fk-padding-base)
+    );
+    --fk-padding-messages-r: var(--fk-padding-messages-x, 0);
+    --fk-padding-messages-b: var(--fk-padding-messages-y, 0);
+    --fk-padding-messages-l: var(--fk-padding-messages-x, 0);
+    --fk-padding-messages: var(--fk-padding-messages-t)
+      var(--fk-padding-messages-r) var(--fk-padding-messages-b)
+      var(--fk-padding-messages-l);
+
+    --fk-padding-message-x: inherit;
+    --fk-padding-message-y: var(--fk-padding-base);
+    --fk-padding-message-t: var(--fk-padding-message-y, 0);
+    --fk-padding-message-r: var(--fk-padding-message-x, 0);
+    --fk-padding-message-b: var(--fk-padding-message-y, 0);
+    --fk-padding-message-l: var(--fk-padding-message-x, 0);
+    --fk-padding-message: var(--fk-padding-message-t)
+      var(--fk-padding-message-r) var(--fk-padding-message-b)
+      var(--fk-padding-message-l);
+
+    --fk-padding-legend-x: 0.25em;
+    --fk-padding-legend-y: 0.25em;
+    --fk-padding-legend-t: var(--fk-padding-legend-y);
+    --fk-padding-legend-r: var(--fk-padding-legend-x);
+    --fk-padding-legend-b: var(--fk-padding-legend-y);
+    --fk-padding-legend-l: var(--fk-padding-legend-x);
+    --fk-padding-legend: var(--fk-padding-legend-t) var(--fk-padding-legend-r)
+      var(--fk-padding-legend-b) var(--fk-padding-legend-l);
+
+    --fk-padding-fieldset-x: var(--fk-padding-input-x);
+    --fk-padding-fieldset-y: var(--fk-padding-input-y);
+    --fk-padding-fieldset-t: var(--fk-padding-fieldset-y);
+    --fk-padding-fieldset-r: var(--fk-padding-fieldset-x);
+    --fk-padding-fieldset-b: var(--fk-padding-fieldset-y);
+    --fk-padding-fieldset-l: var(--fk-padding-fieldset-x);
+    --fk-padding-fieldset: var(--fk-padding-fieldset-t)
+      var(--fk-padding-fieldset-r) var(--fk-padding-fieldset-b)
+      var(--fk-padding-fieldset-l);
+
+    --fk-padding-decorator-x: inherit;
+    --fk-padding-decorator-y: var(--fk-padding-base);
+    --fk-padding-decorator-t: var(--fk-padding-decorator-y, 1.25em);
+    --fk-padding-decorator-r: var(--fk-padding-decorator-x, 1.25em);
+    --fk-padding-decorator-b: var(--fk-padding-decorator-y, 1.25em);
+    --fk-padding-decorator-l: var(--fk-padding-decorator-x, 1.25em);
+    --fk-padding-decorator: var(--fk-padding-decorator-t)
+      var(--fk-padding-decorator-r) var(--fk-padding-decorator-b)
+      var(--fk-padding-decorator-l);
+
+    --fk-padding-button-x: calc(var(--fk-padding-base) * 8);
+    --fk-padding-button-y: calc(var(--fk-padding-base) * 3);
+    --fk-padding-button-t: var(--fk-padding-button-y);
+    --fk-padding-button-r: var(--fk-padding-button-x);
+    --fk-padding-button-b: var(--fk-padding-button-y);
+    --fk-padding-button-l: var(--fk-padding-button-x);
+    --fk-padding-button: var(--fk-padding-button-t) var(--fk-padding-button-r)
+      var(--fk-padding-button-b) var(--fk-padding-button-l);
+
+    /* Margin */
+    --fk-margin-base: 0.5em;
+
+    --fk-margin-outer-x: inherit;
+    --fk-margin-outer-y: inherit;
+    --fk-margin-outer-t: var(--fk-margin-outer-y, 0);
+    --fk-margin-outer-r: var(--fk-margin-outer-x, 0);
+    --fk-margin-outer-b: var(
+      --fk-margin-outer-y,
+      calc(var(--fk-margin-base) * 2)
+    );
+    --fk-margin-outer-l: var(--fk-margin-outer-x, 0);
+    --fk-margin-outer: var(--fk-margin-outer-t) var(--fk-margin-outer-r)
+      var(--fk-margin-outer-b) var(--fk-margin-outer-l);
+
+    --fk-margin-wrapper-x: inherit;
+    --fk-margin-wrapper-y: inherit;
+    --fk-margin-wrapper-t: var(--fk-margin-wrapper-y, 0);
+    --fk-margin-wrapper-r: var(--fk-margin-wrapper-x, 0);
+    --fk-margin-wrapper-b: var(--fk-margin-wrapper-y, 0);
+    --fk-margin-wrapper-l: var(--fk-margin-wrapper-x, 0);
+    --fk-margin-wrapper: var(--fk-margin-wrapper-t) var(--fk-margin-wrapper-r)
+      var(--fk-margin-wrapper-b) var(--fk-margin-wrapper-l);
+
+    --fk-margin-input-x: inherit;
+    --fk-margin-input-y: inherit;
+    --fk-margin-input-t: var(--fk-margin-input-y, 0);
+    --fk-margin-input-r: var(--fk-margin-input-x, 0);
+    --fk-margin-input-b: var(--fk-margin-input-y, 0);
+    --fk-margin-input-l: var(--fk-margin-input-x, 0);
+    --fk-margin-input: var(--fk-margin-input-t) var(--fk-margin-input-r)
+      var(--fk-margin-input-b) var(--fk-margin-input-l);
+
+    --fk-margin-label-x: inherit;
+    --fk-margin-label-y: 0;
+    --fk-margin-label-t: var(--fk-margin-label-y, 0);
+    --fk-margin-label-r: var(--fk-margin-label-x, 0);
+    --fk-margin-label-b: var(--fk-margin-label-y, var(--fk-margin-base));
+    --fk-margin-label-l: var(--fk-margin-label-x, 0);
+    --fk-margin-label: var(--fk-margin-label-t) var(--fk-margin-label-r)
+      var(--fk-margin-label-b) var(--fk-margin-label-l);
+
+    --fk-margin-help-x: inherit;
+    --fk-margin-help-y: 0.3em;
+    --fk-margin-help-t: var(--fk-margin-help-y, 0);
+    --fk-margin-help-r: var(--fk-margin-help-x, 0);
+    --fk-margin-help-b: 0;
+    --fk-margin-help-l: var(--fk-margin-help-x, 0);
+    --fk-margin-help: var(--fk-margin-help-t) var(--fk-margin-help-r)
+      var(--fk-margin-help-b) var(--fk-margin-help-l);
+
+    --fk-margin-option-x: inherit;
+    --fk-margin-option-y: inherit;
+    --fk-margin-option-t: var(--fk-margin-option-y, 0);
+    --fk-margin-option-r: var(--fk-margin-option-x, 0);
+    --fk-margin-option-b: var(--fk-margin-option-y, 0.625em);
+    --fk-margin-option-l: var(--fk-margin-option-x, 0);
+    --fk-margin-option: var(--fk-margin-option-t) var(--fk-margin-option-r)
+      var(--fk-margin-option-b) var(--fk-margin-option-l);
+
+    --fk-margin-message-x: inherit;
+    --fk-margin-message-y: inherit;
+    --fk-margin-message-t: var(--fk-margin-message-y, 0);
+    --fk-margin-message-r: var(--fk-margin-message-x, 0);
+    --fk-margin-message-b: var(--fk-margin-message-y, 0);
+    --fk-margin-message-l: var(--fk-margin-message-x, 0);
+    --fk-margin-message: var(--fk-margin-message-t) var(--fk-margin-message-r)
+      var(--fk-margin-message-b) var(--fk-margin-message-l);
+
+    --fk-margin-legend-x: 0em;
+    --fk-margin-legend-y: inherit;
+    --fk-margin-legend-t: var(--fk-margin-legend-y, 0);
+    --fk-margin-legend-r: var(--fk-margin-legend-x, 0);
+    --fk-margin-legend-b: var(--fk-margin-legend-y, 0);
+    --fk-margin-legend-l: var(--fk-margin-legend-x, 0);
+    --fk-margin-legend: var(--fk-margin-legend-t) var(--fk-margin-legend-r)
+      var(--fk-margin-legend-b) var(--fk-margin-legend-l);
+
+    --fk-margin-fieldset-x: inherit;
+    --fk-margin-fieldset-y: inherit;
+    --fk-margin-fieldset-t: var(--fk-margin-fieldset-y, 0);
+    --fk-margin-fieldset-r: var(--fk-margin-fieldset-x, 0);
+    --fk-margin-fieldset-b: var(--fk-margin-fieldset-y, 0);
+    --fk-margin-fieldset-l: var(--fk-margin-fieldset-x, 0);
+    --fk-margin-fieldset: var(--fk-margin-fieldset-t)
+      var(--fk-margin-fieldset-r) var(--fk-margin-fieldset-b)
+      var(--fk-margin-fieldset-l);
+
+    --fk-margin-decorator-x: inherit;
+    --fk-margin-decorator-y: inherit;
+    --fk-margin-decorator-t: var(--fk-margin-decorator-y, 0);
+    --fk-margin-decorator-r: var(--fk-margin-decorator-x, 0.5em);
+    --fk-margin-decorator-b: var(--fk-margin-decorator-y, 0);
+    --fk-margin-decorator-l: var(--fk-margin-decorator-x, 0);
+    --fk-margin-decorator: var(--fk-margin-decorator-t)
+      var(--fk-margin-decorator-r) var(--fk-margin-decorator-b)
+      var(--fk-margin-decorator-l);
+
+    --fk-margin-button-x: inherit;
+    --fk-margin-button-y: inherit;
+    --fk-margin-button-t: var(--fk-margin-button-y, 0);
+    --fk-margin-button-r: var(--fk-margin-button-x, 0.5em);
+    --fk-margin-button-b: var(--fk-margin-button-y, 0);
+    --fk-margin-button-l: var(--fk-margin-button-x, 0);
+    --fk-margin-button: var(--fk-margin-button-t) var(--fk-margin-button-r)
+      var(--fk-margin-button-b) var(--fk-margin-button-l);
+
+    /* default icons */
+    --fk-icon-close: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiPjwvbGluZT4KICA8bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ij48L2xpbmU +
+      Cjwvc3ZnPg==;
+    --fk-icon-down: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwb2x5bGluZSBwb2ludHM9IjYgOSAxMiAxNSAxOCA5Ij48L3BvbHlsaW5lPgo8L3N2Zz4=;
+    --fk-icon-fileDoc: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwYXRoIGQ9Ik0xNC41IDJINmEyIDIgMCAwIDAtMiAydjE2YTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY3LjVMMTQuNSAyeiI +
+      PC9wYXRoPgogIDxwb2x5bGluZSBwb2ludHM9IjE0IDIgMTQgOCAyMCA4Ij48L3BvbHlsaW5lPgogIDxsaW5lIHgxPSIxNiIgeTE9IjEzIiB4Mj0iOCIgeTI9IjEzIj48L2xpbmU +
+      CiAgPGxpbmUgeDE9IjE2IiB5MT0iMTciIHgyPSI4IiB5Mj0iMTciPjwvbGluZT4KICA8bGluZSB4MT0iMTAiIHkxPSI5IiB4Mj0iOCIgeTI9IjkiPjwvbGluZT4KPC9zdmc +;
+    --fk-icon-check: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIj48L3BvbHlsaW5lPgo8L3N2Zz4=;
+    --fk-icon-circle: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI +
+      PGNpcmNsZSBmaWxsPSJjdXJyZW50Q29sb3IiIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIvPjwvc3ZnPg==;
+
+    /* icons by location name */
+    --fk-icon-fileItem: var(--fk-icon-fileDoc);
+    --fk-icon-fileRemove: var(--fk-icon-close);
+    --fk-icon-noFiles: var(--fk-icon-fileDoc);
+    --fk-icon-select: var(--fk-icon-down);
+    --fk-icon-checkboxDecorator: var(--fk-icon-check);
+    --fk-icon-radioDecorator: var(--fk-icon-circle);
+  }
+
+  [data-type='checkbox'] .formkit-input ~ .formkit-decorator .formkit-icon,
+  [data-type='radio'] .formkit-input ~ .formkit-decorator .formkit-icon {
+    padding: 2px;
+  }
+  [data-type='radio'] .formkit-input ~ .formkit-decorator .formkit-icon {
+    padding: 3px;
+  }
+
+  [data-invalid] .formkit-inner {
+    --fk-color-border-focus: var(--fk-color-danger);
+    --fk-color-border-shadow: var(--bms-red-10);
+
+    box-shadow: 0 0 0 var(--fk-border-width-focus) var(--fk-color-border-focus),
+      0 0 2px 2px var(--fk-color-border-shadow);
+  }
+}

package/src/assets/scss/app.scss

@@ -0,0 +1,11 @@
+$customFontFamily: 'Roboto', Arial, Helvetica, sans-serif;
+
+@use './conf' as sbu with (
+  $fontFamily: $customFontFamily
+);
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+@include sbu.styles;
+@include sbu.formkit;
+@include sbu.global-variables;

package/src/assets/scss/global-variables.scss

@@ -0,0 +1,56 @@
+@mixin global-variables {
+  :root {
+    --bms-grey-140: #333333;
+    --bms-grey-100: #526476;
+    --bms-grey-75: #7c8a97;
+    --bms-grey-50: #a7b0b9;
+    --bms-grey-25: #d1d6da;
+    --bms-grey-10: #ebedef;
+    --bms-main-analog-140: #5153ac;
+    --bms-main-analog-100: #696ce0;
+    --bms-main-analog-75: #8e90e7;
+    --bms-main-analog-50: #b2b4ee;
+    --bms-main-analog-25: #d7d8f5;
+    --bms-main-analog-10: #edeef9;
+    --bms-main-140: #3f91d9;
+    --bms-main-100: #69a9e1;
+    --bms-main-75: #8ebee8;
+    --bms-main-50: #b2d2ee;
+    --bms-main-25: #d6e7f5;
+    --bms-main-10: #edf4f9;
+    --bms-green-140: #27731b;
+    --bms-green-100: #57b47d;
+    --bms-green-75: #80c69d;
+    --bms-green-50: #a9d8bc;
+    --bms-green-25: #d3eadc;
+    --bms-green-10: #eff9ee;
+    --bms-orange-140: #90550b;
+    --bms-orange-100: #f08e13;
+    --bms-orange-75: #f3a94f;
+    --bms-orange-50: #f6c788;
+    --bms-orange-25: #f9e1c3;
+    --bms-orange-10: #fbf1e5;
+    --bms-red-140: #7c1212;
+    --bms-red-100: #dc474c;
+    --bms-red-75: #e47478;
+    --bms-red-50: #eca1a4;
+    --bms-red-25: #f4cfd0;
+    --bms-red-10: #f9eaeb;
+
+    --bms-white: #fcfcfc;
+    --bms-background-color: #f6f6f8;
+    --bms-border-radius: 4px;
+    --bms-border-radius-large: 8px;
+    --bms-border-radius-xlarge: 16px;
+    --bms-shadow-color: var(--bms-grey-10);
+
+    --bms-danger-color: var(--bms-red-100);
+    --bms-warning-color: var(--bms-orange-100);
+    --bms-default-color: var(--bms-blue-100);
+    --bms-success-color: var(--bms-green-100);
+    --bms-information-color: var(--bms-grey-100);
+
+    --bms-disabled-color: var(--bms-grey-50);
+    --bms-font-color: var(--bms-grey-100);
+  }
+}

package/src/components/button/BmsAllButtons.stories.js

@@ -0,0 +1,56 @@
+import BmsButton from '@/components/button/BmsButton.vue';
+import BmsIconButton from '@/components/button/BmsIconButton.vue';
+import { Heart } from 'lucide-vue-next';
+
+const types = ['primary', 'secondary', 'tertiary'];
+const modes = ['default', 'danger'];
+
+export default {
+  title: 'Composants/button',
+  component: BmsButton,
+};
+
+const AllButtonsTemplate = () => ({
+  components: {
+    BmsButton,
+    BmsIconButton,
+    Heart,
+  },
+  setup() {
+    return { types, modes };
+  },
+  template: `
+    <div style="display:grid;grid-template-columns:repeat(3, auto); gap:1em; justify-items: start;">
+      <template v-for="mode in modes" :key="mode">
+        <template v-for="type in types">
+          <template v-for="to in [null,'/path']" :key="to">
+            <BmsButton :mode="mode" :type="type" :to="to">
+              Button {{ mode }} {{ type }} {{ to ? ' avec une URL ' : '' }}
+            </BmsButton>
+            <BmsButton :mode="mode" :type="type" class="_hover" :to="to">
+              Button {{ mode }} {{ type }}  {{ to ? ' avec une URL ' : '' }} hovered
+            </BmsButton>
+            <BmsButton :mode="mode" :type="type" disabled :to="to">
+              Button {{ mode }} {{ type }} {{ to ? ' avec une URL ' : '' }} disabled
+            </BmsButton>
+          </template>
+        </template>
+      </template>
+
+      <BmsIconButton v-bind="args" :to="to">
+        <Heart />
+      </BmsIconButton>
+      <BmsIconButton v-bind="args" class="_hover" :to="to">
+        <Heart />
+      </BmsIconButton>
+      <BmsIconButton v-bind="args" disabled>
+        <Heart />
+      </BmsIconButton>
+      <BmsIconButton v-bind="args" disabled :to="to">
+        <Heart />
+      </BmsIconButton>
+    </div>
+  `,
+});
+
+export const AllButtons = AllButtonsTemplate.bind({});

package/src/components/button/BmsButton.spec.ts

@@ -0,0 +1,37 @@
+import BmsButton from '@/components/button/BmsButton.vue';
+import { mount, shallowMount } from '@vue/test-utils';
+
+describe('BmsButton', () => {
+  it('should mount component correctly', async () => {
+    const wrapper = mount(BmsButton, {
+      slots: {
+        default: 'Hello world!',
+      },
+    } as any);
+
+    expect(wrapper.text()).toContain('Hello world!');
+  });
+
+  describe('component tag behavior', () => {
+    it('should be a correct link when to pass', () => {
+      const wrapper = shallowMount(BmsButton, {
+        props: {
+          to: '/foo',
+        },
+      });
+
+      expect(() => wrapper.get('button[type]')).toThrowError();
+      expect(wrapper.find('router-link')).toBeTruthy();
+    });
+
+    it('should have type when its a button', () => {
+      const wrapper = mount(BmsButton, {
+        props: {
+          submit: true,
+        },
+      });
+
+      expect(wrapper.get('button[type="submit"]')).toBeTruthy();
+    });
+  });
+});

package/src/components/button/BmsButton.stories.js

@@ -0,0 +1,84 @@
+import BmsButton from '@/components/button/BmsButton.vue';
+import { ArrowLeft, ArrowRight, Camera, Heart, Wand } from 'lucide-vue-next';
+import { StatusType } from '@/models';
+
+export default {
+  title: 'Composants/button/Button',
+  component: BmsButton,
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'tertiary'],
+    },
+    mode: {
+      control: { type: 'select' },
+      options: [StatusType.Default, StatusType.Danger],
+    },
+    submit: {
+      control: { type: 'boolean' },
+    },
+    to: { control: { type: 'text' } },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BmsButton,
+    ArrowRight,
+    ArrowLeft,
+    Camera,
+    Heart,
+    Wand,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsButton v-bind="args">Save me</BmsButton>
+    <br>
+    <br>
+    <BmsButton v-bind="args">
+      Next page
+      <template #end><ArrowRight /></template>
+    </BmsButton>
+    <br>
+    <br>
+    <BmsButton  v-bind="args">
+      <template #start>
+        <Heart/>
+      </template>
+      Icons left & right
+      <template #end> 
+        <Wand/>
+      </template>
+      </BmsButton>
+      <br>
+      <br>
+    <BmsButton v-bind="args">
+    <template #start><ArrowLeft /></template>
+    Retour
+    </BmsButton>
+    <br>
+  `,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  type: 'primary',
+};
+
+export const PrimaryDanger = Template.bind({});
+PrimaryDanger.args = {
+  type: 'primary',
+  mode: StatusType.Danger,
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  type: 'secondary',
+};
+
+export const Tertiary = Template.bind({});
+Tertiary.args = {
+  type: 'tertiary',
+};

package/src/components/button/BmsButton.vue

@@ -0,0 +1,50 @@
+<template>
+  <UiButton
+    :mode="uiMode"
+    :color="mode"
+    :to="to"
+    :type="submit ? 'submit' : 'button'"
+  >
+    <template #start>
+      <slot name="start"> </slot>
+    </template>
+    <slot></slot>
+    <template #end>
+      <slot name="end"> </slot>
+    </template>
+  </UiButton>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import UiButton from './UiButton.vue';
+import { RouteLocationRaw } from 'vue-router';
+import { StatusType } from '@/models/status-type.model';
+
+interface Props {
+  type?: 'primary' | 'secondary' | 'tertiary';
+  to?: RouteLocationRaw | null;
+  mode?: StatusType.Danger | StatusType.Default;
+  submit?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  to: null,
+  mode: StatusType.Default,
+  submit: false,
+});
+
+const uiMode = computed(() => {
+  switch (props.type) {
+    case 'primary':
+      return 'fill';
+    case 'secondary':
+      return 'outline';
+    case 'tertiary':
+      return 'ghost';
+    default:
+      return 'fill';
+  }
+});
+</script>