@vaadin/react-components 25.0.0-alpha18 → 25.0.0-alpha19

package/css/lumo/utilities/Typography.module.css

@@ -1,338 +1,424 @@
-/* Generated file, do not edit */
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/* === Font size === */
+.text-2xs {
+  font-size: var(--lumo-font-size-xxs);
+}
 
+.text-xs {
+  font-size: var(--lumo-font-size-xs);
+}
 
-  /* === Font size === */
-  .text-2xs {
+.text-s {
+  font-size: var(--lumo-font-size-s);
+}
+
+.text-m {
+  font-size: var(--lumo-font-size-m);
+}
+
+.text-l {
+  font-size: var(--lumo-font-size-l);
+}
+
+.text-xl {
+  font-size: var(--lumo-font-size-xl);
+}
+
+.text-2xl {
+  font-size: var(--lumo-font-size-xxl);
+}
+
+.text-3xl {
+  font-size: var(--lumo-font-size-xxxl);
+}
+
+/* === Font weight === */
+.font-thin {
+  font-weight: 100;
+}
+
+.font-extralight {
+  font-weight: 200;
+}
+
+.font-light {
+  font-weight: 300;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.font-black {
+  font-weight: 900;
+}
+
+/* === Line clamp === */
+[class*='line-clamp-'] {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+
+.line-clamp-1 {
+  -webkit-line-clamp: 1;
+}
+
+.line-clamp-2 {
+  -webkit-line-clamp: 2;
+}
+
+.line-clamp-3 {
+  -webkit-line-clamp: 3;
+}
+
+.line-clamp-4 {
+  -webkit-line-clamp: 4;
+}
+
+.line-clamp-5 {
+  -webkit-line-clamp: 5;
+}
+
+.line-clamp-6 {
+  -webkit-line-clamp: 6;
+}
+
+/* === Line height === */
+.leading-none {
+  line-height: 1;
+}
+
+.leading-xs {
+  line-height: var(--lumo-line-height-xs);
+}
+
+.leading-s {
+  line-height: var(--lumo-line-height-s);
+}
+
+.leading-m {
+  line-height: var(--lumo-line-height-m);
+}
+
+/* === List style type === */
+.list-none {
+  list-style-type: none;
+}
+
+/* === Text alignment === */
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+/* === Text color === */
+.text-header {
+  color: var(--lumo-header-text-color);
+}
+
+.text-body {
+  color: var(--lumo-body-text-color);
+}
+
+.text-secondary {
+  color: var(--lumo-secondary-text-color);
+}
+
+.text-tertiary {
+  color: var(--lumo-tertiary-text-color);
+}
+
+.text-disabled {
+  color: var(--lumo-disabled-text-color);
+}
+
+.text-primary {
+  color: var(--lumo-primary-text-color);
+}
+
+.text-primary-contrast {
+  color: var(--lumo-primary-contrast-color);
+}
+
+.text-error {
+  color: var(--lumo-error-text-color);
+}
+
+.text-error-contrast {
+  color: var(--lumo-error-contrast-color);
+}
+
+.text-success {
+  color: var(--lumo-success-text-color);
+}
+
+.text-success-contrast {
+  color: var(--lumo-success-contrast-color);
+}
+
+.text-warning {
+  color: var(--lumo-warning-text-color);
+}
+
+.text-warning-contrast {
+  color: var(--lumo-warning-contrast-color);
+}
+
+/* == Text decoration === */
+.line-through {
+  text-decoration-line: line-through;
+}
+
+.no-underline {
+  text-decoration-line: none;
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+/* === Text overflow === */
+.overflow-clip {
+  text-overflow: clip;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+/* === Text transform === */
+.capitalize {
+  text-transform: capitalize;
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+/* === Whitespace === */
+.whitespace-normal {
+  white-space: normal;
+}
+
+.whitespace-break-spaces {
+  white-space: normal;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.whitespace-pre {
+  white-space: pre;
+}
+
+.whitespace-pre-line {
+  white-space: pre-line;
+}
+
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+/* === Responsive design === */
+@media (min-width: 640px) {
+  .sm\:text-2xs {
     font-size: var(--lumo-font-size-xxs);
   }
-  .text-xs {
+
+  .sm\:text-xs {
     font-size: var(--lumo-font-size-xs);
   }
-  .text-s {
+
+  .sm\:text-s {
     font-size: var(--lumo-font-size-s);
   }
-  .text-m {
+
+  .sm\:text-m {
     font-size: var(--lumo-font-size-m);
   }
-  .text-l {
+
+  .sm\:text-l {
     font-size: var(--lumo-font-size-l);
   }
-  .text-xl {
+
+  .sm\:text-xl {
     font-size: var(--lumo-font-size-xl);
   }
-  .text-2xl {
+
+  .sm\:text-2xl {
     font-size: var(--lumo-font-size-xxl);
   }
-  .text-3xl {
-    font-size: var(--lumo-font-size-xxxl);
-  }
 
-  /* === Font weight === */
-  .font-thin {
-    font-weight: 100;
-  }
-  .font-extralight {
-    font-weight: 200;
-  }
-  .font-light {
-    font-weight: 300;
-  }
-  .font-normal {
-    font-weight: 400;
-  }
-  .font-medium {
-    font-weight: 500;
-  }
-  .font-semibold {
-    font-weight: 600;
-  }
-  .font-bold {
-    font-weight: 700;
-  }
-  .font-extrabold {
-    font-weight: 800;
+  .sm\:text-3xl {
+    font-size: var(--lumo-font-size-xxxl);
   }
-  .font-black {
-    font-weight: 900;
+}
+@media (min-width: 768px) {
+  .md\:text-2xs {
+    font-size: var(--lumo-font-size-xxs);
   }
 
-  /* === Line clamp === */
-  [class*='line-clamp-'] {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-  }
-  .line-clamp-1 {
-    -webkit-line-clamp: 1;
-  }
-  .line-clamp-2 {
-    -webkit-line-clamp: 2;
-  }
-  .line-clamp-3 {
-    -webkit-line-clamp: 3;
+  .md\:text-xs {
+    font-size: var(--lumo-font-size-xs);
   }
-  .line-clamp-4 {
-    -webkit-line-clamp: 4;
+
+  .md\:text-s {
+    font-size: var(--lumo-font-size-s);
   }
-  .line-clamp-5 {
-    -webkit-line-clamp: 5;
+
+  .md\:text-m {
+    font-size: var(--lumo-font-size-m);
   }
-  .line-clamp-6 {
-    -webkit-line-clamp: 6;
+
+  .md\:text-l {
+    font-size: var(--lumo-font-size-l);
   }
 
-  /* === Line height === */
-  .leading-none {
-    line-height: 1;
+  .md\:text-xl {
+    font-size: var(--lumo-font-size-xl);
   }
-  .leading-xs {
-    line-height: var(--lumo-line-height-xs);
+
+  .md\:text-2xl {
+    font-size: var(--lumo-font-size-xxl);
   }
-  .leading-s {
-    line-height: var(--lumo-line-height-s);
+
+  .md\:text-3xl {
+    font-size: var(--lumo-font-size-xxxl);
   }
-  .leading-m {
-    line-height: var(--lumo-line-height-m);
+}
+@media (min-width: 1024px) {
+  .lg\:text-2xs {
+    font-size: var(--lumo-font-size-xxs);
   }
 
-  /* === List style type === */
-  .list-none {
-    list-style-type: none;
+  .lg\:text-xs {
+    font-size: var(--lumo-font-size-xs);
   }
 
-  /* === Text alignment === */
-  .text-left {
-    text-align: left;
-  }
-  .text-center {
-    text-align: center;
+  .lg\:text-s {
+    font-size: var(--lumo-font-size-s);
   }
-  .text-right {
-    text-align: right;
+
+  .lg\:text-m {
+    font-size: var(--lumo-font-size-m);
   }
-  .text-justify {
-    text-align: justify;
+
+  .lg\:text-l {
+    font-size: var(--lumo-font-size-l);
   }
 
-  /* === Text color === */
-  .text-header {
-    color: var(--lumo-header-text-color);
+  .lg\:text-xl {
+    font-size: var(--lumo-font-size-xl);
   }
-  .text-body {
-    color: var(--lumo-body-text-color);
+
+  .lg\:text-2xl {
+    font-size: var(--lumo-font-size-xxl);
   }
-  .text-secondary {
-    color: var(--lumo-secondary-text-color);
+
+  .lg\:text-3xl {
+    font-size: var(--lumo-font-size-xxxl);
   }
-  .text-tertiary {
-    color: var(--lumo-tertiary-text-color);
+}
+@media (min-width: 1280px) {
+  .xl\:text-2xs {
+    font-size: var(--lumo-font-size-xxs);
   }
-  .text-disabled {
-    color: var(--lumo-disabled-text-color);
+
+  .xl\:text-xs {
+    font-size: var(--lumo-font-size-xs);
   }
-  .text-primary {
-    color: var(--lumo-primary-text-color);
+
+  .xl\:text-s {
+    font-size: var(--lumo-font-size-s);
   }
-  .text-primary-contrast {
-    color: var(--lumo-primary-contrast-color);
+
+  .xl\:text-m {
+    font-size: var(--lumo-font-size-m);
   }
-  .text-error {
-    color: var(--lumo-error-text-color);
+
+  .xl\:text-l {
+    font-size: var(--lumo-font-size-l);
   }
-  .text-error-contrast {
-    color: var(--lumo-error-contrast-color);
+
+  .xl\:text-xl {
+    font-size: var(--lumo-font-size-xl);
   }
-  .text-success {
-    color: var(--lumo-success-text-color);
+
+  .xl\:text-2xl {
+    font-size: var(--lumo-font-size-xxl);
   }
-  .text-success-contrast {
-    color: var(--lumo-success-contrast-color);
+
+  .xl\:text-3xl {
+    font-size: var(--lumo-font-size-xxxl);
   }
-  .text-warning {
-    color: var(--lumo-warning-text-color);
+}
+@media (min-width: 1536px) {
+  .\32xl\:text-2xs {
+    font-size: var(--lumo-font-size-xxs);
   }
-  .text-warning-contrast {
-    color: var(--lumo-warning-contrast-color);
+
+  .\32xl\:text-xs {
+    font-size: var(--lumo-font-size-xs);
   }
 
-  /* == Text decoration === */
-  .line-through {
-    text-decoration-line: line-through;
+  .\32xl\:text-s {
+    font-size: var(--lumo-font-size-s);
   }
-  .no-underline {
-    text-decoration-line: none;
+
+  .\32xl\:text-m {
+    font-size: var(--lumo-font-size-m);
   }
-  .underline {
-    text-decoration-line: underline;
+
+  .\32xl\:text-l {
+    font-size: var(--lumo-font-size-l);
   }
 
-  /* === Text overflow === */
-  .overflow-clip {
-    text-overflow: clip;
+  .\32xl\:text-xl {
+    font-size: var(--lumo-font-size-xl);
   }
-  .overflow-ellipsis {
-    text-overflow: ellipsis;
+
+  .\32xl\:text-2xl {
+    font-size: var(--lumo-font-size-xxl);
   }
 
-  /* === Text transform === */
-  .capitalize {
-    text-transform: capitalize;
-  }
-  .lowercase {
-    text-transform: lowercase;
-  }
-  .uppercase {
-    text-transform: uppercase;
-  }
-
-  /* === Whitespace === */
-  .whitespace-normal {
-    white-space: normal;
-  }
-  .whitespace-break-spaces {
-    white-space: normal;
-  }
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-  .whitespace-pre {
-    white-space: pre;
-  }
-  .whitespace-pre-line {
-    white-space: pre-line;
-  }
-  .whitespace-pre-wrap {
-    white-space: pre-wrap;
-  }
-
-  /* === Responsive design === */
-  @media (min-width: 640px) {
-    .sm\\:text-2xs {
-      font-size: var(--lumo-font-size-xxs);
-    }
-    .sm\\:text-xs {
-      font-size: var(--lumo-font-size-xs);
-    }
-    .sm\\:text-s {
-      font-size: var(--lumo-font-size-s);
-    }
-    .sm\\:text-m {
-      font-size: var(--lumo-font-size-m);
-    }
-    .sm\\:text-l {
-      font-size: var(--lumo-font-size-l);
-    }
-    .sm\\:text-xl {
-      font-size: var(--lumo-font-size-xl);
-    }
-    .sm\\:text-2xl {
-      font-size: var(--lumo-font-size-xxl);
-    }
-    .sm\\:text-3xl {
-      font-size: var(--lumo-font-size-xxxl);
-    }
-  }
-  @media (min-width: 768px) {
-    .md\\:text-2xs {
-      font-size: var(--lumo-font-size-xxs);
-    }
-    .md\\:text-xs {
-      font-size: var(--lumo-font-size-xs);
-    }
-    .md\\:text-s {
-      font-size: var(--lumo-font-size-s);
-    }
-    .md\\:text-m {
-      font-size: var(--lumo-font-size-m);
-    }
-    .md\\:text-l {
-      font-size: var(--lumo-font-size-l);
-    }
-    .md\\:text-xl {
-      font-size: var(--lumo-font-size-xl);
-    }
-    .md\\:text-2xl {
-      font-size: var(--lumo-font-size-xxl);
-    }
-    .md\\:text-3xl {
-      font-size: var(--lumo-font-size-xxxl);
-    }
-  }
-  @media (min-width: 1024px) {
-    .lg\\:text-2xs {
-      font-size: var(--lumo-font-size-xxs);
-    }
-    .lg\\:text-xs {
-      font-size: var(--lumo-font-size-xs);
-    }
-    .lg\\:text-s {
-      font-size: var(--lumo-font-size-s);
-    }
-    .lg\\:text-m {
-      font-size: var(--lumo-font-size-m);
-    }
-    .lg\\:text-l {
-      font-size: var(--lumo-font-size-l);
-    }
-    .lg\\:text-xl {
-      font-size: var(--lumo-font-size-xl);
-    }
-    .lg\\:text-2xl {
-      font-size: var(--lumo-font-size-xxl);
-    }
-    .lg\\:text-3xl {
-      font-size: var(--lumo-font-size-xxxl);
-    }
-  }
-  @media (min-width: 1280px) {
-    .xl\\:text-2xs {
-      font-size: var(--lumo-font-size-xxs);
-    }
-    .xl\\:text-xs {
-      font-size: var(--lumo-font-size-xs);
-    }
-    .xl\\:text-s {
-      font-size: var(--lumo-font-size-s);
-    }
-    .xl\\:text-m {
-      font-size: var(--lumo-font-size-m);
-    }
-    .xl\\:text-l {
-      font-size: var(--lumo-font-size-l);
-    }
-    .xl\\:text-xl {
-      font-size: var(--lumo-font-size-xl);
-    }
-    .xl\\:text-2xl {
-      font-size: var(--lumo-font-size-xxl);
-    }
-    .xl\\:text-3xl {
-      font-size: var(--lumo-font-size-xxxl);
-    }
-  }
-  @media (min-width: 1536px) {
-    .\\32xl\\:text-2xs {
-      font-size: var(--lumo-font-size-xxs);
-    }
-    .\\32xl\\:text-xs {
-      font-size: var(--lumo-font-size-xs);
-    }
-    .\\32xl\\:text-s {
-      font-size: var(--lumo-font-size-s);
-    }
-    .\\32xl\\:text-m {
-      font-size: var(--lumo-font-size-m);
-    }
-    .\\32xl\\:text-l {
-      font-size: var(--lumo-font-size-l);
-    }
-    .\\32xl\\:text-xl {
-      font-size: var(--lumo-font-size-xl);
-    }
-    .\\32xl\\:text-2xl {
-      font-size: var(--lumo-font-size-xxl);
-    }
-    .\\32xl\\:text-3xl {
-      font-size: var(--lumo-font-size-xxxl);
-    }
+  .\32xl\:text-3xl {
+    font-size: var(--lumo-font-size-xxxl);
   }
+}