@vaadin/vaadin-lumo-styles 25.0.0-alpha1 → 25.0.0-alpha10

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/style.d.ts

@@ -1,5 +1,3 @@
 import type { CSSResult } from 'lit';
 
-export const globals: CSSResult;
-
 export const style: CSSResult;

package/style.js

@@ -26,94 +26,6 @@ const style = css`
   }
 `;
 
-/**
- * Default values for component-specific custom properties.
- */
-const globals = css`
-  html {
-    /* Button */
-    --vaadin-button-background: var(--lumo-contrast-5pct);
-    --vaadin-button-border: none;
-    --vaadin-button-border-radius: var(--lumo-border-radius-m);
-    --vaadin-button-font-size: var(--lumo-font-size-m);
-    --vaadin-button-font-weight: 500;
-    --vaadin-button-height: var(--lumo-size-m);
-    --vaadin-button-margin: var(--lumo-space-xs) 0;
-    --vaadin-button-min-width: calc(var(--vaadin-button-height) * 2);
-    --vaadin-button-padding: 0 calc(var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2);
-    --vaadin-button-text-color: var(--lumo-primary-text-color);
-    --vaadin-button-primary-background: var(--lumo-primary-color);
-    --vaadin-button-primary-border: none;
-    --vaadin-button-primary-font-weight: 600;
-    --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
-    --vaadin-button-tertiary-background: transparent !important;
-    --vaadin-button-tertiary-text-color: var(--lumo-primary-text-color);
-    --vaadin-button-tertiary-font-weight: 500;
-    --vaadin-button-tertiary-padding: 0 calc(var(--vaadin-button-height) / 6);
-    /* Checkbox */
-    --vaadin-checkbox-background: var(--lumo-contrast-20pct);
-    --vaadin-checkbox-background-hover: var(--lumo-contrast-30pct);
-    --vaadin-checkbox-border-radius: var(--lumo-border-radius-s);
-    --vaadin-checkbox-checkmark-char: var(--lumo-icons-checkmark);
-    --vaadin-checkbox-checkmark-char-indeterminate: '';
-    --vaadin-checkbox-checkmark-color: var(--lumo-primary-contrast-color);
-    --vaadin-checkbox-checkmark-size: calc(var(--vaadin-checkbox-size) + 2px);
-    --vaadin-checkbox-label-color: var(--lumo-body-text-color);
-    --vaadin-checkbox-label-font-size: var(--lumo-font-size-m);
-    --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
-    --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
-    --vaadin-checkbox-disabled-checkmark-color: var(--lumo-contrast-30pct);
-    --vaadin-checkbox-disabled-background: var(--lumo-contrast-10pct);
-    /* Radio button */
-    --vaadin-radio-button-background: var(--lumo-contrast-20pct);
-    --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct);
-    --vaadin-radio-button-dot-color: var(--lumo-primary-contrast-color);
-    --vaadin-radio-button-dot-size: 3px;
-    --vaadin-radio-button-label-color: var(--lumo-body-text-color);
-    --vaadin-radio-button-label-font-size: var(--lumo-font-size-m);
-    --vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs)
-      var(--lumo-space-xs);
-    --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
-    --vaadin-radio-button-disabled-background: var(--lumo-contrast-10pct);
-    --vaadin-radio-button-disabled-dot-color: var(--lumo-contrast-30pct);
-    --vaadin-selection-color: var(--lumo-primary-color);
-    --vaadin-selection-color-text: var(--lumo-primary-text-color);
-    --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
-    --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
-    --vaadin-focus-ring-width: 2px;
-    /* Label */
-    --vaadin-input-field-label-color: var(--lumo-secondary-text-color);
-    --vaadin-input-field-focused-label-color: var(--lumo-primary-text-color);
-    --vaadin-input-field-hovered-label-color: var(--lumo-body-text-color);
-    --vaadin-input-field-label-font-size: var(--lumo-font-size-s);
-    --vaadin-input-field-label-font-weight: 500;
-    /* Helper */
-    --vaadin-input-field-helper-color: var(--lumo-secondary-text-color);
-    --vaadin-input-field-helper-font-size: var(--lumo-font-size-xs);
-    --vaadin-input-field-helper-font-weight: 400;
-    --vaadin-input-field-helper-spacing: 0.4em;
-    /* Error message */
-    --vaadin-input-field-error-color: var(--lumo-error-text-color);
-    --vaadin-input-field-error-font-size: var(--lumo-font-size-xs);
-    --vaadin-input-field-error-font-weight: 400;
-    /* Input field */
-    --vaadin-input-field-background: var(--lumo-contrast-10pct);
-    --vaadin-input-field-icon-color: var(--lumo-contrast-60pct);
-    --vaadin-input-field-icon-size: var(--lumo-icon-size-m);
-    --vaadin-input-field-invalid-background: var(--lumo-error-color-10pct);
-    --vaadin-input-field-invalid-hover-highlight: var(--lumo-error-color-50pct);
-    --vaadin-input-field-disabled-background: var(--lumo-contrast-5pct);
-    --vaadin-input-field-disabled-value-color: var(--lumo-disabled-text-color);
-    --vaadin-input-field-height: var(--lumo-size-m);
-    --vaadin-input-field-hover-highlight: var(--lumo-contrast-50pct);
-    --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);
-    --vaadin-input-field-readonly-border: 1px dashed var(--lumo-contrast-30pct);
-    --vaadin-input-field-value-color: var(--lumo-body-text-color);
-    --vaadin-input-field-value-font-size: var(--lumo-font-size-m);
-    --vaadin-input-field-value-font-weight: 500;
-  }
-`;
-
 addLumoGlobalStyles('style-props', style);
 
-export { globals, style };
+export { style };

package/utilities/transition.js

@@ -7,8 +7,9 @@ import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
 export const transition = css`
   .transition {
-    transition-property: -webkit-backdrop-filter, backdrop-filter, background-color, border-color, box-shadow, color,
-      fill, filter, opacity, rotate, scale, stroke, text-decoration-color, transform, translate;
+    transition-property:
+      -webkit-backdrop-filter, backdrop-filter, background-color, border-color, box-shadow, color, fill, filter,
+      opacity, rotate, scale, stroke, text-decoration-color, transform, translate;
     transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
     transition-duration: var(--lumo-utility-transition-duration, 150ms);
   }

package/utility.css

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import './props.css';
+@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,6 +39,7 @@ 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: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>