@iit/precision-ui 0.8.27 → 0.8.28

package/dist/styles.css

@@ -345,6 +345,11 @@ body{
         max-width: 360px;
     }
 }
+@media (min-width: 500px){
+    .container{
+        max-width: 500px;
+    }
+}
 @media (min-width: 640px){
     .container{
         max-width: 640px;
@@ -1664,9 +1669,29 @@ body{
 }
 .typo_variant_factoid {
   font-family: "TT Commons";
-  font-size: clamp(60px, 60px + 1.5vw, 76px);
   line-height: 1;
   letter-spacing: -1.52px;
+  font-size: 38px;
+}
+@media (min-width: 360px) {
+  .typo_variant_factoid {
+    font-size: 45.6px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_factoid {
+    font-size: 60.8px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_factoid {
+    font-size: 68.4px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_factoid {
+    font-size: 76px;
+  }
 }
 @media only screen and (max-width: 768pxpx) {
   .typo_variant_factoid {
@@ -1675,9 +1700,29 @@ body{
 }
 .typo_variant_h1 {
   font-family: "TT Commons";
-  font-size: clamp(60px, 60px + 1.5vw, 76px);
   line-height: 0.9;
   letter-spacing: -1.52px;
+  font-size: 38px;
+}
+@media (min-width: 360px) {
+  .typo_variant_h1 {
+    font-size: 45.6px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_h1 {
+    font-size: 60.8px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_h1 {
+    font-size: 68.4px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_h1 {
+    font-size: 76px;
+  }
 }
 @media only screen and (max-width: 768pxpx) {
   .typo_variant_h1 {
@@ -1687,96 +1732,404 @@ body{
 .typo_variant_h2, .content h1,
 .content .h1 {
   font-family: "TT Commons";
-  font-size: clamp(45px, 45px + 1.5vw, 57px);
+  font-size: 28.5px;
   line-height: 1;
   letter-spacing: -0.57px;
 }
+@media (min-width: 360px) {
+  .typo_variant_h2, .content h1,
+  .content .h1 {
+    font-size: 34.2px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_h2, .content h1,
+  .content .h1 {
+    font-size: 45.6px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_h2, .content h1,
+  .content .h1 {
+    font-size: 51.3px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_h2, .content h1,
+  .content .h1 {
+    font-size: 57px;
+  }
+}
 .typo_variant_h3, .content h2,
 .content .h2 {
   font-family: "TT Commons";
-  font-size: clamp(35px, 35px + 1.5vw, 43px);
+  font-size: 21.5px;
   line-height: 1;
   letter-spacing: normal;
 }
+@media (min-width: 360px) {
+  .typo_variant_h3, .content h2,
+  .content .h2 {
+    font-size: 25.8px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_h3, .content h2,
+  .content .h2 {
+    font-size: 34.4px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_h3, .content h2,
+  .content .h2 {
+    font-size: 38.7px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_h3, .content h2,
+  .content .h2 {
+    font-size: 43px;
+  }
+}
 .typo_variant_h4, .content h3,
 .content .h3 {
   font-family: "TT Commons";
-  font-size: clamp(26px, 26px + 1.5vw, 32px);
+  font-size: 16px;
   line-height: 1;
   letter-spacing: normal;
 }
+@media (min-width: 360px) {
+  .typo_variant_h4, .content h3,
+  .content .h3 {
+    font-size: 19.2px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_h4, .content h3,
+  .content .h3 {
+    font-size: 25.6px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_h4, .content h3,
+  .content .h3 {
+    font-size: 28.8px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_h4, .content h3,
+  .content .h3 {
+    font-size: 32px;
+  }
+}
 .typo_variant_h5, .content h4,
 .content .h4 {
   font-family: "TT Commons";
-  font-size: clamp(19px, 19px + 1.5vw, 24px);
+  font-size: 12px;
   line-height: 1.2;
   letter-spacing: normal;
 }
+@media (min-width: 360px) {
+  .typo_variant_h5, .content h4,
+  .content .h4 {
+    font-size: 14.4px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_h5, .content h4,
+  .content .h4 {
+    font-size: 19.2px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_h5, .content h4,
+  .content .h4 {
+    font-size: 21.6px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_h5, .content h4,
+  .content .h4 {
+    font-size: 24px;
+  }
+}
 .typo_variant_h6, .content h6,
 .content .h6 {
   font-family: "TT Commons";
-  font-size: clamp(15px, 15px + 1.5vw, 18px);
+  font-size: 9px;
   line-height: 1.2;
   letter-spacing: normal;
 }
+@media (min-width: 360px) {
+  .typo_variant_h6, .content h6,
+  .content .h6 {
+    font-size: 10.8px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_h6, .content h6,
+  .content .h6 {
+    font-size: 14.4px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_h6, .content h6,
+  .content .h6 {
+    font-size: 16.2px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_h6, .content h6,
+  .content .h6 {
+    font-size: 18px;
+  }
+}
 .typo_variant_h6_content, .content h5,
 .content .h5 {
   font-family: "TT Commons";
-  font-size: clamp(15px, 15px + 1.5vw, 20px);
+  font-size: 10px;
   line-height: 1.2;
   letter-spacing: normal;
 }
+@media (min-width: 360px) {
+  .typo_variant_h6_content, .content h5,
+  .content .h5 {
+    font-size: 12px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_h6_content, .content h5,
+  .content .h5 {
+    font-size: 16px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_h6_content, .content h5,
+  .content .h5 {
+    font-size: 18px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_h6_content, .content h5,
+  .content .h5 {
+    font-size: 20px;
+  }
+}
 /* Text Variants */
 .typo_variant_subtitle-1 {
   font-family: "TT Commons";
-  font-size: clamp(16px, 16px + 1.5vw, 20px);
+  font-size: 10px;
   line-height: 1.2;
   letter-spacing: normal;
 }
+@media (min-width: 360px) {
+  .typo_variant_subtitle-1 {
+    font-size: 12px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_subtitle-1 {
+    font-size: 16px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_subtitle-1 {
+    font-size: 18px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_subtitle-1 {
+    font-size: 20px;
+  }
+}
 .typo_variant_subtitle-2 {
   font-family: "TT Commons";
-  font-size: clamp(15px, 15px + 1.5vw, 18px);
+  font-size: 9px;
   line-height: 1.2;
   letter-spacing: normal;
 }
+@media (min-width: 360px) {
+  .typo_variant_subtitle-2 {
+    font-size: 10.8px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_subtitle-2 {
+    font-size: 14.4px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_subtitle-2 {
+    font-size: 16.2px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_subtitle-2 {
+    font-size: 18px;
+  }
+}
 .typo_variant_overline {
   font-family: "TT Commons";
-  font-size: clamp(12px, 12px + 1.5vw, 15px);
+  font-size: 7.5px;
   line-height: 1.2;
   letter-spacing: 0.225px;
   text-transform: uppercase;
 }
+@media (min-width: 360px) {
+  .typo_variant_overline {
+    font-size: 9px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_overline {
+    font-size: 12px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_overline {
+    font-size: 13.5px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_overline {
+    font-size: 15px;
+  }
+}
 .typo_variant_lead-text {
   font-family: "TT Commons";
-  font-size: clamp(22px, 22px + 1.5vw, 27px);
+  font-size: 13.5px;
   line-height: 1.1;
   letter-spacing: normal;
 }
+@media (min-width: 360px) {
+  .typo_variant_lead-text {
+    font-size: 16.2px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_lead-text {
+    font-size: 21.6px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_lead-text {
+    font-size: 24.3px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_lead-text {
+    font-size: 27px;
+  }
+}
 .typo_variant_body, a.doc-with-icon, .content ol,
 .content ul, .content p {
   font-family: "TT Commons";
-  font-size: clamp(16px, 16px + 1.5vw, 20px);
+  font-size: 10px;
   line-height: 1.25;
   letter-spacing: normal;
 }
+@media (min-width: 360px) {
+  .typo_variant_body, a.doc-with-icon, .content ol,
+  .content ul, .content p {
+    font-size: 12px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_body, a.doc-with-icon, .content ol,
+  .content ul, .content p {
+    font-size: 16px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_body, a.doc-with-icon, .content ol,
+  .content ul, .content p {
+    font-size: 18px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_body, a.doc-with-icon, .content ol,
+  .content ul, .content p {
+    font-size: 20px;
+  }
+}
 .typo_variant_small-body {
   font-family: "TT Commons";
-  font-size: clamp(14px, 14px + 1.5vw, 18px);
+  font-size: 9px;
   line-height: 1.3;
   letter-spacing: normal;
 }
+@media (min-width: 360px) {
+  .typo_variant_small-body {
+    font-size: 10.8px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_small-body {
+    font-size: 14.4px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_small-body {
+    font-size: 16.2px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_small-body {
+    font-size: 18px;
+  }
+}
 .typo_variant_caption {
   font-family: "TT Commons";
-  font-size: clamp(12px, 12px + 1.5vw, 16px);
+  font-size: 8px;
   line-height: 1.2;
   letter-spacing: normal;
 }
+@media (min-width: 360px) {
+  .typo_variant_caption {
+    font-size: 9.6px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_caption {
+    font-size: 12.8px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_caption {
+    font-size: 14.4px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_caption {
+    font-size: 16px;
+  }
+}
 .typo_variant_button, .typo_variant_link {
   font-family: "TT Commons";
-  font-size: clamp(15px, 15px + 1.5vw, 18px);
+  font-size: 9px;
   line-height: 1;
   letter-spacing: normal;
 }
+@media (min-width: 360px) {
+  .typo_variant_button, .typo_variant_link {
+    font-size: 10.8px;
+  }
+}
+@media (min-width: 768px) {
+  .typo_variant_button, .typo_variant_link {
+    font-size: 14.4px;
+  }
+}
+@media (min-width: 1024px) {
+  .typo_variant_button, .typo_variant_link {
+    font-size: 16.2px;
+  }
+}
+@media (min-width: 1440px) {
+  .typo_variant_button, .typo_variant_link {
+    font-size: 18px;
+  }
+}
 .content b,
 .content strong {
   font-weight: 500;
@@ -1930,9 +2283,29 @@ ol li:last-child {
   font-weight: 600;
 }
 html {
-  font-size: 16px;
+  font-size: 8px;
   /* FIXME: it was 20, explore and fix if needed */
 }
+@media (min-width: 360px) {
+  html {
+    font-size: 9.6px;
+  }
+}
+@media (min-width: 768px) {
+  html {
+    font-size: 12.8px;
+  }
+}
+@media (min-width: 1024px) {
+  html {
+    font-size: 14.4px;
+  }
+}
+@media (min-width: 1440px) {
+  html {
+    font-size: 16px;
+  }
+}
 body {
   font-family: "TT Commons", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   /* font-feature-settings: "rlig" 1, "calt" 1; */

package/package.json

@@ -13,7 +13,7 @@
     "type": "git",
     "url": "git+https://github.com/wowxoxo/precision-ui.git"
   },
-  "version": "0.8.27",
+  "version": "0.8.28",
   "type": "module",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",