@guillaumemmm/marquedefabrique 1.0.1 → 1.0.2

package/build/kit.js

@@ -0,0 +1,317 @@
+// Generated on Fri Mar 07 2025 from v1.0.2
+
+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;
+
+  &:hover {
+    background-color: var(--mdf-color-primary-transparent-2);
+  }
+
+  &:visited {
+    color: var(--mdf-color-secondary);
+    background-color: var(--mdf-color-primary-transparent);
+  }
+}
+
+.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;
+
+  &:focus {
+    border-radius: 0.25rem;
+  }
+
+  &::-webkit-color-swatch {
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+    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/reset.js

@@ -0,0 +1,133 @@
+// Generated on Fri Mar 07 2025 from v1.0.2
+
+export const reset = `@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;
+  }
+}
+`;

package/build/variables.js

@@ -0,0 +1,33 @@
+// Generated on Fri Mar 07 2025 from v1.0.2
+
+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: #482c6827;
+  --mdf-color-tertiary-transparent-2: #482c687a;
+
+  --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.js

@@ -0,0 +1,20 @@
+const fs = require("fs");
+var 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}\`;`
+);

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@guillaumemmm/marquedefabrique",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "node index.js"
   },
   "repository": {
     "type": "git",