ajout des utilitaires font-sizes

css/knacss-full/knacss.css

@@ -2502,6 +2502,343 @@ template {
   }
 }
 
+/* Font sizes utility classes */
+.text-10 {
+  font-size: 0.625rem;
+}
+
+.text-11 {
+  font-size: 0.6875rem;
+}
+
+.text-12 {
+  font-size: 0.75rem;
+}
+
+.text-14 {
+  font-size: 0.875rem;
+}
+
+.text-16 {
+  font-size: 1rem;
+}
+
+.text-18 {
+  font-size: 1.125rem;
+}
+
+.text-20 {
+  font-size: 1.25rem;
+}
+
+.text-24 {
+  font-size: 1.5rem;
+}
+
+.text-30 {
+  font-size: 1.875rem;
+}
+
+.text-36 {
+  font-size: 2.25rem;
+}
+
+.text-base {
+  font-size: 1rem;
+}
+
+.text-inherit {
+  font-size: "inherit";
+}
+
+@media (min-width: 576px) {
+  .sm\:text-10 {
+    font-size: 0.625rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-10 {
+    font-size: 0.625rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-10 {
+    font-size: 0.625rem;
+  }
+}
+
+@media (min-width: 1330px) {
+  .xl\:text-10 {
+    font-size: 0.625rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-11 {
+    font-size: 0.6875rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-11 {
+    font-size: 0.6875rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-11 {
+    font-size: 0.6875rem;
+  }
+}
+
+@media (min-width: 1330px) {
+  .xl\:text-11 {
+    font-size: 0.6875rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-12 {
+    font-size: 0.75rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-12 {
+    font-size: 0.75rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-12 {
+    font-size: 0.75rem;
+  }
+}
+
+@media (min-width: 1330px) {
+  .xl\:text-12 {
+    font-size: 0.75rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-14 {
+    font-size: 0.875rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-14 {
+    font-size: 0.875rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-14 {
+    font-size: 0.875rem;
+  }
+}
+
+@media (min-width: 1330px) {
+  .xl\:text-14 {
+    font-size: 0.875rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-16 {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-16 {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-16 {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 1330px) {
+  .xl\:text-16 {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-18 {
+    font-size: 1.125rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-18 {
+    font-size: 1.125rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-18 {
+    font-size: 1.125rem;
+  }
+}
+
+@media (min-width: 1330px) {
+  .xl\:text-18 {
+    font-size: 1.125rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-20 {
+    font-size: 1.25rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-20 {
+    font-size: 1.25rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-20 {
+    font-size: 1.25rem;
+  }
+}
+
+@media (min-width: 1330px) {
+  .xl\:text-20 {
+    font-size: 1.25rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-24 {
+    font-size: 1.5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-24 {
+    font-size: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-24 {
+    font-size: 1.5rem;
+  }
+}
+
+@media (min-width: 1330px) {
+  .xl\:text-24 {
+    font-size: 1.5rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-30 {
+    font-size: 1.875rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-30 {
+    font-size: 1.875rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-30 {
+    font-size: 1.875rem;
+  }
+}
+
+@media (min-width: 1330px) {
+  .xl\:text-30 {
+    font-size: 1.875rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-36 {
+    font-size: 2.25rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-36 {
+    font-size: 2.25rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-36 {
+    font-size: 2.25rem;
+  }
+}
+
+@media (min-width: 1330px) {
+  .xl\:text-36 {
+    font-size: 2.25rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-base {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-base {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-base {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 1330px) {
+  .xl\:text-base {
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 576px) {
+  .sm\:text-inherit {
+    font-size: "inherit";
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:text-inherit {
+    font-size: "inherit";
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:text-inherit {
+    font-size: "inherit";
+  }
+}
+
+@media (min-width: 1330px) {
+  .xl\:text-inherit {
+    font-size: "inherit";
+  }
+}
+
 /* Spacers utility classes */
 .p-0 {
   padding: 0;

sass/abstracts/_variables-sass.scss

@@ -67,6 +67,21 @@ $font-family-monospace: consolas, courier, monospace;
 $line-height-base: 1.5;
 
 // Font sizes
+$font-size: (
+  "10": 0.625rem,
+  "11": 0.6875rem,
+  "12": 0.75rem,
+  "14": 0.875rem,
+  "16": 1rem,
+  "18": 1.125rem,
+  "20": 1.25rem,
+  "24": 1.5rem,
+  "30": 1.875rem,
+  "36": 2.25rem,
+  "base": 1rem,
+  "inherit": "inherit",
+);
+
 $font-size-html: 62.5%;
 $font-size-base: 1.6rem;
 

sass/knacss.scss

@@ -19,6 +19,7 @@
 
 // UTILITY CLASSES
 @import "utils/utils-global";
+@import "utils/utils-font-sizes";
 @import "utils/utils-spacers";
 @import "utils/grillade";
 

sass/utils/_utils-font-sizes.scss

@@ -0,0 +1,19 @@
+/* Font sizes utility classes */
+
+// loop for each font-size
+@each $key, $value in $font-size {
+  .text-#{$key} {
+    font-size: $value;
+  }
+}
+
+// loop for each breakpoint
+@each $key, $value in $font-size {
+  @each $bp, $bpv in $breakpoints {
+    @media (min-width: #{$bpv}) {
+      .#{$bp}\:text-#{$key} {
+        font-size: $value;
+      }
+    }
+  }
+}