piloti 1.0.0

package/src/0-gen-settings/utilities.css

@@ -0,0 +1,218 @@
+/* ============================================
+   Utility Classes - Auto-generated
+   Config: config.json
+   ============================================ */
+
+/* margin */
+.m-0 { margin: var(--spacing-0); }
+.m-1 { margin: var(--spacing-1); }
+.m-2 { margin: var(--spacing-2); }
+.m-3 { margin: var(--spacing-3); }
+.m-4 { margin: var(--spacing-4); }
+.m-6 { margin: var(--spacing-6); }
+.m-8 { margin: var(--spacing-8); }
+
+/* margin-top */
+.mt-0 { margin-top: var(--spacing-0); }
+.mt-1 { margin-top: var(--spacing-1); }
+.mt-2 { margin-top: var(--spacing-2); }
+.mt-4 { margin-top: var(--spacing-4); }
+.mt-8 { margin-top: var(--spacing-8); }
+
+/* margin-bottom */
+.mb-0 { margin-bottom: var(--spacing-0); }
+.mb-1 { margin-bottom: var(--spacing-1); }
+.mb-2 { margin-bottom: var(--spacing-2); }
+.mb-4 { margin-bottom: var(--spacing-4); }
+.mb-8 { margin-bottom: var(--spacing-8); }
+
+/* margin-left */
+.ml-0 { margin-left: var(--spacing-0); }
+.ml-1 { margin-left: var(--spacing-1); }
+.ml-2 { margin-left: var(--spacing-2); }
+.ml-4 { margin-left: var(--spacing-4); }
+.ml-8 { margin-left: var(--spacing-8); }
+
+/* margin-right */
+.mr-0 { margin-right: var(--spacing-0); }
+.mr-1 { margin-right: var(--spacing-1); }
+.mr-2 { margin-right: var(--spacing-2); }
+.mr-4 { margin-right: var(--spacing-4); }
+.mr-8 { margin-right: var(--spacing-8); }
+
+/* margin-inline */
+.mx-0 { margin-inline: var(--spacing-0); }
+.mx-2 { margin-inline: var(--spacing-2); }
+.mx-4 { margin-inline: var(--spacing-4); }
+.mx-8 { margin-inline: var(--spacing-8); }
+
+/* margin-block */
+.my-0 { margin-block: var(--spacing-0); }
+.my-2 { margin-block: var(--spacing-2); }
+.my-4 { margin-block: var(--spacing-4); }
+.my-8 { margin-block: var(--spacing-8); }
+
+/* padding */
+.p-0 { padding: var(--spacing-0); }
+.p-1 { padding: var(--spacing-1); }
+.p-2 { padding: var(--spacing-2); }
+.p-3 { padding: var(--spacing-3); }
+.p-4 { padding: var(--spacing-4); }
+.p-6 { padding: var(--spacing-6); }
+.p-8 { padding: var(--spacing-8); }
+
+/* padding-top */
+.pt-0 { padding-top: var(--spacing-0); }
+.pt-1 { padding-top: var(--spacing-1); }
+.pt-2 { padding-top: var(--spacing-2); }
+.pt-4 { padding-top: var(--spacing-4); }
+.pt-8 { padding-top: var(--spacing-8); }
+
+/* padding-bottom */
+.pb-0 { padding-bottom: var(--spacing-0); }
+.pb-1 { padding-bottom: var(--spacing-1); }
+.pb-2 { padding-bottom: var(--spacing-2); }
+.pb-4 { padding-bottom: var(--spacing-4); }
+.pb-8 { padding-bottom: var(--spacing-8); }
+
+/* padding-left */
+.pl-0 { padding-left: var(--spacing-0); }
+.pl-1 { padding-left: var(--spacing-1); }
+.pl-2 { padding-left: var(--spacing-2); }
+.pl-4 { padding-left: var(--spacing-4); }
+.pl-8 { padding-left: var(--spacing-8); }
+
+/* padding-right */
+.pr-0 { padding-right: var(--spacing-0); }
+.pr-1 { padding-right: var(--spacing-1); }
+.pr-2 { padding-right: var(--spacing-2); }
+.pr-4 { padding-right: var(--spacing-4); }
+.pr-8 { padding-right: var(--spacing-8); }
+
+/* padding-inline */
+.px-0 { padding-inline: var(--spacing-0); }
+.px-2 { padding-inline: var(--spacing-2); }
+.px-4 { padding-inline: var(--spacing-4); }
+.px-8 { padding-inline: var(--spacing-8); }
+
+/* padding-block */
+.py-0 { padding-block: var(--spacing-0); }
+.py-2 { padding-block: var(--spacing-2); }
+.py-4 { padding-block: var(--spacing-4); }
+.py-8 { padding-block: var(--spacing-8); }
+
+/* gap */
+.gap-0 { gap: var(--spacing-0); }
+.gap-1 { gap: var(--spacing-1); }
+.gap-2 { gap: var(--spacing-2); }
+.gap-3 { gap: var(--spacing-3); }
+.gap-4 { gap: var(--spacing-4); }
+.gap-6 { gap: var(--spacing-6); }
+.gap-8 { gap: var(--spacing-8); }
+
+/* color */
+.text-primary { color: var(--color-primary); }
+.text-secondary { color: var(--color-secondary); }
+.text-accent { color: var(--color-accent); }
+.text-dark { color: var(--color-dark); }
+.text-light { color: var(--color-light); }
+
+/* background-color */
+.bg-primary { background-color: var(--color-primary); }
+.bg-secondary { background-color: var(--color-secondary); }
+.bg-accent { background-color: var(--color-accent); }
+.bg-dark { background-color: var(--color-dark); }
+.bg-light { background-color: var(--color-light); }
+
+/* border-radius */
+.rounded-sm { border-radius: var(--radius-sm); }
+.rounded-md { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-full { border-radius: var(--radius-full); }
+
+/* font-size */
+.font-sm { font-size: var(--fontSize-sm); }
+.font-base { font-size: var(--fontSize-base); }
+.font-xl { font-size: var(--fontSize-xl); }
+.font-2xl { font-size: var(--fontSize-2xl); }
+.font-3xl { font-size: var(--fontSize-3xl); }
+.font-4xl { font-size: var(--fontSize-4xl); }
+
+/* line-height */
+.leading-none { line-height: var(--lineHeight-none); }
+.leading-tight { line-height: var(--lineHeight-tight); }
+.leading-normal { line-height: var(--lineHeight-normal); }
+.leading-relaxed { line-height: var(--lineHeight-relaxed); }
+.leading-loose { line-height: var(--lineHeight-loose); }
+
+/* box-shadow */
+.shadow-sm { box-shadow: var(--shadow-sm); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+.shadow-xl { box-shadow: var(--shadow-xl); }
+.shadow-none { box-shadow: var(--shadow-none); }
+
+/* z-index */
+.z-0 { z-index: var(--zIndex-0); }
+.z-10 { z-index: var(--zIndex-10); }
+.z-20 { z-index: var(--zIndex-20); }
+.z-30 { z-index: var(--zIndex-30); }
+.z-40 { z-index: var(--zIndex-40); }
+.z-50 { z-index: var(--zIndex-50); }
+
+/* width */
+.w-0 { width: var(--size-0); }
+.w-full { width: var(--size-full); }
+.w-screen { width: var(--size-screen); }
+.w-auto { width: var(--size-auto); }
+.w-1\/2 { width: var(--size-1/2); }
+.w-1\/3 { width: var(--size-1/3); }
+.w-2\/3 { width: var(--size-2/3); }
+.w-1\/4 { width: var(--size-1/4); }
+.w-3\/4 { width: var(--size-3/4); }
+
+/* height */
+.h-0 { height: var(--size-0); }
+.h-full { height: var(--size-full); }
+.h-screen { height: var(--size-screen); }
+.h-auto { height: var(--size-auto); }
+
+/* display */
+.d-flex { display: flex; }
+.d-grid { display: grid; }
+.d-block { display: block; }
+.d-inline { display: inline; }
+.d-inline-block { display: inline-block; }
+.d-none { display: none; }
+
+/* flex-direction */
+.flex-row { flex-direction: row; }
+.flex-col { flex-direction: column; }
+.flex-row-reverse { flex-direction: row-reverse; }
+.flex-col-reverse { flex-direction: column-reverse; }
+
+/* justify-content */
+.justify-start { justify-content: flex-start; }
+.justify-end { justify-content: flex-end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.justify-evenly { justify-content: space-evenly; }
+
+/* align-items */
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.items-center { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch { align-items: stretch; }
+
+/* flex-wrap */
+.wrap-wrap { flex-wrap: wrap; }
+.wrap-nowrap { flex-wrap: nowrap; }
+.wrap-reverse { flex-wrap: wrap-reverse; }
+
+/* text-align */
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+

package/src/0-gen-settings/variables.css

@@ -0,0 +1,72 @@
+/* ============================================
+   CSS Variables - Auto-generated
+   Config: config.json
+   ============================================ */
+
+:root {
+
+  /* Color */
+  --color-primary: #2d3748;
+  --color-secondary: #99a4b3;
+  --color-accent: #ff9948;
+  --color-dark: #1f2937;
+  --color-light: #f3f4f6;
+
+  /* Spacing */
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-12: 3rem;
+  --spacing-16: 4rem;
+
+  /* Radius */
+  --radius-sm: 0.125rem;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.5rem;
+  --radius-full: 624.9375rem;
+
+  /* FontSize */
+  --fontSize-sm: 0.875rem;
+  --fontSize-base: 1rem;
+  --fontSize-xl: 1.375rem;
+  --fontSize-2xl: 2rem;
+  --fontSize-3xl: 2.5rem;
+  --fontSize-4xl: 3rem;
+
+  /* LineHeight */
+  --lineHeight-none: 1;
+  --lineHeight-tight: 1.25;
+  --lineHeight-normal: 1.5;
+  --lineHeight-relaxed: 1.75;
+  --lineHeight-loose: 2;
+
+  /* Shadow */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+  --shadow-none: none;
+
+  /* ZIndex */
+  --zIndex-0: 0;
+  --zIndex-10: 10;
+  --zIndex-20: 20;
+  --zIndex-30: 30;
+  --zIndex-40: 40;
+  --zIndex-50: 50;
+
+  /* Size */
+  --size-0: 0;
+  --size-full: 100%;
+  --size-screen: 100vh;
+  --size-auto: auto;
+  --size-1/2: 50%;
+  --size-1/3: 33.333%;
+  --size-2/3: 66.666%;
+  --size-1/4: 25%;
+  --size-3/4: 75%;
+}

package/src/1-reset/reset.css

@@ -0,0 +1,48 @@
+/* 1. Use a more-intuitive box-sizing model */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+  margin: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+body {
+  /* 4. Add accessible line-height */
+  line-height: 1.5;
+  /* 5. Improve text rendering */
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 6. Improve media defaults */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* 7. Inherit fonts for form controls */
+input, button, textarea, select {
+  font: inherit;
+}
+
+/* 8. Avoid text overflows */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* 9. Improve line wrapping */
+p {
+  text-wrap: pretty;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+}

package/src/2-base/global.css

@@ -0,0 +1,25 @@
+:root {
+  color-scheme: light dark;
+}
+
+/* Styles du body */
+body {
+  font-family: system-ui, sans-serif;
+  line-height: 1.5;
+  color: var(--color-dark);
+  background-color: var(--color-light);
+}
+
+/* Liens par défaut */
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  body {
+    color: var(--color-light);
+    background-color: var(--color-dark);
+  }
+}

package/src/3-compositions/cluster.css

@@ -0,0 +1,15 @@
+/* Cluster - Groupement horizontal */
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cluster-space, var(--spacing-4));
+  align-items: center;
+}
+
+.cluster[data-justify="between"] {
+  justify-content: space-between;
+}
+
+.cluster[data-justify="center"] {
+  justify-content: center;
+}

package/src/3-compositions/flow.css

@@ -0,0 +1,22 @@
+/* Flow - Espacement */
+.flow > * + * {
+  margin-top: var(--flow-space, var(--spacing-4));
+}
+
+.test {
+  padding: var(--spacing-3)
+}
+
+.flow[data-space="sm"] {
+  --flow-space: 0.5rem;
+}
+
+.flow[data-space="lg"] {
+  --flow-space: 2rem;
+}
+
+/* Plus d'espace avant les titres */
+.flow > * + h2,
+.flow > * + h3 {
+  margin-top: calc(var(--flow-space, 1rem) * 2);
+}

package/src/3-compositions/stack.css

@@ -0,0 +1,14 @@
+/* Stack - Empilement vertical */
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stack-space, var(--spacing-4));
+}
+
+.stack[data-space="sm"] {
+  --stack-space: var(--spacing-2);
+}
+
+.stack[data-space="lg"] {
+  --stack-space: var(--spacing-8);
+}

package/src/4-utilities/custom.css

@@ -0,0 +1,4 @@
+/* ============================================
+   Custom Utilities
+   Add your manual utility classes here
+   ============================================ */

package/src/main.css

@@ -0,0 +1,12 @@
+/* Import all partials - @import must be at the top, before any other rules */
+@import url('./0-gen-settings/variables.css') layer(settings);
+@import url('./1-reset/reset.css') layer(reset);
+@import url('./2-base/global.css') layer(base);
+@import url('./3-compositions/stack.css') layer(compositions);
+@import url('./3-compositions/cluster.css') layer(compositions);
+@import url('./3-compositions/flow.css') layer(compositions);
+@import url('./0-gen-settings/utilities.css') layer(utilities);
+@import url('./0-gen-settings/responsive.css') layer(utilities);
+@import url('./4-utilities/custom.css') layer(utilities);
+@import url('./5-blocks/nav.css') layer(blocks);
+@import url('./5-blocks/pricing-card.css') layer(blocks);