@guillaumemmm/marquedefabrique 1.0.5 → 2.0.0

package/.prettierrc

@@ -0,0 +1 @@
+{}

package/README.md

@@ -3,3 +3,19 @@
 Marque de Fabrique is a minimalistic UI kit. It includes a set of core styles and CSS variables centralizing design elements to maintain consistency across my projects.
 
 A demo for the use of the styles is [available here](https://guillaume-marquedefabrique.web.val.run/).
+
+## Building & Testing
+
+To build a new version:
+
+```
+npm install
+npm run build
+```
+
+To run the local examples:
+
+```
+npm install
+npm run dev
+```

package/{variables.css → dist/css/variables.css}

@@ -11,8 +11,8 @@
 
   --mdf-color-tertiary: #482c68;
   --mdf-color-tertiary-light: #805bab;
-  --mdf-color-tertiary-transparent: #482c6827;
-  --mdf-color-tertiary-transparent-2: #482c687a;
+  --mdf-color-tertiary-transparent: #7e6d9127;
+  --mdf-color-tertiary-transparent-2: #7e6d917a;
 
   --mdf-color-error: #a43030;
   --mdf-color-error-transparent: #a4303027;

package/dist/js/kit.js

@@ -0,0 +1,6 @@
+const r = `.mdf-title1,.mdf-title2,.mdf-title3,.mdf-title4{font-weight:700}.mdf-title1{font-size:3rem}.mdf-title2{font-size:2.4rem}.mdf-title3{font-size:1.7rem}.mdf-title4{font-size:1.2rem}.mdf-emphasis{font-weight:700}.mdf-italic{font-style:italic}.mdf-highlighted{font-weight:700;color:var(--mdf-color-primary)}.mdf-muted{color:var(--mdf-color-text-muted)}.mdf-block{padding:1rem;background-color:var(--mdf-color-secondary-transparent);border-radius:3px;border:2px solid var(--mdf-color-secondary-transparent-2)}.mdf-block.mdf-block-info{background-color:var(--mdf-color-info-transparent);border-color:var(--mdf-color-info)}.mdf-block.mdf-block-error{background-color:var(--mdf-color-error-transparent);border-color:var(--mdf-color-error)}.mdf-block.mdf-block-success{background-color:var(--mdf-color-success-transparent);border-color:var(--mdf-color-success)}.mdf-link{color:var(--mdf-color-primary);background-color:var(--mdf-color-primary-transparent);padding:1px 2px;border-radius:3px;text-underline-offset:2px;text-decoration-color:hsl(from var(--mdf-color-primary) h s calc(l + 10))}.mdf-link:hover{background-color:var(--mdf-color-primary-transparent-2)}.mdf-link:visited{color:var(--mdf-color-secondary);background-color:var(--mdf-color-primary-transparent);text-decoration-color:hsl(from var(--mdf-color-secondary) h s calc(l + 10))}.mdf-link:focus-visible,.mdf-button:focus-visible{outline:2px solid var(--mdf-color-primary);outline-offset:3px}.mdf-button{border:none;background:none;cursor:pointer;display:flex;align-items:center;padding:.5rem 1.5rem;line-height:1.5rem;background-color:var(--mdf-color-primary-light);color:#fff;text-decoration:none;border-radius:3px;border:2px solid var(--mdf-color-primary-light);font-size:1rem}.mdf-button:hover{background-color:var(--mdf-color-primary)}.mdf-button.mdf-button-secondary{background-color:var(--mdf-color-secondary-light);border-color:var(--mdf-color-secondary-light)}.mdf-button.mdf-button-secondary:hover{background-color:var(--mdf-color-secondary)}.mdf-button.mdf-button-tertiary{background-color:var(--mdf-color-tertiary-light);border-color:var(--mdf-color-tertiary-light)}.mdf-button.mdf-button-tertiary:hover{background-color:var(--mdf-color-tertiary)}.mdf-input:focus-visible,.mdf-textarea:focus-visible,.mdf-color:focus-visible,.mdf-select:focus-visible{outline:2px solid var(--mdf-color-primary);outline-offset:3px}.mdf-select-control{display:inline-flex;flex-direction:column}.mdf-select{display:block;cursor:pointer;padding:.375rem 2.25rem .375rem .75rem;line-height:1.5rem;background-color:var(--mdf-color-primary-transparent);background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:2px solid var(--mdf-color-primary);border-radius:.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:1rem;color:#000;width:250px}.mdf-select:hover,.mdf-select:focus{background-color:var(--mdf-color-primary-transparent-2)}.mdf-select:hover{background-color:var(--mdf-color-primary-transparent-2)}.mdf-input-control,.mdf-textarea-control{display:inline-flex;flex-direction:column}.mdf-input[type=text],.mdf-input[type=search],.mdf-input[type=password],.mdf-textarea{border:2px solid var(--mdf-color-primary);border-radius:.25rem;font-size:16px;padding:.375rem .75rem;line-height:1.5rem;background-color:var(--mdf-color-primary-transparent);width:250px}:is(.mdf-input[type=text],.mdf-input[type=search],.mdf-input[type=password],.mdf-textarea):hover,:is(.mdf-input[type=text],.mdf-input[type=search],.mdf-input[type=password],.mdf-textarea):focus{background-color:var(--mdf-color-primary-transparent-2)}.mdf-textarea{width:320px;height:150px}.mdf-checkbox-control{font-size:1rem;display:flex;align-items:center;gap:.5em;cursor:pointer}.mdf-checkbox{-webkit-appearance:none;appearance:none;margin:0;width:1.4em;height:1.4em;border:.15em solid var(--mdf-color-primary);border-radius:.25rem;padding:0;cursor:pointer;display:grid;place-content:center}.mdf-checkbox:hover,.mdf-checkbox:focus{background-color:var(--mdf-color-primary-transparent-2)}.mdf-checkbox:before{content:"";width:.8em;height:.8em;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transform:scale(0);transform-origin:bottom left;box-shadow:inset 1em 1em var(--mdf-color-primary);background-color:CanvasText}.mdf-checkbox:checked:before{transform:scale(1)}.mdf-checkbox:focus-visible{border:2px solid var(--mdf-color-primary);outline:2px solid var(--mdf-color-primary);outline-offset:3px}.mdf-checkbox:focus-visible:before{box-shadow:inset 1em 1em var(--mdf-color-primary)}.mdf-color-control{display:flex;flex-direction:column;width:8rem}.mdf-color-label{padding:.5rem;background-color:#fff;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.mdf-color{appearance:none;-moz-appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;padding:0;width:100%;height:4rem;position:relative;z-index:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.mdf-color:focus{border-radius:.25rem}.mdf-color::-webkit-color-swatch{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-left-radius:0;border-bottom-right-radius:0;border:2px solid black}.mdf-color::-webkit-color-swatch-wrapper{padding:0}.mdf-td,.mdf-th{padding:.5rem;border:1px solid var(--mdf-color-secondary)}.mdf-th,:nth-child(2n)>.mdf-td{background-color:var(--mdf-color-secondary-transparent)}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}`, o = ":root{--mdf-color-primary: #04675d;--mdf-color-primary-light: #048275;--mdf-color-primary-transparent: #bcecce3b;--mdf-color-primary-transparent-2: #bcecce7a;--mdf-color-secondary: #534534;--mdf-color-secondary-light: #806b53;--mdf-color-secondary-transparent: #b1a49527;--mdf-color-secondary-transparent-2: #b1a4957a;--mdf-color-tertiary: #482c68;--mdf-color-tertiary-light: #805bab;--mdf-color-tertiary-transparent: #7e6d9127;--mdf-color-tertiary-transparent-2: #7e6d917a;--mdf-color-error: #a43030;--mdf-color-error-transparent: #a4303027;--mdf-color-info: #167792;--mdf-color-info-transparent: #16779227;--mdf-color-success: #3c843f;--mdf-color-success-transparent: #3c843f27;--mdf-color-text-muted: #595959;--mdf-background-gradient: linear-gradient( 121deg, var(--mdf-color-secondary-transparent), var(--mdf-color-tertiary-transparent) 100% )}", e = '@layer reset{*{box-sizing:border-box}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}}';
+export {
+  r as kitCss,
+  e as resetCss,
+  o as variablesCss
+};

package/examples/index.html

@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Minimalistic UI kit that includes a set of core styles and CSS
+    variables centralizing design elements to maintain consistency across
+    personal projects"
+    />
+    <title>Marque de fabrique</title>
+    <link href="./styles.css" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E🥞%3C/text%3E%3C/svg%3E"
+    />
+  </head>
+  <body>
+    <main>
+      <div class="content">
+        <h1 class="mdf-title1">Marque de fabrique</h1>
+
+        <p class="mdf-block" lang="en">
+          <span class="mdf-emphasis" lang="fr">Marque de Fabrique</span> is a
+          minimalistic UI kit. It includes a set of core styles and CSS
+          variables centralizing design elements to maintain consistency across
+          personal projects. The code for the kit is
+          <a
+            class="mdf-link"
+            href="https://github.com/GuillaumeMMM/marquedefabrique"
+            >available here</a
+          >.
+        </p>
+
+        <!-- TYPO -->
+        <div class="block">
+          <h2 class="mdf-title2">Typography</h2>
+
+          <h3 class="mdf-title3">Marque de fabrique title 3</h3>
+          <h4 class="mdf-title4">Marque de fabrique title 4</h4>
+          <p>Marque de fabrique</p>
+          <p>
+            Marque de <span class="mdf-highlighted">fabrique highlighted</span>
+          </p>
+          <p>
+            Marque de
+            <span class="mdf-highlighted mdf-highlighted-secondary"
+              >fabrique highlighted secondary</span
+            >
+          </p>
+          <div><em class="mdf-emphasis">Marque de fabrique emphasis</em></div>
+          <div><i class="mdf-italic">Marque de fabrique italic</i></div>
+          <div><em class="mdf-muted">Marque de fabrique muted</em></div>
+          <p>
+            Une <span class="mdf-highlighted">manufacture</span> (du latin
+            <span class="mdf-italic">manufactura</span>, « fait à la main ») est
+            un lieu de fabrication dans lequel des produits sont à l'origine
+            fabriqués à la main par des ouvriers et qui sert à désigner
+            aujourd'hui une entreprise dans laquelle les biens sont produits
+            directement ou indirectement (robotisation) par l'homme. Le terme
+            est aujourd'hui particulièrement utilisé dans l'industrie horlogère
+            pour désigner les entreprises, à l'image des marques des groupes
+            Rolex, Seiko, Swatch et Citizen ou encore de la division horlogerie
+            de Cartier, qui fabriquent elles-mêmes leurs propres mouvements,
+            afin de les différencier de celles qui sous-traitent partiellement
+            ou intégralement cette fabrication.
+          </p>
+        </div>
+
+        <!-- BADGE -->
+        <div class="block">
+          <h2 class="mdf-title2">Badge</h2>
+          <div>
+            <span class="mdf-badge">Marque de fabrique</span>&nbsp;&nbsp;<span
+              class="mdf-badge"
+              >HTML</span
+            >&nbsp;&nbsp;<span class="mdf-badge">manufacture</span>
+          </div>
+        </div>
+
+        <!-- LINK -->
+        <div class="block">
+          <h2 class="mdf-title2">Link</h2>
+          <div><a class="mdf-link" href="#">Marque de fabrique link</a></div>
+          <div>
+            <a class="mdf-link" href="#" target="_blank"
+              >Marque de fabrique
+              <svg
+                width="0.8rem"
+                height="0.8rem"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                aria-label="New tab"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4.343 15.657L15.657 4.343m0 0v9.9m0-9.9h-9.9"
+                />
+              </svg>
+            </a>
+          </div>
+          <div>
+            <a
+              class="mdf-link"
+              href="https://github.com/GuillaumeMMM/marquedefabrique"
+              >Marque de fabrique <span lang="en">on github</span>
+              <svg
+                width="1rem"
+                height="1rem"
+                xmlns="http://www.w3.org/2000/svg"
+                viewbox="0 0 100 100"
+                aria-hidden="true"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+                  fill="#24292f"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+
+        <!-- BUTTON -->
+        <div class="block">
+          <h2 class="mdf-title2">Button</h2>
+          <div>
+            <div class="mdf-button-container">
+              <button class="mdf-button" type="button">
+                <span class="mdf-button-content">Marque de fabrique</span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- FORM -->
+        <div class="block">
+          <h2 class="mdf-title2">Form</h2>
+          <label for="text-input" class="mdf-input">
+            <div class="mdf-input-label">Marque de fabrique text input</div>
+            <input type="text" class="mdf-input-field" id="text-input" />
+          </label>
+
+          <label for="textarea" class="mdf-textarea">
+            <div class="mdf-textarea-label">Marque de fabrique textarea</div>
+            <textarea
+              type="text"
+              class="mdf-textarea-field"
+              id="textarea"
+            ></textarea>
+          </label>
+
+          <label for="select" class="mdf-select">
+            <div class="mdf-select-label">Marque de fabrique select</div>
+            <select class="mdf-select-field" id="select">
+              <option>Marque de fabrique 1</option>
+              <option>Marque de fabrique 2</option>
+              <option>Marque de fabrique 3</option>
+            </select>
+          </label>
+
+          <label for="checkbox" class="mdf-checkbox">
+            <input type="checkbox" id="checkbox" class="mdf-checkbox-field" />
+            <div class="mdf-checkbox-label">
+              Marque de fabrique checkbox
+            </div></label
+          >
+
+          <div style="max-width: 200px">
+            <label for="color" class="mdf-color">
+              <input
+                type="color"
+                id="color"
+                class="mdf-color-field"
+                value="#0063c0"
+              />
+              <span class="mdf-color-label"
+                >Marque de fabrique color input</span
+              >
+            </label>
+          </div>
+        </div>
+
+        <!-- BLOCKS -->
+        <div class="block">
+          <h2 class="mdf-title2">Block</h2>
+
+          <p class="mdf-block">Marque de fabrique default</p>
+          <p class="mdf-block mdf-block-brand-primary">
+            Marque de fabrique brand primary
+          </p>
+          <p class="mdf-block mdf-block-brand-secondary">
+            Marque de fabrique brand secondary
+          </p>
+          <p class="mdf-block mdf-block-success">Marque de fabrique success</p>
+          <p class="mdf-block mdf-block-warning">Marque de fabrique warning</p>
+          <p class="mdf-block mdf-block-error">Marque de fabrique error</p>
+        </div>
+
+        <!-- TABLE -->
+        <div class="block">
+          <h2 class="mdf-title2">Table</h2>
+
+          <table class="mdf-table">
+            <thead>
+              <tr>
+                <th class="mdf-th">Column 1</th>
+                <th class="mdf-th">Column 2</th>
+                <th class="mdf-th">Column 3</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="mdf-td">Value 1 1</td>
+                <td class="mdf-td">Value 1 2</td>
+                <td class="mdf-td">Value 1 3</td>
+              </tr>
+              <tr>
+                <td class="mdf-td">Value 2 1</td>
+                <td class="mdf-td">Value 2 2</td>
+                <td class="mdf-td">Value 2 3</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- CODE -->
+        <div class="block">
+          <h2 class="mdf-title2">Code</h2>
+          <p lang="en">
+            The <span class="mdf-code-inline">for...of</span> statement executes
+            a loop that operates on a sequence of values sourced from an
+            iterable object. Iterable objects include instances of built-ins
+            such as <span class="mdf-code-inline">Array</span>,
+            <span class="mdf-code-inline">String</span>,
+            <span class="mdf-code-inline">TypedArray</span>,
+            <span class="mdf-code-inline">Map</span>,
+            <span class="mdf-code-inline">Set</span>,
+            <span class="mdf-code-inline">NodeList</span> (and other DOM
+            collections).
+          </p>
+
+          <div>
+            <pre class="mdf-code-block"><code>function* idMaker() {
+  let index = 0;
+  while (true) {
+    yield index++;
+  }
+}</code></pre>
+          </div>
+        </div>
+
+        <!-- QUOTES -->
+        <div class="block">
+          <h2 class="mdf-title2">Quote</h2>
+          <div class="mdf-quote">
+            <blockquote
+              cite="https://shs.cairn.info/contre-histoire-dinternet--9782748905274?lang=fr"
+            >
+              "Le contrôle de l’espace public – notamment médiatique – s’appuie
+              sur des stratégies multiséculaires sans cesse renouvelées : de la
+              naissance de l’imprimerie à Internet, les stratégies de censure,
+              de surveillance et de propagande ont été transformées pour
+              parvenir à domestiquer toute contestation."
+            </blockquote>
+            <p class="mdf-quote-source">
+              Contre-histoire d’Internet du XVe siècle à nos jours
+            </p>
+          </div>
+        </div>
+
+        <!-- COLORS -->
+        <div class="block">
+          <h2 class="mdf-title2">Color</h2>
+          <div class="colors">
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-grey-100)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-grey-200)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-grey-300)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-grey-400)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-grey-500)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-grey-600)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-grey-700)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-grey-800)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-grey-900)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-grey-1000)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-blue-100)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-blue-500)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-blue-900)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-purple-100)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-purple-500)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-purple-900)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-green-100)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-green-500)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-green-900)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-red-100)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-red-500)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-red-900)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-yellow-100)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-yellow-500)"
+            ></div>
+            <div
+              class="color"
+              style="background-color: var(--mdf-color-yellow-900)"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer class="footer">
+      <p>v2.0.0</p>
+    </footer>
+  </body>
+</html>

package/{styles.css → examples/styles.css}

@@ -1,16 +1,17 @@
-@import "./reset.css" layer(reset);
-@import "./kit.css";
-@import "./variables.css";
+@import "../src/reset.css" layer(reset);
+@import "../src/kit.css";
+@import "../src/variables.css";
 
 body {
-  font-family: "Open Sans", "system-ui", sans-serif;
-  font-weight: 500;
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
   font-style: normal;
+
   line-height: 1.5;
   padding: 1rem;
   min-height: 100vh;
-  background: white;
-  background: var(--mdf-background-gradient);
+  background-color: var(--mdf-color-background-primary);
 
   main {
     max-width: 900px;
@@ -20,6 +21,12 @@ body {
       display: flex;
       flex-direction: column;
       gap: 1rem;
+
+      .block {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
     }
 
     .colors {
@@ -39,4 +46,4 @@ body {
     margin-top: 2rem;
     padding: 1rem;
   }
-}
+}

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@guillaumemmm/marquedefabrique",
-  "version": "1.0.5",
+  "version": "2.0.0",
   "description": "Marque de Fabrique is a minimalistic UI kit. It includes a set of core styles and CSS variables centralizing design elements to maintain consistency across personal projects.",
   "main": "index.css",
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "node index.js"
+    "dev": "cd examples && vite",
+    "build": "vite build"
   },
   "repository": {
     "type": "git",
@@ -16,5 +18,9 @@
   "bugs": {
     "url": "https://github.com/GuillaumeMMM/marquedefabrique/issues"
   },
-  "homepage": "https://github.com/GuillaumeMMM/marquedefabrique#readme"
+  "homepage": "https://github.com/GuillaumeMMM/marquedefabrique#readme",
+  "devDependencies": {
+    "vite": "^7.3.0",
+    "vite-plugin-static-copy": "^3.1.4"
+  }
 }

package/src/index.js

@@ -0,0 +1,5 @@
+import kitCss from './kit.css?inline';
+import variablesCss from './variables.css?inline';
+import resetCss from './reset.css?inline';
+
+export { kitCss, variablesCss, resetCss };