@vaadin/vaadin-lumo-styles 25.0.0-alpha2 → 25.0.0-alpha20

package/src/utilities/typography.css

@@ -0,0 +1,424 @@
+/**
+ * @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);
+}
+
+.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);
+  }
+
+  .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);
+  }
+}

package/utility.css

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import './src/utilities/accessibility.css';
+@import './src/utilities/background.css';
+@import './src/utilities/border.css';
+@import './src/utilities/filter.css';
+@import './src/utilities/flexbox-grid.css';
+@import './src/utilities/layout.css';
+@import './src/utilities/shadows.css';
+@import './src/utilities/sizing.css';
+@import './src/utilities/spacing.css';
+@import './src/utilities/transition.css';
+@import './src/utilities/typography.css';

package/vaadin-iconset.js

@@ -28,6 +28,7 @@ template.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg"><defs>
 <g id="lumo:chevron-left"><path d="M346 533l199 210c9 9 23 9 32 0 4-4 7-10 6-17V274C583 261 573 250 561 250c-6 0-12 2-16 7l-199 210c-17 18-17 48 0 66z"></path></g>
 <g id="lumo:chevron-right"><path d="M654 533L455 743c-9 9-23 9-32 0C419 739 417 733 417 726V274C417 261 427 250 439 250c6 0 12 2 16 7l199 210c17 18 17 48 0 66z"></path></g>
 <g id="lumo:chevron-up"><path d="M533 346l210 199c9 9 9 23 0 32-4 4-10 7-17 6H274C261 583 250 573 250 561c0-6 2-12 7-16l210-199c18-17 48-17 66 0z"></path></g>
+<g id="lumo:clean"><path d="M250 208v8L368 333h99l-30 70 88 88L592 333H833V208H250M136 208L83 261l291 291L271 792h125l65-153L697 875 750 822 148 220 136 208Z"></path></g>
 <g id="lumo:clock"><path d="M538 489l85 85c15 15 15 38 0 53-15 15-38 15-53 0l-93-93a38 38 0 0 1-2-2C467 525 462 515 462 504V308c0-21 17-38 38-37 21 0 38 17 37 37v181zM500 833c-184 0-333-149-333-333s149-333 333-333 333 149 333 333-149 333-333 333z m0-68c146 0 265-118 265-265 0-146-118-265-265-265-146 0-265 118-265 265 0 146 118 265 265 265z"></path></g>
 <g id="lumo:cog"><path d="M833 458l-81-18c-8-25-17-50-29-75L767 292 708 233l-72 49c-21-12-46-25-75-30L542 167h-84l-19 79c-25 8-50 17-71 30L296 233 233 296l47 69c-12 21-21 46-29 71L167 458v84l84 25c8 25 17 50 29 75L233 708 292 767l76-44c21 12 46 25 75 29L458 833h84l19-81c25-8 50-17 75-29L708 767l59-59-44-66c12-21 25-46 29-75L833 542v-84z m-333 217c-96 0-175-79-175-175 0-96 79-175 175-175 96 0 175 79 175 175 0 96-79 175-175 175z"></path></g>
 <g id="lumo:cross"><path d="M445 500l-142-141c-15-15-15-40 0-56 15-15 40-15 56 0L500 445l141-142c15-15 40-15 56 0 15 15 15 40 0 56L555 500l142 141c15 15 15 40 0 56-15 15-40 15-56 0L500 555l-141 142c-15 15-40 15-56 0-15-15-15-40 0-56L445 500z"></path></g>
@@ -38,9 +39,12 @@ template.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg"><defs>
 <g id="lumo:error"><path d="M500 833c-184 0-333-149-333-333s149-333 333-333 333 149 333 333-149 333-333 333z m0-68c146 0 265-118 265-265 0-146-118-265-265-265-146 0-265 118-265 265 0 146 118 265 265 265zM479 292h42c12 0 21 9 20 20l-11 217c0 8-6 13-13 13h-34c-7 0-13-6-13-13l-11-217C459 301 468 292 479 292zM483 608h34c12 0 21 9 20 21v33c0 12-9 21-20 21h-34c-12 0-21-9-21-21v-33c0-12 9-21 21-21z"></path></g>
 <g id="lumo:eye"><path d="M500 750c-187 0-417-163-417-250s230-250 417-250 417 163 417 250-230 250-417 250z m-336-231c20 22 47 46 78 69C322 644 411 678 500 678s178-34 258-90c31-22 59-46 78-69 6-7 12-14 16-19-4-6-9-12-16-19-20-22-47-46-78-69C678 356 589 322 500 322s-178 34-258 90c-31 22-59 46-78 69-6 7-12 14-16 19 4 6 9 12 16 19zM500 646c-81 0-146-65-146-146s65-146 146-146 146 65 146 146-65 146-146 146z m0-75c39 0 71-32 71-71 0-39-32-71-71-71-39 0-71 32-71 71 0 39 32 71 71 71z"></path></g>
 <g id="lumo:eye-disabled"><path d="M396 735l60-60c15 2 30 3 44 3 89 0 178-34 258-90 31-22 59-46 78-69 6-7 12-14 16-19-4-6-9-12-16-19-20-22-47-46-78-69-8-5-15-11-23-15l50-51C862 397 917 458 917 500c0 87-230 250-417 250-34 0-69-5-104-15zM215 654C138 603 83 542 83 500c0-87 230-250 417-250 34 0 69 5 104 15l-59 60c-15-2-30-3-45-3-89 0-178 34-258 90-31 22-59 46-78 69-6 7-12 14-16 19 4 6 9 12 16 19 20 22 47 46 78 69 8 5 16 11 24 16L215 654z m271-9l159-159c0 5 1 9 1 14 0 81-65 146-146 146-5 0-9 0-14-1z m-131-131C354 510 354 505 354 500c0-81 65-146 146-146 5 0 10 0 14 1l-159 159z m-167 257L780 179c12-12 32-12 44 0 12 12 12 32 0 44L232 815c-12 12-32 12-44 0s-12-32 0-44z"></path></g>
+<g id="lumo:indent"><path d="M125 219a31 31 0 0 1 31-32h688a31 31 0 0 1 0 63H156A31 31 0 0 1 125 219z m40 134a31 31 0 0 1 45 0l125 125a31 31 0 0 1 0 44l-125 125A31 31 0 0 1 165 603L268 500 165 397a31 31 0 0 1 0-44zM438 406a31 31 0 0 1 31-31h375a31 31 0 0 1 0 63h-375a31 31 0 0 1-32-32z m-1 188a31 31 0 0 1 32-32h375a31 31 0 0 1 0 63h-375a31 31 0 0 1-32-31zM125 781a31 31 0 0 1 31-31h688a31 31 0 0 1 0 63H156a31 31 0 0 1-31-32z m0 0"></path></g>
+<g id="lumo:link"><path d="M667 250h-125v79h125c94 0 171 76 170 171a171 171 0 0 1-170 171h-125V750h125a250 250 0 0 0 250-250c0-138-112-250-250-250M163 500c0-95 77-171 170-171h125V250H333a250 250 0 0 0-250 250 250 250 0 0 0 250 250h125v-79H333c-94 0-171-77-171-171M333 542h334v-84H333v84Z"></path></g>
 <g id="lumo:menu"><path d="M167 292c0-23 19-42 41-42h584C815 250 833 268 833 292c0 23-19 42-41 41H208C185 333 167 315 167 292z m0 208c0-23 19-42 41-42h584C815 458 833 477 833 500c0 23-19 42-41 42H208C185 542 167 523 167 500z m0 208c0-23 19-42 41-41h584C815 667 833 685 833 708c0 23-19 42-41 42H208C185 750 167 732 167 708z"></path></g>
 <g id="lumo:minus"><path d="M261 461c-22 0-39 18-39 39 0 22 18 39 39 39h478c22 0 39-18 39-39 0-22-18-39-39-39H261z"></path></g>
 <g id="lumo:ordered-list"><path d="M138 333V198H136l-43 28v-38l45-31h45V333H138z m-61 128c0-35 27-59 68-59 39 0 66 21 66 53 0 20-11 37-43 64l-29 27v2h74V583H80v-30l55-52c26-24 32-33 33-43 0-13-10-22-24-22-15 0-26 10-26 25v1h-41v-1zM123 759v-31h21c15 0 25-8 25-21 0-13-10-21-25-21-15 0-26 9-26 23h-41c1-34 27-56 68-57 39 0 66 20 66 49 0 20-14 36-33 39v3c24 3 40 19 39 41 0 32-30 54-73 54-41 0-69-22-70-57h43c1 13 11 22 28 22 16 0 27-9 27-22 0-14-10-22-28-22h-21zM333 258c0-18 15-33 34-33h516c18 0 33 15 34 33 0 18-15 33-34 34H367c-18 0-33-15-34-34z m0 250c0-18 15-33 34-33h516c18 0 33 15 34 33s-15 33-34 34H367c-18 0-33-15-34-34z m0 250c0-18 15-33 34-33h516c18 0 33 15 34 33s-15 33-34 34H367c-18 0-33-15-34-34z"></path></g>
+<g id="lumo:outdent"><path d="M125 219a31 31 0 0 1 31-32h688a31 31 0 0 1 0 63H156A31 31 0 0 1 125 219z m665 134A31 31 0 0 1 835 397L732 500l103 103a31 31 0 0 1-45 44l-125-125a31 31 0 0 1 0-44l125-125zM125 406A31 31 0 0 1 156 375h375a31 31 0 0 1 0 63h-375A31 31 0 0 1 125 406z m0 188a31 31 0 0 1 31-32h375a31 31 0 0 1 0 63h-375a31 31 0 0 1-31-31z m0 187a31 31 0 0 1 31-31h688a31 31 0 0 1 0 63H156a31 31 0 0 1-31-32z m0 0"></path></g>
 <g id="lumo:phone"><path d="M296 208l42-37c17-15 44-13 58 4a42 42 0 0 1 5 7L459 282c12 20 5 45-15 57l-7 4c-17 10-25 30-19 48l20 66a420 420 0 0 0 93 157l41 45c13 14 35 17 51 8l7-5c20-12 45-5 57 16L745 777c12 20 5 45-15 57a42 42 0 0 1-8 4l-52 17c-61 21-129 4-174-43l-50-52c-81-85-141-189-175-302l-24-78c-19-62 0-129 49-172z"></path></g>
 <g id="lumo:photo"><path d="M208 167h584c69 0 125 56 125 125v416c0 69-56 125-125 125H208c-69 0-125-56-125-125V292c0-69 56-125 125-125z m584 75H208c-28 0-50 22-50 50v416c0 28 22 50 50 50h584c28 0 50-22 50-50V292c0-28-22-50-50-50zM239 740l167-167c12-12 31-14 45-6l73 43 172-201c13-15 34-18 50-7l95 67v92l-111-78-169 199c-12 14-32 17-47 8l-76-43-111 111H229c2-7 5-13 10-18zM458 427C458 490 407 542 344 542S229 490 229 427c0-63 51-115 115-115S458 364 458 427z m-62 0C396 398 373 375 344 375S292 398 292 427c0 29 23 52 52 52s52-23 52-52z"></path></g>
 <g id="lumo:play"><path d="M689 528l-298 175c-13 8-34 8-48 0-6-4-10-9-10-14V311C333 300 348 292 367 292c9 0 17 2 24 5l298 175c26 15 26 40 0 56z"></path></g>