@guillaumemmm/marquedefabrique 1.0.6 → 2.0.0

package/build/kit.js

@@ -1,326 +0,0 @@
-// Generated on Sat Aug 09 2025 from v1.0.5
-
-export const kit = `/* TITLES */
-.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;
-}
-
-/* TEXT */
-.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-info {
-    background-color: var(--mdf-color-info-transparent);
-    border-color: var(--mdf-color-info);
-  }
-
-  &.mdf-block-error {
-    background-color: var(--mdf-color-error-transparent);
-    border-color: var(--mdf-color-error);
-  }
-
-  &.mdf-block-success {
-    background-color: var(--mdf-color-success-transparent);
-    border-color: var(--mdf-color-success);
-  }
-}
-
-/* CTA */
-.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));
-
-  &:hover {
-    background-color: var(--mdf-color-primary-transparent-2);
-  }
-
-  &: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: 0.5rem 1.5rem;
-  line-height: 1.5rem;
-  background-color: var(--mdf-color-primary-light);
-  color: white;
-  text-decoration: none;
-  border-radius: 3px;
-  border: 2px solid var(--mdf-color-primary-light);
-  font-size: 1rem;
-
-  &:hover {
-    background-color: var(--mdf-color-primary);
-  }
-
-  &.mdf-button-secondary {
-    background-color: var(--mdf-color-secondary-light);
-    border-color: var(--mdf-color-secondary-light);
-
-    &:hover {
-      background-color: var(--mdf-color-secondary);
-    }
-  }
-
-  &.mdf-button-tertiary {
-    background-color: var(--mdf-color-tertiary-light);
-    border-color: var(--mdf-color-tertiary-light);
-
-    &:hover {
-      background-color: var(--mdf-color-tertiary);
-    }
-  }
-}
-
-/* FORM */
-.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: 0.375rem 2.25rem 0.375rem 0.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 0.75rem center;
-  background-size: 16px 12px;
-  border: 2px solid var(--mdf-color-primary);
-  border-radius: 0.25rem;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  font-size: 1rem;
-  color: black;
-  width: 250px;
-
-  &:hover,
-  &: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: 0.25rem;
-  font-size: 16px;
-  padding: 0.375rem 0.75rem;
-  line-height: 1.5rem;
-  background-color: var(--mdf-color-primary-transparent);
-  width: 250px;
-
-  &:hover,
-  &: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: 0.5em;
-  cursor: pointer;
-}
-
-.mdf-checkbox {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
-  width: 1.4em;
-  height: 1.4em;
-  border: 0.15em solid var(--mdf-color-primary);
-  border-radius: 0.25rem;
-  padding: 0;
-  cursor: pointer;
-
-  display: grid;
-  place-content: center;
-
-  &:hover,
-  &:focus {
-    background-color: var(--mdf-color-primary-transparent-2);
-  }
-}
-
-.mdf-checkbox::before {
-  content: "";
-  width: 0.8em;
-  height: 0.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;
-
-  &::before {
-    box-shadow: inset 1em 1em var(--mdf-color-primary);
-  }
-}
-
-.mdf-color-control {
-  display: flex;
-  flex-direction: column;
-  width: 8rem;
-}
-
-.mdf-color-label {
-  padding: 0.5rem;
-  background-color: white;
-  border-bottom-left-radius: 0.25rem;
-  border-bottom-right-radius: 0.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;
-
-  &:focus {
-    border-radius: 0.25rem;
-  }
-
-  &::-webkit-color-swatch {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border: 2px solid black;
-  }
-
-  &::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-}
-
-/* TABLES */
-.mdf-td,
-.mdf-th {
-  padding: 0.5rem;
-  border: 1px solid var(--mdf-color-secondary);
-}
-
-.mdf-th,
-:nth-child(even) > .mdf-td {
-  background-color: var(--mdf-color-secondary-transparent);
-}
-
-/* UTILITIES */
-.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;
-}
-`;

package/build/variables.js

@@ -1,33 +0,0 @@
-// Generated on Sat Aug 09 2025 from v1.0.5
-
-export const variables = `: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%
-  );
-}
-`;

package/index.css

@@ -1,3 +0,0 @@
-@import "./reset.css";
-@import "./variables.css";
-@import "./kit.css";

package/index.html

@@ -1,223 +0,0 @@
-<!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="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>
-        <h2 class="mdf-title2">Marque de fabrique</h2>
-        <h3 class="mdf-title3">Marque de fabrique</h3>
-        <h3 class="mdf-title4">Marque de fabrique</h3>
-        <p>Marque de fabrique</p>
-        <p>Marque de <span class="mdf-highlighted">fabrique</span></p>
-        <div><em class="mdf-emphasis">Marque de fabrique</em></div>
-        <div><i class="mdf-italic">Marque de fabrique</i></div>
-        <div><em class="mdf-muted">Marque de fabrique</em></div>
-        <div><a class="mdf-link" href="#">Marque de fabrique</a></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>
-          <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 class="mdf-button" type="button">Marque de fabrique</button>
-        </div>
-        <div>
-          <button class="mdf-button mdf-button-secondary" type="button">
-            Marque de fabrique
-          </button>
-        </div>
-        <div>
-          <button class="mdf-button mdf-button-tertiary" type="button">
-            Marque de fabrique
-          </button>
-        </div>
-        <div>
-          <label class="mdf-input-control" for="text-input">
-            Marque de fabrique
-            <input type="text" class="mdf-input" id="text-input" />
-          </label>
-        </div>
-        <div>
-          <label for="textinput" class="mdf-textarea-control">
-            Marque de fabrique
-            <textarea
-              type="text"
-              class="mdf-textarea"
-              id="textinput"
-            ></textarea>
-          </label>
-        </div>
-        <div>
-          <label class="mdf-select-control" for="select">
-            Marque de fabrique
-            <select class="mdf-select" id="select">
-              <option>Marque de fabrique 1</option>
-              <option>Marque de fabrique 2</option>
-              <option>Marque de fabrique 3</option>
-            </select>
-          </label>
-        </div>
-        <div>
-          <label for="checkbox" class="mdf-checkbox-control">
-            <input type="checkbox" id="checkbox" class="mdf-checkbox" />
-            Marque de fabrique</label
-          >
-        </div>
-        <div>
-          <label for="color" class="mdf-color-control">
-            <input type="color" id="color" class="mdf-color" value="#048275" />
-            <span class="mdf-color-label">Marque de fabrique</span>
-          </label>
-        </div>
-        <div class="colors">
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-primary)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-primary-light)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-primary-transparent)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-primary-transparent-2)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-secondary)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-secondary-light)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-secondary-transparent)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-secondary-transparent-2)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-tertiary)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-tertiary-light)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-tertiary-transparent)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-tertiary-transparent-2)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-error)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-info)"
-          ></div>
-          <div
-            class="color"
-            style="background-color: var(--mdf-color-success)"
-          ></div>
-        </div>
-        <p class="mdf-block">Marque de fabrique</p>
-        <p class="mdf-block mdf-block-info">Marque de fabrique</p>
-        <p class="mdf-block mdf-block-success">Marque de fabrique</p>
-        <p class="mdf-block mdf-block-error">Marque de fabrique</p>
-      </div>
-    </main>
-    <footer class="footer">
-      <p>v1.0.5</p>
-    </footer>
-  </body>
-</html>

package/index.js

@@ -1,20 +0,0 @@
-const fs = require("fs");
-const pjson = require("./package.json");
-
-const comment = `// Generated on ${new Date().toDateString()} from v${
-  pjson.version
-}\n\n`;
-
-const kit = fs.readFileSync("./kit.css", "utf8");
-const variables = fs.readFileSync("./variables.css", "utf8");
-const reset = fs.readFileSync("./reset.css", "utf8");
-
-fs.writeFileSync("build/kit.js", `${comment}export const kit = \`${kit}\`;`);
-fs.writeFileSync(
-  "build/variables.js",
-  `${comment}export const variables = \`${variables}\`;`
-);
-fs.writeFileSync(
-  "build/reset.js",
-  `${comment}export const reset = \`${reset}\`;`
-);